@extends('staff.layout')

@section('content')

<style>
    .bank-card {
        background: #19212c !important;
        border: 1px solid rgba(218, 184, 91, 0.35) !important;
        border-radius: 18px !important;
    }

    .bank-table-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #dueTable {
        width: 100% !important;
        min-width: 1450px !important;
        table-layout: auto !important;
        margin: 0 !important;
        background: transparent;
        border-collapse: collapse !important;
    }

    #dueTable th,
    #dueTable td {
        white-space: nowrap !important;
    }

    #dueTable thead th {
        background: #252b31 !important;
        color: #f0d37b !important;
        font-size: 14px;
        font-weight: 700;
        padding: 16px 12px !important;
        border-bottom: 1px solid #62583b !important;
        border-top: none !important;
        vertical-align: middle;
    }

    #dueTable tbody td {
        background: #19212c !important;
        color: #e8eaf0 !important;
        font-size: 14px;
        padding: 16px 12px !important;
        border-bottom: 1px solid #3d4245 !important;
        border-top: none !important;
        vertical-align: middle;
    }

    #dueTable tbody tr:hover td {
        background: #202a36 !important;
    }

    .btn-gold {
        background: #f0cc68 !important;
        color: #19212c !important;
        border: none !important;
        font-weight: 600;
    }

    .btn-gold:hover {
        background: #e0bc58 !important;
        color: #19212c !important;
    }

    .btn-outline-gold {
        border: 1px solid #f0cc68 !important;
        color: #f0cc68 !important;
        background: transparent !important;
    }

    .btn-outline-gold:hover,
    .btn-outline-gold.active {
        background: #f0cc68 !important;
        color: #19212c !important;
    }

    .bank-card .form-control,
    .bank-card .form-select {
        background-color: #252b31 !important;
        border: 1px solid #3d4245 !important;
        color: #e8eaf0 !important;
        border-radius: 8px !important;
        height: 38px;
    }

    .bank-card .form-control:focus,
    .bank-card .form-select:focus {
        border-color: #f0d37b !important;
        box-shadow: 0 0 0 0.25rem rgba(240, 211, 123, 0.25) !important;
    }

    .bank-card .form-control::placeholder {
        color: #7d8590 !important;
    }

    .dataTables_wrapper {
        padding: 0;
    }

    .dataTables_wrapper .dataTables_info {
        color: #93a1b8 !important;
        font-size: 13px;
        padding-top: 15px !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 12px !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #e8eaf0 !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        border-radius: 6px !important;
        margin-left: 3px;
        padding: 5px 12px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #252b31 !important;
        border-color: #62583b !important;
        color: #f0d37b !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #f0cc68 !important;
        border-color: #f0cc68 !important;
        color: #19212c !important;
        font-weight: 600;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        color: #666d77 !important;
    }

    .type-interest {
        background: rgba(240, 204, 104, 0.15) !important;
        color: #f0cc68 !important;
        border: 1px solid rgba(240, 204, 104, 0.35);
    }

    .type-principal {
        background: rgba(25, 135, 84, 0.15) !important;
        color: #63d39a !important;
        border: 1px solid rgba(25, 135, 84, 0.35);
    }

    .status-pending {
        background: rgba(240, 204, 104, 0.15) !important;
        color: #f0cc68 !important;
        border: 1px solid rgba(240, 204, 104, 0.35);
    }

    .status-partial {
        background: rgba(255, 159, 67, 0.15) !important;
        color: #ffb366 !important;
        border: 1px solid rgba(255, 159, 67, 0.35);
    }

    .status-paid {
        background: rgba(25, 135, 84, 0.15) !important;
        color: #63d39a !important;
        border: 1px solid rgba(25, 135, 84, 0.35);
    }

    .status-overdue {
        background: rgba(220, 53, 69, 0.15) !important;
        color: #ff7b87 !important;
        border: 1px solid rgba(220, 53, 69, 0.35);
    }

    .pay-modal .modal-content {
        background: #19212c !important;
        border: 1px solid rgba(218, 184, 91, 0.35) !important;
        border-radius: 16px !important;
        color: #fff;
    }

    .pay-modal .modal-header {
        border-bottom: 1px solid #3d4245 !important;
    }

    .pay-modal .modal-footer {
        border-top: 1px solid #3d4245 !important;
    }

    .pay-modal .form-label {
        color: #f0d37b !important;
        font-weight: 600;
    }

    .pay-modal .form-control,
    .pay-modal .form-select {
        background: #252b31 !important;
        border: 1px solid #3d4245 !important;
        color: #fff !important;
        border-radius: 8px !important;
    }

    .pay-modal .form-control:focus,
    .pay-modal .form-select:focus {
        border-color: #f0d37b !important;
        box-shadow: 0 0 0 0.25rem rgba(240, 211, 123, 0.20) !important;
    }

    .payable-box {
        background: #252b31;
        border: 1px solid rgba(240, 211, 123, 0.35);
        border-radius: 10px;
        padding: 15px;
    }

    .payable-label {
        color: #93a1b8;
        font-size: 13px;
    }

    .payable-value {
        color: #f0cc68;
        font-size: 24px;
        font-weight: 700;
    }

    .payment-error {
        display: none;
        color: #ff7b87;
        font-size: 13px;
        margin-top: 6px;
    }

    .payment-success {
        display: none;
        color: #63d39a;
        font-size: 13px;
        margin-top: 6px;
    }

    .receiver-section {
        display: none;
    }

    @media (max-width: 768px) {
        .bank-card {
            border-radius: 12px !important;
            padding: 1rem !important;
        }

        #dueTable {
            min-width: 1450px !important;
        }

        #dueTable thead th,
        #dueTable tbody td {
            font-size: 13px;
            padding: 12px 8px !important;
        }
    }
</style>

<div class="page-view">

    <!-- PAGE HEADER -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3">
        <div>
            <h3 class="mb-0 fw-bold text-white">
                Interest
            </h3>
        </div>
    </div>

    <!-- TABS -->
    <div class="d-flex align-items-center gap-2 mb-3">

        <a href="{{ route('staff_view_ga_case', $gaCustomer->id) }}"
           class="btn btn-sm btn-outline-gold d-inline-flex align-items-center">
            <i class="ti ti-diamond me-1"></i>
            GA Case
        </a>

        <a href="{{ route('staff_ga_dues', $gaCustomer->id) }}"
           class="btn btn-sm btn-gold active d-inline-flex align-items-center">
            <i class="ti ti-calendar-dollar me-1"></i>
            Interest
        </a>

    </div>

    <!-- PAYMENT TABLE -->
    <div class="card bank-card p-3 p-md-4">

        <div class="row g-3 align-items-center mb-4">

            <div class="col-12 col-lg-6">
                <h5 class="text-white mb-0">
                    Interest Payment History
                </h5>
            </div>

            <div class="col-12 col-lg-6">

                <div class="d-flex align-items-center justify-content-start justify-content-lg-end gap-2">

                    <select id="pageLength"
                            class="form-select form-select-sm"
                            style="width: 85px;">

                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>

                    </select>

                    <div class="flex-grow-1 flex-lg-grow-0"
                         style="min-width:200px; max-width:300px;">

                        <input type="search"
                               id="customSearch"
                               class="form-control form-control-sm w-100"
                               placeholder="Search payments...">

                    </div>

                </div>

            </div>

        </div>

        <div class="bank-table-wrapper">

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

                <thead>

                <tr>
    <th>SNO</th>
    <th>GA ID</th>
    <th>NAME</th>
    <th>MOBILE</th>
    <th>TYPE</th>
    <th>PRINCIPAL AMOUNT</th>
    <th>MONTHLY INTEREST</th>
    <th>DAY-BY-DAY INTEREST</th>
    <th>INTEREST PAID</th>
    <th>PAID DATE</th>
    <th>PAYMENT MODE</th>
    <th>TRANSACTION ID</th>
    <th>STATUS</th>
    <th>ACTION</th>
</tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>


<!-- ========================================================= -->
<!-- PAYMENT MODAL -->
<!-- ========================================================= -->

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

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

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title text-white">
                    <i class="ti ti-cash me-1"></i>
                    Pay Amount
                </h5>

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

            </div>

            <div class="modal-body">

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

                <!-- PAYABLE -->
                <div class="payable-box mb-3">

                    <div class="payable-label">
                        Current Payable Amount
                    </div>

                    <div class="payable-value"
                         id="payable_amount_display">
                        ₹0.00
                    </div>

                </div>


                <!-- PAYMENT AMOUNT -->
                <div class="mb-3">

                    <label class="form-label">
                        Enter Payment Amount
                    </label>

                    <input type="number"
                           id="payment_amount"
                           class="form-control"
                           min="0.01"
                           step="0.01"
                           placeholder="Enter amount">

                    <div id="payment_error"
                         class="payment-error"></div>

                </div>


                <!-- PAYMENT MODE -->
                <div class="mb-3">

                    <label class="form-label">
                        Payment Mode
                    </label>

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

                        <option value="">
                            Select Payment Mode
                        </option>

                        <option value="Cash">
                            Cash
                        </option>

                        <option value="Bank Transfer">
                            Bank Transfer
                        </option>

                        <option value="UPI">
                            UPI
                        </option>

                    </select>

                </div>


                <!-- PAYMENT DATETIME -->
                <div class="mb-3">

                    <label class="form-label">
                        Payment Date & Time
                    </label>

                    <input type="datetime-local"
                           id="payment_datetime"
                           class="form-control">

                </div>


                <!-- BANK DETAILS -->
                <div id="bankReceiverSection"
                     class="receiver-section">

                    <div class="row g-3 mb-3">

                        <div class="col-md-6">

                            <label class="form-label">
                                Receiver Bank Name
                            </label>

                            <input type="text"
                                   id="receiver_bank_name"
                                   class="form-control"
                                   placeholder="Enter receiver bank name">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Receiver Account Number
                            </label>

                            <input type="text"
                                   id="receiver_account_number"
                                   class="form-control"
                                   placeholder="Enter receiver account number">

                        </div>

                    </div>

                </div>


                <!-- UPI DETAILS -->
                <div id="upiReceiverSection"
                     class="receiver-section">

                    <div class="mb-3">

                        <label class="form-label">
                            Receiver UPI ID
                        </label>

                        <input type="text"
                               id="receiver_upi_id"
                               class="form-control"
                               placeholder="example@upi">

                    </div>

                </div>


                <!-- TRANSACTION -->
                <div id="transactionSection"
                     class="receiver-section">

                    <div class="mb-3">

                        <label class="form-label">
                            Transaction ID / Reference ID
                        </label>

                        <input type="text"
                               id="transaction_id"
                               class="form-control"
                               placeholder="Enter transaction/reference ID">

                    </div>

                </div>


                <!-- REMARKS -->
                <div class="mb-3">

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

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

                </div>


                <div id="payment_success"
                     class="payment-success"></div>

            </div>


            <div class="modal-footer">

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

                    Cancel

                </button>

                <button type="button"
                        class="btn btn-gold"
                        id="submitPayment">

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

                </button>

            </div>

        </div>

    </div>

</div>


<!-- DATATABLE -->
<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

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

    /*
    |--------------------------------------------------------------------------
    | DATATABLE
    |--------------------------------------------------------------------------
    */

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

        processing: true,
        serverSide: true,
        searching: true,
        ordering: true,

        pageLength: 10,
        lengthChange: false,

        dom: 'rtip',

        ajax: {

            url: "{{ route('staff_due_data') }}",
            type: "GET",

            data: function (d) {

                d.ga_customer_id =
                    "{{ $gaCustomer->id }}";

                d.type = "interest";
            },

            error: function (xhr) {

                console.log(
                    'Interest Error:',
                    xhr.responseText
                );

            }

        },


        columns: [

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

            {
                data: 'ga_id',
                name: 'ga_id',
                defaultContent: '-'
            },

            {
                data: 'user_name',
                name: 'user_name',
                defaultContent: '-'
            },

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

            {
                data: 'type',
                name: 'type',
                defaultContent: '-',

                render: function (data) {

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

                    let type =
                        String(data).toLowerCase();

                    if (type === 'interest') {

                        return `
                            <span class="badge type-interest">
                                Interest
                            </span>
                        `;
                    }

                    if (type === 'principal') {

                        return `
                            <span class="badge type-principal">
                                Principal
                            </span>
                        `;
                    }

                    return data;
                }
            },

            {
                data: 'loan_amount',
                name: 'loan_amount',
                defaultContent: 0,

                render: function (data) {

                    let amount =
                        Number(data) || 0;

                    return `
                        ₹${amount.toLocaleString('en-IN', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })}
                    `;
                }
            },

            {
                data: 'interest_due',
                name: 'interest_due',
                defaultContent: 0,

                render: function (data) {

                    let amount =
                        Number(data) || 0;

                    return `
                        <strong style="color:#f0cc68;">
                            ₹${amount.toLocaleString('en-IN', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })}
                        </strong>
                    `;
                }
            },
            {
    data: 'day_by_day_interest',
    name: 'day_by_day_interest',
    defaultContent: 0,

    render: function (data) {

        let amount = Number(data) || 0;

        return `
            <strong style="color:#ffffff;">
                ₹${amount.toLocaleString('en-IN', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                })}
            </strong>
        `;
    }
},

            {
                data: 'interest_paid',
                name: 'interest_paid',
                defaultContent: 0,

                render: function (data) {

                    let amount =
                        Number(data) || 0;

                    return `
                        ₹${amount.toLocaleString('en-IN', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })}
                    `;
                }
            },

            {
                data: 'paid_date',
                name: 'paid_date',
                defaultContent: '-',

                render: function (data) {

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

                    let date =
                        new Date(data);

                    if (isNaN(date.getTime())) {
                        return data;
                    }

                    let day =
                        String(date.getDate())
                            .padStart(2, '0');

                    let month =
                        String(date.getMonth() + 1)
                            .padStart(2, '0');

                    let year =
                        date.getFullYear();

                    return day + '/' + month + '/' + year;
                }
            },

            {
                data: 'payment_mode',
                name: 'payment_mode',
                defaultContent: '-',

                render: function (data) {

                    return data || '-';
                }
            },

            {
                data: 'transaction_id',
                name: 'transaction_id',
                defaultContent: '-',

                render: function (data) {

                    return data || '-';
                }
            },

            {
                data: 'status',
                name: 'status',
                defaultContent: 'Pending',

                render: function (data) {

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

                    let status =
                        String(data).toLowerCase();

                    if (status === 'pending') {

                        return `
                            <span class="badge status-pending">
                                Pending
                            </span>
                        `;
                    }

                    if (status === 'partially paid') {

                        return `
                            <span class="badge status-partial">
                                Partially Paid
                            </span>
                        `;
                    }

                    if (status === 'paid') {

                        return `
                            <span class="badge status-paid">
                                Paid
                            </span>
                        `;
                    }

                    if (status === 'overdue') {

                        return `
                            <span class="badge status-overdue">
                                Overdue
                            </span>
                        `;
                    }

                    return data;
                }
            },

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

        ],

        order: [
            [0, 'asc']
        ],

        language: {

            processing: 'Loading...',

            emptyTable:
                'No Interest available',

            zeroRecords:
                'No matching payment records found'
        }

    });


    /*
    |--------------------------------------------------------------------------
    | PAGE LENGTH
    |--------------------------------------------------------------------------
    */

    $('#pageLength').on('change', function () {

        table
            .page
            .len($(this).val())
            .draw();

    });


    /*
    |--------------------------------------------------------------------------
    | CUSTOM SEARCH
    |--------------------------------------------------------------------------
    */

    $('#customSearch').on(
        'keyup search input',
        function () {

            table
                .search($(this).val())
                .draw();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | PAYMENT MODE CHANGE
    |--------------------------------------------------------------------------
    */

    $('#payment_mode').on('change', function () {

        let mode = $(this).val();

        $('#bankReceiverSection').hide();
        $('#upiReceiverSection').hide();
        $('#transactionSection').hide();

        if (mode === 'Bank Transfer') {

            $('#bankReceiverSection').show();
            $('#transactionSection').show();

        }

        if (mode === 'UPI') {

            $('#upiReceiverSection').show();
            $('#transactionSection').show();

        }

    });


    /*
    |--------------------------------------------------------------------------
    | OPEN PAYMENT MODAL
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '.pay-btn',
        function () {

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

            /*
            |--------------------------------------------------------------------------
            | RESET
            |--------------------------------------------------------------------------
            */

            $('#payment_due_id')
                .val(dueId);

            $('#payment_amount')
                .val('');

            $('#payment_mode')
                .val('');

            $('#payment_remarks')
                .val('');

            $('#receiver_bank_name')
                .val('');

            $('#receiver_account_number')
                .val('');

            $('#receiver_upi_id')
                .val('');

            $('#transaction_id')
                .val('');

            $('#payment_error')
                .hide()
                .text('');

            $('#payment_success')
                .hide()
                .text('');

            $('#bankReceiverSection').hide();
            $('#upiReceiverSection').hide();
            $('#transactionSection').hide();

            /*
            |--------------------------------------------------------------------------
            | DEFAULT DATE TIME
            |--------------------------------------------------------------------------
            */

            let now = new Date();

            let year =
                now.getFullYear();

            let month =
                String(now.getMonth() + 1)
                    .padStart(2, '0');

            let day =
                String(now.getDate())
                    .padStart(2, '0');

            let hours =
                String(now.getHours())
                    .padStart(2, '0');

            let minutes =
                String(now.getMinutes())
                    .padStart(2, '0');

            $('#payment_datetime')
                .val(
                    `${year}-${month}-${day}T${hours}:${minutes}`
                );

            /*
            |--------------------------------------------------------------------------
            | LOADING
            |--------------------------------------------------------------------------
            */

            $('#payable_amount_display')
                .text('Loading...');


            /*
            |--------------------------------------------------------------------------
            | GET CURRENT PAYABLE
            |--------------------------------------------------------------------------
            */

            $.ajax({

                url:
                    "{{ route('staff_get_due_for_payment', ['id' => '__ID__']) }}"
                        .replace(
                            '__ID__',
                            dueId
                        ),

                type: 'GET',

                success: function (response) {

                    if (response.success) {

                        let payable =
                            parseFloat(
                                response.data
                                    .payable_amount
                            ) || 0;

                        $('#payable_amount_display')
                            .text(
                                '₹' +
                                payable.toLocaleString(
                                    'en-IN',
                                    {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 2
                                    }
                                )
                            );

                        $('#payment_amount')
                            .attr(
                                'max',
                                payable
                            );

                        $('#payment_amount')
                            .data(
                                'max',
                                payable
                            );

                    } else {

                        $('#payment_error')
                            .text(
                                response.message ||
                                'Unable to fetch payable amount.'
                            )
                            .show();

                    }

                },

                error: function (xhr) {

                    let message =
                        'Unable to fetch payable amount.';

                    if (
                        xhr.responseJSON &&
                        xhr.responseJSON.message
                    ) {

                        message =
                            xhr.responseJSON.message;
                    }

                    $('#payment_error')
                        .text(message)
                        .show();

                }

            });


            /*
            |--------------------------------------------------------------------------
            | OPEN MODAL
            |--------------------------------------------------------------------------
            */

            $('#payModal').modal('show');

        }
    );


    /*
    |--------------------------------------------------------------------------
    | PAYMENT AMOUNT VALIDATION
    |--------------------------------------------------------------------------
    */

    $('#payment_amount').on(
        'input',
        function () {

            let entered =
                parseFloat(
                    $(this).val()
                ) || 0;

            let max =
                parseFloat(
                    $(this).data('max')
                ) || 0;

            if (
                max > 0 &&
                entered > max
            ) {

                $('#payment_error')
                    .text(
                        'Payment cannot be greater than ₹' +
                        max.toFixed(2)
                    )
                    .show();

            } else {

                $('#payment_error')
                    .hide()
                    .text('');

            }

        }
    );


    /*
    |--------------------------------------------------------------------------
    | SUBMIT PAYMENT
    |--------------------------------------------------------------------------
    */

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

            let dueId =
                $('#payment_due_id').val();

            let paidAmount =
                parseFloat(
                    $('#payment_amount').val()
                ) || 0;

            let max =
                parseFloat(
                    $('#payment_amount').data('max')
                ) || 0;

            let paymentMode =
                $('#payment_mode').val();

            let paymentDatetime =
                $('#payment_datetime').val();

            let receiverBankName =
                $('#receiver_bank_name').val();

            let receiverAccountNumber =
                $('#receiver_account_number').val();

            let receiverUpiId =
                $('#receiver_upi_id').val();

            let transactionId =
                $('#transaction_id').val();

            let remarks =
                $('#payment_remarks').val();


            /*
            |--------------------------------------------------------------------------
            | VALIDATE AMOUNT
            |--------------------------------------------------------------------------
            */

            if (paidAmount <= 0) {

                $('#payment_error')
                    .text(
                        'Please enter a valid payment amount.'
                    )
                    .show();

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | PREVENT OVER PAYMENT
            |--------------------------------------------------------------------------
            */

            if (
                max > 0 &&
                paidAmount > max
            ) {

                $('#payment_error')
                    .text(
                        'Payment cannot be greater than ₹' +
                        max.toFixed(2)
                    )
                    .show();

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | PAYMENT MODE
            |--------------------------------------------------------------------------
            */

            if (!paymentMode) {

                $('#payment_error')
                    .text(
                        'Please select payment mode.'
                    )
                    .show();

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | DATETIME
            |--------------------------------------------------------------------------
            */

            if (!paymentDatetime) {

                $('#payment_error')
                    .text(
                        'Please select payment date and time.'
                    )
                    .show();

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | BANK VALIDATION
            |--------------------------------------------------------------------------
            */

            if (paymentMode === 'Bank Transfer') {

                if (!receiverBankName) {

                    $('#payment_error')
                        .text(
                            'Please enter receiver bank name.'
                        )
                        .show();

                    return;
                }

                if (!receiverAccountNumber) {

                    $('#payment_error')
                        .text(
                            'Please enter receiver account number.'
                        )
                        .show();

                    return;
                }

                if (!transactionId) {

                    $('#payment_error')
                        .text(
                            'Please enter transaction ID.'
                        )
                        .show();

                    return;
                }
            }


            /*
            |--------------------------------------------------------------------------
            | UPI VALIDATION
            |--------------------------------------------------------------------------
            */

            if (paymentMode === 'UPI') {

                if (!receiverUpiId) {

                    $('#payment_error')
                        .text(
                            'Please enter receiver UPI ID.'
                        )
                        .show();

                    return;
                }

                if (!transactionId) {

                    $('#payment_error')
                        .text(
                            'Please enter transaction ID.'
                        )
                        .show();

                    return;
                }
            }


            /*
            |--------------------------------------------------------------------------
            | DISABLE BUTTON
            |--------------------------------------------------------------------------
            */

            let button =
                $('#submitPayment');

            button
                .prop('disabled', true)
                .html(
                    '<i class="ti ti-loader me-1"></i> Processing...'
                );


            /*
            |--------------------------------------------------------------------------
            | SEND PAYMENT
            |--------------------------------------------------------------------------
            */

            $.ajax({

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

                type: 'POST',

                data: {

                    _token:
                        "{{ csrf_token() }}",

                    due_id:
                        dueId,

                    payment_type:
                        'interest',

                    payment_amount:
                        paidAmount,

                    payment_mode:
                        paymentMode,

                    receiver_bank_name:
                        receiverBankName,

                    receiver_account_number:
                        receiverAccountNumber,

                    receiver_upi_id:
                        receiverUpiId,

                    transaction_id:
                        transactionId,

                    payment_datetime:
                        paymentDatetime,

                    remarks:
                        remarks
                },


                /*
                |--------------------------------------------------------------------------
                | SUCCESS
                |--------------------------------------------------------------------------
                */

                success: function (response) {

                    if (response.success) {

                        $('#payment_success')
                            .text(
                                response.message ||
                                'Payment recorded successfully.'
                            )
                            .show();

                        setTimeout(
                            function () {

                                $('#payModal')
                                    .modal('hide');

                                table
                                    .ajax
                                    .reload(
                                        null,
                                        false
                                    );

                            },
                            700
                        );

                    } else {

                        $('#payment_error')
                            .text(
                                response.message ||
                                'Payment failed.'
                            )
                            .show();

                    }

                },


                /*
                |--------------------------------------------------------------------------
                | ERROR
                |--------------------------------------------------------------------------
                */

                error: function (xhr) {

                    let message =
                        'Unable to process payment.';

                    if (
                        xhr.responseJSON
                    ) {

                        if (
                            xhr.responseJSON.message
                        ) {

                            message =
                                xhr.responseJSON.message;
                        }
                    }

                    $('#payment_error')
                        .text(message)
                        .show();

                },


                /*
                |--------------------------------------------------------------------------
                | COMPLETE
                |--------------------------------------------------------------------------
                */

                complete: function () {

                    button
                        .prop(
                            'disabled',
                            false
                        )
                        .html(
                            '<i class="ti ti-check me-1"></i> Pay Amount'
                        );
                }

            });

        }
    );

});

</script>

@endsection