@extends('admin.layouts.master')

@section('title', 'Memorial Photos')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/plugins/dropzone/dropzone.css') }}" type="text/css">
    <style>
        .funeral-dropzone {
            border: 2px dashed #9D6F52 !important;
            background: rgba(157, 111, 82, 0.06) !important;
            border-radius: .5rem;
            min-height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .funeral-dropzone.dz-drag-hover {
            background: rgba(157, 111, 82, 0.12) !important;
        }
        .media-photo-card {
            position: relative;
            border-radius: .5rem;
            overflow: hidden;
            border: 1px solid var(--bs-border-color);
            background: #fff;
            transition: box-shadow .2s;
        }
        .media-photo-card:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
        }
        .media-photo-img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            display: block;
            background: #f1f3f5;
        }
        .media-photo-actions {
            position: absolute;
            inset: auto 0 0 0;
            background: rgba(0, 0, 0, .55);
            display: flex;
            justify-content: center;
            gap: .75rem;
            padding: .65rem;
            opacity: 0;
            transition: opacity .2s;
        }
        .media-photo-card:hover .media-photo-actions {
            opacity: 1;
        }
        .media-photo-actions a {
            color: #fff;
            font-size: 1.15rem;
        }
        .media-photo-actions a:hover {
            color: #ffb4b4;
        }
    </style>
@endpush

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Photos — '.$funeral->f_name,
        'crumbs' => [
            ['label' => 'Memorials', 'url' => route('admin.funeral.index')],
            ['label' => 'Photos'],
        ],
    ])

    <div class="card shadow-sm mb-3">
        <div class="card-header">
            <h5 class="card-title mb-0">Upload Images
                <span class="fs-xs fw-normal text-muted ms-1">(Select multiple images)</span>
            </h5>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.funeral.store-images') }}"
                  method="post"
                  class="dropzone funeral-dropzone"
                  id="funeralImagesDropzone">
                @csrf
                <input type="hidden" name="f_id" value="{{ $funeral->f_id }}">
                <div class="fallback">
                    <input name="file" type="file" multiple accept="image/*">
                </div>
                <div class="dz-message needsclick">
                    <div class="avatar-lg mx-auto mb-3">
                        <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                            <i class="ti ti-cloud-upload fs-24"></i>
                        </span>
                    </div>
                    <h4 class="mb-2">Drop images here or click to upload</h4>
                    <p class="text-muted fst-italic mb-3 mb-0">
                        You can drag multiple images here, or browse files. Supported: JPG, PNG, GIF, WEBP.
                    </p>
                    <button type="button" class="btn btn-sm btn-primary shadow">Browse Files</button>
                </div>
            </form>

            <div class="dropzone-previews mt-3" id="file-previews"></div>

            <div class="d-none" id="uploadPreviewTemplate">
                <div class="card mt-1 mb-0 border-dashed border">
                    <div class="p-2">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light" alt="">
                            </div>
                            <div class="col ps-0">
                                <a href="javascript:void(0);" class="fw-semibold" data-dz-name></a>
                                <p class="mb-0 text-muted" data-dz-size></p>
                                <strong class="error text-danger" data-dz-errormessage></strong>
                            </div>
                            <div class="col-auto">
                                <a href="javascript:void(0);" class="btn btn-link btn-lg text-danger" data-dz-remove>
                                    <i class="ti ti-x"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">
                Image Gallery
                <span class="fs-xs fw-normal text-muted ms-1">(Total: {{ $images->count() }})</span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row g-3" id="media-gallery">
                @forelse ($images as $image)
                    @php
                        $src = asset('uploads/funeral_multiple/'.$funeral->f_id.'/'.$image->fi_image);
                    @endphp
                    <div class="col-6 col-md-3 col-lg-2">
                        <div class="media-photo-card">
                            <img src="{{ $src }}"
                                 class="media-photo-img"
                                 alt="Photo"
                                 onerror="this.onerror=null;this.src='{{ asset('uploads/noimage.png') }}';">
                            <div class="media-photo-actions">
                                <a href="javascript:void(0);"
                                   class="view-photo"
                                   data-image="{{ $src }}"
                                   title="View">
                                    <i class="ti ti-eye"></i>
                                </a>
                                <a href="javascript:void(0);"
                                   class="js-confirm-delete"
                                   data-href="{{ route('admin.funeral.image-delete', [$image->fi_id, $funeral->f_id]) }}"
                                   title="Delete">
                                    <i class="ti ti-trash"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted py-5">No photos uploaded yet</div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Photo Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="Preview" class="img-fluid" style="max-height:600px;">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/dropzone/dropzone-min.js') }}"></script>
    <script>
        Dropzone.autoDiscover = false;

        $(function () {
            var myDropzone = new Dropzone('#funeralImagesDropzone', {
                url: @json(route('admin.funeral.store-images')),
                paramName: 'file',
                uploadMultiple: true,
                parallelUploads: 10,
                maxFilesize: 10,
                acceptedFiles: 'image/*',
                previewsContainer: '#file-previews',
                previewTemplate: document.querySelector('#uploadPreviewTemplate').innerHTML,
                timeout: 120000,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                params: {
                    f_id: @json($funeral->f_id)
                },
                init: function () {
                    var dz = this;

                    this.on('sendingmultiple', function () {
                        Swal.fire({
                            title: 'Uploading...',
                            text: 'Please wait while your images are being uploaded.',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            didOpen: function () {
                                Swal.showLoading();
                            }
                        });
                    });

                    this.on('error', function (file, response) {
                        if (Swal.isVisible()) {
                            Swal.close();
                        }
                        var message = typeof response === 'string'
                            ? response
                            : (response.message || 'Upload failed');
                        $(file.previewElement).find('[data-dz-errormessage]').text(message);
                        setTimeout(function () {
                            dz.removeFile(file);
                        }, 3000);
                    });

                    this.on('queuecomplete', function () {
                        if (this.getAcceptedFiles().length > 0) {
                            Swal.update({
                                title: 'Success!',
                                text: 'Reloading gallery...',
                                icon: 'success',
                                showConfirmButton: false
                            });
                            setTimeout(function () {
                                location.reload();
                            }, 800);
                        } else {
                            Swal.close();
                        }
                    });
                }
            });

            $(document).on('click', '.view-photo', function () {
                $('#modalImage').attr('src', $(this).data('image'));
                bootstrap.Modal.getOrCreateInstance(document.getElementById('imageModal')).show();
            });
        });
    </script>
@endpush