@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">
                    {{ __('Residents List') }}
                </h2>
                <a href="{{ route('edit-approval.index') }}" class="bg-main-dark text-main-light active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded">Edit Approvals</a>
            </div>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View and manage residents') }}
            </p>
        </header>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6">
            <form action="{{ route('residents.index') }}" method="GET" class="flex items-center gap-2">
                <input type="hidden" name="status" value="{{ request('status') }}">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search residents..."
                    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') }}">
                            <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="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>
                <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="mt-4">
                {{ $residents->appends(['search' => request('search'), 'status' => request('status')])->links('pagination::tailwind') }}
            </div>
            <div class="overflow-x-auto rounded-lg">
                <table class="min-w-full divide-y divide-gray-200 bg-main-light">
                    <thead class="bg-main-dark text-main-light text-sm">
                        <tr>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Image
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Name
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Details
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Address
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Sex
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Status
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Birthday
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Contact Details
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Family Role
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Occupation
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Income
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Religion
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Education
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody id="residents-table-body" class="divide-y divide-gray-200 relative text-xs">

                        @forelse ($residents as $resident)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="w-16">
                                        <img src="{{ $resident->image ? asset('storage/profile/images/' . $resident->image) : asset('storage/profile/images/default.jpg') }}"
                                            onerror="this.onerror=null;this.src='{{ asset('storage/profile/images/default.jpg') }}';"
                                            alt=""
                                            class="rounded-full w-16 border-gray-300 mb-2 border-2 mt-2">
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">
                                    {{ $resident->last_name }}, {{ $resident->first_name }} {{ $resident->middle_name }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->age ? 'Age: ' . $resident->residentData->age : '' }}<br>
                                    {{ $resident->residentData->height ? 'Height: ' . $resident->residentData->height . 'cm' : '' }}<br>
                                    {{ $resident->residentData->weight ? 'Weight: ' . $resident->residentData->weight . 'kg' : '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->house_no ? $resident->residentData->house_no : '' }}
                                    {{ $resident->residentData->street ? $resident->residentData->street : '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->sex ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->status ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->birthday ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->email ? 'Email: ' . $resident->email : '' }}<br>
                                    {{ $resident->residentData->contact_no ? 'Contact No.: ' . $resident->residentData->contact_no : '' }}<br>
                                    {{ $resident->residentData->telephone_no ? 'Telephone no.: ' . $resident->residentData->telephone_no : '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->family_role ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->occupation ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->income ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->religion ?? '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->residentData->primary ? 'Primary: ' . $resident->residentData->primary : '' }}<br>
                                    {{ $resident->residentData->secondary ? 'Secondary: ' . $resident->residentData->secondary : '' }}<br>
                                    {{ $resident->residentData->tertiary ? 'Tertiary: ' . $resident->residentData->tertiary : '' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    <div class="flex justify-center mt-2 gap-2">
                                        @if ($resident->approved_at !== null)
                                            <a href="{{ route('residents.edit', ['id' => $resident->id]) }}"
                                                class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3  rounded">
                                                Edit
                                            </a>
                                            <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="confirmationForm('Are you sure you want to remove this registration?', 'delete-form-{{ $resident->id }}')">Delete</button>
                                            <form id="delete-form-{{ $resident->id }}" class="hidden"
                                                action="{{ route('residents.destroy', ['id' => $resident->id]) }}"
                                                method="POST">
                                                @method('DELETE')
                                                @csrf
                                            </form>
                                        @else
                                            <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="confirmationForm('Are you sure you want to approve this registration?', 'approve-form-{{ $resident->id }}')">Approve</button>
                                            <form id="approve-form-{{ $resident->id }}" class="hidden"
                                                action="{{ route('residents.approve', ['id' => $resident->id]) }}"
                                                method="POST">
                                                @method('PUT')
                                                @csrf
                                            </form>
                                            <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="confirmationForm('Are you sure you want to reject this registration?', 'reject-form-{{ $resident->id }}')">Reject</button>
                                            <form id="reject-form-{{ $resident->id }}" class="hidden"
                                                action="{{ route('residents.reject', ['id' => $resident->id]) }}"
                                                method="POST">
                                                @method('PUT')
                                                @csrf
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">No Residents</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </main>
@endsection

@section('scripts')
    <script>
        function toggleAccordion(e) {
            const form = e.currentTarget.nextElementSibling;
            form.classList.toggle("hidden");
        }

        async function exportTable() {
            const data = [];
            const headers = [
                "Fullname",
                "Details",
                "Address",
                "Sex",
                "Status",
                "Birthday",
                "Contact Details",
                "Family Role",
                "Occupation",
                "Income",
                "Religion",
                "Education"
            ];

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

            rows.forEach(row => {
                if (getComputedStyle(row).display !== 'none') {
                    data.push([
                        row.cells[1].innerText,
                        row.cells[2].innerText,
                        row.cells[3].innerText,
                        row.cells[4].innerText,
                        row.cells[5].innerText,
                        row.cells[6].innerText,
                        row.cells[7].innerText,
                        row.cells[8].innerText,
                        row.cells[9].innerText,
                        row.cells[10].innerText,
                        row.cells[11].innerText,
                        row.cells[12].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-residents-${(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: 'residents'
            };

            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-residents-${(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>
@endsection