@extends('admin.layouts.base')
@section('title', 'FAQs Management')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">FAQs Management</h3>
            </div>
            <div class="card-toolbar">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_modal">
                    Add New FAQ
                </button>
            </div>
        </div>

        <div class="card-body py-4">
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="faqs_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th class="text-center min-w-50px">#</th>
                        <th class="min-w-300px">Question</th>
                        <th class="min-w-400px">Answer</th>
                        <th class="text-center min-w-100px">Position</th>
                        <th class="text-center min-w-120px">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="add_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="addForm">
                @csrf
                <div class="modal-header">
                    <h2>Add New FAQ</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Question</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Answer</label>
                        <textarea name="description" class="form-control" rows="6" required></textarea>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Position (for ordering)</label>
                        <input type="number" name="position" class="form-control" value="0" min="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add FAQ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="edit_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="editForm">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h2>Edit FAQ</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Question</label>
                        <input type="text" name="title" id="edit_title" class="form-control" required>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Answer</label>
                        <textarea name="description" id="edit_description" class="form-control" rows="6" required></textarea>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Position</label>
                        <input type="number" name="position" id="edit_position" class="form-control" min="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update FAQ</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let table;
const addModal = new bootstrap.Modal('#add_modal');
const editModal = new bootstrap.Modal('#edit_modal');

$(document).ready(function () {
    table = $('#faqs_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.faqs.data") }}',
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'title' },
            { data: 'description' },
            { data: 'position', className: 'text-center' },
            { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ],
        order: [[3, 'asc']], // Default sort by position
        language: {
            processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
            emptyTable: 'No FAQs found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100]
    });
});

// Reset forms on hide
$('#add_modal, #edit_modal').on('hidden.bs.modal', function () {
    $(this).find('form')[0].reset();
});

const successAlert = (msg) => Swal.fire({icon: 'success', title: 'Success!', text: msg, timer: 2000})
    .then(() => table.ajax.reload(null, false));

const errorAlert = (msg) => Swal.fire({icon: 'error', title: 'Error', html: msg});

// Add
$('#addForm').on('submit', function (e) {
    e.preventDefault();
    const btn = $(this).find('button[type="submit"]').prop('disabled', true);

    $.post('{{ route("admin.faqs.store") }}', $(this).serialize())
        .done(res => { addModal.hide(); successAlert(res.message); })
        .fail(xhr => errorAlert(Object.values(xhr.responseJSON.errors || {}).flat().join('<br>')))
        .always(() => btn.prop('disabled', false));
});

// Edit click
$(document).on('click', '.edit-btn', function () {
    $('#edit_title').val($(this).data('title'));
    $('#edit_description').val($(this).data('description'));
    $('#edit_position').val($(this).data('position'));

    const url = '{{ route("admin.faqs.update", ":id") }}'.replace(':id', $(this).data('id'));
    $('#editForm').attr('action', url);

    editModal.show();
});

// Update
$('#editForm').on('submit', function (e) {
    e.preventDefault();
    const btn = $(this).find('button[type="submit"]').prop('disabled', true);

    $.ajax({
        url: $(this).attr('action'),
        method: 'POST',
        data: $(this).serialize() + '&_method=PUT'
    })
    .done(res => { editModal.hide(); successAlert(res.message); })
    .fail(xhr => errorAlert(Object.values(xhr.responseJSON.errors || {}).flat().join('<br>')))
    .always(() => btn.prop('disabled', false));
});

// Delete
$(document).on('click', '.delete-btn', function () {
    const id = $(this).data('id');
    const url = '{{ route("admin.faqs.destroy", ":id") }}'.replace(':id', id);

    Swal.fire({
        title: 'Delete FAQ?',
        text: "This action cannot be undone!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: url,
                method: 'POST',
                data: { _token: '{{ csrf_token() }}', _method: 'DELETE' }
            })
            .done(() => { successAlert('FAQ deleted!'); })
            .fail(() => errorAlert('Delete failed.'));
        }
    });
});
</script>
@endpush