@extends('backend.layout.sidebar')

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

        <!-- Create New Banner Button -->
        <div class="mb-4">
            <a href="{{ route('banners.create') }}"
                class="px-4 py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                Create New Banner
            </a>
        </div>

        <!-- Banner List -->
        <div class="p-6 overflow-hidden bg-white rounded-lg shadow-md">
            <table id="banners-table" class="min-w-full text-center bg-white">
                <thead>
                    <tr>
                        <th class="px-4 py-2">Title</th>
                        <th class="px-4 py-2">Image</th>
                        <th class="px-4 py-2">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <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>
        $(function() {
            $('#banners-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('banners.index') }}',
                columns: [{
                        data: 'Title',
                        name: 'Title'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        // Open the modal and set the form action dynamically
        function openModal(id) {
            const deleteForm = document.getElementById('delete-form');
            deleteForm.action = '{{ route('banners.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