@extends('admin.layout')

@section('title', 'Edit Sport')
@section('page_heading', 'Edit Sport: ' . $sport->name)

@section('content')

@if(session('status'))
    <div class="alert alert-success">{{ session('status') }}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
@endif

<div class="row">
    {{-- ── Left: sport details + image uploader ──────────────────── --}}
    <div class="col-lg-5">

        {{-- Sport Details --}}
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title mb-3">Sport Details</h5>
                <form method="POST" action="{{ route('admin.sports.update', $sport) }}" novalidate>
                    @csrf @method('PUT')

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Sport Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control"
                               value="{{ old('name', $sport->name) }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Font Awesome Icon Class</label>
                        <input type="text" name="icon_class" id="icon_class_input" class="form-control"
                               value="{{ old('icon_class', $sport->icon_class) }}"
                               placeholder="e.g. fas fa-football-ball">
                        <div class="form-text">Preview: <i id="icon-preview" class="{{ old('icon_class', $sport->icon_class) }} fa-lg"></i></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Short Description</label>
                        <input type="text" name="short_description" class="form-control" maxlength="500"
                               value="{{ old('short_description', $sport->short_description) }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Introduction / Full Description</label>
                        <textarea name="description" rows="5" class="form-control">{{ old('description', $sport->description) }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Rules of the Game</label>
                        <textarea name="rules" rows="8" class="form-control">{{ old('rules', $sport->rules) }}</textarea>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-5">
                            <label class="form-label fw-semibold">Sort Order</label>
                            <input type="number" name="sort_order" class="form-control"
                                   value="{{ old('sort_order', $sport->sort_order) }}" min="0">
                        </div>
                        <div class="col-md-7 d-flex align-items-end">
                            <div class="form-check mb-1">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                       {{ old('is_active', $sport->is_active) ? 'checked' : '' }}>
                                <label class="form-check-label">Active / Visible</label>
                            </div>
                        </div>
                    </div>

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

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

                <div id="photo-drop-zone"
                     class="border border-2 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 — PNG, JPG, JPEG • 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 Images
                </button>
            </div>
        </div>

    </div>

    {{-- ── Right: 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">{{ $sport->images->count() }}</span>
                    </h5>
                    <small class="text-muted">Drag thumbnails to reorder</small>
                </div>

                <div class="row" id="image-grid">
                    @foreach ($sport->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.sport-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 ($sport->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 ($) {
    /* ── Icon preview ─────────────────────────────────── */
    document.getElementById('icon_class_input').addEventListener('input', function () {
        document.getElementById('icon-preview').className = this.value + ' fa-lg';
    });

    /* ── Config ─────────────────────────────────────────── */
    var UPLOAD_URL  = '{{ route('admin.sports.images.store', $sport) }}';
    var REORDER_URL = '{{ route('admin.sports.images.reorder', $sport) }}';
    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');

    /* ── Drag-and-drop ───────────────────────────────────── */
    $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 = '';
    });

    /* ── File validation ─────────────────────────────────── */
    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 || '', ext = name.split('.').pop().toLowerCase(), error = null;
            if (ALLOWED_MIME.indexOf(file.type) === -1 && ALLOWED_EXT.indexOf(ext) === -1)
                error = 'Invalid type (JPG/PNG only)';
            else if (file.size > MAX_BYTES)
                error = 'Too large (' + (file.size/1024/1024).toFixed(1) + ' MB; max 5)';

            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;">' + name + '</span>' +
                    '<small class="text-muted">' + sizeStr + '</small>' + badge + '</li>'
            );
            if (!error) validFiles.push(file);
        });
        feather.replace();
        $btnUpload.prop('disabled', validFiles.length === 0);
    }

    /* ── Upload ──────────────────────────────────────────── */
    $btnUpload.on('click', function () {
        if (!validFiles.length) return;
        var formData = new FormData();
        $.each(validFiles, function (i, f) { formData.append('images[]', f); });

        $btnUpload.prop('disabled', true).text('Uploading…');
        $progressWrap.show();

        $.ajax({
            url: UPLOAD_URL, type: 'POST', data: formData,
            processData: false, contentType: false,
            xhr: function () {
                var xhr = new 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 + ' image(s) uploaded!', 'success');
            },
            error: function (xhr) {
                resetUploader();
                var msg = 'Upload failed.';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    msg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                }
                showAlert('Upload Error', msg, '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();
    }

    /* ── Render new 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/sport-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();
    }

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

    var observer = new MutationObserver(updateCount);
    if (document.getElementById('image-grid')) {
        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();
        }
    }

    /* ── Sortable reorder ────────────────────────────────── */
    initSortable('#image-grid', REORDER_URL);

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