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

<style>
    .card          { border: none; border-radius: 16px; }
    label          { font-weight: 500; font-size: .875rem; color: #374151; margin-bottom: 4px; }
    .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: #1a7a5e; box-shadow: 0 0 0 3px rgba(26,122,94,.12) !important;
    }
    .section-heading {
        font-size: .78rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .7px; color: #6b7280; margin: 22px 0 14px;
        display: flex; align-items: center; gap: 8px;
    }
    .section-heading i { color: #1a7a5e; font-size: 1rem; }
    .section-heading::after { content:''; flex:1; height:1px; background:#e5e7eb; }

    /* Search */
    #search_wrap { position: relative; }
    #search_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: 240px; overflow-y: auto;
        display: none; box-shadow: 0 8px 20px rgba(0,0,0,.1);
    }
    .sug-item {
        padding: 10px 14px; cursor: pointer; font-size: .875rem;
        border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 10px;
    }
    .sug-item:last-child { border-bottom: none; }
    .sug-item:hover { background: #f0fdf4; }
    .sug-ac   { font-weight: 700; color: #1a7a5e; font-family: monospace; font-size:.85rem; }
    .sug-name { color: #374151; }

    /* Loanee panel */
    #loanee_panel { display: none; }
    .info-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
    .info-item { background: #f9fafb; border-radius: 10px; padding: 10px 14px; }
    .info-item .lbl { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; }
    .info-item .val { font-size: .95rem; font-weight: 700; color: #111827; margin-top: 2px; }
    .info-item .val.money { color: #1a7a5e; }
    .info-item .val.type  { color: #7c3aed; }

    .confirm-box {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border: 2px solid #86efac; border-radius: 14px; padding: 24px;
    }
    .btn-disburse {
        background: linear-gradient(135deg, #0f4c35, #1a7a5e);
        color: #fff; border: none; border-radius: 10px;
        padding: 12px 40px; font-size: .95rem; font-weight: 700;
        transition: opacity .2s, transform .15s;
    }
    .btn-disburse:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
</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 Disbursement</h5>
        </div>
        <div class="card-body p-4">

            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show">
                <i class="bi bi-exclamation-circle-fill me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif

            {{-- ── Search ── --}}
            <div class="section-heading"><i class="bi bi-search"></i> Search Loan Account</div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label>Loan Account Number / Member Name</label>
                    <div id="search_wrap">
                        <div class="input-group">
                            <span class="input-group-text bg-light" style="color:#1a7a5e;"><i class="bi bi-search"></i></span>
                            <input type="text" id="loan_search" class="form-control"
                                   placeholder="Type loan A/C no. or member name…" autocomplete="off">
                        </div>
                        <div id="search_suggestions"></div>
                    </div>
                    <small class="text-muted">Only undisbursed accounts are shown.</small>
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <a href="{{ route('loan.disbursement.index') }}" class="btn btn-outline-secondary w-100" style="background:linear-gradient(135deg,#0f4c35,#1a7a5e); color:#fff;">
                        <i class="bi bi-list-ul me-1"></i> View Disbursement List
                    </a>
                </div>
            </div>

            {{-- ── Loanee Detail Panel ── --}}
            <div id="loanee_panel">
                <div class="section-heading"><i class="bi bi-person-vcard-fill"></i> Loanee Details</div>
                <div class="info-grid mb-3" id="loanee_info_grid">
                    <div class="info-item">
                        <div class="lbl">Loan A/C No.</div>
                        <div class="val" id="d_loan_ac"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">GSS A/C No.</div>
                        <div class="val" id="d_gss_ac"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Loanee Name</div>
                        <div class="val" id="d_name"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Address</div>
                        <div class="val" id="d_address" style="font-size:.82rem;"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Mobile</div>
                        <div class="val" id="d_mobile"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Group</div>
                        <div class="val" id="d_group"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Loan Type</div>
                        <div class="val type" id="d_type"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Loan Amount</div>
                        <div class="val money" id="d_amount"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Pay Term</div>
                        <div class="val" id="d_payterm"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Instalment</div>
                        <div class="val money" id="d_installment"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Total to Pay</div>
                        <div class="val money" id="d_total"></div>
                    </div>
                    <div class="info-item">
                        <div class="lbl">Profit Amount</div>
                        <div class="val" id="d_profit" style="color:#92400e;"></div>
                    </div>
                </div>

                {{-- ── Confirm Disbursement ── --}}
                <div class="section-heading"><i class="bi bi-check2-circle"></i> Confirm Disbursement</div>
                <div class="confirm-box">
                    <form action="{{ route('loan.disbursement.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="loan_member_info_id" id="h_loan_member_info_id">

                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label>Disbursement Date <span class="text-danger">*</span></label>
                                <input type="text" name="disbursement_date" id="disbursement_date"
                                       class="form-control" required>
                            </div>
                            <div class="col-md-4">
                                <label>Disbursed Amount (৳) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">৳</span>
                                    <input type="number" name="disbursed_amount" id="disbursed_amount"
                                           class="form-control" step="1" min="1" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label>Remarks</label>
                                <input type="text" name="remarks" class="form-control" placeholder="Optional notes">
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-3">
                            <button type="submit" class="btn-disburse">
                                <i class="bi bi-check-circle-fill me-2"></i>Confirm & Disburse
                            </button>
                            <small class="text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                This will create a full collection schedule of <strong id="d_payterm_confirm">—</strong> instalments.
                            </small>
                        </div>
                    </form>
                </div>
            </div>

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

<script>
document.addEventListener('DOMContentLoaded', function () {

    // Set today's date
    const today = new Date();
    const fmtDate = d => String(d.getDate()).padStart(2,'0') + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + d.getFullYear();
    document.getElementById('disbursement_date').value = fmtDate(today);

    const searchInput = document.getElementById('loan_search');
    const sugBox      = document.getElementById('search_suggestions');
    let   debounce;

    searchInput.addEventListener('input', function () {
        clearTimeout(debounce);
        const q = this.value.trim();
        if (q.length < 2) { sugBox.style.display = 'none'; return; }

        debounce = setTimeout(() => {
            fetch('{{ route('loan.disbursement.search') }}?q=' + encodeURIComponent(q), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
                .then(r => r.json())
                .then(data => {
                    if (data.error) {
                        console.error('Search error from server:', data.error);
                        sugBox.innerHTML = `<div class="sug-item text-danger small"><i class="bi bi-exclamation-circle me-1"></i>${data.error}</div>`;
                        sugBox.style.display = 'block';
                        return;
                    }
                    sugBox.innerHTML = '';
                    if (!data.length) { sugBox.style.display = 'none'; return; }
                    data.forEach(m => {
                        const div = document.createElement('div');
                        div.className = 'sug-item';
                        div.innerHTML = `<span class="sug-ac">${m.loan_ac_number}</span><span class="sug-name">${m.member_name}</span>`;
                        div.addEventListener('click', () => selectLoanee(m));
                        sugBox.appendChild(div);
                    });
                    sugBox.style.display = 'block';
                })
                .catch(err => {
                    console.error('Search fetch failed:', err);
                    sugBox.innerHTML = `<div class="sug-item text-danger small">Request failed. Check console.</div>`;
                    sugBox.style.display = 'block';
                });
        }, 280);
    });

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

    function selectLoanee(m) {
        searchInput.value = m.loan_ac_number + ' — ' + m.member_name;
        sugBox.style.display = 'none';

        // Fill hidden field
        document.getElementById('h_loan_member_info_id').value = m.id;
        document.getElementById('disbursed_amount').value      = m.loan_amount.replace(/,/g, '');

        // Fill display panel
        document.getElementById('d_loan_ac').textContent     = m.loan_ac_number;
        document.getElementById('d_gss_ac').textContent      = m.account_number;
        document.getElementById('d_name').textContent        = m.member_name;
        document.getElementById('d_address').textContent     = m.member_address || '—';
        document.getElementById('d_mobile').textContent      = m.member_mobile  || '—';
        document.getElementById('d_group').textContent       = m.group_name;
        document.getElementById('d_type').textContent        = m.loan_type;
        document.getElementById('d_amount').textContent      = '৳ ' + m.loan_amount;
        document.getElementById('d_payterm').textContent     = m.pay_term + ' instalments';
        document.getElementById('d_installment').textContent = '৳ ' + m.installment;
        document.getElementById('d_total').textContent       = '৳ ' + m.total_amount_topay;
        document.getElementById('d_profit').textContent      = '৳ ' + m.profit_amount;
        document.getElementById('d_payterm_confirm').textContent = m.pay_term;

        document.getElementById('loanee_panel').style.display = 'block';
        document.getElementById('loanee_panel').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
});
</script>

@endsection