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

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6">
            <div class="mt-4">
                {{ $residents->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">
                                Id
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Name
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Change At
                            </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">
                                    {{ $resident->id }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">
                                    {{ $resident['edit']['user']['last_name'] }}, {{ $resident['edit']['user']['first_name'] }} {{ $resident['edit']['user']['middle_name'] }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $resident->created_at->format('M d, Y h:i A') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    <div class="flex justify-center mt-2 gap-2">
                                        <button class="bg-blue-600 text-white hover:bg-blue-700 text-xs py-1 px-3 rounded"
                                            data-resident="{{ json_encode($resident->changes) }}"
                                            onclick="viewResidentChanges(this)">View Changes</button>

                                        <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 changes?', 'approve-form-{{ $resident->id }}')">Approve</button>
                                        <form id="approve-form-{{ $resident->id }}" class="hidden"
                                            action="{{ route('edit-approval.approve', ['id' => $resident->id]) }}"
                                            method="POST">
                                            @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 rejrct this changes?', 'reject-form-{{ $resident->id }}')">Reject</button>
                                        <form id="reject-form-{{ $resident->id }}" class="hidden"
                                            action="{{ route('edit-approval.reject', ['id' => $resident->id]) }}"
                                            method="POST">
                                            @csrf
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap" colspan="4">No Pending Edit Request from Residents</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <div id="viewChangesModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-white rounded-lg shadow-lg p-6 w-3/4 max-w-2xl">
            <h2 class="text-lg font-bold mb-4">View Changes</h2>
            <table class="w-full border-collapse border border-gray-300">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border border-gray-300 p-2 font-bold text-xs">Field</th>
                        <th class="border border-gray-300 p-2 font-bold text-xs">Original</th>
                        <th class="border border-gray-300 p-2 font-bold text-xs">Updated</th>
                    </tr>
                </thead>
                <tbody id="changesTableBody">

                </tbody>
            </table>
            <div class="mt-4 flex justify-end">
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700 text-xs" onclick="closeModal()">Close</button>
            </div>
        </div>
    </div>
@endsection

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

    <script>
        function viewResidentChanges(buttonElement) {
            const modal = document.getElementById('viewChangesModal');
            const tableBody = document.getElementById('changesTableBody');

            const editData = JSON.parse(buttonElement.getAttribute('data-resident'));
            console.log(editData);
            tableBody.innerHTML = '';

            for (const [key, value] of Object.entries(editData)) {
                const row = `
                    <tr>
                        <td class="border border-gray-300 p-2 text-xs">${key}</td>
                        <td class="border border-gray-300 p-2 text-xs">${value[0]}</td>
                        <td class="border border-gray-300 p-2 text-xs">${value[1]}</td>
                    </tr>
                `;
                tableBody.innerHTML += row;
            }

            modal.classList.remove('hidden');
        }

        function closeModal() {
            const modal = document.getElementById('viewChangesModal');
            modal.classList.add('hidden');
        }
    </script>
@endsection