@extends('admin.layout')

@section('title', 'Manage Album')
@section('page_heading', 'Manage Album: ' . $album->year)

@section('content')
<div class="row">
    {{-- ── Left column: album details + uploader ──────────────────── --}}
    <div class="col-lg-5">

        {{-- Album Details --}}
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Album Details</h5>
                <form method="POST" action="{{ route('admin.photo-albums.update', $album) }}" class="mt-3" novalidate>
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label class="form-label">Year</label>
                        <input type="number" name="year" class="form-control"
                               value="{{ old('year', $album->year) }}" min="1900" max="2100" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" class="form-control"
                               value="{{ old('title', $album->title) }}">
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_published" value="1"
                                   {{ old('is_published', $album->is_published) ? 'checked' : '' }}>
                            <label class="form-check-label">Published</label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Save</button>
                    <a href="{{ route('admin.photo-albums.index') }}" class="btn btn-light">Back</a>
                </form>
            </div>
        </div>

        {{-- AJAX Image Uploader --}}
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Upload Images</h5>

                {{-- Drop Zone --}}
                <div id="photo-drop-zone"
                     class="border border-2 border-dashed rounded-3 text-center p-4 my-3"
                     style="border-style:dashed!important;cursor:pointer;border-color:#6c757d;transition:background .2s;">
                    <i data-feather="upload-cloud" style="width:40px;height:40px;color:#6c757d;"></i>
                    <p class="mt-2 mb-1 fw-semibold">Drag &amp; drop images here</p>
                    <p class="text-muted small mb-0">or click to browse &mdash; PNG, JPG, JPEG &bull; max 5 MB each</p>
                </div>
                {{-- Hidden file input --}}
                <input id="photo-file-input" type="file" multiple accept=".jpg,.jpeg,.png" class="d-none">

                {{-- File queue list --}}
                <ul id="file-queue" class="list-group mb-3" style="display:none!important;"></ul>

                {{-- Overall progress bar --}}
                <div id="upload-progress-wrap" class="mb-3" style="display:none;">
                    <div class="d-flex justify-content-between mb-1">
                        <small class="text-muted" id="upload-progress-label">Uploading…</small>
                        <small id="upload-progress-pct">0%</small>
                    </div>
                    <div class="progress" style="height:10px;">
                        <div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar" style="width:0%"></div>
                    </div>
                </div>

                <button id="btn-upload" class="btn btn-success w-100" disabled>
                    <i data-feather="upload" style="width:16px;height:16px;"></i> Upload Selected Images
                </button>
            </div>
        </div>
    </div>

    {{-- ── Right column: image grid ─────────────────────────────────── --}}
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">
                        Images <span class="badge bg-secondary" id="img-count">{{ $album->images->count() }}</span>
                    </h5>
                    <small class="text-muted">Drag thumbnails to reorder</small>
                </div>

                <div class="row" id="image-grid">
                    @foreach ($album->images as $img)
                        <div class="col-md-4 mb-3" data-id="{{ $img->id }}">
                            <div class="card h-100 shadow-sm">
                                <div class="drag-handle text-center py-1" style="cursor:grab;background:#f8f9fa;border-bottom:1px solid #dee2e6;">
                                    <i data-feather="move" style="width:14px;height:14px;color:#adb5bd;"></i>
                                </div>
                                <img src="{{ asset('storage/' . $img->image_path) }}"
                                     class="card-img-top"
                                     style="height:130px;object-fit:cover;"
                                     alt="Image">
                                <div class="card-body p-2 text-center">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger w-100 btn-delete-image"
                                            data-url="{{ route('admin.photo-images.destroy', $img) }}"
                                            data-label="image #{{ $img->id }}">
                                        <i data-feather="trash-2" style="width:13px;height:13px;"></i> Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if ($album->images->isEmpty())
                    <p class="text-muted" id="no-images-msg">No images uploaded yet.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function ($) {
    /* ── Config ─────────────────────────────────────────── */
    var UPLOAD_URL   = '{{ route('admin.photo-albums.images.store', $album) }}';
    var REORDER_URL  = '{{ route('admin.photo-albums.images.reorder', $album) }}';
    var ALLOWED_MIME = ['image/jpeg', 'image/png'];
    var ALLOWED_EXT  = ['jpg', 'jpeg', 'png'];
    var MAX_BYTES    = 5 * 1024 * 1024; // 5 MB

    var validFiles   = []; // array of File objects that passed validation

    var $dropZone    = $('#photo-drop-zone');
    var $fileInput   = $('#photo-file-input');
    var $queue       = $('#file-queue');
    var $progressWrap= $('#upload-progress-wrap');
    var $bar         = $('#upload-progress-bar');
    var $pct         = $('#upload-progress-pct');
    var $btnUpload   = $('#btn-upload');
    var $grid        = $('#image-grid');

    /* ── Drag-and-drop events ────────────────────────────── */
    $dropZone.on('click', function () { $fileInput.trigger('click'); });

    $dropZone.on('dragover dragenter', function (e) {
        e.preventDefault();
        $(this).css('background', '#e9f0ff');
    }).on('dragleave drop', function (e) {
        e.preventDefault();
        $(this).css('background', '');
    });

    $dropZone.on('drop', function (e) {
        var files = e.originalEvent.dataTransfer.files;
        processFiles(files);
    });

    $fileInput.on('change', function () {
        processFiles(this.files);
        this.value = ''; // reset so same files can be re-selected
    });

    /* ── File validation & queue render ─────────────────── */
    function processFiles(files) {
        validFiles = [];
        $queue.empty().show();

        if (!files || files.length === 0) {
            $queue.hide();
            $btnUpload.prop('disabled', true);
            return;
        }

        $.each(files, function (i, file) {
            var name    = file.name || '';
            var ext     = name.split('.').pop().toLowerCase();
            var error   = null;

            if (ALLOWED_MIME.indexOf(file.type) === -1 && ALLOWED_EXT.indexOf(ext) === -1) {
                error = 'Invalid type (only JPG / PNG allowed)';
            } else if (file.size > MAX_BYTES) {
                error = 'Too large (' + (file.size / 1024 / 1024).toFixed(1) + ' MB; max 5 MB)';
            }

            var badge = error
                ? '<span class="badge bg-danger ms-auto">' + error + '</span>'
                : '<span class="badge bg-success ms-auto">OK</span>';

            var sizeStr = (file.size / 1024 > 1024)
                ? (file.size / 1024 / 1024).toFixed(1) + ' MB'
                : Math.round(file.size / 1024) + ' KB';

            $queue.append(
                '<li class="list-group-item d-flex align-items-center gap-2 py-2 px-3">' +
                    '<i data-feather="image" style="width:14px;height:14px;flex-shrink:0;"></i>' +
                    '<span class="text-truncate" style="max-width:200px;" title="' + name + '">' + name + '</span>' +
                    '<small class="text-muted">' + sizeStr + '</small>' +
                    badge +
                '</li>'
            );

            if (!error) validFiles.push(file);
        });

        feather.replace(); // re-run feather icons on newly added elements
        $btnUpload.prop('disabled', validFiles.length === 0);
    }

    /* ── Upload via AJAX ─────────────────────────────────── */
    $btnUpload.on('click', function () {
        if (validFiles.length === 0) {
            showAlert('No valid files', 'Please select at least one valid image.', 'warning');
            return;
        }

        var formData = new FormData();
        $.each(validFiles, function (i, file) {
            formData.append('images[]', file);
        });

        $btnUpload.prop('disabled', true).text('Uploading…');
        $progressWrap.show();
        $bar.css('width', '0%');
        $pct.text('0%');

        $.ajax({
            url:         UPLOAD_URL,
            type:        'POST',
            data:        formData,
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var p = Math.round((e.loaded / e.total) * 100);
                        $bar.css('width', p + '%');
                        $pct.text(p + '%');
                    }
                }, false);
                return xhr;
            },
            success: function (resp) {
                resetUploader();
                renderNewImages(resp.images);
                showToast(resp.images.length + ' image(s) uploaded!', 'success');
            },
            error: function (xhr) {
                resetUploader();
                var errs = '';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    $.each(xhr.responseJSON.errors, function (k, msgs) {
                        errs += '<li>' + msgs.join('<br>') + '</li>';
                    });
                    errs = '<ul class="mb-0 text-start">' + errs + '</ul>';
                } else {
                    errs = 'Upload failed. Please try again.';
                }
                showAlert('Upload Error', errs, 'error');
            },
        });
    });

    function resetUploader() {
        validFiles = [];
        $queue.hide().empty();
        $progressWrap.hide();
        $bar.css('width', '0%');
        $pct.text('0%');
        $btnUpload.prop('disabled', true).html(
            '<i data-feather="upload" style="width:16px;height:16px;"></i> Upload Selected Images'
        );
        feather.replace();
    }

    /* ── Inject newly uploaded image cards ───────────────── */
    function renderNewImages(images) {
        $('#no-images-msg').remove();
        $.each(images, function (i, img) {
            var card =
                '<div class="col-md-4 mb-3" data-id="' + img.id + '">' +
                    '<div class="card h-100 shadow-sm">' +
                        '<div class="drag-handle text-center py-1" style="cursor:grab;background:#f8f9fa;border-bottom:1px solid #dee2e6;">' +
                            '<i data-feather="move" style="width:14px;height:14px;color:#adb5bd;"></i>' +
                        '</div>' +
                        '<img src="' + img.url + '" class="card-img-top" style="height:130px;object-fit:cover;" alt="Image">' +
                        '<div class="card-body p-2 text-center">' +
                            '<button type="button" class="btn btn-sm btn-outline-danger w-100 btn-delete-image"' +
                                ' data-url="{{ url('admin/photo-images') }}/' + img.id + '"' +
                                ' data-label="image #' + img.id + '">' +
                                '<i data-feather="trash-2" style="width:13px;height:13px;"></i> Delete' +
                            '</button>' +
                        '</div>' +
                    '</div>' +
                '</div>';
            $grid.append(card);
        });
        feather.replace();
        updateCount();
    }

    /* ── AJAX Delete ─────────────────────────────────────── */
    $(document).on('click', '.btn-delete-image', function () {
        var url    = $(this).data('url');
        var label  = $(this).data('label') || 'this image';
        var $card  = $(this).closest('[data-id]');

        confirmDelete(url, $card, label);
        // Override the count update after delete
        var origConfirmDelete = window.confirmDelete;
        window.confirmDelete = function(u, $el, lbl) {
            origConfirmDelete(u, $el, lbl);
            window.confirmDelete = origConfirmDelete;
        };
    });

    // Re-sync count after any card removal (observe DOM)
    var observer = new MutationObserver(updateCount);
    observer.observe(document.getElementById('image-grid'), { childList: true });

    function updateCount() {
        var count = $grid.children('[data-id]').length;
        $('#img-count').text(count);
        if (count === 0 && !$('#no-images-msg').length) {
            $grid.after('<p class="text-muted" id="no-images-msg">No images uploaded yet.</p>');
        } else if (count > 0) {
            $('#no-images-msg').remove();
        }
    }

    /* ── SortableJS drag-to-reorder ─────────────────────── */
    initSortable('#image-grid', REORDER_URL);

})(jQuery);
</script>
@endpush