@extends('backend.layout.sidebar')

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

        <!-- Create New Testimonial Button -->
        <div class="mb-4">
            <a href="{{ route('testimonials.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 Testimonial
            </a>
        </div>

        <!-- DataTable -->
        <div class="p-6 bg-white rounded-lg shadow-md overflow-auto">
            <table id="testimonials-table" class="min-w-full text-center bg-white">
                <thead>
                    <tr>
                        <th class="px-4 py-2">ID</th>
                        <th class="px-4 py-2">Name</th>
                        <th class="px-4 py-2">Image</th>
                        <th class="px-4 py-2">Testimony</th>
                        <th class="px-4 py-2">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div id="delete-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
        <div class="bg-white p-6 rounded-lg shadow-lg w-1/3">
            <h3 class="text-lg font-semibold">Are you sure you want to delete this testimonial?</h3>
            <form id="delete-form" action="" method="POST">
                @csrf
                @method('DELETE')
                <div class="mt-4 flex justify-end">
                    <button type="button" onclick="closeModal()"
                        class="px-4 py-2 text-gray-600 bg-gray-200 rounded-md hover:bg-gray-300">Cancel</button>
                    <button type="submit"
                        class="ml-2 px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700">Delete</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(function() {
            $('#testimonials-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('testimonials.index') }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'testimony',
                        name: 'testimony'
                    },
                    {
                        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('testimonials.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