@extends('admin.layouts.app')

@section('title', 'Edit Edition')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-pencil"></i> Edit Edition: {{ $edition->title }}</h2>
        <a href="{{ route('admin.epaper.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Editions
        </a>
    </div>

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

    <form action="{{ route('admin.epaper.update', $edition) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Edition Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="title" class="form-label">Edition Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" id="title" class="form-control" value="{{ old('title', $edition->title) }}" required>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="edition_date" class="form-label">Edition Date <span class="text-danger">*</span></label>
                                    <input type="date" name="edition_date" id="edition_date" class="form-control" value="{{ old('edition_date', $edition->edition_date->format('Y-m-d')) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select name="status" id="status" class="form-select" required>
                                        <option value="draft" {{ $edition->status == 'draft' ? 'selected' : '' }}>Draft</option>
                                        <option value="published" {{ $edition->status == 'published' ? 'selected' : '' }}>Published</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Cover Image</h5>
                    </div>
                    <div class="card-body">
                        @if($edition->cover_image)
                            <div class="mb-3">
                                <label class="form-label">Current Cover</label>
                                <div>
                                    <img src="{{ asset('uploads/epaper/' . $edition->cover_image) }}" alt="Cover" class="img-thumbnail" style="max-height: 300px;">
                                </div>
                            </div>
                        @endif
                        <div class="mb-3">
                            <label for="cover_image" class="form-label">Change Cover Image</label>
                            <input type="file" name="cover_image" id="cover_image" class="form-control" accept="image/*">
                            <small class="text-muted">Leave empty to keep current cover. Recommended: 800x1100px</small>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">PDF File</h5>
                    </div>
                    <div class="card-body">
                        @if($edition->pdf_file)
                            <div class="mb-3">
                                <label class="form-label">Current PDF</label>
                                <div class="d-flex align-items-center gap-2">
                                    <i class="bi bi-file-pdf text-danger" style="font-size: 24px;"></i>
                                    <a href="{{ asset('uploads/epaper/' . $edition->pdf_file) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-download"></i> Download Current PDF
                                    </a>
                                    <label class="form-check-label">
                                        <input type="checkbox" name="remove_pdf" value="1" class="form-check-input"> Remove PDF
                                    </label>
                                </div>
                            </div>
                        @endif
                        <div class="mb-3">
                            <label for="pdf_file" class="form-label">Upload New PDF</label>
                            <input type="file" name="pdf_file" id="pdf_file" class="form-control" accept="application/pdf">
                            <small class="text-muted">Replace existing PDF (Optional, Max 50MB)</small>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Pages ({{ $edition->pages->count() }})</h5>
                    </div>
                    <div class="card-body">
                        @if($edition->pages->count() > 0)
                            <div class="row mb-4">
                                @foreach($edition->pages->sortBy('page_number') as $page)
                                <div class="col-md-3 mb-3">
                                    <div class="card">
                                        <div class="card-body p-2 text-center">
                                            <img src="{{ asset('uploads/epaper/pages/' . $page->page_image) }}" alt="Page {{ $page->page_number }}" class="img-fluid mb-2">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="badge bg-primary">Page {{ $page->page_number }}</span>
                                                <button type="button" class="btn btn-sm btn-outline-danger delete-page" data-page-id="{{ $page->id }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <hr>
                            <h6>Add More Pages</h6>
                        @endif

                        <div class="border rounded p-3 bg-light">
                            <div id="pages_container"></div>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="add_page">
                                <i class="bi bi-plus-circle"></i> Add Page
                            </button>
                        </div>
                        <small class="text-muted">New pages will be added after existing pages</small>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Actions</h5>
                    </div>
                    <div class="card-body">
                        <button type="submit" class="btn btn-primary w-100 mb-2">
                            <i class="bi bi-check-circle"></i> Update Edition
                        </button>
                        <a href="{{ route('epaper.show', $edition->edition_date->format('Y-m-d')) }}" target="_blank" class="btn btn-outline-info w-100 mb-2">
                            <i class="bi bi-eye"></i> Preview Edition
                        </a>
                        <a href="{{ route('admin.epaper.index') }}" class="btn btn-outline-secondary w-100">
                            <i class="bi bi-x-circle"></i> Cancel
                        </a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Info</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled small mb-0">
                            <li class="mb-2"><strong>Created:</strong> {{ $edition->created_at->format('d M, Y h:i A') }}</li>
                            <li class="mb-2"><strong>Updated:</strong> {{ $edition->updated_at->format('d M, Y h:i A') }}</li>
                            <li class="mb-2"><strong>Total Pages:</strong> {{ $edition->pages->count() }}</li>
                            <li><strong>Status:</strong>
                                @if($edition->status == 'published')
                                    <span class="badge bg-success">Published</span>
                                @else
                                    <span class="badge bg-warning">Draft</span>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let pageCount = {{ $edition->pages->count() }};

    document.getElementById('add_page').addEventListener('click', function() {
        pageCount++;
        const pageHtml = `
            <div class="page-upload-item mb-3">
                <div class="row align-items-center">
                    <div class="col-md-2">
                        <label class="form-label mb-0">Page ${pageCount}</label>
                    </div>
                    <div class="col-md-8">
                        <input type="file" name="new_pages[]" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-sm btn-danger remove-new-page">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
        document.getElementById('pages_container').insertAdjacentHTML('beforeend', pageHtml);
    });

    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-new-page')) {
            e.target.closest('.page-upload-item').remove();
            pageCount--;
        }
    });

    // Delete existing page via AJAX
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-page')) {
            if (!confirm('Delete this page permanently?')) return;

            const btn = e.target.closest('.delete-page');
            const pageId = btn.dataset.pageId;

            fetch('/admin/epaper/page/' + pageId, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    btn.closest('.col-md-3').remove();
                } else {
                    alert('Failed to delete page');
                }
            });
        }
    });
});
</script>
@endpush
@endsection