@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Organization Chart') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View and manage barangay officials') }}
            </p>
        </header>

        <section class="mt-2 mb-6">
            <button
                class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded  w-full text-left font-semibold"
                onclick="toggleAccordion(event)">
                Add Officials Form
            </button>

            <form class="bg-white p-4 rounded-lg shadow-md mt-2 hidden transition duration-300 ease-in-out text-xs"
                action="{{ route('officials.store') }}"
                method="POST"
                enctype="multipart/form-data">
                @csrf
                <label for="image" class="block font-semibold">Image:</label>
                <img id="image-preview-add"
                    src="{{ asset('storage/official/images/default.jpg') }}"
                    onerror="this.onerror=null;this.src='{{ asset('storage/official/images/default.jpg') }}';"
                    alt="" class="w-32 h-32 border-gray-300 mb-2 border-2 mt-2">
                <input type="file" id="image-upload-add" name="image" class="w-full p-2 border rounded mb-4 text-xs">

                <label for="name" class="block font-semibold">Name:</label>
                <input type="text" id="name" name="name" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter name" required>

                <label for="position" class="block font-semibold">Position:</label>
                <input type="text" id="position" name="position" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter position" required>

                <label for="start_term" class="block font-semibold">Start Term:</label>
                <input type="date" id="start_term" name="start_term" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter start term" required>

                <label for="end_term" class="block font-semibold">End Term:</label>
                <input type="date" id="end_term" name="end_term" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter end term" required>

                <label for="layer" class="block font-semibold">Layer:</label>
                <input type="number" min="1" max="9" id="layer" name="layer" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter layer 1-9" required value="1">

                <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">
                    Add Official
                </button>
            </form>
        </section>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            <h2 class="text-lg font-semibold mb-4">Barangay Officials List</h2>
            <div class="overflow-x-auto rounded-lg">
                <table class="w-full border-collapse rounded 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">
                                Position</th>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Layer</th>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Start Term</th>
                                <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                End Term</th>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($officials as $official)
                            <tr>
                                <td class="border p-1 px-3"><div class="w-16 h-16"><img src=" {{ $official->image ? asset('storage/official/images/' . $official->image) : asset('storage/official/images/default.jpg') }} " onerror="this.onerror=null;this.src='{{ asset('storage/official/images/default.jpg') }}';" alt="" class="w-16 h-16 rounded-sm border-gray-300 mb-2 border-2 mt-2"></div></td>
                                <td class="border p-1 px-3">{{ $official->name }}</td>
                                <td class="border p-1 px-3">{{ $official->position }}</td>
                                <td class="border p-1 px-3">{{ $official->layer }}</td>
                                <td class="border p-1 px-3">{{ date('M. d, Y', strtotime($official->start_term)) }}</td>
                                <td class="border p-1 px-3">{{ date('M. d, Y ', strtotime($official->end_term)) }}</td>
                                <td class="border p-1 px-3 text-center">
                                    <div class="flex justify-end gap-2 relative">
                                        @if ($official->deleted_at)
                                            <button
                                                class="bg-danger-dark text-danger-light text-xs py-1 px-3 rounded cursor-not-allowed">
                                                Deleted
                                        </button>
                                        @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="openModal({{ json_encode($official) }})">Edit</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="confirmationForm('Are you sure you want to delete this official?', 'delete-form-{{ $official->id }}')">Delete</button>
                                                <form id="delete-form-{{ $official->id }}" class="hidden"
                                                    action="{{ route('officials.destroy', ['id' => $official->id]) }}"
                                                    method="POST">
                                                    @method('DELETE')
                                                    @csrf
                                                </form>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="border p-2" colspan="2">No items found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $officials->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">Edit Official</h2>
                <form id="edit-form" action="" method="POST">
                    @method('PUT')
                    @csrf
                    <form id="edit-form"
                        class="absolute left-0 top-10 bg-white p-4 rounded-lg shadow-md hidden transition duration-300 ease-in-out text-xs w-full bg-main-light z-10 border border-main-dark"
                        method="POST"
                        enctype="multipart/form-data">
                        @method('PUT')
                        @csrf
                        <label for="image-upload-edit" class="block font-semibold text-xs">Image:</label>
                        <img id="image-preview-edit"
                            src="{{ asset('storage/official/images/default.jpg') }}"
                            onerror="this.onerror=null;this.src='{{ asset('storage/official/images/default.jpg') }}';"
                            alt="" class="w-32 h-32 border-gray-300 mb-2 border-2 mt-2">
                        <input id="image-upload-edit" class="mt-1 block w-full cursor-pointer mb-4" type="file" name="image" accept="image/png, image/jpeg" />

                        <label for="name" class="block font-semibold text-xs">Name:</label>
                        <input type="text" id="name-edit" name="name" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter name" required value="">

                        <label for="position" class="block font-semibold text-xs">Position:</label>
                        <input type="text" id="position-edit" name="position" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter position" required value="">

                        <label for="layer" class="block font-semibold text-xs">Layer:</label>
                        <input type="number" min="1" max="9" id="layer-edit" name="layer" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter layer 1-9" required value="">

                        <label for="start_term" class="block font-semibold text-xs">Start Term:</label>
                        <input type="date" id="start_term-edit" name="start_term" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter start term" required>

                        <label for="end_term" class="block font-semibold text-xs">End Term:</label>
                        <input type="date" id="end_term-edit" name="end_term" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter end term" required>

                        <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">
                            Update
                        </button>
                    </form>
                </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) {
            console.log(data);
            document.getElementById('edit-form').action = '/officials/' + data.id;
            document.getElementById('edit-form').enctype = 'multipart/form-data';
            document.getElementById('name-edit').value = data.name;
            document.getElementById('position-edit').value = data.position;
            document.getElementById('start_term-edit').value = formatDateToYYYYMMDD(data.start_term);
            document.getElementById('end_term-edit').value = formatDateToYYYYMMDD(data.end_term);
            document.getElementById('layer-edit').value = data.layer;
            document.getElementById('image-preview-edit').src = data.image ? '{{asset('storage/official/images/')}}/' + data.image : '{{asset('storage/official/images/default.jpg')}}';
            document.getElementById('modal').classList.remove('hidden');
        }
        function closeModal() {
            document.getElementById('modal').classList.add('hidden');
        }

    </script>

    <script>
        document.getElementById('image-upload-edit').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('image-preview-edit').src = e.target.result;
                    document.getElementById('image-preview-edit').style.display = 'block';
                }
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('image-upload-add').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('image-preview-add').src = e.target.result;
                    document.getElementById('image-preview-add').style.display = 'block';
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
@endsection