@extends('backend.layout.sidebar')

@section('content')
    <div class="overflow-auto">
        <p class="text-xl font-semibold">Volunteer</p>
        <div class="my-6 rounded shadow-md">
            <table id="volunteersTable" class="min-w-full text-center bg-white border border-gray-300">
                <thead>
                    <tr>
                        <th class="px-4 py-2 border-b">ID</th>
                        <th class="px-4 py-2 border-b">Name</th>
                        <th class="px-4 py-2 border-b">Phone</th>
                        <th class="px-4 py-2 border-b">Email</th>
                        <th class="px-4 py-2 border-b">Availability Date</th>
                        <th class="px-4 py-2 border-b">Time</th>
                        <th class="px-4 py-2 border-b">Interests</th>
                        <th class="px-4 py-2 border-b">Skills and Exprience</th>
                        <th class="px-4 py-2 border-b">Additional Information</th>
                        <th class="px-4 py-2 border-b">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data populated via DataTables -->
                </tbody>
            </table>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#volunteersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('volunteers.index') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'phone_number',
                        name: 'phone_number'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'availability_date',
                        name: 'availability_date'
                    },
                    {
                        data: 'availability_time',
                        name: 'availability_time'
                    },
                    {
                        data: 'interests',
                        name: 'interests',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'skills_and_experience',
                        name: 'skills_and_experience'
                    },
                    {
                        data: 'additional_info',
                        name: 'additional_info'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-900 bg-opacity-50">
        <div class="p-6 bg-white rounded-lg shadow-lg w-96">
            <h2 class="text-lg font-semibold text-gray-800">Delete Volunteer</h2>
            <p class="mt-2 text-sm text-gray-600">
                Are you sure you want to delete this volunteer? This action cannot be undone.
            </p>
            <div class="flex justify-end gap-3 mt-4">
                <button id="closeModal" class="px-4 py-2 text-gray-800 bg-gray-300 rounded-lg hover:bg-gray-400">
                    Cancel
                </button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function openModal(id) {
            // Use the route helper to generate the delete URL
            const deleteForm = document.getElementById('deleteForm');
            const routeUrl = `{{ route('volunteers.destroy', ':id') }}`.replace(':id', id);
            deleteForm.action = routeUrl;

            // Show the modal
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        // Close modal when "Cancel" button is clicked
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('deleteModal').classList.add('hidden');
        });
    </script>
@endsection