<?php echo $__env->make('admin.layouts.header', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php echo $__env->make('admin.layouts.sidebar', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<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 12px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        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 12px;
        white-space: nowrap;
        vertical-align: middle;
        font-family: sans-serif;
    }
    .rps-table tbody td:first-child {
        color: #888;
        font-size: 12px;
        text-align: center;
        width: 40px;
    }
    .rps-table tbody td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .rps-table tfoot tr {
        background-color: #f0f1f5;
        font-weight: 600;
    }
    .rps-table tfoot td {
        padding: 8px 12px;
        border-top: 2px solid #dde0e8;
        white-space: nowrap;
    }
    .rps-table tfoot td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
</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><?php echo e($loan->loan_id ?? '—'); ?></strong>
                </h3>
            </div>
        </div>
    </div>

    <div class="m-content">

        
        <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>

        
        <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;"><?php echo e($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;">Loan Amount</div>
                        <div><?php echo e($loan->loan_amount !== null ? '₹ ' . number_format($loan->loan_amount, 2) : '—'); ?></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><?php echo e($loan->interest_rate !== null ? $loan->interest_rate . '%' : '—'); ?></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><?php echo e($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><?php echo e($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;">First EMI Date</div>
                        <div><?php echo e($loan->first_emi_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><?php echo e($loan->product_id ?? '—'); ?></div>
                    </div>
                </div>
            </div>
        </div>

        
        <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</h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">

                
                <div id="rps-loading" style="text-align: center; padding: 30px; color: #888;">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                    <p style="margin-top: 10px;">Fetching RPS schedules...</p>
                </div>
                <div id="rps-error" style="display: none;" class="alert alert-danger"></div>

                
                <div id="rps-schedules" style="display: none;"></div>

            </div>
        </div>

    </div>
</div>

<script>
    var loanId    = '<?php echo e($loan->loan_id); ?>';
    var csrfToken = '<?php echo e(csrf_token()); ?>';

    // Palette cycled across dynamically discovered schedule keys
    var colorPalette = ['#5867dd', '#34bfa3', '#ffb822', '#f4516c', '#00c5dc', '#a06fc7', '#ff8c42'];

    function toggleSection(key) {
        var panel = document.getElementById('panel-' + key);
        var icon  = document.getElementById('icon-' + key);
        if (!panel) return;
        if (panel.style.display === 'none') {
            panel.style.display = 'block';
            icon.className = 'fa fa-chevron-up';
        } else {
            panel.style.display = 'none';
            icon.className = 'fa fa-chevron-down';
        }
    }

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

    // Derive a human-readable label from a dynamic key like "orig_100", "hurdle_80", "orig_70"
    function labelFromKey(key) {
        // key format: {rps_type}_{schedule_percent}
        var parts   = key.split('_');
        var pct     = parts.pop();          // last segment is the percent
        var type    = parts.join('_');      // everything before is the type
        var typeStr = type.charAt(0).toUpperCase() + type.slice(1).replace(/_/g, ' ') + ' Rate';
        return pct + '% — ' + typeStr;
    }

    function buildPanel(key, color, container, isFirst) {
        var label = labelFromKey(key);
        var safeKey = key.replace(/[^a-zA-Z0-9_-]/g, '_');

        var section = document.createElement('div');
        section.className = 'rps-section';
        section.style.marginBottom = '15px';
        section.setAttribute('data-key', safeKey);

        section.innerHTML =
            '<div class="rps-header" onclick="toggleSection(\'' + safeKey + '\')" '
            + 'style="cursor:pointer;padding:10px 15px;background:#f4f5f8;border-left:4px solid ' + color + ';'
            + 'border-radius:3px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px;">'
            +   '<span><i class="fa fa-table" style="margin-right:8px;color:' + color + ';"></i>' + label + '</span>'
            +   '<span>'
            +     '<span id="count-' + safeKey + '" class="badge" style="background:' + color + ';color:#fff;font-size:11px;margin-right:8px;padding:3px 8px;border-radius:10px;"></span>'
            +     '<i class="fa fa-chevron-down" id="icon-' + safeKey + '"></i>'
            +   '</span>'
            + '</div>'
            + '<div id="panel-' + safeKey + '" style="display:none;overflow-x:auto;margin-top:2px;border:1px solid #dde0e8;border-radius:3px;">'
            +   '<table class="rps-table">'
            +     '<thead><tr>'
            +       '<th style="text-align:center;">#</th>'
            +       '<th>Due Date</th><th>Days</th><th>BPI Due</th>'
            +       '<th>EMI Amount Due</th><th>Interest Due</th>'
            +       '<th>Principal Due</th><th>Closing POS</th>'
            +     '</tr></thead>'
            +     '<tbody id="tbody-' + safeKey + '"></tbody>'
            +     '<tfoot id="tfoot-' + safeKey + '"></tfoot>'
            +   '</table>'
            + '</div>';

        container.appendChild(section);
        return safeKey;
    }

    function populatePanel(safeKey, scheduleRows) {
        var tbody = document.getElementById('tbody-' + safeKey);
        var tfoot = document.getElementById('tfoot-' + safeKey);
        if (!tbody) return 0;

        tbody.innerHTML = '';
        if (tfoot) tfoot.innerHTML = '';

        if (!scheduleRows || scheduleRows.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" class="text-center" style="color:#999;padding:16px;">No data</td></tr>';
            return 0;
        }

        var totBpi = 0, totEmi = 0, totInt = 0, totPrin = 0;

        scheduleRows.forEach(function(row) {
            totBpi  += Number(row.bpi_due        || 0);
            totEmi  += Number(row.emi_amount_due  || 0);
            totInt  += Number(row.interest_due    || 0);
            totPrin += Number(row.principal_due   || 0);

            var tr = document.createElement('tr');
            tr.innerHTML =
                '<td>' + (row.installment_number || '') + '</td>'
                + '<td>' + (row.due_date || '—') + '</td>'
                + '<td class="num">' + (row.days_diff !== undefined && row.days_diff !== null ? row.days_diff : '—') + '</td>'
                + '<td class="num">' + formatCurrency(row.bpi_due)       + '</td>'
                + '<td class="num">' + formatCurrency(row.emi_amount_due) + '</td>'
                + '<td class="num">' + formatCurrency(row.interest_due)   + '</td>'
                + '<td class="num">' + formatCurrency(row.principal_due)  + '</td>'
                + '<td class="num">' + formatCurrency(row.closing_pos)    + '</td>';
            tbody.appendChild(tr);
        });

        if (tfoot) {
            tfoot.innerHTML = '<tr>'
                + '<td colspan="3" style="text-align:right;font-weight:600;color:#555;">Totals</td>'
                + '<td class="num">' + formatCurrency(Math.round(totBpi))  + '</td>'
                + '<td class="num">' + formatCurrency(Math.round(totEmi))  + '</td>'
                + '<td class="num">' + formatCurrency(Math.round(totInt))  + '</td>'
                + '<td class="num">' + formatCurrency(Math.round(totPrin)) + '</td>'
                + '<td></td>'
                + '</tr>';
        }

        return scheduleRows.length;
    }

    document.addEventListener('DOMContentLoaded', function () {
        fetch('/admin/co-lending/rps-api', {
            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 keys       = Object.keys(schedules);
            var container  = document.getElementById('rps-schedules');
            var firstKey   = null;

            keys.forEach(function(key, idx) {
                var color   = colorPalette[idx % colorPalette.length];
                var safeKey = buildPanel(key, color, container, idx === 0);

                var count = populatePanel(safeKey, schedules[key]);
                var badge = document.getElementById('count-' + safeKey);
                if (badge) badge.textContent = count + ' rows';

                if (idx === 0) firstKey = safeKey;
            });

            container.style.display = 'block';
            if (firstKey) toggleSection(firstKey);
        })
        .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>

<?php echo $__env->make("admin.layouts.footer", array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
