@extends('admin.layout')

@section('title', 'Edit Section')
@section('page_heading', 'Edit Section: ' . ($section->title ?: 'Untitled'))

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

        {{-- Section details --}}
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Section Details</h5>

                @if(session('status'))
                    <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
                        {{ session('status') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form method="POST" action="{{ route('admin.week-sections.update', $section) }}" class="mt-3" novalidate>
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Section Title</label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                               value="{{ old('title', $section->title) }}"
                               placeholder="e.g. Opening Ceremony">
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" rows="7"
                                  class="form-control @error('description') is-invalid @enderror"
                                  placeholder="Describe this section…">{{ old('description', $section->description) }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <a href="{{ route('admin.week-sections.index') }}" class="btn btn-light">Back to List</a>
                    </div>
                </form>
            </div>
        </div>

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

                <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>
                <input id="photo-file-input" type="file" multiple accept=".jpg,.jpeg,.png" class="d-none">

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

                <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 Photos
                </button>
            </div>
        </div>

        {{-- Danger zone --}}
        <div class="card border-danger">
            <div class="card-body">
                <h5 class="card-title text-danger">Delete Section</h5>
                <p class="text-muted small">This will permanently delete the section and all its photos.</p>
                <form method="POST" action="{{ route('admin.week-sections.destroy', $section) }}"
                      onsubmit="return confirm('Delete this section and all its photos?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm">Delete Section</button>
                </form>
            </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">
                        Photos <span class="badge bg-secondary" id="img-count">{{ $section->images->count() }}</span>
                    </h5>
                    <small class="text-muted">Drag thumbnails to reorder</small>
                </div>

                <div class="row" id="image-grid">
                    @foreach($section->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="Photo">
                                <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.week-section-images.destroy', $img) }}"
                                            data-label="photo #{{ $img->id }}">
                                        <i data-feather="trash-2" style="width:13px;height:13px;"></i> Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

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

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

    var validFiles   = [];
    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');

    $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) { processFiles(e.originalEvent.dataTransfer.files); });
    $fileInput.on('change', function () { processFiles(this.files); this.value = ''; });

    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 ext   = (file.name || '').split('.').pop().toLowerCase();
            var error = null;
            if (ALLOWED_MIME.indexOf(file.type) === -1 && ALLOWED_EXT.indexOf(ext) === -1) error = 'Invalid type';
            else if (file.size > MAX_BYTES) error = 'Too large (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;">' + file.name + '</span>' +
                '<small class="text-muted">' + sizeStr + '</small>' + badge + '</li>');
            if (!error) validFiles.push(file);
        });
        feather.replace();
        $btnUpload.prop('disabled', validFiles.length === 0);
    }

    $btnUpload.on('click', function () {
        if (validFiles.length === 0) return;
        var fd = new FormData();
        $.each(validFiles, function (i, f) { fd.append('images[]', f); });
        $btnUpload.prop('disabled', true).text('Uploading…');
        $progressWrap.show();
        $bar.css('width', '0%'); $pct.text('0%');
        $.ajax({
            url: UPLOAD_URL, type: 'POST', data: fd,
            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+'%'); }
                });
                return xhr;
            },
            success: function (resp) {
                resetUploader();
                renderNewImages(resp.images);
                showToast(resp.images.length + ' photo(s) uploaded!', 'success');
            },
            error: function (xhr) {
                resetUploader();
                var errs = xhr.responseJSON && xhr.responseJSON.errors
                    ? '<ul class="mb-0 text-start">' + $.map(xhr.responseJSON.errors, function(m){return '<li>'+m.join('<br>')+'</li>';}).join('') + '</ul>'
                    : '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 Photos');
        feather.replace();
    }

    function renderNewImages(images) {
        $('#no-images-msg').remove();
        $.each(images, function (i, img) {
            $grid.append(
                '<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="">' +
                        '<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/week-section-images') }}/' + img.id + '"' +
                                ' data-label="photo #' + img.id + '">' +
                                '<i data-feather="trash-2" style="width:13px;height:13px;"></i> Delete' +
                            '</button>' +
                        '</div>' +
                    '</div>' +
                '</div>'
            );
        });
        feather.replace();
        updateCount();
    }

    $(document).on('click', '.btn-delete-image', function () {
        confirmDelete($(this).data('url'), $(this).closest('[data-id]'), $(this).data('label') || 'this photo');
    });

    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 photos uploaded yet.</p>');
        } else if (count > 0) {
            $('#no-images-msg').remove();
        }
    }

    initSortable('#image-grid', REORDER_URL);

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