<x-app-layout>

    <div class="container mt-5">
        <h1 class="text-center text-2xl font-bold mb-4">FAQs</h1>

        <!-- Form for adding and updating FAQs -->
        <form id="faqForm" class="mb-4">
            @csrf
            <input type="hidden" id="faqId" name="id" value="">
            <div class="mb-3">
                <label for="question" class="form-label">Question</label>
                <input type="text" id="question" name="question" required class="form-control" />
            </div>
            <div class="mb-3">
                <label for="answer" class="form-label">Answer</label>
                <textarea id="answer" name="answer" required class="form-control"></textarea>
            </div>
            <div class="mb-3">
                <label for="role" class="form-label">Role</label>
                <select id="role" name="role" required class="form-select">
                    <option value="user">User</option>
                    <option value="vendor">Vendor</option>
                    <option value="driver">Driver</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Save FAQ</button>
        </form>

        <!-- Table for displaying FAQs -->
        <table class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th>Question</th>
                    <th>Answer</th>
                    <th>Role</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="faqTable">
                @foreach($faqs as $faq)
                <tr>
                    <td>{{ $faq->question }}</td>
                    <td>{{ $faq->answer }}</td>
                    <td>{{ $faq->role }}</td>
                    <td>
                        <button class="btn btn-warning btn-sm edit-btn" data-id="{{ $faq->id }}" data-question="{{ $faq->question }}" data-answer="{{ $faq->answer }}" data-role="{{ $faq->role }}">Edit</button>
                        <button class="btn btn-danger btn-sm delete-btn" data-id="{{ $faq->id }}">Delete</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- JavaScript for handling form submission, editing, and deleting FAQs -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('faqForm');
            const faqTable = document.getElementById('faqTable');

            // Handle form submission
            form.addEventListener('submit', function(event) {
                event.preventDefault();

                const formData = new FormData(form);
                const id = document.getElementById('faqId').value;

                const url = id ? `/admin/FAQ_management/${id}` : '/admin/FAQ_management';
                const method = id ? 'PUT' : 'POST';

                fetch(url, {
                    method: method,
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert(JSON.stringify(data.error));
                    } else {
                        alert(data.message);
                        location.reload(); // Reload the page to see changes
                    }
                })
                .catch(error => console.error('Error:', error));
            });

            // Edit FAQ
            faqTable.addEventListener('click', function(event) {
                if (event.target.classList.contains('edit-btn')) {
                    const button = event.target;
                    const id = button.getAttribute('data-id');
                    const question = button.getAttribute('data-question');
                    const answer = button.getAttribute('data-answer');
                    const role = button.getAttribute('data-role');

                    document.getElementById('faqId').value = id;
                    document.getElementById('question').value = question;
                    document.getElementById('answer').value = answer;
                    document.getElementById('role').value = role;
                }

                if (event.target.classList.contains('delete-btn')) {
                    const id = event.target.getAttribute('data-id');

                    if (confirm('Are you sure you want to delete this FAQ?')) {
                        fetch(`/admin/FAQ_management/${id}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            alert(data.message);
                            location.reload(); // Reload the page to see changes
                        })
                        .catch(error => console.error('Error:', error));
                    }
                }
            });
        });
    </script>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap JS (optional, for dropdowns, modals, etc.) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</x-app-layout>
