@extends('Admin.layout')

@section('content')
    {{-- ENQUIRY HEADER --}}
    <div class="dashboard-header d-flex flex-wrap justify-content-between align-items-center mb-4">

        <div>

            <h4 class="admin-section-title mb-1">
                Enquiries
            </h4>

        </div>
        <div class="mt-3 mt-md-0">
            <a href="{{ route('completed_enquiries') }}" class="btn btn-primary">

                <i class="bi bi-plus-circle me-1"></i>

                Completed Enquiries

            </a>
        </div>

    </div>

    {{--  ENQUIRY TABLE CARD --}}
    <div class="card border-0 shadow-sm">

        <div class="card-body">

            <div class="table-responsive">

                <table id="enquiryTable" class="table table-hover align-middle w-100">

                    <thead>

                        <tr>

                            <th>S.NO</th>

                            <th>Date</th>

                            <th>Enquiry ID</th>

                            <th>Name</th>

                            <th>Phone Number</th>

                            <th>Message</th>

                            <th>Status</th>

                            <th>Received</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody>
                    </tbody>

                </table>

            </div>

        </div>

    </div>

    {{--   STATUS CONFIRMATION MODAL --}}
    <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-hidden="true">

        <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">
                    Change Status
                </h5>


                <p class="text-muted mb-4" id="statusMessage">

                    Are you sure you want to change this enquiry status?

                </p>

                <form action="{{ route('update_enquiry_status') }}" method="POST" id="SubmitForm">

                    @csrf

                    <input type="hidden" name="enquiry_id" id="status_enquiry_id">


                    <input type="hidden" name="status" id="new_status">


                    <div class="d-flex justify-content-center align-items-center gap-3">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button type="submit" id="submit_btn" class="btn btn-success p-3 fw-semibold">

                            Yes, Complete

                        </button>

                    </div>

                </form>

            </div>

        </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">
                        Enquiry Details
                    </h5>

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

                </div>


                <div class="modal-body">

                    {{-- ENQUIRY ID --}}
                    <div class="mb-3">

                        <label class="fw-semibold">
                            Enquiry ID
                        </label>

                        <div id="view_enquiry_id">
                            -
                        </div>

                    </div>


                    {{-- NAME --}}
                    <div class="mb-3">

                        <label class="fw-semibold">
                            Name
                        </label>

                        <div id="view_name">
                            -
                        </div>

                    </div>


                    {{-- MOBILE --}}
                    <div class="mb-3">

                        <label class="fw-semibold">
                            Phone Number
                        </label>

                        <div id="view_mobile">
                            -
                        </div>

                    </div>



                    {{-- RECEIVED --}}
                    <div class="mb-3">

                        <label class="fw-semibold">
                            Received
                        </label>

                        <div id="view_received">
                            -
                        </div>

                    </div>


                    {{-- STATUS --}}
                    <div class="mb-3">

                        <label class="fw-semibold">
                            Status
                        </label>

                        <div id="view_status">
                            -
                        </div>

                    </div>



                    {{-- MESSAGE --}}
                    <div>

                        <label class="fw-semibold">
                            Message
                        </label>

                        <div id="view_message" class="text-break">
                            -
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- DELETE ENQUIRY MODAL --}}
    <div class="modal fade" id="deleteModal" 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">
                    Delete Enquiry
                </h5>


                <p class="text-muted">
                    Are you sure you want to delete this enquiry?
                </p>


                <form action="{{ route('delete_enquiry') }}" method="POST" id="DeleteForm">

                    @csrf

                    <input type="hidden" name="delete_id" id="delete_id">


                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button type="submit" class="btn btn-danger p-3 fw-semibold" id="confirmDelete">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {

            $('#enquiryTable').DataTable({

                processing: true,

                serverSide: true,

                responsive: false,

                pageLength: 10,

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                ajax: {

                    url: "{{ route('enquiries_data') }}",

                    type: "GET",

                    error: function(xhr) {

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

                    }

                },

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

                
                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    {
                        data: 'enquiry_id',
                        name: 'enquiry_id'
                    },

                    {
                        data: 'name',
                        name: 'name'
                    },

                    {
                        data: 'mobile',
                        name: 'mobile'
                    },

                    {
                        data: 'message_display',
                        name: 'message',
                        orderable: false
                    },

                    {
                        data: 'status',
                        name: 'status',
                        orderable: true,
                        searchable: true
                    },

                    {
                        data: 'received',
                        name: 'created_at',
                        orderable: true,
                        searchable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],

                language: {

                    lengthMenu: "_MENU_",

                    search: "",

                    searchPlaceholder: "Search..."

                }

            });


            // VIEW ENQUIRY
            $(document).on('click', '.viewEnquiryBtn', function() {

                const btn = $(this);

                $('#view_enquiry_id').text(
                    btn.data('enquiry-id') || '-'
                );

                $('#view_name').text(
                    btn.data('name') || '-'
                );

                $('#view_mobile').text(
                    btn.data('mobile') || '-'
                );

                $('#view_created').text(
                    btn.data('created') || '-'
                );

                $('#view_received').text(
                    btn.data('received') || '-'
                );

                $('#view_status').text(
                    btn.data('status') || 'Pending'
                );

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

            });


            // DELETE BUTTON
            $(document).on('click', '.deleteBtn', function() {

                const id = $(this).data('id');

                $('#delete_id').val(id);

            });


            // DELETE SUBMIT PROTECTION
            $(document).on('submit', '#DeleteForm', function() {

                const btn = $('#confirmDelete');

                btn.prop('disabled', true);

                btn.text('Deleting...');

            });


            // STATUS BUTTON
            $(document).on('click', '.statusBtn', function() {

                const id =
                    $(this).data('id');

                const currentStatus =
                    $(this).data('status');


                $('#status_enquiry_id').val(id);


                if (currentStatus === 'Pending') {

                    $('#new_status').val('Completed');

                    $('#statusMessage').text(
                        'Are you sure you want to mark this enquiry as completed?'
                    );

                    $('#submit_btn')
                        .text('Yes, Complete')
                        .removeClass('btn-warning')
                        .addClass('btn-success');

                } else {

                    $('#new_status').val('Pending');

                    $('#statusMessage').text(
                        'Are you sure you want to change this enquiry back to pending?'
                    );

                    $('#submit_btn')
                        .text('Yes, Change')
                        .removeClass('btn-success')
                        .addClass('btn-warning');

                }

            });


            // STATUS SUBMIT PROTECTION
            $(document).on('submit', '#SubmitForm', function() {

                const btn = $('#submit_btn');

                btn.prop('disabled', true);

                btn.text('Updating...');

            });

        });
    </script>
@endsection