@extends('Admin.layout')

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

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

            {{-- Back Button --}}
            <a href="{{ route('enquiries') }}" class="back-btn" title="Back to Enquiries">

                <i class="fas fa-chevron-left"></i>

            </a>

            <div>

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

            </div>

        </div>

    </div>


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

        <div class="card-body">

            <div class="table-responsive">

                <table id="completedEnquiryTable" 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>


    {{-- VIEW COMPLETED ENQUIRY MODAL --}}
    <div class="modal fade" id="viewCompletedModal" 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="completed_enquiry_id">
                            -
                        </div>

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>



                </div>

            </div>

        </div>

    </div>


    {{-- DELETE COMPLETED ENQUIRY MODAL --}}
    <div class="modal fade" id="deleteCompletedModal" 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">

                    Delete Enquiry

                </h5>

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

                    Are you sure you want to delete this completed enquiry?

                </p>


                <form action="{{ route('delete_completed_enquiry') }}" method="POST" id="DeleteCompletedForm">

                    @csrf

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


                    <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" class="btn btn-danger p-3 fw-semibold" id="confirmCompletedDelete">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection


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

            $('#completedEnquiryTable').DataTable({

                processing: true,

                serverSide: true,

                responsive: false,

                ajax: {

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

                    type: "GET",

                    error: function(xhr) {

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

                    }

                },


                language: {

                    lengthMenu: '_MENU_'

                },


                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'
                    },


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


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

                ]

            });

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

                    let btn = $(this);


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


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


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


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


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


                    $('#completed_status').text(
                        btn.data('status') || 'Completed'
                    );


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




                }
            );


            /*
            |--------------------------------------------------------------------------
            | DELETE COMPLETED ENQUIRY
            |--------------------------------------------------------------------------
            */

            $(document).on(
                'click',
                '.deleteCompletedBtn',
                function() {

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

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

                }
            );


            /*
            |--------------------------------------------------------------------------
            | DELETE SUBMIT PROTECTION
            |--------------------------------------------------------------------------
            */

            $(document).on(
                'submit',
                '#DeleteCompletedForm',
                function() {

                    let btn = $('#confirmCompletedDelete');


                    btn.prop(
                        'disabled',
                        true
                    );


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

                }
            );


        });
    </script>
@endsection