@include('admin.layouts.header')
@include('admin.layouts.sidebar')

<style>
    .rps-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        color: #3d3d3d;
    }
    .rps-table thead tr {
        background-color: #f0f1f5;
    }
    .rps-table thead th {
        padding: 9px 8px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        color: #555;
        border-bottom: 2px solid #dde0e8;
        white-space: nowrap;
    }
    .rps-table tbody tr {
        border-bottom: 1px solid #eaecf0;
    }
    .rps-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }
    .rps-table tbody tr:hover {
        background-color: #f4f5f8;
    }
    .rps-table tbody td {
        padding: 8px 8px;
        white-space: nowrap;
        vertical-align: middle;
        font-family: sans-serif;
    }
    .rps-table tbody td.num {
        text-align: left; /* Changed from right to align better with header */
    }
    .rps-table tfoot tr {
        background-color: #f0f1f5;
        font-weight: 600;
    }
    .rps-table tfoot td {
        padding: 8px 8px;
        border-top: 2px solid #dde0e8;
        white-space: nowrap;
    }
    .nav-tabs .nav-link {
        font-weight: 600;
        color: #6c7293;
        padding: 12px 20px;
    }
    .nav-tabs .nav-link.active {
        color: #5867dd;
        border-bottom: 3px solid #5867dd;
        background-color: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .text-red {
        color: red !important;
    }
</style>

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    RPS Detail — <strong>{{ $loan->loan_id ?? '—' }}</strong>
                </h3>
            </div>
        </div>
    </div>

    <div class="m-content">

        {{-- Back Button --}}
        <div style="margin-bottom: 15px;">
            <a href="/admin/co-lending/loans" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-left"></i> Back to Loans
            </a>
        </div>

        {{-- Loan Summary Card --}}
        <div class="m-portlet m-portlet--mobile" style="margin-bottom: 20px;">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon"><i class="fa fa-file-text-o"></i></span>
                        <h3 class="m-portlet__head-text">Loan Information</h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                <div class="row" style="font-size: 13px;">
                    <div class="col-md-2 col-sm-4" style="margin-bottom: 12px;">
                        <div style="color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 3px;">Loan ID</div>
                        <div style="font-weight: 600;">{{ $loan->loan_id ?? '—' }}</div>
                    </div>
                    <div class="col-md-2 col-sm-4" style="margin-bottom: 12px;">
                        <div style="color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 3px;">Interest Rate</div>
                        <div>{{ $loan->interest_rate !== null ? floatval($loan->interest_rate) * 100 . '%' : '—' }}</div>
                    </div>
                    <div class="col-md-2 col-sm-4" style="margin-bottom: 12px;">
                        <div style="color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 3px;">Tenure</div>
                        <div>{{ $loan->tenure ?? '—' }}</div>
                    </div>
                    <div class="col-md-2 col-sm-4" style="margin-bottom: 12px;">
                        <div style="color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 3px;">Disbursement Date</div>
                        <div>{{ $loan->disbursement_date ?? '—' }}</div>
                    </div>
                    <div class="col-md-2 col-sm-4" style="margin-bottom: 12px;">
                        <div style="color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 3px;">Product ID</div>
                        <div>{{ $loan->product_id ?? '—' }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- RPS Schedules --}}
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon"><i class="fa fa-bar-chart"></i></span>
                        <h3 class="m-portlet__head-text">RPS Schedules (Live Synchronized)</h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">

                {{-- Loading / Error States --}}
                <div id="rps-loading" style="text-align: center; padding: 40px; color: #5867dd;">
                    <i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
                    <h5 style="margin-top: 15px; font-weight: 600;" id="loading-text">Syncing Live Metrics...</h5>
                    <p style="color: #888; font-size: 12px;">Please wait while the engine recalculates delay days and penalties.</p>
                </div>
                <div id="rps-error" style="display: none;" class="alert alert-danger"></div>

                {{-- Schedule Panels (built dynamically by JS) --}}
                <div id="rps-schedules-container" style="display: none;">
                    <ul class="nav nav-tabs" id="rps-tabs" role="tablist">
                        <!-- Tabs will be dynamically inserted here -->
                    </ul>
                    <div class="tab-content" id="rps-tab-content" style="overflow-x: auto; padding-top: 10px;">
                        <!-- Tab panes will be dynamically inserted here -->
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script>
    var loanId    = '{{ $loan->loan_id }}';
    var csrfToken = '{{ csrf_token() }}';

    function formatCurrency(val) {
        if (val === null || val === undefined || val === '') return '—';
        return '₹' + Number(val).toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    }

    function labelFromKey(key) {
        if(key === 'orig') return '100% Orig Rate';
        if(key === 'partner_a') return 'Partner A';
        if(key === 'partner_b') return 'Partner B';
        if(key === 'hurdle') return 'Hurdle Rate';
        return key.toUpperCase();
    }

    function buildTabContent(key, scheduleRows, isFirst, metrics) {
        var safeKey = key.replace(/[^a-zA-Z0-9_-]/g, '_');
        var activeClass = isFirst ? 'active' : '';
        
        var tabHtml = `<div class="tab-pane ${activeClass}" id="tab-${safeKey}" role="tabpanel">`;

        // Render Metrics Grid
        if (metrics) {
            tabHtml += `
                <div style="background: #f8f9fa; border: 1px solid #e2e5ec; padding: 15px; margin-top: 15px; border-radius: 4px;">
                    <h6 style="margin-top:0; margin-bottom:15px; font-weight:600; color:#555;"><i class="fa fa-dashboard"></i> Loan Metrics</h6>
                    <table style="width:100%; font-size:12px;">
                        <tr>
                            <td style="padding-bottom:10px;"><strong>Loan Amount:</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.loan_amount)}</td>
                            <td style="padding-bottom:10px;"><strong>Principal Outstanding:</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.principal_outstanding)}</td>
                        </tr>
                        <tr>
                            <td style="padding-bottom:10px;"><strong>Interest Due (Till Date):</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.interest_due_till_date)}</td>
                            <td style="padding-bottom:10px;"><strong>Interest Outstanding (Throughout Tenure):</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.interest_outstanding_over_the_loan)}</td>
                        </tr>
                        <tr>
                            <td style="padding-bottom:10px;"><strong>Total Bounce Due:</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.total_bounce_due)}</td>
                            <td style="padding-bottom:10px;"><strong>Total Penal Due:</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.total_penal_due)}</td>
                        </tr>
                        <tr>
                            <td style="padding-bottom:10px;"><strong>Amount Overdue:</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.amount_overdue)}</td>
                            <td style="padding-bottom:10px;"><strong>Total Outstanding:</strong></td><td style="padding-bottom:10px;">${formatCurrency(metrics.total_outstanding)}</td>
                        </tr>
                        <tr>
                            <td><strong>DPD:</strong></td><td>${metrics.dpd || 0}</td>
                            <td></td><td></td>
                        </tr>
                    </table>
                </div>
            `;
        }

        tabHtml += `
                <table class="table rps-table" style="margin-top: 20px;">
                    <thead>
                        <tr>
                            <th>Inst. No.</th>
                            <th>EMI Date</th>
                            <th>Interest Due</th>
                            <th>Principal Due</th>
                            <th>EMI Amount</th>
                            <th>Bounce Charges</th>
                            <th>Delay Penalty</th>
                            <th>Charges Waived</th>
                            <th>Total Amount Paid</th>
                            <th>Total Amount Due</th>
                            <th>Opening POS</th>
                            <th>Closing POS</th>
                            <th>Payment Details</th>
                        </tr>
                    </thead>
                    <tbody>
        `;

        var today = new Date();
        today.setHours(0,0,0,0);

        if (!scheduleRows || scheduleRows.length === 0) {
            tabHtml += '<tr><td colspan="12" class="text-center" style="color:#999;padding:16px;">No data</td></tr>';
        } else {
            scheduleRows.forEach(function(row) {
                var emiDate = new Date(row.emi_date);
                
                // Traffic light status
                var statusIcon = '';
                if (row.amount_due == 0) {
                    statusIcon = '<span style="position: absolute;left: -25px;"><i style="color: green;" class="fa fa-check-circle" aria-hidden="true"></i></span>';
                } else if (emiDate < today && row.amount_due > 0) {
                    statusIcon = '<span style="position: absolute;left: -25px;"><i style="color: red;" class="fa fa-times-circle-o" aria-hidden="true"></i></span>';
                } else {
                    statusIcon = '<span style="position: absolute;left: -25px;"><i style="color: yellow;" class="fa fa-circle" aria-hidden="true"></i></span>';
                }

                // Red text coloring for past dues
                var isPastDue = (emiDate < today);
                
                var intClass = (isPastDue && (Number(row.interest_received || 0) != Number(row.interest_due || 0))) ? 'text-red' : '';
                var prinClass = (isPastDue && (Number(row.principal_received || 0) != Number(row.principal_due || 0))) ? 'text-red' : '';
                var bounceClass = (Number(row.bounce_received || 0) != Number(row.bounce_charges || 0)) ? 'text-red' : '';
                var penalClass = (Number(row.penal_received || 0) != Number(row.delay_penalty || 0)) ? 'text-red' : '';
                
                // Append text about what was paid for specific components, if applicable
                var intPaidHtml = row.interest_received ? `<div style="font-size: 11px; color: #777;">Interest Paid: ${formatCurrency(row.interest_received)}</div>` : '';
                var prinPaidHtml = row.principal_received ? `<div style="font-size: 11px; color: #777;">Principal Paid: ${formatCurrency(row.principal_received)}</div>` : '';
                var bouncePaidHtml = row.bounce_received ? `<div style="font-size: 11px; color: #777;">Bounce Charges Paid: ${formatCurrency(row.bounce_received)}</div>` : '';
                var penalPaidHtml = row.penal_received ? `<div style="font-size: 11px; color: #777;">Delay Penalty Paid: ${formatCurrency(row.penal_received)}</div>` : '';
                var paymentDetailsHtml = row.payment_details ? `<div style="color: green; white-space: pre-line;">(Payment Received: ${row.payment_details})</div>` : '';

                tabHtml += `
                    <tr>
                        <td class="num">${row.installment_number}</td>
                        <td>
                            <div style="position: relative;">
                                ${statusIcon}
                            </div>
                            ${row.emi_date || '—'}
                        </td>
                        <td class="num ${intClass}">${formatCurrency(row.interest_due)} ${intPaidHtml}</td>
                        <td class="num ${prinClass}">${formatCurrency(row.principal_due)} ${prinPaidHtml}</td>
                        <td class="num">${formatCurrency(row.emi_amount_due)}</td>
                        <td class="num ${bounceClass}">${formatCurrency(row.bounce_charges)} ${bouncePaidHtml}</td>
                        <td class="num ${penalClass}">${formatCurrency(row.delay_penalty)} ${penalPaidHtml}</td>
                        <td class="num">${formatCurrency(row.charges_waived)}</td>
                        <td class="num">${formatCurrency(row.total_amount_paid)}</td>
                        <td class="num font-weight">${formatCurrency(row.amount_due)}</td>
                        <td class="num">${formatCurrency(row.opening_pos)}</td>
                        <td class="num">${formatCurrency(row.closing_pos)}</td>
                        <td style="min-width: 150px; font-size: 11px;">${paymentDetailsHtml}</td>
                    </tr>
                `;
            });
            
            tabHtml += `</tbody>`;
        }

        tabHtml += `</table></div>`;
        return tabHtml;
    }

    document.addEventListener('DOMContentLoaded', function () {
        
        fetch('/admin/co-lending/refresh-metrics', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ loan_id: loanId })
        })
        .then(function(res) { return res.json(); })
        .then(function(json) {
            if(!json.success) {
                console.warn('Refresh metrics returned error (continuing anyway):', json.message);
            }
            document.getElementById('loading-text').textContent = "Fetching Schedule Data...";
            
            return fetch('/admin/co-lending/rps-api-v2', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ loan_id: loanId })
            });
        })
        .then(function(res) { return res.json(); })
        .then(function(json) {
            document.getElementById('rps-loading').style.display = 'none';

            if (!json.success) {
                document.getElementById('rps-error').style.display = 'block';
                document.getElementById('rps-error').textContent = 'Error: ' + json.message;
                return;
            }

            var data = json.response && json.response.data && json.response.data[0];
            if (!data || !data.schedules || Object.keys(data.schedules).length === 0) {
                document.getElementById('rps-error').style.display = 'block';
                document.getElementById('rps-error').textContent = 'No schedule data found for this loan.';
                return;
            }

            var schedules  = data.schedules;
            var orderedKeys = ['orig', 'partner_a', 'partner_b', 'hurdle'];
            var keys = [];
            orderedKeys.forEach(function(k) {
                if(schedules[k]) keys.push(k);
            });
            Object.keys(schedules).forEach(function(k) {
                if(!orderedKeys.includes(k)) keys.push(k);
            });

            var tabsHtml = '';
            var contentHtml = '';

            keys.forEach(function(key, idx) {
                var safeKey = key.replace(/[^a-zA-Z0-9_-]/g, '_');
                var isFirst = idx === 0;
                var activeClass = isFirst ? 'active' : '';
                
                tabsHtml += `
                    <li class="nav-item">
                        <a class="nav-link ${activeClass}" data-toggle="tab" href="#tab-${safeKey}">${labelFromKey(key)}</a>
                    </li>
                `;

                contentHtml += buildTabContent(key, schedules[key].rows, isFirst, schedules[key].metrics);
            });

            document.getElementById('rps-tabs').innerHTML = tabsHtml;
            document.getElementById('rps-tab-content').innerHTML = contentHtml;
            document.getElementById('rps-schedules-container').style.display = 'block';
        })
        .catch(function(err) {
            document.getElementById('rps-loading').style.display = 'none';
            document.getElementById('rps-error').style.display = 'block';
            document.getElementById('rps-error').textContent = 'Request failed: ' + err.message;
        });
    });
</script>

@include("admin.layouts.footer")