@extends('admin.layout')

@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;
        }

        /* Message column */
        #enquiryTable th:nth-child(7),
        #enquiryTable td:nth-child(7) {
            width: 350px;
            max-width: 350px;
        }

        #enquiryTable td:nth-child(7) {
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .message-preview {
            display: inline;
        }

        .read-more-message {
            color: #d94b20;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
        }

        .read-more-message:hover {
            text-decoration: underline;
        }

        /* Read More message modal */
        #messageModal .modal-dialog {
            max-width: 600px;
            width: 90%;
        }

        #messageModal .modal-body {
            max-height: 60vh;
            overflow-y: auto;
        }

        #fullMessage {
            min-height: 120px;
            max-height: 50vh;
            overflow-y: auto;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            word-break: break-word;
        }
    </style>

    {{-- =========================================================
    TOAST
    ========================================================= --}}
    @include('admin.layout.toast')


    {{-- =========================================================
    PAGE HEADER
    ========================================================= --}}
    <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('admin.completed_enquiry') }}" class="btn btn-primary" id="completedEnquiriesBtn">

                <i class="ti tabler-check me-1"></i>

                Completed Enquiries

            </a>

        </div>

    </div>


    {{-- =========================================================
    ENQUIRY TABLE CARD
    ========================================================= --}}
    <div class="card p-0">

        {{-- TABLE CONTROLS --}}
        <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">

                        <i class="ti tabler-download me-1"></i>

                        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>Message</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">

                    {{-- 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:120px; 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>

    <div class="modal fade" id="messageModal" 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">
                        Message
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="form-control bg-light" id="fullMessage" style="min-height:120px; white-space:pre-wrap;">
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- =========================================================
    JQUERY
    ========================================================= --}}
    <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 SETUP
            ========================================================= */

            $.ajaxSetup({

                headers: {

                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                }

            });



            /* =========================================================
               BUTTON LOADING
            ========================================================= */

            function startBtnLoading(btn, text = 'Processing...') {

                btn.data(
                    'original-html',
                    btn.html()
                );

                btn.prop('disabled', true);

                btn.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);
            }



            /* =========================================================
               DATATABLE
            ========================================================= */

            let table = $('#enquiryTable').DataTable({

                processing: true,

                serverSide: true,

                lengthChange: false,

                pageLength: 10,

                order: [
                    [1, 'desc']
                ],

                ajax: {

                    url: "{{ route('admin.enquiry_list_data') }}",

                    type: "GET",

                    error: function(xhr) {

                        console.error(
                            'DataTable Error:',
                            xhr.responseText
                        );

                        showAjaxToast(
                            'Unable to load enquiries.',
                            'error'
                        );

                    }

                },


                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },

                    {
                        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: 'message',
                        name: 'message',
                        defaultContent: '-',

                        render: function(data, type, row) {

                            if (!data) {
                                return '-';
                            }

                            if (type !== 'display') {
                                return data;
                            }

                            let message = String(data);

                            if (message.length > 30) {

                                let shortMessage = message.substring(0, 30);

                                let encodedMessage = btoa(
                                    unescape(
                                        encodeURIComponent(message)
                                    )
                                );

                                return `
                                    <span class="message-preview">
                                        ${$('<div>').text(shortMessage).html()}...
                                    </span>

                                    <a href="javascript:void(0);"
                                    class="read-more-message ms-1"
                                    data-message="${encodedMessage}">
                                        Read More
                                    </a>
                                `;
                            }

                            return $('<div>').text(message).html();
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }

                ]

            });

            $(document).on('click', '.read-more-message', function() {

                let encodedMessage = $(this).attr('data-message');

                let message = '-';

                if (encodedMessage) {

                    try {

                        message = decodeURIComponent(
                            escape(
                                atob(encodedMessage)
                            )
                        );

                    } catch (error) {

                        console.error('Message decode error:', error);

                        message = encodedMessage;
                    }
                }

                $('#fullMessage').text(message);

                let modalElement = document.getElementById('messageModal');

                let modal = bootstrap.Modal.getOrCreateInstance(modalElement);

                modal.show();

            });

            /* =========================================================
               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();

                }

            });



            /* =========================================================
               COMPLETED PAGE BUTTON
            ========================================================= */

            $('#completedEnquiriesBtn').on('click', function() {

                startBtnLoading(
                    $(this),
                    'Loading...'
                );

            });



            /* =========================================================
               OPEN STATUS 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();

                    }

                }
            );



            /* =========================================================
               CONFIRM COMPLETE
            ========================================================= */

            $(document).on(
                'click',
                '#confirmCompleteBtn',
                function() {

                    let button =
                        $(this);

                    let id =
                        $('#enquiryStatusId').val();


                    if (!id) {

                        showAjaxToast(
                            'Enquiry ID not found.',
                            'error'
                        );

                        return;
                    }


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


                    $.ajax({

                        url: "{{ route('admin.update_enquiry_status') }}",

                        type: "POST",

                        data: {

                            id: id,

                            status: 'Completed'

                        },


                        success: function(response) {

                            if (
                                response.success === true
                            ) {

                                let modalElement =
                                    document.getElementById(
                                        'enquiryStatusModal'
                                    );


                                let modal =
                                    bootstrap.Modal
                                    .getInstance(
                                        modalElement
                                    );


                                if (modal) {

                                    modal.hide();

                                }


                                table.ajax.reload(
                                    null,
                                    false
                                );


                                showAjaxToast(
                                    response.message ||
                                    'Enquiry completed 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
            ========================================================= */

            $(document).on(
                'click',
                '.view-enquiry',
                function() {

                    let button =
                        $(this);

                    let id =
                        button.data('id');


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


                    /* RESET */

                    $('#modalEnquiryName')
                        .text('-');

                    $('#modalEnquiryPhone')
                        .text('-');

                    $('#modalEnquiryEmail')
                        .text('-');

                    $('#modalEnquiryType')
                        .text('-');

                    $('#modalEnquiryMessage')
                        .text(
                            data.message || '-'
                        );


                    $.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 {

                                showAjaxToast(
                                    response.message ||
                                    'Unable to load enquiry.',
                                    'error'
                                );

                            }

                        },


                        error: function(xhr) {

                            console.error(
                                'View enquiry error:',
                                xhr
                            );


                            showAjaxToast(
                                'Unable to load enquiry details.',
                                'error'
                            );

                        },


                        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) {

                                let value =
                                    col.innerText
                                    .replace(/\n/g, ' ')
                                    .replace(/"/g, '""')
                                    .trim();


                                rowData.push(
                                    '"' + value + '"'
                                );

                            });


                            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