@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Announcements') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View and manage announcements') }}
            </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)">
                Create Announcement 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('announcements.store') }}" method="POST">
                @csrf
                <label for="title" class="block font-semibold">Title: <a class="text-red-500">*</a></label>
                <input type="text" id="title" name="title" class="w-full p-2 border rounded mb-4 text-xs"
                    placeholder="Enter announcement title" required>

                <label for="description" class="block font-semibold">Description: <a class="text-red-500">*</a></label>
                <textarea id="description" name="description" class="w-full p-2 border rounded mb-4 text-xs"
                    placeholder="Enter announcement description" required></textarea>

                <label for="until" class="block font-semibold">Until: </label>
                <input type="date" id="until" name="until" class="w-full p-2 border rounded mb-4 text-xs">

                <button type="submit"
                    class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-sm py-2 px-4 rounded align-right">
                    Add Announcement
                </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">Announcements List</h2>
            <form action="" method="get" class="w-full flex flex-row gap-2 text-xs mb-6">
                <input type="search" class="w-full rounded text-xs" name="search" value="{{ request('search') }}" placeholder="Search announcements...">
                <button type="submit" class="bg-main-dark text-main-light px-4 py-2 rounded">Search</button>
            </form>
            <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">
                                Title</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Description</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Until</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Created Date</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($announcements as $announcement)
                            <tr>
                                <td class="border p-1 px-3">{{ $announcement->title }}</td>
                                <td class="border p-1 px-3">{{ $announcement->description }}</td>
                                <td class="border p-1 px-3">
                                    {{ $announcement->until ? date('M. d, Y', strtotime($announcement->until)) : '' }}</td>
                                <td class="border p-1 px-3">
                                    {{ date('M. d, Y h:i A', strtotime($announcement->created_at)) }}</td>
                                <td class="border p-1 px-3 text-center">
                                    <div class="flex justify-end gap-2 relative">
                                        @if ($announcement->deleted_at || ($announcement->until && $announcement->until < now()))
                                            <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($announcement) }})">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 announcement?', 'delete-form-{{ $announcement->id }}')">Delete</button>
                                                <form id="delete-form-{{ $announcement->id }}" class="hidden"
                                                    action="{{ route('announcements.destroy', ['id' => $announcement->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">
                {{ $announcements->appends(['search' => request('search')])->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 Announcement</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="title" class="block font-semibold text-xs">Title: <a
                                class="text-red-500">*</a></label>
                        <input type="text" id="title-edit" name="title" class="w-full p-2 border rounded mb-4 text-xs"
                            placeholder="Enter announcement title" required>

                        <label for="description" class="block font-semibold text-xs">Description: <a
                                class="text-red-500">*</a></label>
                        <textarea id="description-edit" name="description" class="w-full p-2 border rounded mb-4 text-xs"
                            placeholder="Enter announcement description" required></textarea>

                        <label for="until" class="block font-semibold text-xs">Until: </label>
                        <input type="date" id="until-edit" name="until" class="w-full p-2 border rounded mb-4 text-xs">

                        <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 = '/announcements/' + data.id;
            document.getElementById('edit-form').enctype = 'multipart/form-data';
            document.getElementById('title-edit').value = data.title;
            document.getElementById('description-edit').value = data.description;
            document.getElementById('until-edit').value = data.until ? formatDateToYYYYMMDD(data.until) : '';
            document.getElementById('modal').classList.remove('hidden');
        }

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