{{-- Before/after case form (create + edit). Params: $case, $action, $method. --}}
<form action="{{ $action }}" method="POST" enctype="multipart/form-data" id="galleryForm">
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif

    <div class="d-flex flex-column flex-lg-row gap-7 gap-lg-10">
        <div class="w-100 w-lg-325px">
            <div class="card card-flush py-4">
                <div class="card-header"><div class="card-title"><h2 class="{{ $case->exists ? '' : 'required' }}">{{ trans('dash_site.gallery_cover') }}</h2></div></div>
                <div class="card-body text-center pt-0">
                    <div class="image-input image-input-outline {{ $case->main_image_url ? '' : 'image-input-empty' }}" data-kt-image-input="true"
                         style="background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}')">
                        <div class="image-input-wrapper w-250px h-175px" style="background-size: cover; @if ($case->main_image_url) background-image: url('{{ $case->main_image_url }}') @endif"></div>
                        <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" title="{{ trans('forms.edite_btn') }}">
                            <i class="bi bi-pencil-fill fs-7"></i>
                            <input type="file" name="main_image" id="main_image" accept=".png,.jpg,.jpeg,.webp">
                        </label>
                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" title="{{ trans('dash_site.Cancel') }}"><i class="bi bi-x fs-2"></i></span>
                    </div>
                    <div class="form-text">{{ trans('dash_site.gallery_cover_hint') }}</div>
                    @error('main_image')<div class="text-danger fs-7">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>

        <div class="d-flex flex-column flex-row-fluid gap-7">
            <div class="card card-flush py-4">
                <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.gallery_case') }}</h2></div></div>
                <div class="card-body pt-0">
                    <div class="row g-7">
                        @foreach (['ar' => 'rtl', 'en' => 'ltr'] as $locale => $dir)
                            <div class="col-md-6">
                                <label class="required form-label">{{ trans('dash_site.title') }} ({{ strtoupper($locale) }})</label>
                                <input type="text" name="title[{{ $locale }}]" dir="{{ $dir }}" class="form-control @error('title.' . $locale) is-invalid @enderror" value="{{ old('title.' . $locale, $case->getTranslation('title', $locale, false)) }}">
                                @error('title.' . $locale)<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        @endforeach
                        @foreach (['ar' => 'rtl', 'en' => 'ltr'] as $locale => $dir)
                            <div class="col-md-6">
                                <label class="form-label">{{ trans('dash_site.description') }} ({{ strtoupper($locale) }})</label>
                                <textarea name="details[{{ $locale }}]" rows="3" dir="{{ $dir }}" class="form-control @error('details.' . $locale) is-invalid @enderror">{{ old('details.' . $locale, $case->getTranslation('details', $locale, false)) }}</textarea>
                                @error('details.' . $locale)<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="card card-flush py-4">
                <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.gallery_images') }}</h2></div></div>
                <div class="card-body pt-0">
                    @if ($case->exists && $case->images->isNotEmpty())
                        <div class="row g-4 mb-7" id="galleryExisting">
                            @foreach ($case->images as $image)
                                <div class="col-6 col-md-3" data-gallery-image>
                                    <div class="position-relative rounded overflow-hidden border">
                                        <div style="height: 120px; background: url('{{ $image->thumb_url }}') center / cover no-repeat;"></div>
                                        <button type="button" class="btn btn-icon btn-sm btn-danger position-absolute top-0 end-0 m-2" data-delete-image="{{ route('admin.gallery.destroy_image', $image->id) }}" title="{{ trans('forms.delete_btn') }}"><i class="bi bi-trash"></i></button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <label class="form-label">{{ trans('dash_site.gallery_add_images') }}</label>
                    <input type="file" name="images[]" id="images" multiple accept=".png,.jpg,.jpeg,.webp" class="form-control @error('images.*') is-invalid @enderror">
                    <div class="form-text">{{ trans('dash_site.gallery_images_hint') }}</div>
                    @error('images')<div class="text-danger fs-7">{{ $message }}</div>@enderror
                    @error('images.*')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="row g-4 mt-2" id="galleryPreview"></div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-3">
                <a href="{{ route('admin.gallery.index') }}" class="btn btn-light">{{ trans('dash_site.Cancel') }}</a>
                <button type="submit" class="btn btn-primary"><i class="bi bi-check2 fs-4"></i>{{ trans('dash_site.Save') }}</button>
            </div>
        </div>
    </div>
</form>

@push('gallery-form-scripts')
    <script>
        $(function () {
            // Preview the photos picked for upload.
            $('#images').on('change', function () {
                var $preview = $('#galleryPreview').empty();
                Array.prototype.forEach.call(this.files, function (file) {
                    var url = URL.createObjectURL(file);
                    $preview.append('<div class="col-6 col-md-3"><div class="rounded border" style="height:120px;background:url(' + url + ') center/cover no-repeat"></div></div>');
                });
            });

            // Remove a saved photo right away.
            $('#galleryExisting').on('click', '[data-delete-image]', function () {
                var button = this;
                Swal.fire({
                    text: @json(trans('dash_site.gallery_delete_image')),
                    icon: 'warning',
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: @json(trans('forms.delete_btn')),
                    cancelButtonText: @json(trans('dash_site.Cancel')),
                    customClass: {confirmButton: 'btn btn-danger', cancelButton: 'btn btn-light'}
                }).then(function (result) {
                    if (!result.isConfirmed) { return; }
                    $.ajax({url: button.dataset.deleteImage, type: 'DELETE'}).done(function (response) {
                        $(button).closest('[data-gallery-image]').fadeOut(200, function () { $(this).remove(); });
                        toastr.success(response.message);
                    });
                });
            });
        });
    </script>
@endpush