@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: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.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: #dc3545; font-size: 1rem; }
    .section-heading::after { content:''; flex:1; height:1px; background:#e5e7eb; }

    #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: #fff5f5; }
    .sug-ac  { font-weight: 700; color: #dc3545; font-family: monospace; }
    .sug-nm  { color: #374151; }

    #loan_panel { display: none; }
    .stat-row {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 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-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; }

    .charge-card {
        background: #fff5f5; border: 1.5px dashed #fca5a5;
        border-radius: 14px; padding: 22px 24px;
    }
    .btn-post {
        background: linear-gradient(135deg,#991b1b,#dc3545);
        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_panel {
        display: none; background: #fff; border: 2px solid #fecaca;
        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,#991b1b,#dc3545);">
            <h5 class="mb-0 text-white"><i class="bi bi-exclamation-circle-fill me-2"></i>Loan Extra Service Charge</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-danger"></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>
                </div>
            </div>

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

                {{-- Member 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:#0369a1; font-size:.8rem;" id="d_mobile">—</span>
                        <span class="badge rounded-pill" style="background:#fee2e2; color:#991b1b; 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 --}}
                <div class="stat-row">
                    <div class="stat-box">
                        <div class="lbl">Loan Amount</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">
                        <div class="lbl">Instalment</div>
                        <div class="val" id="d_installment">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Total Paid</div>
                        <div class="val" id="d_paid_amount">—</div>
                    </div>
                    <div class="stat-box accent-amber">
                        <div class="lbl">Instalments Due</div>
                        <div class="val" id="d_term_due">—</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">Extra Charge So Far</div>
                        <div class="val" id="d_extra_charge">—</div>
                    </div>
                    <div class="stat-box">
                        <div class="lbl">Expiry Date</div>
                        <div class="val" id="d_expire_date">—</div>
                    </div>
                </div>

                {{-- Charge form --}}
                <div class="section-heading"><i class="bi bi-plus-circle-fill"></i> Add Extra Service Charge</div>
                <div class="charge-card">
                    <input type="hidden" id="loan_member_info_id">
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label>Charge Date</label>
                            <input type="text" id="charge_date" class="form-control"
                                   value="{{ date('d-m-Y') }}"
                                   onfocus="(this.type='date')" onblur="(this.type='text')">
                        </div>
                        <div class="col-md-3">
                            <label>Extra Charge Amount (৳) <span class="text-danger">*</span></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 class="col-md-6">
                            <label>Remarks</label>
                            <input type="text" id="remarks" class="form-control"
                                   placeholder="e.g. Late payment penalty, service fee…">
                        </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 Extra Charge
                        </button>
                        <span id="posting_spinner" style="display:none;">
                            <span class="spinner-border spinner-border-sm text-danger 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> Charge 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-danger"></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">Charge Date</span>   <span id="r_date"></span></div>
                            <div class="receipt-row"><span class="text-muted">Amount Charged</span><span id="r_amount"  class="fw-bold text-danger"></span></div>
                            <div class="receipt-row"><span class="text-muted">Remarks</span>       <span id="r_remarks"></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 panel       = document.getElementById('loan_panel');
    let   currentLoan = null;

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

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

        timer = setTimeout(() => {
            fetch('{{ route('allloan.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';
    });

    document.getElementById('search_clear').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 ───────────────────────────────────────────────────────
    function fillPanel(data) {
        currentLoan = data;
        searchInput.value = data.loan_ac_number;
        sugBox.style.display = 'none';

        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_due',       data.term_due);
        setText('d_overdue',        data.overdue);
        setText('d_extra_charge',   fmt(data.extra_charge));
        setText('d_expire_date',    fmtD(data.expire_date));

        document.getElementById('loan_member_info_id').value = data.id;
        document.getElementById('receipt_panel').style.display = 'none';
        document.getElementById('post_error').style.display   = 'none';
        panel.style.display = 'block';
    }

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

        if (!id || !amount || !date) {
            errBox.textContent = 'Please fill Charge Date and Amount.';
            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('extra_charge_amount', amount);
        fd.append('charge_date',         date);
        fd.append('remarks',             remarks);

        fetch('{{ route('loan.extra.charge.store') }}', {
            method: 'POST', body: fd,
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('r_invoice').textContent  = 'EC-' + currentLoan.loan_ac_number.slice(-6).toUpperCase() + '-' + new Date().toISOString().slice(2,16).replace(/[-:T]/g,'');
                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_remarks').textContent  = remarks || '—';
                document.getElementById('receipt_panel').style.display = 'block';
                document.getElementById('receipt_panel').scrollIntoView({ behavior: 'smooth' });

                // Refresh stats
                setTimeout(() => {
                    fetch('{{ route('loan.installment.search') }}?q=' + encodeURIComponent(currentLoan.loan_ac_number), {
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                    })
                    .then(r => r.json())
                    .then(d => { if (!d.error) fillPanel(d); })
                    .catch(() => {});
                }, 400);
            } else {
                errBox.textContent = data.message || 'Failed to post charge.';
                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;
        });
    });

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

@endsection