@csrf
<div class="row">
    <div class="col-lg-8 mb-4">
        <div class="form-group mb-3">
            <label class="mb-2">Background Image</label>
            <input type="file" class="form-control form-control-file" id="select-image" accept="image/*" placeholder="File" name="image" {{ !isset($theme) ? 'required' : '' }}>
            <div class="img-preview-error-container"></div>
            @error('image')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
        <div class="form-group mb-3">
            <label class="mb-2">Theme Name</label>
            <input type="text" class="form-control" placeholder="Theme Name" name="name" value="{{ old('name', isset($theme) ? $theme->name : null) }}" >
            @error('name')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
        <div class="form-check form-check-inline">
            @php
                $checkedDisabled = '';

                if (isset($theme)) {
                    if ($themeCount == 1) {
                        $checkedDisabled = 'checked disabled';
                    }
                } else {
                    if ($themeCount == 0) {
                        $checkedDisabled = 'checked disabled';
                    }
                }
            @endphp
            <input class="form-check-input primary" {{ $checkedDisabled }} type="checkbox" id="primary-check" name="is_default" {{ isset($theme) ? $theme->is_default ? 'checked' : '' : '' }}>
            <label class="form-check-label" for="primary-check">Set as Default</label>
        </div>
    </div>
    <div class="col-lg-4">
        <h6 class="text-primary">Preview Image</h6>
        <div class="p-2 border rounded-2">
            <img src="{{ isset($theme) ? $theme->background_image ? asset('uploads/images/themes/' . $theme->background_image) : asset('images/preview.png') : asset('images/preview.png') }}" alt="" onerror="this.src='{{ asset('images/preview.png') }}'" class="w-100 img-preview">
        </div>
    </div>
</div>

@push('script')
    <script>
        $(function(){
            $('#select-image').on('change', function() {
                readURL(this);
            });
            
            $('form').on('submit', function(){
                const t = $(this)
                t.find('.btn').prop('disabled', true)
                t.find('.btn-save i').remove()
                t.find('.btn-save').prepend(`<div class="spinner-border spinner-border-sm" role="status"></div>`)
            })

            function readURL(input) {
                var url = input.value;
                var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
                if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "webp" || ext == "gif")) {
                    var reader = new FileReader();
            
                    reader.onload = function(e) {
                        $('.img-preview').attr('src', e.target.result)
                    }
            
                    reader.readAsDataURL(input.files[0]);
                } else if (!url) {
                    $('.img-preview').attr('src', '{{ asset('images/preview.png') }}')
                } else {
                    $('.img-preview-error-container').html('<small class="text-danger">Invalid image format</small>')
                    $('.img-preview').attr('src', '{{ asset('images/preview.png') }}')
                }
            }
        })
    </script>
@endpush