@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-gray-900">
                    {{ __('Document Requests') }}
                </h2>
                <a href="{{ route('documents.index') }}" class="bg-main-dark text-main-light active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded">Documents</a>
            </div>
            <p class="mt-1 text-md text-gray-600">
                {{ __('Document Requests from residents') }}
            </p>
        </header>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 overflow-x-hidden">
            <form action="{{ route('certificate-request.index') }}" method="GET" class="flex items-center gap-2">
                <input type="hidden" name="type" value="{{ request('type') }}">
                <input type="hidden" name="status" value="{{ request('status') }}">
                <input type="search" name="search" value="{{ request('search') }}" placeholder="Search..."
                    class="border rounded p-2 w-full text-xs">
                <button type="submit" class="bg-main-dark text-main-light px-4 py-2 rounded text-xs">Search</button>
            </form>
            <div id="filters" class="flex justify-between w-full sm:flex-col md:flex-row my-4 text-xs">
                <div class="flex gap-4 items-center">
                    <p class="text-xs">Filters:</p>
                    <div class="relative">
                        <form action="" method="GET">
                            <input type="hidden" name="search" value="{{ request('search') }}">
                            <input type="hidden" name="type" value="{{ request('type') }}">
                            <select id="status" name="status"
                                class="bg-gray-200 text-gray-700 rounded-md px-4 py-2 pr-8 inline-flex items-center text-xs cursor-pointer"
                                onchange="this.form.submit()">
                                <option value="" {{ request('status') == '' ? 'selected' : '' }}>Status: All</option>
                                <option value="released" {{ request('status') == 'released' ? 'selected' : '' }}>Status: Released</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Status: Approved</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Status: Rejected</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Status: Pending</option>
                            </select>
                        </form>
                    </div>
                    <div class="relative">
                        <form action="" method="GET">
                            <input type="hidden" name="search" value="{{ request('search') }}">
                            <input type="hidden" name="status" value="{{ request('status') }}">
                            <select id="type" name="type"
                                class="bg-gray-200 text-gray-700 rounded-md px-4 py-2 pr-8 inline-flex items-center text-xs cursor-pointer"
                                onchange="this.form.submit()">
                                <option value="" {{ request('type') == '' ? 'selected' : '' }}>Type: All</option>
                                @foreach ($services as $service)
                                    <option value="{{$service->name}}" {{ request('type') == $service->name ? 'selected' : '' }}>Type: {{$service->name}}</option>
                                @endforeach
                            </select>
                        </form>
                    </div>
                </div>
                <div class="flex gap-4 items-center">
                    <button type="submit" class="bg-main-dark text-main-light px-4 py-2 rounded mt-2 text-xs whitespace-nowrap" onclick="exportTable()">Export Results</button>
                    <button type="submit" class="bg-main-dark text-main-light px-4 py-2 rounded mt-2 text-xs whitespace-nowrap" onclick="exportAll()">Export All</button>
                </div>
            </div>
            <div class="bg-white shadow overflow-x-auto rounded-lg">
                <table class="min-w-full divide-y divide-gray-200 text-sm bg-main-light">
                    <thead class="bg-main-dark text-main-light text-sm">
                        <tr onclick="">
                            <th class="py-2 px-4 text-left whitespace-nowrap">Requester</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Document Type</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Status</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Release Date</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Notes</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Filed Date</th>
                            <th class="hidden">Forms</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200" id="documents-table-body">
                        @forelse ($requests as $request)
                            <tr class="relative">
                                <td class="border px-4 py-2 whitespace-nowrap">{{ $request->user->first_name }}
                                    {{ $request->user->last_name }}</td>
                                <td class="border px-4 py-2 whitespace-nowrap">{{ $request->service->name }}</td>
                                <td class="border px-4 py-2 whitespace-nowrap">
                                    @if ($request->rejected_at)
                                        <p class="text-red-600 font-bold">Rejected</p>
                                    @elseif($request->release_date)
                                        <p class="text-blue-600 font-bold">Released</p>
                                    @elseif($request->approved_at)
                                        <p class="text-green-600 font-bold">Accepted</p>
                                    @else
                                        <p class="text-yellow-600 font-bold">Pending</p>
                                    @endif
                                </td>
                                <td class="border px-4 py-2 whitespace-nowrap">{{ $request->release_date ? date('M. d, Y', strtotime($request->release_date)) : '' }}</td>
                                <td class="border px-4 py-2 whitespace-nowrap">{{ $request->notes }}</td>
                                <td class="border px-4 py-2 whitespace-nowrap">
                                    {{ $request->created_at->diffForHumans() . ' | ' . $request->created_at->format('M. d, Y') }}
                                </td>
                                <td class="hidden">
                                    @foreach (json_decode($request->details ?? '{}') as $key => $item){{$key}}: {{ $item }}|@endforeach
                                </td>
                                <td class="border px-4 py-2">
                                    <div class="flex justify-end mt-2 gap-2">
                                        <div>
                                            <button
                                                class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded whitespace-nowrap"
                                                onclick="openModal({{ json_encode($request) }})">
                                                View Filed Form
                                            </button>
                                        </div>
                                        @if ($request->release_date || $request->rejected_at)
                                        @else
                                            @if ($request->approved_at)
                                                <div>
                                                    <button
                                                        class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded"
                                                        onclick="openResolveModal('{{ route('certificate-request.update', ['id' => $request->id]) }}')">Release</button>
                                                </div>
                                            @else
                                                <div>
                                                    <button
                                                        class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded"
                                                        onclick="openApproveModal('{{ route('certificate-request.update', ['id' => $request->id]) }}')">Approve</button>
                                                </div>
                                                <div>
                                                    <button
                                                        class="bg-danger-dark text-danger-light hover:underline active:bg-danger-light active:text-danger-dark text-xs py-1 px-3 rounded"
                                                        onclick="openRejectModal('{{ route('certificate-request.update', ['id' => $request->id]) }}')">Reject</button>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9">No complaints found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $requests->appends(['search' => request('search'), 'type' => request('type'), 'status' => request('status')])->links('pagination::tailwind') }}
            </div>
        </section>

        <div id="modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
                <button onclick="closeModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                    ✕
                </button>

                <h2 class="text-lg font-semibold mb-4">Filled out form</h2>
                <div id="dynamic-form" class="w-full md:col-span-2 grid gap-4 grid-cols-1 md:grid-cols-2"></div>
            </div>
        </div>

        <div id="modal-resolve" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
                <button onclick="closeResolveModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                    ✕
                </button>

                <h2 class="text-lg font-semibold mb-4">Release Document?</h2>
                <form id="resolve-form"
                    class=""
                    action=""
                    method="POST">
                    @method('PUT')
                    @csrf
                    <input type="text" name="status" hidden class="w-full p-2 border rounded mb-4 text-xs" value="resolved">
                    <p class="text-sm">Are you sure you want to release this document?</p>
                    <input type="datetime-local" name="release_date" class="mt-4 w-full p-2 border rounded text-xs" required>
                    <input type="text" name="notes" class="mt-4 w-full p-2 border rounded mb-4 text-xs" placeholder="Notes">
                    <button type="submit" class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded align-right">
                        Resolve
                    </button>
                </form>
            </div>
        </div>

        <div id="modal-approve" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
                <button onclick="closeApproveModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                    ✕
                </button>

                <h2 class="text-lg font-semibold mb-4">Approve Document?</h2>
                <form id="approve-form"
                    class=""
                    action=""
                    method="POST">
                    @method('PUT')
                    @csrf
                    <input type="text" name="status" hidden class="w-full p-2 border rounded mb-4 text-xs" value="accepted">
                    <p class="text-sm">Are you sure you want to approve this document?</p>
                    <input type="text" name="notes"class="w-full p-2 mt-4 border rounded mb-4 text-xs"placeholder="Notes" value="">
                    <button type="submit" class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded align-right">
                        Approve
                    </button>
                </form>
            </div>
        </div>

        <div id="modal-reject" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
                <button onclick="closeRejectModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                    ✕
                </button>
                <h2 class="text-lg font-semibold mb-4">Reject Document?</h2>
                <form id="reject-form"
                    class=""
                    action=""
                    method="POST">
                    @method('PUT')
                    @csrf
                    <input type="text" name="status" hidden class="w-full p-2 border rounded mb-4 text-xs" value="rejected">
                    <p class="text-sm">Are you sure you want to reject this document?</p>
                    <input type="text" name="notes"class="w-full p-2 mt-4 border rounded mb-4 text-xs"placeholder="Notes" value="">
                    <button type="submit" class="bg-danger-dark text-danger-light hover:underline active:bg-danger-light active:text-danger-dark text-xs py-1 px-3 rounded align-right">
                        Reject
                    </button>
                </form>
            </div>
        </div>
    </main>
@endsection

@section('scripts')
    <script>
        function toggleAccordion(e) {
            const form = e.currentTarget.nextElementSibling;
            form.classList.toggle("hidden");
        }
    </script>
    <script>
        function openModal(data) {
            document.getElementById('modal').classList.remove('hidden');
            const form = JSON.parse(data.details);
            const container = document.getElementById('dynamic-form');
            container.innerHTML = '';
            console.log(form);
            Object.entries(form).forEach(([key, item]) => {
                container.innerHTML += `
                    <div>
                        <label for="${key}" class="block text-sm font-medium text-gray-700">${key}</label>
                        <input type="text" name="${key}" id="${key}"
                            class="mt-1 block w-full p-2 border border-gray-300 rounded-md" value="${item}" disabled readonly>
                    </div>
                `;
            });
        }

        function closeModal() {
            document.getElementById('modal').classList.add('hidden');
        }

        async function exportTable() {
            const data = [];
            const headers = [
                "Requester",
                "Document Type",
                "Status",
                "Release Date",
                "Notes",
                "Filed Date",
                "Forms",
            ];

            const rows = document.querySelectorAll('#documents-table-body tr');

            rows.forEach(row => {
                if (getComputedStyle(row).display !== 'none') {
                    data.push([
                        row.cells[0].innerText,
                        row.cells[1].innerText,
                        row.cells[2].innerText,
                        row.cells[3].innerText,
                        row.cells[4].innerText,
                        row.cells[5].innerText,
                        row.cells[6].innerText,
                    ]);
                }
            });

            const payload = {
                headers: headers,
                data: data
            };

            confirmation(`Are you sure you want to export (${data.length}) records?`, async function () {
                const url = `{{ route('export.xlsx') }}`;
                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify(payload)
                    });
                    if (!response.ok) {
                        throw new Error(`Response status: ${response.status}`);
                    }
                    const fileName = `export-documents-${(new Date()).toISOString()}.xlsx`;
                    const blob = await response.blob();
                    const link = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = link;
                    a.download = fileName;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    alertModal('Exported successfully!');
                } catch (error) {
                    alertModal(error.message);
                    console.error(error.message);
                }
            });
        }

        async function exportAll() {
            const payload = {
                exportAll: 'documents'
            };

            confirmation(`Are you sure you want to export all records?`, async function () {
                const url = `{{ route('export.xlsx') }}`;
                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify(payload)
                    });
                    if (!response.ok) {
                        throw new Error(`Response status: ${response.status}`);
                    }
                    const fileName = `export-all-documents-${(new Date()).toISOString()}.xlsx`;
                    const blob = await response.blob();
                    const link = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = link;
                    a.download = fileName;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    alertModal('Exported successfully!');
                } catch (error) {
                    alertModal(error.message);
                    console.error(error.message);
                }
            });
        }
    </script>

    <script>
    function openApproveModal(link) {
        console.log(link);
        document.getElementById('modal-approve').classList.remove('hidden');
        document.getElementById('approve-form').action = link;
    }

    function closeApproveModal() {
        document.getElementById('modal-approve').classList.add('hidden');
    }
    </script>

    <script>
    function openRejectModal(link) {
        console.log(link);
        document.getElementById('modal-reject').classList.remove('hidden');
        document.getElementById('reject-form').action = link;
    }

    function closeRejectModal() {
        document.getElementById('modal-reject').classList.add('hidden');
    }
    </script>

    <script>
    function openResolveModal(link) {
        console.log(link);
        document.getElementById('modal-resolve').classList.remove('hidden');
        document.getElementById('resolve-form').action = link;
    }

    function closeResolveModal() {
        document.getElementById('modal-resolve').classList.add('hidden');
    }
    </script>
@endsection