@extends('staff.layout2')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        .dt-search {
            display: none;
        }

        #enquiryTable th,
        #enquiryTable td {
            vertical-align: middle;
        }

        .status-btn {
            min-width: 100px;
        }
    </style>
    @include('admin.layout.toast')

    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5 class="mb-0">
                Enquiries
            </h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('completed_enquiry_staff') }}" class="btn btn-primary">
                <i class="ti tabler-check me-1"></i>
                Completed Enquiries
            </a>
        </div>
    </div>

    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>
            <div class="col-lg-auto ms-auto col-12">
                <div class="d-flex flex-column flex-lg-row gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:263px;">
                    <button type="button" id="exportBtn" class="btn btn-label-secondary">
                        <i class="ti tabler-download me-1"></i>
                        Export
                    </button>
                </div>
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <table class="table table-bordered" id="enquiryTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Enquiry Type</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <!-- VIEW ENQUIRY MODAL -->
    <div class="modal fade" id="viewEnquiryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">
                        Enquiry Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Name</label>
                        <div class="form-control bg-light" id="modalEnquiryName">-</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Phone</label>
                        <div class="form-control bg-light" id="modalEnquiryPhone">-</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Email</label>
                        <div class="form-control bg-light" id="modalEnquiryEmail">-</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Enquiry Type</label>
                        <div class="form-control bg-light" id="modalEnquiryType">-</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Message</label>
                        <div class="form-control bg-light" id="modalEnquiryMessage"
                            style="min-height:100px; white-space:pre-wrap;">
                            -
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- STATUS CONFIRMATION MODAL -->
    <div class="modal fade" id="enquiryStatusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure?</h5>
                <p class="text-muted">Do you want to mark this enquiry as completed?</p>
                <input type="hidden" id="enquiryStatusId">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="confirmCompleteBtn" class="btn btn-danger">
                        Yes, Sure
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            // CSRF Token Setup
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Helper Functions for Button Loading States
            function startBtnLoading(btn, text = 'Processing...') {
                btn.data('original-html', btn.html());
                btn.prop('disabled', true).html(`<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> ${text}`);
            }

            function stopBtnLoading(btn) {
                let originalHtml = btn.data('original-html');
                if (originalHtml) {
                    btn.html(originalHtml);
                }
                btn.prop('disabled', false);
            }

            // Initialize DataTable
            let table = $('#enquiryTable').DataTable({
                processing: true,
                serverSide: true,
                lengthChange: false,
                responsive: true,
                ajax: {
                    url: "{{ route('staff_enquiry_list_data') }}",
                    type: "GET",
                    error: function (xhr) {
                        console.error('DataTable Error:', xhr.responseText);
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'name', name: 'name'},
                    {data: 'phone', name: 'phone'},
                    {data: 'email', name: 'email', defaultContent: '-'},
                    {data: 'enquiry_type', name: 'enquiry_type'},
                    {data: 'status', name: 'status', orderable: false, searchable: false}
                ],
                pageLength: 10,
                order: [[1, 'desc']]
            });

            // Custom Search Functionality
            $('#customSearch').on('keyup', function () {
                table.search($(this).val()).draw();
            });

            // Page Length Change
            $('#pageLength').on('change', function () {
                let value = $(this).val();
                if (value === 'All') {
                    table.page.len(-1).draw();
                } else {
                    table.page.len(parseInt(value)).draw();
                }
            });

            // Page Redirect Button Loading State
            $('#completedEnquiriesBtn').on('click', function () {
                startBtnLoading($(this), 'Loading...');
            });

            // Open Status Confirmation Modal
            $(document).on('click', '.status-btn', function () {
                let id = $(this).data('id');
                let status = $(this).data('status');

                if (status !== 'Completed') {
                    $('#enquiryStatusId').val(id);
                    let modalElement = document.getElementById('enquiryStatusModal');
                    let modal = bootstrap.Modal.getOrCreateInstance(modalElement);
                    modal.show();
                }
            });

            $(document).on('click', '#confirmCompleteBtn', function () {
                let button = $(this);
                let id = $('#enquiryStatusId').val();

                if (!id) {
                    showAjaxToast('Enquiry ID not found.', 'error');
                    return;
                }

                startBtnLoading(button, 'Completing...');

                $.ajax({
                    url: "{{ route('admin.update_enquiry_status') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id,
                        status: 'Completed'
                    },
                    success: function (response) {
                        if (response.success === true) {
                            // Hide Modal
                            let modalElement = document.getElementById('enquiryStatusModal');
                            let modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            }

                            // Reload DataTables if present
                            if (typeof table !== 'undefined') {
                                table.ajax.reload(null, false);
                            }

                            // Show Success Toast
                            showAjaxToast(response.message || 'Enquiry status updated successfully.', 'success');
                        } else {
                            showAjaxToast(response.message || 'Unable to update status.', 'error');
                        }
                    },
                    error: function (xhr) {
                        console.error('Status update failed:', xhr);
                        let message = 'Unable to update enquiry status.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        showAjaxToast(message, 'error');
                    },
                    complete: function () {
                        stopBtnLoading(button);
                    }
                });
            });

            // View Enquiry Details AJAX
            $(document).on('click', '.view-enquiry', function () {
                let button = $(this);
                let id = button.data('id');

                startBtnLoading(button, 'Loading...');

                // Reset Modal Data
                $('#modalEnquiryName').text('-');
                $('#modalEnquiryPhone').text('-');
                $('#modalEnquiryEmail').text('-');
                $('#modalEnquiryType').text('-');
                $('#modalEnquiryMessage').text('-');

                $.ajax({
                    url: "{{ route('admin.view_enquiry', ':id') }}".replace(':id', id),
                    type: "GET",
                    success: function (response) {
                        if (response.success === true) {
                            let data = response.data;
                            $('#modalEnquiryName').text(data.name || '-');
                            $('#modalEnquiryPhone').text(data.phone || '-');
                            $('#modalEnquiryEmail').text(data.email || '-');
                            $('#modalEnquiryType').text(data.enquiry_type || '-');
                            $('#modalEnquiryMessage').text(data.message || '-');

                            let modalElement = document.getElementById('viewEnquiryModal');
                            let modal = bootstrap.Modal.getOrCreateInstance(modalElement);
                            modal.show();
                        } else {
                            alert(response.message || 'Unable to load enquiry.');
                        }
                    },
                    error: function (xhr) {
                        console.error('View enquiry error:', xhr);
                        alert('Unable to load enquiry details.');
                    },
                    complete: function () {
                        stopBtnLoading(button);
                    }
                });
            });

            // CSV Export
            $('#exportBtn').on('click', function () {
                let button = $(this);
                startBtnLoading(button, 'Exporting...');

                setTimeout(function () {
                    let csv = [];
                    let rows = document.querySelectorAll('#enquiryTable tr');

                    rows.forEach(function (row) {
                        let cols = row.querySelectorAll('th, td');
                        let rowData = [];
                        cols.forEach(function (col) {
                            rowData.push('"' + col.innerText.replace(/\n/g, ' ').replace(/"/g, '""').trim() + '"');
                        });
                        csv.push(rowData.join(','));
                    });

                    let blob = new Blob([csv.join('\n')], {type: 'text/csv;charset=utf-8;'});
                    let url = URL.createObjectURL(blob);
                    let link = document.createElement('a');
                    link.href = url;
                    link.download = 'enquiry_list.csv';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    URL.revokeObjectURL(url);

                    stopBtnLoading(button);
                }, 500);
            });
        });
    </script>
@endsection