@extends('layouts.admin')

@section('admin_content')
<div x-data="reportManager()" x-init="init()">

    <div class="page-header">
        <h1 class="page-title">Reports</h1>
        <button class="btn btn-primary" @click="openAddModal()">
            <i class="fas fa-plus"></i> Add Report
        </button>
    </div>

    <!-- Filter Bar -->
    <div class="filter-bar">
        <div class="form-group">
            <label class="form-label">Show</label>
            <select class="form-select" style="width:80px" x-model="per_page" @change="fetchItems(1)">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label">Search</label>
            <input type="text" class="form-control" placeholder="Search reports..." x-model="filters.search">
        </div>
        <div class="form-group">
            <label class="form-label">Type</label>
            <select class="form-select" x-model="filters.type">
                <option value="">All Types</option>
                <option value="annual">Annual</option>
                <option value="audit">Audit</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label">Status</label>
            <select class="form-select" x-model="filters.status">
                <option value="">All</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>
        <div class="form-group align-self-end">
            <button class="btn btn-outline-secondary" @click="fetchItems(1)">
                <i class="fas fa-filter"></i> Filter
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="panel">
        <div class="panel-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Type</th>
                        <th>PDF</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-if="loading">
                        <tr><td colspan="8" class="text-center py-4">
                            <div class="spinner-border spinner-border-sm text-primary"></div> Loading...
                        </td></tr>
                    </template>
                    <template x-if="!loading && items.length === 0">
                        <tr><td colspan="8" class="text-center py-4 text-muted">No reports found.</td></tr>
                    </template>
                    <template x-for="(item, index) in items" :key="item.id">
                        <tr>
                            <td x-text="(pagination.current_page - 1) * pagination.per_page + index + 1"></td>
                            <td>
                                <img :src="item.image_url ?? `https://ui-avatars.com/api/?name=${item.title}&size=40&background=1a3a5c&color=fff`"
                                    width="50" height="40" class="rounded border" style="object-fit:cover;">
                            </td>
                            <td>
                                <div x-text="item.title" class="fw-semibold"></div>
                                <small class="text-muted" x-text="item.short_description ? item.short_description.substring(0, 50) + '...' : ''"></small>
                            </td>
                            <td>
                                <span class="badge"
                                    :class="item.type === 'annual' ? 'bg-primary' : 'bg-warning text-dark'"
                                    x-text="item.type === 'annual' ? 'Annual' : 'Audit'">
                                </span>
                            </td>
                            <td>
                                <a :href="item.pdf_url" target="_blank"
                                    class="btn btn-sm btn-outline-danger py-0 px-2">
                                    <i class="bi bi-file-earmark-pdf"></i> View
                                </a>
                            </td>
                            <td x-text="item.created_at"></td>
                            <td>
                                <span class="badge"
                                    :class="item.status === 'active' ? 'bg-success' : 'bg-secondary'"
                                    x-text="item.status === 'active' ? 'Active' : 'Inactive'">
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" @click="openEditModal(item.id)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" @click="deleteItem(item.id)">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>

            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-3" x-show="pagination.last_page > 1">
                <div class="text-muted small">Total: <strong x-text="pagination.total"></strong></div>
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item" :class="{ disabled: pagination.current_page === 1 }">
                            <button class="page-link" @click="goToPage(pagination.current_page - 1)">&laquo;</button>
                        </li>
                        <template x-for="page in pagination.last_page" :key="page">
                            <li class="page-item" :class="{ active: page === pagination.current_page }">
                                <button class="page-link" x-text="page" @click="goToPage(page)"></button>
                            </li>
                        </template>
                        <li class="page-item" :class="{ disabled: pagination.current_page === pagination.last_page }">
                            <button class="page-link" @click="goToPage(pagination.current_page + 1)">&raquo;</button>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Add / Edit Modal -->
    <div class="modal fade" id="reportModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" x-text="isEditing ? 'Edit Report' : 'Add Report'"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                </div>
                <div class="modal-body">
                    <div class="row">

                        <!-- Title -->
                        <div class="col-12 mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" x-model="form.title" placeholder="Report title">
                            <div class="text-danger small mt-1" x-text="errors.title"></div>
                        </div>

                        <!-- Type & Status -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select class="form-select" x-model="form.type">
                                <option value="annual">Annual Report</option>
                                <option value="audit">Audit Report</option>
                            </select>
                            <div class="text-danger small mt-1" x-text="errors.type"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" x-model="form.status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>

                        <!-- Short Description -->
                        <div class="col-12 mb-3">
                            <label class="form-label">Short Description</label>
                            <textarea class="form-control" rows="2"
                                x-model="form.short_description"
                                placeholder="Brief description of the report"></textarea>
                        </div>

                        <!-- Image -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">
                                Cover Image
                                <span class="text-muted small" x-show="isEditing">(leave empty to keep current)</span>
                            </label>
                            <div x-show="form.current_image" class="mb-2">
                                <img :src="form.current_image" width="120" height="75"
                                    class="rounded border" style="object-fit:cover;">
                            </div>
                            <input type="file" class="form-control" id="reportImageInput"
                                accept="image/jpg,image/jpeg,image/png,image/webp,image/avif"
                                @change="handleImageChange($event)">
                            <div x-show="imagePreview" class="mt-2">
                                <img :src="imagePreview" width="120" height="75"
                                    class="rounded border" style="object-fit:cover;">
                            </div>
                            <div class="text-danger small mt-1" x-text="errors.image"></div>
                        </div>

                        <!-- PDF -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">
                                PDF File
                                <span class="text-danger" x-show="!isEditing">*</span>
                                <span class="text-muted small" x-show="isEditing">(leave empty to keep current)</span>
                            </label>
                            <!-- Current PDF -->
                            <div x-show="isEditing && form.current_pdf" class="mb-2">
                                <a :href="form.current_pdf" target="_blank"
                                    class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-file-earmark-pdf me-1"></i> View Current PDF
                                </a>
                            </div>
                            <input type="file" class="form-control" id="reportPdfInput"
                                accept="application/pdf"
                                @change="handlePdfChange($event)">
                            <!-- New PDF preview -->
                            <div x-show="pdfName" class="mt-2">
                                <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-2">
                                    <i class="bi bi-file-earmark-pdf me-1"></i>
                                    <span x-text="pdfName"></span>
                                </span>
                            </div>
                            <div class="text-danger small mt-1" x-text="errors.pdf_path"></div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal" @click="resetForm()">Cancel</button>
                    <button type="button" class="btn btn-primary" @click="saveItem()" :disabled="saving">
                        <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                        <span x-text="isEditing ? 'Update Report' : 'Save Report'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function reportManager() {
    return {
        items: [],
        loading: false, saving: false,
        isEditing: false, editingId: null,
        per_page: 10,
        imageFile: null, imagePreview: null,
        pdfFile: null, pdfName: null,
        filters: { search: '', status: '', type: '' },
        pagination: { current_page: 1, last_page: 1, per_page: 10, total: 0 },
        form: {
            title: '', type: 'annual', short_description: '',
            status: 'active', current_image: '', current_pdf: '',
        },
        errors: {},

        async init() {
            await this.fetchItems();
        },

        async fetchItems(page = 1) {
            this.loading = true;
            try {
                const params = new URLSearchParams();
                if (this.filters.search) params.append('search', this.filters.search);
                if (this.filters.status) params.append('status', this.filters.status);
                if (this.filters.type)   params.append('type',   this.filters.type);
                params.append('per_page', this.per_page);
                params.append('page', page);

                const res  = await fetch(`{{ route('admin.reports.list') }}?${params}`);
                const json = await res.json();
                this.items      = json.data;
                this.pagination = json.pagination;
            } catch (e) { showError('Failed to load reports.'); }
            finally { this.loading = false; }
        },

        goToPage(page) {
            if (page < 1 || page > this.pagination.last_page) return;
            this.fetchItems(page);
        },

        openAddModal() {
            this.resetForm();
            this.isEditing = false;
            new bootstrap.Modal(document.getElementById('reportModal')).show();
        },

        async openEditModal(id) {
            this.resetForm();
            this.isEditing = true;
            this.editingId = id;
            try {
                showLoading();
                const res  = await fetch(`{{ url('admin/reports') }}/${id}`);
                const json = await res.json();
                const s    = json.data;
                Object.assign(this.form, {
                    title:             s.title,
                    type:              s.type,
                    short_description: s.short_description ?? '',
                    status:            s.status,
                    current_image:     s.image_url ?? '',
                    current_pdf:       s.pdf_url ?? '',
                });
            } catch (e) { showError('Failed to load report.'); return; }
            finally { hideLoading(); }
            new bootstrap.Modal(document.getElementById('reportModal')).show();
        },

        handleImageChange(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.imageFile    = file;
            this.imagePreview = URL.createObjectURL(file);
        },

        handlePdfChange(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.pdfFile = file;
            this.pdfName = file.name;
        },

        async saveItem() {
            this.errors = {};
            this.saving = true;

            const formData = new FormData();
            formData.append('title',             this.form.title);
            formData.append('type',              this.form.type);
            formData.append('short_description', this.form.short_description ?? '');
            formData.append('status',            this.form.status);
            formData.append('_token',            '{{ csrf_token() }}');
            if (this.imageFile) formData.append('image',    this.imageFile);
            if (this.pdfFile)   formData.append('pdf_path', this.pdfFile);
            if (this.isEditing) formData.append('_method',  'PUT');

            const url = this.isEditing
                ? `{{ url('admin/reports') }}/${this.editingId}`
                : '{{ route('admin.reports.store') }}';

            try {
                const res  = await fetch(url, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json' },
                    body: formData,
                });
                const json = await res.json();
                if (res.ok && json.success) {
                    bootstrap.Modal.getInstance(document.getElementById('reportModal')).hide();
                    this.resetForm();
                    this.fetchItems(this.pagination.current_page);
                    showSuccess(json.message);
                } else if (res.status === 422) {
                    Object.keys(json.errors).forEach(k => this.errors[k] = json.errors[k][0]);
                } else { showError(json.message ?? 'Something went wrong.'); }
            } catch (e) { showError('Request failed.'); }
            finally { this.saving = false; }
        },

        deleteItem(id) {
            showConfirm('This report and its files will be permanently deleted.', 'Delete Report?', async () => {
                try {
                    showLoading();
                    const res  = await fetch(`{{ url('admin/reports') }}/${id}`, {
                        method: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    });
                    const json = await res.json();
                    if (json.success) { this.fetchItems(this.pagination.current_page); showSuccess(json.message); }
                    else { showError(json.message ?? 'Delete failed.'); }
                } catch (e) { showError('Request failed.'); }
                finally { hideLoading(); }
            });
        },

        resetForm() {
            this.form = {
                title: '', type: 'annual', short_description: '',
                status: 'active', current_image: '', current_pdf: '',
            };
            this.errors = {};
            this.imageFile = null; this.imagePreview = null;
            this.pdfFile   = null; this.pdfName      = null;
            this.editingId = null;
            const img = document.getElementById('reportImageInput');
            const pdf = document.getElementById('reportPdfInput');
            if (img) img.value = '';
            if (pdf) pdf.value = '';
        },
    };
}
</script>
@endpush