@extends('backend.layout.sidebar')

@section('content')
    <div class="container px-4 py-8 mx-auto">
        <h1 class="mb-6 text-2xl font-bold">News and Events</h1>

        <!-- Create New Testimonial Button -->
        <div class="mb-4">
            <a href="{{ route('news_events.create') }}"
                class="px-4 py-2 text-sm text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                Create New News and Events
            </a>
        </div>
        <div class="overflow-auto">
            <table id="news-events-table" class="table text-center table-striped">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Image</th>
                        <th>Type</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
    <div id="delete-modal" class="fixed inset-0 flex items-center justify-center hidden bg-gray-800 bg-opacity-50">
        <div class="p-6 text-center bg-white rounded shadow-lg">
            <p>Are you sure you want to delete this banner?</p>
            <div class="mt-4">
                <form id="delete-form" method="POST" class="inline-block">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-white bg-red-600 rounded">Confirm</button>
                </form>
                <button class="px-4 py-2 text-gray-800 bg-gray-300 rounded" onclick="closeModal()">Cancel</button>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Initialize DataTable with server-side processing
            $('#news-events-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('news_events.index') }}', // The server-side route
                columns: [{
                        data: 'title',
                        name: 'title',
                        className: 'w-[150px]' // Tailwind CSS utility for fixed width
                    },
                    {
                        data: 'image',
                        name: 'image',
                        orderable: false,
                        searchable: false,
                        className: 'w-[200px]' // Tailwind CSS utility for fixed width
                    },
                    {
                        data: 'type',
                        name: 'type',
                        className: 'w-[150px]' // Tailwind CSS utility for fixed width
                    },
                    {
                        data: 'date',
                        name: 'date',
                        className: 'w-[120px]' // Tailwind CSS utility for fixed width
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'w-[100px]' // Tailwind CSS utility for fixed width
                    }
                ]
            });
        });

        // Open the modal and set the form action dynamically
        function openModal(id) {
            const deleteForm = document.getElementById('delete-form');
            deleteForm.action = '{{ route('news_events.destroy', ':id') }}'.replace(':id', id);
            document.getElementById('delete-modal').classList.remove('hidden');
        }

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