@extends('backend.layout.sidebar')
@section('content')
    <div class="container mx-auto">
        <h1 class="font-bold my-5">Contact Us</h1>
        <table id="users-table" class="display text-center" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                     <th>Number</th>
                    <th>Email</th>
                    <th>Created At</th>
                    <th>Message</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
        <div class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h5 class="text-lg font-semibold" id="deleteModalLabel">Delete Contact</h5>
                <button type="button" class="text-gray-500 hover:text-gray-700" onclick="toggleModal()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="mb-4 text-gray-700">
                Are you sure you want to delete this contact?
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button"
                    class="btn btn-secondary py-2 px-4 rounded-md bg-gray-300 text-gray-700 hover:bg-gray-400"
                    onclick="toggleModal()">Cancel</button>
                <form id="deleteForm" method="POST" action="" class="inline-block">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="py-2 px-4 rounded-md bg-red-600 text-white hover:bg-red-700 focus:outline-none">Delete</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var table = $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('contact.index') }}",
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                     {
                        data: 'number',
                        name: 'number'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'message',
                        name: 'message'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // When the delete button is clicked, set the form action
            $(document).on('click', '.deleteBtn', function() {
                const deleteUrl = $(this).data('url');
                $('#deleteForm').attr('action', deleteUrl);
                toggleModal();
            });
        });

        function toggleModal() {
            const modal = document.getElementById('deleteModal');
            modal.classList.toggle('hidden');
        }
    </script>
@endsection