@extends('layouts.app')

@section('content')
<div id="loading-overlay">
    <div class="spinner"></div>
</div>

<!-- Inner Navbar -->
<div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
    id="navbar">
    <div class="rounded-t-xl border border-input border-b-input bg-background filter-container flex items-stretch grow">
        <!-- Container -->
        <div class="kt-container-fluid flex justify-center items-stretch gap-5 nav-color">
            <div class="grid items-stretch">
                <div class="kt-scrollable-x-auto flex items-stretch">
                    <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true">
                        @include('includes.admin-forms-navbar')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if($reports)
<style>
    #loading-overlay {
        display: none
    }
</style>
@endif

<!-- Container -->
<div class="kt-container-fluid">
    <div class="grid mb-5">
        <div class="flex justify-between items-center">
            <div id="customSearch" class="flex items-center gap-2">
                <select id="pageLengthSelect" class="border px-2 py-2 rounded-md">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
                <input type="text" id="search" placeholder="Search Reports" class="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>
            @can('report create')
            <button type="button" id="openModal" class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                + Add New Report
            </button>
            @endcan
        </div>

        <table id="report_table" class="divide-y divide-gray-200 w-full">
            <thead class="bg-primary">
                <tr>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">SR.</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Report Name</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Type</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Category</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Date</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Imported By</th>
                    <th class="px-4 py-2 text-right text-sm font-semibold text-gray-600 text-mono" style="padding-right: 65px;">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @foreach($reports as $index => $report)
                <tr data-id="{{ $report->id }}">
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $report->name }}</td>
                    <td>{{ $report->type }}</td>
                    <td>{{ $report->category }}</td>
                    <td>{{ $report->date->format('Y-m-d') }}</td>
                    <td>{{ $report->user ? $report->user->name : '—' }}</td>
                    <td class="flex justify-end gap-2">

                        @can('report edit')
                        <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded-md"
                            data-id="{{ $report->id }}">Edit</button>
                        @endcan
                        @can('report delete')
                        <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded-md"
                            data-id="{{ $report->id }}">Delete</button>
                        @endcan
                    </td>
                </tr>
                @endforeach
            </tbody>


        </table>
    </div>
</div>

<!-- Modal -->
<div id="modal" class="model hidden management">
    <div class="modal-content kt-scrollable-y-auto">
        <div class="modal-header">
            <h2 id="modalTitle">Report</h2>
            <button id="closeModal">✕</button>
        </div>

        <div class="modal-body">
            <div class="form-group">
                <label for="reportName">Report Name</label>
                <input id="reportName" type="text" placeholder="Enter report name" class="w-full">
            </div>

            <div class="form-group">
                <label for="reportType">Type</label>
                <select id="reportType" class="w-full select2">
                    <option value="">Select Type</option>
                    <option value="MMR">MMR</option>
                    <option value="QMR">QMR</option>
                    <option value="AMR">AMR</option>
                    <option value="Baseline">Baseline</option>
                    <option value="MTR">MTR</option>
                    <option value="Endline">Endline</option>
                </select>
            </div>

            <div class="form-group">
                <label for="reportCategory">Category</label>
                <select id="reportCategory" class="w-full select2">
                    <option value="">Select Category</option>
                    <option value="Monthly">Monthly</option>
                    <option value="Quarterly">Quarterly</option>
                    <option value="Annually">Annually</option>
                    <option value="One-time">One-time</option>
                    <option value="Special Reports">Special Reports</option>
                </select>
            </div>

            <div class="form-group">
                <label for="reportDate">Month & Year</label>
                <input type="month" id="reportDate" class="w-full">
            </div>

            <div class="form-group">
                <label for="reportFile">Upload PDF</label>
                <input type="file" id="reportFile" name="file" accept="application/pdf" class="w-full">
                <small class="text-gray-500">Only PDF files allowed.</small>
            </div>

            <input type="hidden" id="reportId">
        </div>

        <div class="modal-footer">
            <button id="cancel">Cancel</button>
            <button id="saveBtn">Submit</button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@vite('resources/js/admin-forms/report.js')
<script>
    // window.userPermissions = @json(auth()->user()->getAllPermissions()->pluck('name')->toArray());

    // Initialize Select2 for Type & Category
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: 'Select an option',
            width: '100%',
            dropdownParent: $('#modal')
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection