@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">
        <div class="kt-container-fluid flex justify-center items-stretch gap-5">
            <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>

<!-- 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-left text-sm font-semibold text-gray-600 text-mono">Actions</th>
                </tr>
            </thead>
<tbody class="divide-y divide-gray-200">
    @forelse($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 ? \Carbon\Carbon::parse($report->date)->format('M, Y') : '-' }}</td>
        <td>{{ $report->user->name ?? 'N/A' }}</td>
        <td>
            @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>
    @empty
    <tr>
        <td colspan="7" class="text-center py-3">No data available</td>
    </tr>
    @endforelse
</tbody>

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

<!-- Modal -->
<div id="modal" class="model hidden">
    <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>
@endsection