@extends('staff.layout')
@section('content')
    <style>
        .gt-page {
            max-width: 100%;
        }

        .gt-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 24px;
        }

        .gt-header a {
            color: #3f9cff !important;
            text-decoration: none;
            font-size: 20px;
        }

        .gt-header h5 {
            color: #5ba8ff !important;
            font-weight: 700;
            margin: 0;
        }

        .gt-card {
            background: rgba(4, 20, 42, 0.72) !important;
            border: 3px solid rgba(255, 255, 255, 0.18) !important;
            border-radius: 12px !important;
            padding: 25px !important;
        }

        .gt-title {
            color: #5ba8ff !important;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 22px;
        }

        .kv-row {
            display: grid;
            grid-template-columns: 36% 10px 1fr;
            align-items: center;
            padding: 9px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .kv-row:last-child {
            border-bottom: none;
        }

        .kv-key {
            color: #aebbd0;
            font-size: 14px;
            font-weight: 600;
        }

        .kv-sep {
            color: #ffffff;
            font-weight: 700;
        }

        .kv-val {
            color: #ffffff;
            font-size: 14px;
            font-weight: 700;
        }

        .section-title {
            color: #5ba8ff;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .gt-success {
            background: rgba(74, 222, 128, 0.10);
            border: 1px solid rgba(74, 222, 128, 0.45);
            color: #4ade80;
            border-radius: 8px;
        }

        .accent-success {
            border-left: 3px solid var(--success) !important;
        }

        .accent-warning {
            border-left: 3px solid var(--warning) !important;
        }

        .accent-danger {
            border-left: 3px solid var(--danger) !important;
        }

        .accent-primary {
            border-left: 3px solid var(--primary) !important;
        }

        .stat-card {
            background: rgba(10, 22, 40, .5);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 16px;
            position: relative;
            height: 100%;
        }

        .table-dark-custom {
            background: rgba(4, 20, 42, 0.72);
            color: #fff;
            border-radius: 8px;
            overflow: hidden;
        }

        .table-dark-custom th {
            background: rgba(10, 22, 40, 0.9);
            color: #5ba8ff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .table-dark-custom td {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: #aebbd0;
        }

        .table-scrollable-container {
            max-height: 280px;
            /* Limits height to roughly 5 table rows */
            overflow-y: auto;
        }

        .table-scrollable-container table {
            border-collapse: separate;
            border-spacing: 0;
        }

        .table-scrollable-container thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #0a1628 !important;
            /* Matches table header background */
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
        }
    </style>

    @php
        $totalPrincipalVal = round(
            (float) ($goldTransfer->total_principal > 0
                ? $goldTransfer->total_principal
                : $goldTransfer->per_gram ?? 0),
        );
        $paidPrincipalVal = round((float) ($goldTransfer->paid_principal ?? 0));
        $remainingPrincipalVal = round(
            (float) ($goldTransfer->remaining_principal > 0
                ? $goldTransfer->remaining_principal
                : $totalPrincipalVal - $paidPrincipalVal),
        );
        $outstandingInterestVal = round((float) ($totalInterest ?? 0));
    @endphp

    <div class="page-view gt-page">
        {{-- HEADER --}}
        <div class="gt-header">
            <a href="{{ route('complete_gt_staff') }}" class="btn btn-outline-primary">
                <i class="ti ti-arrow-left"></i>
            </a>
            <h5>Gold Transfer Details</h5>
            <button type="button" class="btn btn-primary ms-auto" data-bs-toggle="modal" data-bs-target="#updateGtModal">
                Update GT
            </button>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- TOP SUMMARY CARDS SECTION -->
        <div class="row g-3 mb-4">
            <!-- Card 1: Principal Breakdown -->
            <div class="col-lg-6 col-md-6 col-12">
                <div class="stat-card accent-primary d-flex flex-column justify-content-between">
                    <div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="text-muted fw-semibold">Remaining Principal Amount</span>
                            <span class="badge bg-primary">Loan</span>
                        </div>
                        <h3 class="mb-2 text-primary fw-bold">
                            ₹ {{ number_format($remainingPrincipalVal) }}
                        </h3>
                        <div class="d-flex justify-content-between mt-2 text-muted" style="font-size: .85rem;">
                            <span>Total Principal: <strong class="text-white">₹
                                    {{ number_format($totalPrincipalVal) }}</strong></span>
                            <span>Paid Principal: <strong class="text-success">₹
                                    {{ number_format($paidPrincipalVal) }}</strong></span>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                            data-bs-target="#payPrincipalModal">
                            <i class="ti ti-wallet me-1"></i> Pay Principal / Dues
                        </button>
                    </div>
                </div>
            </div>

            <!-- Card 2: Interest Details -->
            <div class="col-lg-6 col-md-6 col-12">
                <div class="stat-card accent-danger d-flex flex-column justify-content-between">
                    <div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="text-muted fw-semibold">Daily Interest Cycle</span>
                            <span class="badge bg-danger">{{ ucfirst($goldTransfer->transfer_type) }}</span>
                        </div>
                        <h3 class="mb-1 text-danger fw-bold">
                            ₹ {{ number_format(round($dailyInterest)) }} <small class="fs-6 text-muted">/ day</small>
                        </h3>
                        <div class="d-flex justify-content-between mt-2 text-muted" style="font-size:.85rem;">
                            <span>Rate per 1 Lakh: <strong class="text-white">₹
                                    {{ number_format(round($ratePerLakh)) }}</strong></span>
                            <span>Days Elapsed: <strong class="text-white">{{ $daysElapsed }}</strong></span>
                        </div>
                        <div class="mt-2 text-muted" style="font-size:.85rem;">
                            Outstanding Interest Due: <strong class="text-warning">₹
                                {{ number_format($outstandingInterestVal) }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="card gt-card mb-4">
            <h5 class="gt-title mb-3">Payment & Dues History</h5>
            <div class="table-responsive table-scrollable-container">
                <table class="table table-dark-custom align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Date & Time</th>
                            <th>Total Paid</th>
                            <th>Interest Paid</th>
                            <th>Principal Paid</th>
                            <th>Mode</th>
                            <th>Txn ID / Details</th>
                            <th>Remarks</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($duesHistory as $history)
                            <tr>
                                <td>{{ \Carbon\Carbon::parse($history->payment_datetime)->format('d M Y, h:i A') }}</td>
                                <td class="fw-bold text-white">₹ {{ number_format(round($history->total_payment_amount)) }}
                                </td>
                                <td class="text-warning">₹ {{ number_format(round($history->paid_interest)) }}</td>
                                <td class="text-success">₹ {{ number_format(round($history->paid_principal)) }}</td>
                                <td><span class="badge bg-label-info">{{ $history->payment_mode }}</span></td>
                                <td>
                                    {{ $history->transaction_id ?? '-' }}
                                    @if ($history->payment_mode === 'Bank Transfer')
                                        <br><small class="text-muted">{{ $history->receiver_bank_name }}
                                            ({{ $history->receiver_account_number }})
                                        </small>
                                    @elseif($history->payment_mode === 'UPI')
                                        <br><small class="text-muted">{{ $history->receiver_upi_id }}</small>
                                    @endif
                                </td>
                                <td>{{ $history->remarks ?? '-' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-3 text-muted">No payment history found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- REVIEW CARD --}}
      <div class="card gt-card">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="gt-title mb-0">Review Summary</h5>
    </div>
    
    <div class="kv-row">
        <span class="kv-key">Transfer Type</span>
        <span class="kv-sep">:</span>
        <span class="kv-val">{{ ucfirst($goldTransfer->transfer_type ?? '-') }}</span>
    </div>
    <div class="kv-row">
        <span class="kv-key">Gross Gram</span>
        <span class="kv-sep">:</span>
        <span class="kv-val">{{ number_format((float) ($goldTransfer->gross_gram ?? 0), 3) }} g</span>
    </div>
    <div class="kv-row">
        <span class="kv-key">Reduced Gram</span>
        <span class="kv-sep">:</span>
        <span class="kv-val">{{ number_format((float) ($goldTransfer->reduced_gram ?? 0), 3) }} g</span>
    </div>
    <div class="kv-row">
        <span class="kv-key">Net Gram</span>
        <span class="kv-sep">:</span>
        <span class="kv-val">{{ number_format((float) ($goldTransfer->net_gram ?? 0), 3) }} g</span>
    </div>
    <div class="kv-row">
        <span class="kv-key">Amount</span>
        <span class="kv-sep">:</span>
        <span class="kv-val">₹ {{ number_format(round((float) ($goldTransfer->per_gram ?? 0))) }}</span>
    </div>
    <div class="kv-row align-items-center">
    <span class="kv-key">Receipt</span>
    <span class="kv-sep">:</span>
    <span class="kv-val">
        @if(!empty($goldTransfer->recipt))
            <button type="button" 
                    class="btn btn-sm btn-outline-primary py-0 px-2" 
                    data-bs-toggle="modal" 
                    data-bs-target="#receiptPreviewModal"
                    title="View Receipt">
                <i class="ti ti-eye"></i> View
            </button>
        @else
            <span class="text-muted">N/A</span>
        @endif
    </span>
</div>

    @if ($goldTransfer->transfer_type === 'customer')
        <div class="mt-4 mb-2">
            <h6 class="section-title">Customer Details</h6>
        </div>
        <div class="kv-row">
            <span class="kv-key">Customer Name</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->customer_name ?? '-' }}</span>
        </div>
        <div class="kv-row">
            <span class="kv-key">Place</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->customer_place ?? '-' }}</span>
        </div>
        <div class="kv-row">
            <span class="kv-key">Phone</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->customer_phone ?? '-' }}</span>
        </div>
    @endif

    @if ($goldTransfer->transfer_type === 'bank')
        <div class="mt-4 mb-2">
            <h6 class="section-title">Bank Details</h6>
        </div>
        <div class="kv-row">
            <span class="kv-key">Bank Name</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->bank_name ?? '-' }}</span>
        </div>
        <div class="kv-row">
            <span class="kv-key">Branch</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->bank_branch ?? '-' }}</span>
        </div>
        <div class="kv-row">
            <span class="kv-key">Agent</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->bank_agent ?? '-' }}</span>
        </div>
        <div class="kv-row">
            <span class="kv-key">Phone</span><span class="kv-sep">:</span>
            <span class="kv-val">{{ $goldTransfer->bank_phone ?? '-' }}</span>
        </div>
    @endif

</div> {{-- CLOSE CARD GT-CARD --}}

@if(!empty($goldTransfer->recipt))
<div class="modal fade" id="receiptPreviewModal" tabindex="-1" aria-labelledby="receiptPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title" id="receiptPreviewModalLabel">Receipt Preview</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center p-2">
                <img src="{{ asset('storage/' . $goldTransfer->recipt) }}" 
                     alt="Receipt Image" 
                     class="img-fluid rounded" 
                     style="max-height: 80vh; object-fit: contain;">
            </div>
        </div>
    </div>
</div>
@endif

    <!-- MODAL FOR PAY PRINCIPAL ACTION -->
    <div class="modal fade" id="payPrincipalModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content"
                style="background-color:#0a1628; border:1px solid rgba(255,255,255,0.18); border-radius:14px;">
                <div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,0.08);">
                    <h5 class="modal-title text-primary fw-bold">Pay Loan Amount</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form action="{{ route('gt_payPrincipal_staff') }}" method="POST" id="principalPaymentForm">
                    @csrf
                    <input type="hidden" name="id" value="{{ $goldTransfer->id }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-white">Remaining Principal</label>
                            <input type="text" class="form-control bg-dark text-white"
                                value="₹ {{ number_format($remainingPrincipalVal) }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-white">Outstanding Interest Due</label>
                            <input type="text" id="outstandingInterestDisplay" class="form-control bg-dark text-white"
                                value="₹ {{ number_format($outstandingInterestVal) }}" readonly>
                        </div>

                        @if ($outstandingInterestVal > 0)
                            <div class="alert alert-warning py-2 mb-3">
                                <i class="ti ti-info-circle me-1"></i><strong>Interest will be cleared first.</strong><br>
                                <small>Minimum payment required:
                                    <strong>₹ {{ number_format($outstandingInterestVal) }}</strong></small><br>
                                <small>Any amount paid above the interest due will automatically reduce the
                                    principal.</small>
                            </div>
                        @else
                            <div class="alert alert-success py-2 mb-3">
                                <i class="ti ti-check-circle me-1"></i>No outstanding interest is due as of today. Your
                                payment will reduce the principal.
                            </div>
                        @endif

                        <div class="mb-3">
                            <label class="form-label fw-semibold text-white">Total Amount to Pay</label>
                            <input type="number" name="payment_amount" id="principalPaymentAmount" class="form-control"
                                step="1" min="1" placeholder="Enter total payment amount" required>

                            <!-- Extended Payment Breakdown Box -->
                            <div id="paymentBreakdown" class="mt-2 d-none">
                                <div class="p-2.5 rounded"
                                    style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);">
                                    <div class="p-1 d-flex justify-content-between text-white">
                                        <span>Interest Payment</span>
                                        <strong id="breakdownInterest" class="text-warning">₹ 0</strong>
                                    </div>
                                    <div class=" p-1 d-flex justify-content-between text-white mt-1">
                                        <span>Principal Payment</span>
                                        <strong id="breakdownPrincipal" class="text-success">₹ 0</strong>
                                    </div>
                                    <hr style="border-color: rgba(255,255,255,0.1); margin: 6px 0;">
                                    <!-- New Column 1: Remaining Principal Balance After Payment -->
                                    <div class="p-1 d-flex justify-content-between text-white">
                                        <span>Remaining Principal After Payment</span>
                                        <strong id="breakdownNewRemaining" class="text-info">₹
                                            {{ number_format($remainingPrincipalVal) }}</strong>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold text-white">Payment Mode</label>
                            <select name="payment_mode" id="paymentMode" class="form-select" required>
                                <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>

                        <div id="bankTransferFields" class="d-none">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold text-white">Receiver Bank Name</label>
                                    <input type="text" name="receiver_bank_name" id="receiverBankName"
                                        class="form-control" placeholder="Enter bank name">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold text-white">Receiver Account Number</label>
                                    <input type="text" name="receiver_account_number" id="receiverAccountNumber"
                                        class="form-control" placeholder="Enter account number">
                                </div>
                            </div>
                        </div>

                        <div id="upiFields" class="d-none">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-white">Receiver UPI ID</label>
                                <input type="text" name="receiver_upi_id" id="receiverUpiId" class="form-control"
                                    placeholder="example@upi">
                            </div>
                        </div>

                        <div id="transactionIdField" class="mb-3 d-none">
                            <label class="form-label fw-semibold text-white">Transaction ID</label>
                            <input type="text" name="transaction_id" id="transactionId" class="form-control"
                                placeholder="Enter transaction ID">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold text-white">Payment Date & Time</label>
                            <input type="datetime-local" name="payment_datetime" class="form-control"
                                value="{{ now()->format('Y-m-d\TH:i') }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold text-white">Remarks</label>
                            <textarea name="remarks" class="form-control" rows="3" placeholder="Optional remarks"></textarea>
                        </div>
                    </div>

                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-25">
                        <div class="d-flex align-items-center  p-3 rounded-3"
                            style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);">

                            <div class="d-flex align-items-center gap-2 me-2">
                                <i class="ti ti-shield-check text-primary fs-5"></i>
                                <span class="fw-semibold text-white mb-0" style="font-size: 0.95rem;">Status</span>
                            </div>

                            @php
                                $status = strtolower($goldTransfer->gt_status ?? 'pending');
                                $badgeClass = match ($status) {
                                    'paid', 'completed' => 'bg-success text-white',

                                    default => 'bg-warning text-dark',
                                };
                            @endphp

                            <span id="modalTransferStatusBadge"
                                class="badge {{ $badgeClass }} px-3 py-2 text-uppercase fw-bold"
                                style="letter-spacing: 0.5px;">
                                {{ $status }}
                            </span>
                        </div>
                    </div>



                   @php
    $isCompleted = ($goldTransfer->gt_status === 'completed') || (($goldTransfer->remaining_principal ?? 1) <= 0);
@endphp

<div class="modal-footer" style="border-top:1px solid rgba(255,255,255,0.08);">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
    
    <button type="submit" 
            class="btn btn-primary" 
            id="submitPaymentBtn" 
            {{ $isCompleted ? 'disabled' : '' }}>
        <span id="submitPaymentText">
            {{ $isCompleted ? 'Fully Paid' : 'Submit Payment' }}
        </span>
        <span id="submitPaymentLoader" 
              class="spinner-border spinner-border-sm d-none" 
              role="status" 
              aria-hidden="true"></span>
    </button>
</div>
                </form>
            </div>
        </div>
    </div>

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

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

            <div class="modal-content"
                style="
                                                                background:#19212c;
                                                                border:1px solid rgba(91,168,255,0.35);
                                                                border-radius:12px;
                                                             ">

                <div class="modal-header border-0">

                    <h5 class="modal-title" style="color:#5ba8ff; font-weight:700;">
                        Update Gold Transfer
                    </h5>

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

                </div>


                <form action="#" method="POST">

                    @csrf


                    <div class="modal-body">

                        <div class="d-flex gap-3">

                            {{-- CLOSE GT --}}

                            <label class="flex-fill"
                                style="
                                                                                   background:#101722;
                                                                                   border:1px solid rgba(255,255,255,0.15);
                                                                                   border-radius:8px;
                                                                                   padding:12px;
                                                                                   cursor:pointer;
                                                                                   color:#fff;
                                                                               ">

                                <input type="radio" name="gt_action" value="close_gt" class="form-check-input me-2"
                                    required>

                                Close GT

                            </label>


                            {{-- CONVERT TO GA --}}

                            <label class="flex-fill"
                                style="
                                                                                   background:#101722;
                                                                                   border:1px solid rgba(255,255,255,0.15);
                                                                                   border-radius:8px;
                                                                                   padding:12px;
                                                                                   cursor:pointer;
                                                                                   color:#fff;
                                                                               ">

                                <input type="radio" name="gt_action" value="convert_to_ga"
                                    class="form-check-input me-2" required>

                                Convert to GA

                            </label>


                            {{-- PURCHASE GT --}}

                            <label class="flex-fill"
                                style="
                                                                                   background:#101722;
                                                                                   border:1px solid rgba(255,255,255,0.15);
                                                                                   border-radius:8px;
                                                                                   padding:12px;
                                                                                   cursor:pointer;
                                                                                   color:#fff;
                                                                               ">

                                <input type="radio" name="gt_action" value="purchase_gt" class="form-check-input me-2"
                                    required>

                                Purchase GT

                            </label>

                        </div>

                    </div>


                    <div class="modal-footer border-0">

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


                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <script>
        const interestDue = {{ $outstandingInterestVal }};

        document.getElementById('paymentMode').addEventListener('change', function() {
            const mode = this.value;
            document.getElementById('bankTransferFields').classList.toggle('d-none', mode !== 'Bank Transfer');
            document.getElementById('upiFields').classList.toggle('d-none', mode !== 'UPI');
            document.getElementById('transactionIdField').classList.toggle('d-none', mode === 'Cash' || mode ===
                '');
        });

        document.getElementById('principalPaymentAmount').addEventListener('input', function() {
            const amount = Math.round(parseFloat(this.value) || 0);
            const interestPart = Math.min(amount, interestDue);
            const principalPart = Math.max(0, amount - interestDue);

            document.getElementById('breakdownInterest').textContent = '₹ ' + Math.round(interestPart)
                .toLocaleString('en-IN');
            document.getElementById('breakdownPrincipal').textContent = '₹ ' + Math.round(principalPart)
                .toLocaleString('en-IN');
            document.getElementById('paymentBreakdown').classList.toggle('d-none', amount <= 0);
        });

        document.getElementById('principalPaymentForm').addEventListener('submit', function() {
            document.getElementById('submitPaymentBtn').disabled = true;
            document.getElementById('submitPaymentText').textContent = 'Processing...';
            document.getElementById('submitPaymentLoader').classList.remove('d-none');
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const paymentInput = document.getElementById('principalPaymentAmount');
            const breakdownBox = document.getElementById('paymentBreakdown');

            const interestElem = document.getElementById('breakdownInterest');
            const principalElem = document.getElementById('breakdownPrincipal');
            const newRemainingElem = document.getElementById('breakdownNewRemaining');
            const statusElem = document.getElementById('breakdownStatus');

            // Values passed from Laravel
            const outstandingInterest = {{ (float) ($outstandingInterestVal ?? 0) }};
            const currentRemainingPrincipal = {{ (float) ($remainingPrincipalVal ?? 0) }};
            const currentStatus = "{{ strtolower($goldTransfer->gt_status ?? 'pending') }}";

            if (paymentInput) {
                paymentInput.addEventListener('input', function() {
                    const amount = parseFloat(this.value) || 0;

                    if (amount > 0) {
                        breakdownBox.classList.remove('d-none');

                        // 1. Interest & Principal Split
                        const paidInterest = Math.min(amount, outstandingInterest);
                        const paidPrincipal = Math.max(0, amount - paidInterest);

                        // 2. New Remaining Principal
                        const newRemaining = Math.max(0, currentRemainingPrincipal - paidPrincipal);

                        // Update text displays
                        interestElem.textContent = '₹ ' + Math.round(paidInterest).toLocaleString();
                        principalElem.textContent = '₹ ' + Math.round(paidPrincipal).toLocaleString();
                        newRemainingElem.textContent = '₹ ' + Math.round(newRemaining).toLocaleString();

                        // 3. Update Status dynamically
                        if (newRemaining <= 0) {
                            statusElem.textContent = 'paid';
                            statusElem.className = 'badge bg-label-success text-capitalize';
                        } else {
                            statusElem.textContent = currentStatus;
                            statusElem.className = 'badge bg-label-warning text-capitalize';
                        }
                    } else {
                        breakdownBox.classList.add('d-none');
                    }
                });
            }
        });
    </script>
@endsection