{{-- =========================================================
     UPDATE STATUS MODAL
========================================================= --}}

<div class="modal fade"
     id="updateStatusModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            {{-- MODAL HEADER --}}
            <div class="modal-header">

                <h5 class="modal-title fw-semibold">
                    Update Lead Status
                </h5>

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

            </div>


            {{-- MODAL BODY --}}
            <div class="modal-body">

                <input type="hidden"
                       id="leadId">


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

                    <label class="form-label">
                        Lead Name
                    </label>

                    <input type="text"
                           id="modalLeadName"
                           class="form-control"
                           readonly>

                </div>


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

                    <label class="form-label">
                        Status
                    </label>

                    <select id="leadStatus"
                            class="form-select">

                        <option value="New">
                            New
                        </option>

                        <option value="Contacted">
                            Contacted
                        </option>

                        <option value="Interested">
                            Interested
                        </option>

                        <option value="Follow Up">
                            Follow Up
                        </option>

                        <option value="Converted">
                            Converted
                        </option>

                        <option value="Not Interested">
                            Not Interested
                        </option>

                        <option value="Closed">
                            Closed
                        </option>

                    </select>

                </div>


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

                    <label class="form-label">
                        Follow-up Date
                    </label>

                    <input type="date"
                           id="followUpDate"
                           class="form-control">

                </div>


                {{-- REMARK --}}
                <div class="mb-0">

                    <label class="form-label">
                        Remarks
                    </label>

                    <textarea id="leadRemark"
                              class="form-control"
                              rows="3"
                              placeholder="Enter remarks..."></textarea>

                </div>

            </div>


            {{-- MODAL FOOTER --}}
            <div class="modal-footer">

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

                    Cancel

                </button>

                <button type="button"
                        id="saveLeadStatus"
                        class="btn btn-primary">

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

                    Update Status

                </button>

            </div>

        </div>

    </div>

</div>

<div class="modal fade"
     id="addleadModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            {{-- MODAL HEADER --}}
            <div class="modal-header">

                <h5 class="modal-title fw-semibold">
                    Update Lead Status
                </h5>

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

            </div>


            {{-- MODAL BODY --}}
            <div class="modal-body">

             


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

                    <label class="form-label">
                        Lead Name
                    </label>

                    <input type="text"
                           id="modalLeadName"
                           class="form-control">

                </div>


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

                    <label class="form-label">
                        Status
                    </label>

                    <select id="leadStatus"
                            class="form-select">

                        <option value="New">
                            New
                        </option>

                    </select>

                </div>


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

                    <label class="form-label">
                        Follow-up Date
                    </label>

                    <input type="date"
                           class="form-control">

                </div>


                {{-- REMARK --}}
                <div class="mb-0">

                    <label class="form-label">
                        Remarks
                    </label>

                    <textarea id="leadRemark"
                              class="form-control"
                              rows="3"
                              placeholder="Enter remarks..."></textarea>

                </div>

            </div>


            {{-- MODAL FOOTER --}}
            <div class="modal-footer">

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

                    Cancel

                </button>

                <button type="button"
                        id="saveLeadStatus"
                        class="btn btn-primary">

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

                    Add Lead

                </button>

            </div>

        </div>

    </div>

</div>


<!-- bank delete modal -->
<div class="modal fade" id="delete" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    Delete Bank
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                Are you sure you want to delete this bank?
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button" class="btn btn-danger">
                    Delete
                </button>
            </div>
        </div>
    </div>
</div>


<!-- bank delete modal -->
<div class="modal fade" id="deletepolicy" 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">
                    Delete Policy
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- BODY -->
            <div class="modal-body">
                Are you sure you want to delete this policy?
            </div>
            <!-- FOOTER -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-danger">
                    Delete
                </button>
            </div>
        </div>
    </div>
</div>


<!-- =========================================================
     STATUS MODAL
========================================================= -->

<div class="modal fade status-modal" id="statusModal" 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">
                    Change Bank Status
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <!-- BODY -->
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">
                        Bank Name
                    </label>
                    <input type="text" id="modalBankName" class="form-control" readonly>
                </div>


                <div>
                    <label class="form-label">
                        Status
                    </label>
                    <select id="modalStatus" class="form-select">
                        <option value="Active">
                            Active
                        </option>
                        <option value="Inactive">
                            Inactive
                        </option>
                    </select>
                </div>
            </div>
            <!-- FOOTER -->
            <div class="modal-footer">
                <button type="button" class="btn status-cancel-btn" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn status-update-btn" id="updateStatusBtn">
                    <i class="ti ti-check me-1"></i>
                    Update Status
                </button>
            </div>
        </div>
    </div>
</div>


<style>
    .status-modal .modal-content {

        background: #19212c !important;

        border: 1px solid rgba(218, 184, 91, 0.35) !important;

        border-radius: 14px;

        color: #e8eaf0;

    }


    .status-modal .modal-header {

        border-bottom: 1px solid rgba(218, 184, 91, 0.2);

    }


    .status-modal .modal-title {

        color: #f0d37b;

        font-weight: 700;

        font-size: 1rem;

    }


    .status-modal .modal-body {

        padding: 1.25rem;

    }


    .status-modal .form-label {

        color: #93a1b8;

        font-size: .8rem;

        font-weight: 500;

    }


    .status-modal .form-control {

        background: #202a36 !important;

        border: 1px solid rgba(218, 184, 91, 0.3) !important;

        color: #e8eaf0 !important;

        border-radius: 7px;

    }


    .status-modal .form-select {

        background-color: #202a36 !important;

        border: 1px solid rgba(218, 184, 91, 0.3) !important;

        color: #e8eaf0 !important;

        border-radius: 7px;

    }


    .status-modal .form-control:focus,
    .status-modal .form-select:focus {

        border-color: #f0cc68 !important;

        box-shadow: 0 0 0 .15rem rgba(218, 184, 91, .1) !important;

    }


    .status-modal .form-select option {

        background: #19212c;

        color: #fff;

    }


    .status-modal .modal-footer {

        border-top: 1px solid rgba(218, 184, 91, 0.2);

    }


    .status-cancel-btn {

        color: #93a1b8 !important;

        border: 1px solid rgba(218, 184, 91, 0.25) !important;

        background: transparent !important;

    }


    .status-update-btn {

        background: #f0cc68 !important;

        border-color: #f0cc68 !important;

        color: #19212c !important;

        font-weight: 700;

    }
</style>


<script>

    $(document).ready(function () {

        let selectedBank = null;


        /* =====================================================
           OPEN MODAL
        ====================================================== */

        $(document).on('click', '#table .status-btn', function () {

            selectedBank = $(this);


            const bankName =
                $(this).attr('data-bank');


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


            $('#modalBankName')
                .val(bankName);


            $('#modalStatus')
                .val(currentStatus);


            const modalElement =
                document.getElementById('statusModal');


            if (!modalElement) {

                console.error('statusModal not found');

                return;

            }


            /* Bootstrap 5 */

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


            modal.show();

        });


        /* =====================================================
           UPDATE STATUS
        ====================================================== */

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

            if (!selectedBank) {

                return;

            }


            const bankName =
                $('#modalBankName').val();


            const newStatus =
                $('#modalStatus').val();


            /* Update data */

            if (Array.isArray(window.bankData)) {

                window.bankData.forEach(function (bank) {

                    if (bank.bankname === bankName) {

                        bank.status = newStatus;

                    }

                });

            }


            /* Refresh DataTable */

            if (window.bankTable) {

                window.bankTable
                    .clear()
                    .rows
                    .add(window.bankData)
                    .draw(false);

            }


            /* Close modal */

            const modalElement =
                document.getElementById('statusModal');


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


            if (modal) {

                modal.hide();

            }


            selectedBank = null;

        });


        /* =====================================================
           RESET
        ====================================================== */

        $(document).on(
            'hidden.bs.modal',
            '#statusModal',
            function () {

                selectedBank = null;

            }
        );

    });

</script>

<!-- =========================================================
     POLICY STATUS MODAL
========================================================= -->

<div class="modal fade" id="policyStatusModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content policy-status-modal">
            <!-- HEADER -->
            <div class="modal-header">
                <h5 class="modal-title">
                    Change Policy Status
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                </button>
            </div>
            <!-- BODY -->
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">
                        Policy Name
                    </label>
                    <input type="text" id="modalPolicyName" class="form-control" readonly>
                </div>


                <div>
                    <label class="form-label">
                        Status
                    </label>
                    <select id="modalPolicyStatus" class="form-select">
                        <option value="1">
                            Active
                        </option>
                        <option value="0">
                            Inactive
                        </option>
                    </select>
                </div>
            </div>
            <!-- FOOTER -->
            <div class="modal-footer">
                <button type="button" class="btn status-cancel-btn" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" id="updatePolicyStatusBtn" class="btn status-update-btn">
                    Update Status
                </button>
            </div>
        </div>
    </div>
</div>


<style>
    /* =========================================================
   MODAL
========================================================= */

    .policy-status-modal {

        background: #19212c !important;

        border: 1px solid rgba(218, 184, 91, 0.35) !important;

        border-radius: 14px !important;

        color: #e8eaf0 !important;

    }


    /* HEADER */

    .policy-status-modal .modal-header {

        background: #252b31 !important;

        border-bottom: 1px solid #62583b !important;

    }


    .policy-status-modal .modal-title {

        color: #f0d37b !important;

        font-weight: 700;

    }


    /* BODY */

    .policy-status-modal .modal-body {

        background: #19212c !important;

    }


    .policy-status-modal .form-label {

        color: #d8dce3 !important;

        font-size: 13px;

        font-weight: 600;

    }


    .policy-status-modal .form-control,
    .policy-status-modal .form-select {

        background: #111820 !important;

        color: #e8eaf0 !important;

        border: 1px solid rgba(218, 184, 91, 0.25) !important;

        border-radius: 8px !important;

    }


    .policy-status-modal .form-control:focus,
    .policy-status-modal .form-select:focus {

        border-color: #f0d37b !important;

        box-shadow: 0 0 0 0.15rem rgba(240, 211, 123, 0.12) !important;

    }


    /* FOOTER */

    .policy-status-modal .modal-footer {

        background: #19212c !important;

        border-top: 1px solid #3d4245 !important;

    }


    /* =========================================================
   CANCEL BUTTON
========================================================= */

    .status-cancel-btn {

        min-width: 100px;

        background: #252b31 !important;

        border: 1px solid #4b5158 !important;

        color: #d5d9df !important;

        border-radius: 8px !important;

        font-size: 13px;

        font-weight: 600;

    }


    .status-cancel-btn:hover {

        background: #303841 !important;

        border-color: #626a73 !important;

        color: #ffffff !important;

    }


    /* =========================================================
   UPDATE BUTTON
========================================================= */

    .status-update-btn {

        min-width: 120px;

        background: #f0cc68 !important;

        border: 1px solid #f0cc68 !important;

        color: #19212c !important;

        border-radius: 8px !important;

        font-size: 13px;

        font-weight: 600;

    }


    .status-update-btn:hover {

        background: #f5d77e !important;

        border-color: #f5d77e !important;

        color: #19212c !important;

        box-shadow: 0 4px 12px rgba(240, 204, 104, 0.18);

    }


    /* =========================================================
   JAVASCRIPT
========================================================= */
</style>


<script>

    let selectedPolicy = null;


    /* =========================================================
       OPEN MODAL
    ========================================================= */

    $(document).on(
        'click',
        '#policyTable .status-badge',
        function () {

            selectedPolicy = $(this);


            const policyName =
                $(this).attr('data-policy');


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


            $('#modalPolicyName')
                .val(policyName);


            $('#modalPolicyStatus')
                .val(currentStatus);


            const modalElement =
                document.getElementById(
                    'policyStatusModal'
                );


            if (!modalElement) {

                return;

            }


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


            modal.show();

        }
    );


    /* =========================================================
       UPDATE STATUS
    ========================================================= */

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


            if (!selectedPolicy) {

                return;

            }


            const policyName =
                $('#modalPolicyName').val();


            const newStatus =
                $('#modalPolicyStatus').val();


            /* =====================================================
               UPDATE GLOBAL POLICY DATA
            ===================================================== */

            if (Array.isArray(window.policyData)) {

                window.policyData.forEach(function (policy) {

                    if (policy.policyname === policyName) {

                        policy.status = newStatus;

                    }

                });

            }


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

            if (window.policyTable) {

                window.policyTable
                    .clear()
                    .rows
                    .add(window.policyData)
                    .draw(false);

            }


            /* =====================================================
               CLOSE MODAL
            ===================================================== */

            const modalElement =
                document.getElementById(
                    'policyStatusModal'
                );


            if (modalElement) {

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


                if (modal) {

                    modal.hide();

                }

            }


            selectedPolicy = null;

        }
    );


    /* =========================================================
       CLEAR SELECTED POLICY
    ========================================================= */

    $(document).on(
        'hidden.bs.modal',
        '#policyStatusModal',
        function () {

            selectedPolicy = null;

        }
    );

</script>


<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logoutModalTitle">
                    <i class="ti ti-logout me-2" style="color:var(--gold-soft);"></i>
                    Confirm Logout
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="ti ti-door-exit mb-3 d-block" style="font-size:2.5rem;color:var(--gold-soft);"></i>
                <p class="mb-0 text-muted">Are you sure you want to logout?</p>
            </div>
            <div class="modal-footer justify-content-center gap-2">
                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                <a href="{{route('login')}}" class="btn btn-sm btn-danger">Logout</a>
            </div>
        </div>
    </div>
</div>