@extends('layouts.app')

@section('dashboard-title')
<h3>Reports</h3>
@endsection

@section('content')

<!-- NAVBAR (Same as layout) -->
<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 nav-color">
        <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">
                    <h1 class="text-center text-3xl font-extrabold text-[#0A2A6A] tracking-wide" style="display: flex; align-items:center; color:white; font-family:Open Sans !important;font-size: 1.5em;">
                        Report Centre
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MAIN CONTENT AREA -->
<div class="kt-container-fluid">
    <!-- TOP BAR -->
    <div class="flex justify-between items-center mb-5">


        <!-- SEARCH -->
        <input type="text" id="search" placeholder="Search Reports"
            class="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">

        <div class="relative flex justify-end"> <!-- Parent relative -->
            <button id="openFilter"
                class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md translate-y-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 4h18l-6 8v6l-6 3v-9L3 4z" />
                </svg>
                Filter
            </button>

            <!-- Modal -->
            <div id="filterModal"
                class="hidden absolute top-full right-0 mt-2 w-80 bg-white p-5 rounded-lg shadow-xl border z-50">

                <h2 class="text-lg font-semibold mb-3" style="font-weight: 500">
                    Filter Reports
                </h2>

                <!-- TYPE -->
                <label class="block font-medium mb-1">Report Type</label>
                <select id="fType" class="w-full border rounded-lg p-2 mb-3">
                    <option value="">All</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>

                <!-- CATEGORY -->
                <label class="block font-medium mb-1">Category</label>
                <select id="fCategory" class="w-full border rounded-lg p-2 mb-3">
                    <option value="">All</option>
                    <option value="monthly">Monthly</option>
                    <option value="quarterly">Quarterly</option>
                    <option value="annualy">Annually</option>
                    <option value="onetime">One-time</option>
                    <option value="special">Special Reports</option>
                </select>

                <!-- DATE RANGE (MONTH & YEAR ONLY) -->
                <div class="flex flex-col gap-3 mb-3">
                    <div>
                        <label class="text-sm block mb-1">Start Month</label>
                        <input type="month" id="fStart"
                            class="w-full border p-2 rounded">
                    </div>
                    <div>
                        <label class="text-sm block mb-1">End Month</label>
                        <input type="month" id="fEnd"
                            class="w-full border p-2 rounded">
                    </div>
                </div>

                <!-- SORT -->
                <label class="block font-medium mb-1">Sort By</label>
                <select id="fSort" class="w-full border rounded-lg p-2 mb-4">
                    <option value="">None</option>
                    <option value="name">Name</option>
                    <option value="type">Type</option>
                    <option value="category">Category</option>
                    <option value="date">Date</option>
                </select>

                <!-- FOOTER -->
                <div class="modal-footer flex justify-between">
                    <button id="closeFilter"
                        class="px-4 py-2 bg-red-500 text-white rounded-lg">
                        Cancel
                    </button>
                </div>
            </div>

        </div>

    </div>

    <!-- TABLE -->
    <table id="report_table" class="divide-y divide-gray-200 w-full">
        <thead class="bg-primary text-gray-700">
            <tr>
                <th class="px-4 py-4 text-left text-sm font-semibold text-gray-600 text-mono">Report Name</th>
                <th class="px-4 py-4 text-left text-sm font-semibold text-gray-600 text-mono">Type</th>
                <th class="px-4 py-4 text-left text-sm font-semibold text-gray-600 text-mono">Category</th>
                <th class="px-4 py-4 text-left text-sm font-semibold text-gray-600 text-mono">Date</th>
                <th class="px-4 py-4 text-right text-sm font-semibold text-gray-600 text-mono" style="padding-right: 125px;">Actions</th>

            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">

            @forelse ($reports as $report)
            <tr
                data-id="{{ $report->id }}"
                data-date="{{ optional($report->report_date)->format('Y-m') }}"
                data-pdf="{{ route('reports.view', $report->id) }}">

                <td class="px-4 py-2">{{ $report->name }}</td>
                <td class="px-4 py-2">{{ $report->type }}</td>
                <td class="px-4 py-2">{{ $report->category }}</td>

                <td>
                    {{ $report->date ? \Carbon\Carbon::parse($report->date)->format('M, Y') : '-' }}
                </td>

                <td class="px-4 py-2 flex justify-end gap-2">

                    <!-- VIEW -->
                    <button
                        class="view-btn flex items-center gap-2 px-3 py-1 text-white rounded-md"
                        data-pdf="{{ route('reports.view', $report->id) }}" style="background-color: #408A40;">
                        View
                    </button>

                    <!-- DOWNLOAD -->
                    <a href="{{ route('reports.download', $report->id) }}"
                        class="download-btn flex items-center gap-2 px-3 py-1 text-white rounded-md" style="background-color: #205C2E;">
                        Download
                    </a>

                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="text-center text-gray-500">
                    No reports found
                </td>
            </tr>
            @endforelse


        </tbody>
    </table>

</div>

<!-- PDF Modal OUTSIDE TABLE -->
<div id="pdfModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="pdf-modal-container">
        <div class="pdf-modal-header">
            <h3 style="font-weight: 500">PDF Preview</h3>
            <button id="closePDF" class="pdf-close-btn">&times;</button>
        </div>
        <iframe id="pdfFrame" src="" class="pdf-frame"></iframe>
    </div>
</div>

<style>
    .clickable {
        cursor: pointer;

        text-decoration: underline;
    }

    .view-btn {
        background-color: #103c64ff;
        /* dark green */
    }

    .view-btn:hover {
        background-color: #091f3cff;
        /* darker green */
    }

    .download-btn {
        background-color: #0f5132;
        /* dark green */
    }

    .download-btn:hover {
        background-color: #0b3d27;
        /* darker green */
    }

    .pdf-modal-header {
        display: flex;
        justify-content: space-between;
        /* title left, button right */
        align-items: center;
        padding: 10px 20px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #ccc;
    }

    .pdf-close-btn {
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        color: #333;
    }

    .pdf-close-btn:hover {
        color: red;
        /* hover effect optional */
    }

    #pdfModal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
        /* default hidden */
        justify-content: center;
        align-items: center;
    }

    .pdf-modal-container {
        background-color: white;
        width: 40vw;
        height: 80vh;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .pdf-frame {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
    }
</style>

@endsection

@section('scripts')
@vite(['resources/js/pages/report.js'])
@endsection