@extends('layouts.admin')
@section('title', 'Pages — ' . $newspaper->publish_date->format('d M Y'))

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.css">
@endpush

@section('content')
<div class="d-flex align-items-center gap-3 mb-3">
    <a href="{{ route('admin.newspapers.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
    <div>
        <h5 class="mb-0">{{ $newspaper->publish_date->format('d M Y') }} — Pages</h5>
        @if($newspaper->edition_name)<small class="text-muted">{{ $newspaper->edition_name }}</small>@endif
    </div>
    <div class="ms-auto d-flex gap-2">
        <a href="{{ route('admin.newspapers.edit', $newspaper) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil me-1"></i>Edit Info</a>
        <a href="{{ route('newspaper.show', $newspaper->publish_date->format('Y-m-d')) }}" target="_blank" class="btn btn-sm btn-outline-dark"><i class="bi bi-eye me-1"></i>Preview</a>
    </div>
</div>

<div class="row g-3">
    {{-- Upload panel --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header py-3 px-4"><i class="bi bi-cloud-upload me-2"></i>Upload Pages</div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('admin.pages.store', $newspaper) }}" enctype="multipart/form-data" id="uploadForm">
                    @csrf
                    <div class="upload-zone" id="dropZone">
                        <i class="bi bi-file-earmark-image" style="font-size:2.5rem;opacity:.4;display:block;margin-bottom:8px"></i>
                        <div class="fw-semibold" style="font-size:.9rem">Drop images here or click to browse</div>
                        <div style="font-size:.75rem;color:#9ca3af;margin-top:4px">JPG, PNG, WEBP — max 20MB each</div>
                        <input type="file" name="images[]" id="fileInput" multiple accept="image/jpg,image/jpeg,image/png,image/webp" class="d-none">
                    </div>
                    <div class="upload-preview" id="previewContainer"></div>
                    <div id="titleInputs" class="mt-3"></div>
                    <button type="submit" class="btn btn-primary w-100 mt-3" id="uploadBtn" disabled>
                        <i class="bi bi-upload me-1"></i>Upload Pages
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Pages list --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header py-3 px-4 d-flex align-items-center justify-content-between">
                <span><i class="bi bi-images me-2"></i>{{ $newspaper->pages->count() }} Page(s) — drag to reorder</span>
            </div>
            <div class="card-body p-0">
                @if($newspaper->pages->count())
                    <div id="sortablePages" class="p-3" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px">
                        @foreach($newspaper->pages as $page)
                            <div class="page-item" data-id="{{ $page->id }}" style="position:relative;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;background:#fff;cursor:grab">
                                <img src="{{ $page->thumbnail_url }}" alt="Page {{ $page->page_number }}"
                                     style="width:100%;aspect-ratio:3/4;object-fit:cover;display:block">
                                <div style="padding:6px 8px;border-top:1px solid #f0f0f0">
                                    <div style="font-size:.72rem;font-weight:600;color:#4f46e5">Page {{ $page->page_number }}</div>
                                    <div style="font-size:.7rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                        {{ $page->title ?: 'Untitled' }}
                                    </div>
                                </div>
                                <div style="padding:4px 8px 8px;display:flex;gap:4px">
                                    <a href="{{ route('admin.hotspots.index', $page) }}"
                                       class="btn btn-xs btn-outline-primary flex-1" style="font-size:.68rem;padding:2px 6px"
                                       title="Hotspots">
                                        <i class="bi bi-pin-map"></i>
                                    </a>
                                    <button class="btn btn-xs btn-outline-secondary flex-1 btn-edit-page"
                                            data-id="{{ $page->id }}" data-title="{{ $page->title }}"
                                            data-num="{{ $page->page_number }}"
                                            style="font-size:.68rem;padding:2px 6px" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form method="POST" action="{{ route('admin.pages.destroy', $page) }}"
                                          onsubmit="return confirm('Delete page {{ $page->page_number }}?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-xs btn-outline-danger"
                                                style="font-size:.68rem;padding:2px 6px" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-file-earmark-x" style="font-size:3rem;opacity:.3;display:block"></i>
                        <p class="mt-2">No pages yet. Upload some on the left.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Edit page modal --}}
<div class="modal fade" id="editPageModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Edit Page</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <form id="editPageForm" method="POST">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Page Number</label>
                        <input type="number" name="page_number" id="ep_num" class="form-control" min="1">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title (optional)</label>
                        <input type="text" name="title" id="ep_title" class="form-control" placeholder="e.g. Sports, Business...">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
// ── Upload zone ──────────────────────────────────────────────────────────────
var dropZone = document.getElementById('dropZone');
var fileInput = document.getElementById('fileInput');
var previewContainer = document.getElementById('previewContainer');
var titleInputs = document.getElementById('titleInputs');
var uploadBtn = document.getElementById('uploadBtn');
var selectedFiles = [];

dropZone.addEventListener('click', function() { fileInput.click(); });
dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('drag-over'); });
dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('drag-over'); });
dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    addFiles(e.dataTransfer.files);
});
fileInput.addEventListener('change', function() { addFiles(this.files); });

function addFiles(files) {
    Array.from(files).forEach(function(file) {
        if (!file.type.startsWith('image/')) return;
        selectedFiles.push(file);
        var idx = selectedFiles.length - 1;
        var reader = new FileReader();
        reader.onload = function(e) {
            var item = document.createElement('div');
            item.className = 'upload-preview-item';
            item.dataset.idx = idx;
            item.innerHTML = '<img src="' + e.target.result + '" alt=""><button type="button" class="remove-btn" data-idx="' + idx + '"><i class="bi bi-x"></i></button><div style="font-size:.65rem;color:#666;margin-top:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + file.name + '</div>';
            item.querySelector('.remove-btn').addEventListener('click', function() {
                selectedFiles.splice(this.dataset.idx, 1, null);
                item.remove();
                rebuildForm();
            });
            previewContainer.appendChild(item);
        };
        reader.readAsDataURL(file);
        titleInputs.innerHTML += '<input type="text" name="titles[' + idx + ']" class="form-control form-control-sm mb-2" placeholder="Title for image ' + (idx + 1) + ' (optional)">';
    });
    uploadBtn.disabled = false;
    rebuildFileInput();
}

function rebuildFileInput() {
    var dt = new DataTransfer();
    selectedFiles.filter(Boolean).forEach(function(f) { dt.items.add(f); });
    fileInput.files = dt.files;
}

function rebuildForm() {
    uploadBtn.disabled = selectedFiles.filter(Boolean).length === 0;
}

// ── Drag-to-reorder ──────────────────────────────────────────────────────────
var sortable = document.getElementById('sortablePages');
if (sortable) {
    Sortable.create(sortable, {
        animation: 150,
        handle: '.page-item',
        onEnd: function() {
            var ids = Array.from(sortable.querySelectorAll('.page-item')).map(function(el) { return el.dataset.id; });
            fetch('{{ route("admin.pages.reorder") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify({ pages: ids })
            });
        }
    });
}

// ── Edit page modal ──────────────────────────────────────────────────────────
var updateUrlTemplate = '{{ route("admin.pages.update", ["page" => "__ID__"]) }}';

document.querySelectorAll('.btn-edit-page').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var id = this.dataset.id;
        document.getElementById('editPageForm').action = updateUrlTemplate.replace('__ID__', id);
        document.getElementById('ep_num').value  = this.dataset.num;
        document.getElementById('ep_title').value = this.dataset.title;
        new bootstrap.Modal(document.getElementById('editPageModal')).show();
    });
});
</script>
@endpush