@extends('admin_dashboard')
@section('admin')

<style>
    .card          { border: none; border-radius: 16px; }
    label          { font-weight: 500; font-size: .875rem; color: #374151; margin-bottom: 4px; display:block; }
    .form-control, .form-select {
        border: 1.5px solid #e5e7eb; border-radius: 8px;
        font-size: .9rem; box-shadow: none !important;
    }
    .form-control:focus, .form-select:focus {
        border-color: #0f4c35; box-shadow: 0 0 0 3px rgba(15,76,53,.12) !important;
    }
    .section-heading {
        font-size: .78rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .7px; color: #6b7280; margin: 22px 0 12px;
        display: flex; align-items: center; gap: 8px;
    }
    .section-heading i  { color: #0f4c35; font-size: 1rem; }
    .section-heading::after { content:''; flex:1; height:1px; background:#e5e7eb; }

    /* search wrap */
    #search_wrap { position: relative; }
    #loan_suggestions {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
        background: #fff; border: 1.5px solid #e5e7eb; border-top: none;
        border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto;
        box-shadow: 0 8px 20px rgba(0,0,0,.1); display: none;
    }
    .sug-item {
        padding: 9px 14px; cursor: pointer; font-size: .875rem;
        border-bottom: 1px solid #f3f4f6; display: flex; gap: 12px;
    }
    .sug-item:hover { background: #f0fdf4; }
    .sug-ac  { font-weight: 700; color: #0f4c35; font-family: monospace; }
    .sug-nm  { color: #374151; }

    /* info panel */
    #loan_panel { display: none; }
    .stat-row {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px; margin-bottom: 18px;
    }
    .stat-box {
        background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 10px;
        padding: 12px 14px;
    }
    .stat-box .lbl { font-size: .72rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .stat-box .val { font-size: 1rem; font-weight: 700; color: #111827; margin-top: 2px; }
    .stat-box.accent-green { border-color: #bbf7d0; background: #f0fdf4; }
    .stat-box.accent-green .val { color: #065f46; }
    .stat-box.accent-red   { border-color: #fecaca; background: #fff5f5; }
    .stat-box.accent-red   .val { color: #991b1b; }
    .stat-box.accent-amber { border-color: #fde68a; background: #fffbeb; }
    .stat-box.accent-amber .val { color: #92400e; }

    /* Payment form */
    .payment-card {
        background: #f0fdf4; border: 1.5px solid #bbf7d0;
        border-radius: 14px; padding: 22px 24px;
    }
    .btn-post {
        background: linear-gradient(135deg,#0f4c35,#1a7a5e);
        color:#fff; border:none; border-radius:10px;
        padding:12px 36px; font-weight:700; font-size:.95rem;
        transition: opacity .2s, transform .15s;
    }
    .btn-post:hover { opacity:.9; transform:translateY(-1px); color:#fff; }

    /* receipt */
    #receipt_panel {
        display:none; background:#fff; border: 2px solid #bbf7d0;
        border-radius:14px; padding:22px;
    }
    .receipt-row { display:flex; justify-content:space-between; font-size:.9rem; padding:4px 0; border-bottom:1px dashed #e5e7eb; }
    .receipt-row:last-child { border-bottom:none; }
</style>

<div class="container my-3">
    <div class="card shadow-lg">
        <div class="card-header py-3" style="background: linear-gradient(135deg,#0f4c35,#1a7a5e);">
            <h5 class="mb-0 text-white"><i class="bi bi-cash-stack me-2"></i>Loan Instalment Posting</h5>
        </div>
        <div class="card-body p-4">

            {{-- ── Search ── --}}
            <div class="section-heading"><i class="bi bi-search"></i> Search Loan Account</div>
            <div class="row mb-3">
                <div class="col-md-5">
                    <label>Loan Account Number</label>
                    <div id="search_wrap">
                        <div class="input-group">
                            <span class="input-group-text bg-light" style="border:1.5px solid #e5e7eb;border-right:none;">
                                <i class="bi bi-bank2 text-success"></i>
                            </span>
                            <input type="text" id="loan_search" class="form-control"
                                   placeholder="Type loan A/C number…" autocomplete="off"
                                   style="border-left:none;">
                            <button type="button" class="btn btn-outline-secondary" id="search_clear">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                        <div id="loan_suggestions"></div>
                    </div>
                    <small class="text-muted">Search to load loan details.</small>
                </div>
            </div>

            {{-- ── Loan info panel ── --}}
            <div id="loan_panel">

                {{-- Member info strip --}}
                <div class="d-flex flex-wrap align-items-center gap-3 mb-3 p-3"
                     style="background:#f9fafb; border-radius:12px; border:1.5px solid #e5e7eb;">
                    <div>
                        <div style="font-size:1rem; font-weight:700; color:#111827;" id="d_member_name">—</div>
                        <small class="text-muted" id="d_member_address">—</small>
                    </div>
                    <div class="ms-auto d-flex flex-wrap gap-2">
                        <span class="badge rounded-pill" style="background:#e0f2fe; color:#F52749; font-size:.8rem;" id="d_group_name">—</span>
                        <span class="badge rounded-pill" style="background:#e0f2fe; color:#9527F5; font-size:.8rem;" id="d_disbursement_date">—</span>
                        <span class="badge rounded-pill" style="background:#e0f2fe; color:#0369a1; font-size:.8rem;" id="d_mobile">—</span>
                        <span class="badge rounded-pill" style="background:#d1fae5; color:#065f46; font-size:.8rem;" id="d_loan_type">—</span>
                        <span class="badge rounded-pill" style="background:#ede9fe; color:#5b21b6; font-size:.8rem;" id="d_loan_ac">—</span>
                    </div>
                </div>

                {{-- Stats grid --}}
                <div class="stat-row">
                    <div class="stat-box">
                        <div class="lbl">Total Loan</div>
                        <div class="val" id="d_loan_amount">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Total Payable</div>
                        <div class="val" id="d_total_payable">—</div>
                    </div>
                    <div class="stat-box accent-red" hidden>
                        <div class="lbl">Instalment Amount</div>
                        <div class="val" id="d_installment">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Instalments Paid</div>
                        <div class="val" id="d_term_paid">—</div>
                    </div>
                    <div class="stat-box accent-green">
                        <div class="lbl">Total Paid</div>
                        <div class="val" id="d_paid_amount">—</div>
                    </div>
                    <div class="stat-box accent-red">
                        <div class="lbl">Overdue</div>
                        <div class="val" id="d_overdue">—</div>
                    </div>
                    <div class="stat-box accent-red">
                        <div class="lbl">Overdue Amount</div>
                        <div class="val" id="d_overdue_amount">—</div>
                    </div>
                    <div class="stat-box accent-red">
                        <div class="lbl">Expiry Date</div>
                        <div class="val" id="d_expire_date">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Last Payment Date</div>
                        <div class="val" id="d_last_payment">—</div>
                    </div>

                    <div class="stat-box">
                        <div class="lbl">Principal Due</div>
                        <div class="val" id="d_principal_due">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Profit Due</div>
                        <div class="val" id="d_profit_due">—</div>
                    </div>
                    <div class="stat-box accent-amber">
                        <div class="lbl">Total Due</div>
                        <div class="val" id="d_total_due">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Total Savings</div>
                        <div class="val" id="d_total_savings">—</div>
                    </div>
                    <div class="stat-box accent-red" hidden>
                        <div class="lbl">Extra Charge Collected</div>
                        <div class="val" id="d_extra_charge">—</div>
                    </div>
                </div>

                {{-- Payment form --}}
                <div class="section-heading"><i class="bi bi-wallet2"></i> Post Instalment Payment</div>
                <div class="payment-card">
                    <input type="hidden" id="loan_member_info_id">

                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label>Payment Date</label>
                            <input type="text" id="payment_date" class="form-control"
                                   value="{{ date('d-m-Y') }}" onfocus="(this.type='date')" onblur="(this.type='text')">
                        </div>
                        <div class="col-md-3">
                            <label>Payment Amount (৳)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">৳</span>
                                <input type="number" id="payment_amount" class="form-control"
                                       step="0.01" min="0.01" placeholder="0.00">
                            </div>
                            <small class="text-muted">Default: 1 instalment. You can enter any amount.</small>
                        </div>
                        <div class="col-md-3">
                            <label>Principal (auto)</label>
                            <input type="text" id="d_principal_split" class="form-control bg-light" readonly>
                        </div>
                        <div class="col-md-3">
                            <label>Profit (auto)</label>
                            <input type="text" id="d_profit_split" class="form-control bg-light" readonly>
                        </div>

                        <div class="col-md-3">
                            <label>Savings Amount (৳)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">৳</span>
                                <input type="number" id="savings_amount" class="form-control"
                                       step="0.01" min="0.01" placeholder="0.00">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <label>Extra Charge Amount (৳)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">৳</span>
                                <input type="number" id="extra_charge_amount" class="form-control"
                                       step="0.01" min="0.01" placeholder="0.00">
                            </div>
                        </div>
                    </div>

                    <div id="post_error" class="alert alert-danger py-2 small mb-3" style="display:none;"></div>

                    <div class="d-flex align-items-center gap-3">
                        <button type="button" class="btn btn-post" id="btn_post">
                            <i class="bi bi-send-fill me-1"></i> Post Payment
                        </button>
                        <span id="posting_spinner" style="display:none;">
                            <span class="spinner-border spinner-border-sm text-success me-1"></span> Posting…
                        </span>
                    </div>
                </div>

                {{-- Receipt --}}
                <div id="receipt_panel" class="mt-4">
                    <div class="section-heading"><i class="bi bi-receipt"></i> Payment Receipt</div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="receipt-row"><span class="text-muted">Invoice No</span>      <span id="r_invoice"  class="fw-bold"></span></div>
                            <div class="receipt-row"><span class="text-muted">Loan A/C</span>         <span id="r_loan_ac" class="fw-bold text-success"></span></div>
                            <div class="receipt-row"><span class="text-muted">Member</span>           <span id="r_member"></span></div>
                            <div class="receipt-row"><span class="text-muted">Payment Date</span>     <span id="r_date"></span></div>
                            <div class="receipt-row"><span class="text-muted">Amount Paid</span>      <span id="r_amount" class="fw-bold text-success"></span></div>
                            <div class="receipt-row"><span class="text-muted">Principal Portion</span><span id="r_principal"></span></div>
                            <div class="receipt-row"><span class="text-muted">Profit Portion</span>  <span id="r_profit"></span></div>
                        </div>
                    </div>
                </div>

            </div>{{-- end loan_panel --}}

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

<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('loan_search');
    const sugBox      = document.getElementById('loan_suggestions');
    const clearBtn    = document.getElementById('search_clear');
    const panel       = document.getElementById('loan_panel');
    let   currentLoan = null;

    // ── Debounced search ──────────────────────────────────────────────────
    let debounceTimer;
    searchInput.addEventListener('input', function () {
        clearTimeout(debounceTimer);
        const q = this.value.trim();
        sugBox.innerHTML = ''; sugBox.style.display = 'none';
        if (q.length < 3) return;

        debounceTimer = setTimeout(() => {
            fetch('{{ route('loan.installment.search') }}?q=' + encodeURIComponent(q), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) return;
                const div = document.createElement('div');
                div.className = 'sug-item';
                div.innerHTML = `<span class="sug-ac">${data.loan_ac_number}</span><span class="sug-nm">${data.member_name}</span>`;
                div.addEventListener('click', () => fillPanel(data));
                sugBox.appendChild(div);
                sugBox.style.display = 'block';
            })
            .catch(() => {});
        }, 350);
    });

    document.addEventListener('click', e => {
        if (!e.target.closest('#search_wrap')) sugBox.style.display = 'none';
    });

    clearBtn.addEventListener('click', () => {
        searchInput.value = ''; sugBox.innerHTML = ''; sugBox.style.display = 'none';
        panel.style.display = 'none'; currentLoan = null;
        document.getElementById('receipt_panel').style.display = 'none';
    });

    // ── Fill panel with loan data ─────────────────────────────────────────
    function fillPanel(data) {
        currentLoan = data;
        searchInput.value = data.loan_ac_number;
        sugBox.style.display = 'none';

        const fmt   = n => '৳ ' + parseFloat(n).toLocaleString('en-IN', {minimumFractionDigits:2, maximumFractionDigits:2});
        const fmtD  = d => d ? new Date(d).toLocaleDateString('en-GB', {day:'2-digit', month:'short', year:'numeric'}) : '—';

        setText('d_member_name',    data.member_name);
        setText('d_member_address', data.member_address);
        setText('d_mobile',         '📞 ' + (data.member_mobile || '—'));
        setText('d_loan_type',      data.loan_type);
        setText('d_loan_ac',        data.loan_ac_number);
        setText('d_loan_amount',    fmt(data.loan_amount));
        setText('d_total_payable',  fmt(data.total_amount_topay));
        setText('d_installment',    fmt(data.installment));
        setText('d_paid_amount',    fmt(data.paid_amount));
        setText('d_term_paid',      data.term_paid + ' / ' + data.pay_term);
        setText('d_overdue',        data.overdue);
        setText('d_overdue_amount',        (data.overdue * data.installment).toFixed(2));
        setText('d_last_payment',   fmtD(data.last_payment_date));
        setText('d_expire_date',    fmtD(data.expire_date));
        setText('d_principal_due',  fmt(data.principal_due));
        setText('d_profit_due',     fmt(data.profit_due));
        setText('d_total_due',      fmt(data.principal_due + data.profit_due));
        setText('d_extra_charge',   fmt(data.extra_charge ?? 0));
        setText('d_total_savings',  fmt(data.member_balance ?? 0));
        setText('d_group_name',        '👥 ' + (data.group_name || '—'));
        setText('d_disbursement_date', '📅 ' + fmtD(data.disbursement_date));

        document.getElementById('loan_member_info_id').value = data.id;

        // Pre-fill payment amount with 1 instalment
        document.getElementById('payment_amount').value = parseFloat(data.installment).toFixed(2);
        updateSplit();
        document.getElementById('extra_charge_amount').value = parseFloat(data.extra_charge).toFixed(2);

        panel.style.display = 'block';
        document.getElementById('receipt_panel').style.display = 'none';
    }

    // ── Live principal/profit split ───────────────────────────────────────
    function updateSplit() {
        if (!currentLoan) return;
        const amount      = parseFloat(document.getElementById('payment_amount').value) || 0;
        const { principal, profit } = calculateSplit(amount);
        const fmt2        = n => '৳ ' + n.toLocaleString('en-IN', {minimumFractionDigits:2, maximumFractionDigits:2});
        document.getElementById('d_principal_split').value = fmt2(principal);
        document.getElementById('d_profit_split').value    = fmt2(profit);
    }

    document.getElementById('payment_amount').addEventListener('input', updateSplit);

    function calculateSplit(amount) {
        const instalment = parseFloat(currentLoan.installment) || 0;
        const principalPerInstalment = parseFloat(currentLoan.principal_per_instalment) || 0;
        const profitPerInstalment = parseFloat(currentLoan.profit_per_instalment) || 0;

        if (amount <= 0 || instalment <= 0) {
            return { principal: 0, profit: 0 };
        }

        const ratio = amount / instalment;

        return {
            principal: principalPerInstalment * ratio,
            profit: profitPerInstalment * ratio,
        };
    }

    // ── Post payment ──────────────────────────────────────────────────────
    document.getElementById('btn_post').addEventListener('click', function () {
        const id     = document.getElementById('loan_member_info_id').value;
        const amount = document.getElementById('payment_amount').value;
        const date   = document.getElementById('payment_date').value;
        const errBox = document.getElementById('post_error');

        if (!id || !amount || !date) {
            errBox.textContent = 'Please fill all payment fields.';
            errBox.style.display = 'block'; return;
        }
        errBox.style.display = 'none';

        document.getElementById('posting_spinner').style.display = 'inline';
        this.disabled = true;

        const fd = new FormData();
        fd.append('_token',              '{{ csrf_token() }}');
        fd.append('loan_member_info_id', id);
        fd.append('payment_amount',      amount);
        fd.append('payment_date',        date);
        fd.append('savings_amount',      document.getElementById('savings_amount').value      || 0);
        fd.append('extra_charge_amount', document.getElementById('extra_charge_amount').value || 0);

        fetch('{{ route('loan.installment.store') }}', {
            method: 'POST', body: fd,
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                // Show receipt
                const fmt = n => '৳ ' + parseFloat(n).toLocaleString('en-IN', {minimumFractionDigits:2, maximumFractionDigits:2});
                const { principal, profit } = calculateSplit(parseFloat(amount) || 0);
                document.getElementById('r_loan_ac').textContent    = currentLoan.loan_ac_number;
                document.getElementById('r_member').textContent     = currentLoan.member_name;
                document.getElementById('r_date').textContent       = date;
                document.getElementById('r_amount').textContent     = fmt(amount);
                document.getElementById('r_principal').textContent  = fmt(principal);
                document.getElementById('r_profit').textContent     = fmt(profit);
                document.getElementById('r_invoice').textContent    = 'LN-' + currentLoan.loan_ac_number.slice(-6).toUpperCase() + '-' + new Date().toISOString().slice(2,16).replace(/[-:T]/g,'');
                document.getElementById('receipt_panel').style.display = 'block';
                document.getElementById('receipt_panel').scrollIntoView({behavior:'smooth'});

                // Clear savings only; keep search input and payment_date
                document.getElementById('savings_amount').value = '';

                // Update savings balance immediately from fresh member_info data
                if (data.member_balance !== undefined) {
                    setText('d_total_savings', fmt(data.member_balance));
                }

                // Refresh loan panel after posting
                setTimeout(() => fillPanelById(id), 500);
            } else {
                errBox.textContent = data.message || 'Failed to post payment.';
                errBox.style.display = 'block';
            }
        })
        .catch(() => {
            errBox.textContent = 'Network error. Please try again.';
            errBox.style.display = 'block';
        })
        .finally(() => {
            document.getElementById('posting_spinner').style.display = 'none';
            document.getElementById('btn_post').disabled = false;
        });
    });

    // Reload loan panel after posting
    function fillPanelById(id) {
        if (!currentLoan) return;
        fetch('{{ route('loan.installment.search') }}?q=' + encodeURIComponent(currentLoan.loan_ac_number), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => { if (!data.error) fillPanel(data); })
        .catch(() => {});
    }

    function setText(id, val) {
        const el = document.getElementById(id);
        if (el) el.textContent = val ?? '—';
    }
});
</script>

@endsection