@extends('staff.layout2')
@section('content')
{{-- ==========================================================
    CSRF
=========================================================== --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- ==========================================================
    DATATABLE CSS
=========================================================== --}}
<link
    rel="stylesheet"
    href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
{{-- ==========================================================
    FONT AWESOME
=========================================================== --}}
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
{{-- ==========================================================
    CUSTOM CSS
=========================================================== --}}
<style>
    .dt-search {
        display: none;
    }
    #enquiryTable th,
    #enquiryTable td {
        vertical-align: middle;
    }
    .status-completed {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
</style>
{{-- ==========================================================
    TOAST
=========================================================== --}}
@include('admin.layout.toast')
{{-- ==========================================================
    PAGE TITLE
=========================================================== --}}
<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>

                    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                        <a href="{{ route('enquiry_staff') }}">

                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="icon icon-tabler">

                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                                <path d="M15 6l-6 6l6 6" />

                            </svg>

                        </a>

                    </button>

                    Completed Enquiries

                </h5>
    </div>
    {{-- BACK TO ACTIVE ENQUIRIES --}}
    <!-- <div class="col-auto">
        <a
            href="{{ route('admin.enquiry') }}"
            class="btn btn-primary">
            <i class="ti tabler-message-circle me-1"></i>
            Active Enquiries
        </a>
    </div> -->
</div>
{{-- ==========================================================
    COMPLETED ENQUIRY TABLE CARD
=========================================================== --}}
<div class="card p-0">
    {{-- ======================================================
        TOOLBAR
    ======================================================= --}}
    <div class="row mb-3 align-items-center p-3 g-2">
        {{-- ==================================================
            PAGE LENGTH
        =================================================== --}}
        <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>
        {{-- ==================================================
            SEARCH + EXPORT
        =================================================== --}}
        <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 w-100">
                    Export
                </button>
            </div>
        </div>
    </div>
    {{-- ======================================================
        TABLE
    ======================================================= --}}
    <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>
                    {{-- <th>
                        Action
                    </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">
            {{-- ==================================================
                HEADER
            =================================================== --}}
            <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>
            {{-- ==================================================
                BODY
            =================================================== --}}
            <div class="modal-body">
                {{-- NAME --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">
                        Name
                    </label>
                    <div
                        class="form-control bg-light"
                        id="modalEnquiryName">
                        -
                    </div>
                </div>
                {{-- PHONE --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">
                        Phone
                    </label>
                    <div
                        class="form-control bg-light"
                        id="modalEnquiryPhone">
                        -
                    </div>
                </div>
                {{-- EMAIL --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">
                        Email
                    </label>
                    <div
                        class="form-control bg-light"
                        id="modalEnquiryEmail">
                        -
                    </div>
                </div>
                {{-- ENQUIRY TYPE --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">
                        Enquiry Type
                    </label>
                    <div
                        class="form-control bg-light"
                        id="modalEnquiryType">
                        -
                    </div>
                </div>
                {{-- MESSAGE --}}
                <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>
                {{-- STATUS --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">
                        Status
                    </label>
                    <div>
                        <span class="badge bg-success">
                            <i class="ti tabler-check me-1"></i>
                            Completed
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- ==========================================================
    JQUERY
=========================================================== --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{{-- ==========================================================
    DATATABLE JS
=========================================================== --}}
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
    // ==========================================================
    // CSRF
    // ==========================================================
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN':
                $('meta[name="csrf-token"]').attr('content')
        }
    });
    // ==========================================================
    // DATATABLE
    // ==========================================================
    let table = $('#enquiryTable').DataTable({
        processing: true,
        serverSide: true,
        lengthChange: false,
        responsive: true,
        // ======================================================
        // IMPORTANT
        // Completed enquiries API
        // ======================================================
        ajax: {
            url: "{{ route('completed_enquiry_list_data') }}",
            type: "GET",
            error: function (xhr) {
                console.log(
                    'Completed Enquiry DataTable Error:',
                    xhr.responseText
                );
            }
        },
        // ======================================================
        // COLUMNS
        // ======================================================
        columns: [
            // --------------------------------------------------
            // S.NO
            // --------------------------------------------------
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            // --------------------------------------------------
            // DATE
            // --------------------------------------------------
            {
                data: 'created_at',
                name: 'created_at'
            },
            // --------------------------------------------------
            // NAME
            // --------------------------------------------------
            {
                data: 'name',
                name: 'name'
            },
            // --------------------------------------------------
            // PHONE
            // --------------------------------------------------
            {
                data: 'phone',
                name: 'phone'
            },
            // --------------------------------------------------
            // EMAIL
            // --------------------------------------------------
            {
                data: 'email',
                name: 'email',
                defaultContent: '-'
            },
            // --------------------------------------------------
            // ENQUIRY TYPE
            // --------------------------------------------------
            {
                data: 'enquiry_type',
                name: 'enquiry_type'
            },
            // --------------------------------------------------
            // STATUS
            // --------------------------------------------------
            {
                data: 'status',
                name: 'status',
                orderable: false,
                searchable: false
            },
            // --------------------------------------------------
            // ACTION
            // --------------------------------------------------
            // {
            //     data: 'action',
            //     name: 'action',
            //     orderable: false,
            //     searchable: false
            // }
        ],
        // ======================================================
        // DEFAULT PAGE LENGTH
        // ======================================================
        pageLength: 10,
        // ======================================================
        // DEFAULT ORDER
        // ======================================================
        order: [
            [1, 'desc']
        ]
    });
    // ==========================================================
    // CUSTOM SEARCH
    // ==========================================================
    $('#customSearch').on(
        'keyup',
        function () {
            table
                .search($(this).val())
                .draw();
        }
    );
    // ==========================================================
    // PAGE LENGTH
    // ==========================================================
    $('#pageLength').on(
        'change',
        function () {
            let value = $(this).val();
            if (value === 'All') {
                table
                    .page
                    .len(-1)
                    .draw();
            } else {
                table
                    .page
                    .len(
                        parseInt(value)
                    )
                    .draw();
            }
        }
    );
    // ==========================================================
    // VIEW COMPLETED ENQUIRY
    // ==========================================================
    $(document).on(
        'click',
        '.view-enquiry',
        function () {
            let id =
                $(this).data('id');
            // --------------------------------------------------
            // RESET MODAL
            // --------------------------------------------------
            $('#modalEnquiryName')
                .text('-');
            $('#modalEnquiryPhone')
                .text('-');
            $('#modalEnquiryEmail')
                .text('-');
            $('#modalEnquiryType')
                .text('-');
            $('#modalEnquiryMessage')
                .text('-');
            // --------------------------------------------------
            // AJAX
            // --------------------------------------------------
            $.ajax({
                url:
                    "{{ url('/admin/enquiry/view') }}/"
                    + id,
                type: "GET",
                // ==================================================
                // SUCCESS
                // ==================================================
                success: function (response) {
                    if (
                        response.success === true
                    ) {
                        let data =
                            response.data;
                        // ------------------------------------------
                        // NAME
                        // ------------------------------------------
                        $('#modalEnquiryName')
                            .text(
                                data.name || '-'
                            );
                        // ------------------------------------------
                        // PHONE
                        // ------------------------------------------
                        $('#modalEnquiryPhone')
                            .text(
                                data.phone || '-'
                            );
                        // ------------------------------------------
                        // EMAIL
                        // ------------------------------------------
                        $('#modalEnquiryEmail')
                            .text(
                                data.email || '-'
                            );
                        // ------------------------------------------
                        // ENQUIRY TYPE
                        // ------------------------------------------
                        $('#modalEnquiryType')
                            .text(
                                data.enquiry_type || '-'
                            );
                        // ------------------------------------------
                        // MESSAGE
                        // ------------------------------------------
                        $('#modalEnquiryMessage')
                            .text(
                                data.message || '-'
                            );
                        // ------------------------------------------
                        // OPEN MODAL
                        // ------------------------------------------
                        let modalElement =
                            document.getElementById(
                                'viewEnquiryModal'
                            );
                        let modal =
                            bootstrap.Modal
                                .getOrCreateInstance(
                                    modalElement
                                );
                        modal.show();
                    } else {
                        alert(
                            response.message ||
                            'Unable to load enquiry.'
                        );
                    }
                },
                // ==================================================
                // ERROR
                // ==================================================
                error: function (xhr) {
                    console.error(
                        'View enquiry error:',
                        xhr
                    );
                    alert(
                        'Unable to load enquiry details.'
                    );
                }
            });
        }
    );
    // ==========================================================
    // EXPORT CSV
    // ==========================================================
    $('#exportBtn').on(
        'click',
        function () {
            const button = this;
            button.disabled = true;
            button.innerHTML =
                'Processing...';
            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 =
                        'completed_enquiries.csv';
                    document.body.appendChild(
                        link
                    );
                    link.click();
                    document.body.removeChild(
                        link
                    );
                    URL.revokeObjectURL(
                        url
                    );
                    button.disabled = false;
                    button.innerHTML =
                        'Export';
                },
                500
            );
        }
    );
});
</script>
@endsection