@extends('Admin.layout')
<style>
    #submitPayment {
        background-color: #28a745;
        border-color: #28a745;
        color: #fff;
    }

    #submitPayment:hover {
        background-color: #218838;
        border-color: #218838;
    }
</style>

@section('content')
    <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">
            <!-- Header -->
            <div class="d-flex align-items-center gap-2 mb-4">
                <a href="{{ route('ga_cases') }}" class="btn btn-icon btn-outline-primary">
                    <i class="ti ti-arrow-left"></i>
                </a>
                <h5 class="mb-0 fw-bold text-primary">Dues</h5>
            </div>
        </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>DUE DATE</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"
                        aria-label="Close"></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 for="payment_amount" 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" style="display:none;"></div>
                    </div>

                    {{-- PAYMENT MODE --}}
                    <div class="mb-3">
                        <label for="payment_mode" 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 for="payment_datetime" class="form-label">
                            Payment Date &amp; Time
                        </label>

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

                    {{-- BANK DETAILS --}}
                    <div id="bankReceiverSection" class="receiver-section" style="display:none;">
                        <div class="row g-3 mb-3">

                            <div class="col-md-6">
                                <label for="receiver_bank_name" 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 for="receiver_account_number" 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" style="display:none;">
                        <div class="mb-3">
                            <label for="receiver_upi_id" 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" style="display:none;">
                        <div class="mb-3">
                            <label for="transaction_id" 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 for="payment_remarks" 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" style="display:none;"></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,
                autoWidth: false,
                scrollX: true,
                dom: 'rtip',

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

                    data: function(d) {
                        d.ga_customer_id = @json($gaCustomer->id);
                        d.type = "interest";
                    },

                    error: function(xhr) {
                        console.error('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 $('<div>').text(data).html();
                        }
                    },
                    {
                        data: 'due_date',
                        name: 'due_date',
                        defaultContent: '-',
                        render: function(data) {
                            if (!data) return '-';

                            let date = new Date(data);

                            if (isNaN(date.getTime())) {
                                return $('<div>').text(data).html();
                            }

                            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: '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 $('<div>').text(data).html();
                            }

                            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 ? $('<div>').text(data).html() : '-';
                        }
                    },
                    {
                        data: 'transaction_id',
                        name: 'transaction_id',
                        defaultContent: '-',
                        render: function(data) {
                            return data ? $('<div>').text(data).html() : '-';
                        }
                    },
                    {
                        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 $('<div>').text(data).html();
                        }
                    },
                    {
                        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
            |--------------------------------------------------------------------------
            */

            function togglePaymentFields() {
                let mode = $('#payment_mode').val();

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

                if (mode === 'Bank Transfer') {
                    $('#bankReceiverSection').show();
                    $('#transactionSection').show();
                } else if (mode === 'UPI') {
                    $('#upiReceiverSection').show();
                    $('#transactionSection').show();
                }
            }

            $('#payment_mode').on('change', togglePaymentFields);


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

            $(document).on('click', '.pay-btn', function() {
                let dueId = $(this).data('id');

                $('#payment_due_id').val(dueId);
                $('#payment_amount').val('').removeData('max').removeAttr('max');
                $('#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('');

                togglePaymentFields();

                /*
                |--------------------------------------------------------------------------
                | 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}`
                );

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

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

                let payableUrl = "{{ route('get_due_for_payment', ['id' => '__ID__']) }}";
                payableUrl = payableUrl.replace('__ID__', encodeURIComponent(dueId));

                $.ajax({
                    url: payableUrl,
                    type: 'GET',

                    success: function(response) {
                        if (response.success && response.data) {
                            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)
                                .data('max', payable);
                        } else {
                            $('#payment_error')
                                .text(response.message || 'Unable to fetch payable amount.')
                                .show();

                            $('#payable_amount_display').text('Unavailable');
                        }
                    },

                    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();
                        $('#payable_amount_display').text('Unavailable');
                    }
                });

                $('#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().trim();
                let receiverAccountNumber = $('#receiver_account_number').val().trim();
                let receiverUpiId = $('#receiver_upi_id').val().trim();
                let transactionId = $('#transaction_id').val().trim();
                let remarks = $('#payment_remarks').val().trim();

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

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

                if (paidAmount <= 0) {
                    $('#payment_error').text('Please enter a valid payment amount.').show();
                    return;
                }

                if (max > 0 && paidAmount > max) {
                    $('#payment_error')
                        .text('Payment cannot be greater than ₹' + max.toFixed(2))
                        .show();
                    return;
                }

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

                if (!paymentMode) {
                    $('#payment_error').text('Please select payment mode.').show();
                    return;
                }

                /*
                |--------------------------------------------------------------------------
                | VALIDATE 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;
                    }
                }

                /*
                |--------------------------------------------------------------------------
                | PREVENT DUPLICATE SUBMISSION
                |--------------------------------------------------------------------------
                */

                let button = $('#submitPayment');

                if (button.prop('disabled')) {
                    return;
                }

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

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

                $.ajax({
                    url: "{{ route('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: 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: function(xhr) {
                        let message = 'Unable to process payment.';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }

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

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

        });
    </script>
@endsection