@extends('Admin.layout')
@section('content')

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Support</h4>

    </div>
    <div class="card p-4">
        <!-- Table -->
        <div class="table-responsive">
            <table id="Customer" class="table table-bordered align-middle">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>NAME</th>
                        <th>EMAIL</th>
                        <th>MESSAGE</th>
                        <th>ACTION</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>

        </div>

    </div>


{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Are you sure?</h4>
            <p class="text-muted">Are you confirm to delete?</p>
            <input type="hidden" id="deleteBannerId">

            <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDelete" class="btn btn-danger  w-100">Yes, Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- Toast container for JS -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="customToastBody"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>


<script>
$(function () {
    $('#Customer').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('support_data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'created_at' },
            { data: 'name' },
            { data: 'email' },
            { data: 'message' },
            { data: 'action', orderable: false, searchable: false }
        ]
    });
});



// Show toast
function showToast(message, type = 'success') {
    $('#customToastBody').text(message);
    $('#customToast').removeClass('bg-success bg-danger');
    $('#customToast').addClass(type === 'success' ? 'bg-success' : 'bg-danger');
    var toast = new bootstrap.Toast(document.getElementById('customToast'));
    toast.show();
}

// Open delete modal
$(document).on('click', '.deleteSupport', function() {
    var id = $(this).data('id');
    $('#deleteBannerId').val(id);
    $('#deleteModal').modal('show');
});

// Confirm delete
$('#confirmDelete').click(function() {
    var id = $('#deleteBannerId').val();

    $.ajax({
        url: "{{ route('delete_support') }}",
        type: 'POST',
        data: {
            id: id,
            _token: "{{ csrf_token() }}"
        },
        success: function(res) {
            $('#deleteModal').modal('hide');
            showToast(res.message, res.status);
            $('#Customer').DataTable().ajax.reload(null, false); // reload table
        },
        error: function(err) {
            $('#deleteModal').modal('hide');
            showToast('Something went wrong!', 'error');
        }
    });
});

</script>



@endsection