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

<style>
    .card          { border: none; border-radius: 16px; }
    .card-header   { font-weight: 600; letter-spacing: .5px; }
    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: #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: 24px 0 14px;
        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; }

    /* GSS member search */
    #gss_search_wrap { position: relative; }
    #gss_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: 220px; overflow-y: auto;
        display: none; box-shadow: 0 8px 20px rgba(0,0,0,.1);
    }
    #gss_suggestions .sug-item {
        padding: 9px 14px; cursor: pointer; font-size: .875rem;
        border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 10px;
    }
    #gss_suggestions .sug-item:last-child { border-bottom: none; }
    #gss_suggestions .sug-item:hover { background: #fff5f5; }
    #gss_suggestions .sug-acc  { font-weight: 700; color: #dc3545; font-family: monospace; }
    #gss_suggestions .sug-name { color: #374151; }

    /* filled indicator */
    .autofill-badge {
        display: none; font-size: .72rem; font-weight: 600;
        padding: 2px 8px; border-radius: 20px;
        background: #d1fae5; color: #065f46; margin-left: 8px; vertical-align: middle;
    }

    /* guarantor panel */
    .guarantor-card {
        background: #fff8f0; border: 1.5px dashed #f59e0b;
        border-radius: 12px; padding: 20px;
    }
</style>

<div class="container my-3">
    <div class="card shadow-lg">
        <div class="card-header bg-danger text-white text-center py-3">
            <h4 class="mb-0"><i class="bi bi-cash-coin me-2"></i>Loan Account Opening</h4>
        </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

            <form action="{{ route('loanmember.info.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                {{-- hidden: GSS member account number --}}
                <input type="hidden" name="account_no" id="account_no">

                {{-- ── GSS Member Lookup ── --}}
                <div class="section-heading"><i class="bi bi-search"></i> GSS Member Lookup</div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>
                            Search by GSS Account Number
                            <span class="autofill-badge" id="autofill_badge"><i class="bi bi-check-circle-fill me-1"></i>Auto-filled</span>
                        </label>
                        <div id="gss_search_wrap">
                            <div class="input-group">
                                <span class="input-group-text bg-light text-danger"><i class="bi bi-person-badge"></i></span>
                                <input type="text" id="gss_search" name="gss_search" class="form-control"
                                       placeholder="Type account no. or member name…" autocomplete="off">
                                <button type="button" class="btn btn-outline-secondary" id="gss_clear" title="Clear">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>
                            <div id="gss_suggestions"></div>
                        </div>
                        <small class="text-muted">Select a GSS member to auto-fill the form below.</small>
                    </div>
                    <div class="col-md-3">
                        <label>Loan Account Number</label>
                        <input type="text" name="account_number" id="account_number" class="form-control bg-light"
                               readonly placeholder="Auto-generated from group">
                        <small class="text-muted">Generated after selecting a group.</small>
                    </div>
                    <div class="col-md-3">
                        <label>Opening Date</label>
                        <input type="text" name="opening_date" id="opening_date" class="form-control">
                    </div>
                </div>

                {{-- ── Account / Group Info ── --}}
                <div class="section-heading"><i class="bi bi-credit-card-2-front"></i> Account Information</div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>Group Name</label>
                        <input type="text" name="pid_name" id="pid_name" class="form-control"
                               list="group-list" autocomplete="off" placeholder="Select group">
                        <datalist id="group-list">
                            @foreach($groups as $group)
                            <option value="{{ $group->group_name }}">
                            @endforeach
                        </datalist>
                    </div>
                    <div class="col-md-4">
                        <label>A/C Holder Name <span class="text-danger">*</span></label>
                        <input type="text" name="member_name" id="member_name"
                               class="form-control @error('member_name') is-invalid @enderror">
                        @error('member_name')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                </div>

                {{-- ── Loan Details ── --}}
                <div class="section-heading"><i class="bi bi-bank2"></i> Loan Details</div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>Loan Type</label>
                        <select name="loan_type" id="loan_type" class="form-select">
                            <option value="">-- Select Type --</option>
                            @foreach($loanTypes as $lt)
                            <option value="{{ $lt->loan_type }}"
                                data-days="{{ $lt->duration_days }}"
                                data-charge="{{ $lt->charge_percent }}"
                                data-payterm="{{ $lt->pay_term }}">
                                {{ $lt->loan_type }}
                            </option>
                            @endforeach
                        </select>
                        <small class="text-muted">Selecting a type will auto-fill duration, interest &amp; pay term.</small>
                    </div>
                    <div class="col-md-4">
                        <label>Loan Amount <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light">৳</span>
                            <input type="number" name="loan_amount" id="loan_amount"
                                   class="form-control @error('loan_amount') is-invalid @enderror" step="1" min="1">
                        </div>
                        @error('loan_amount')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="col-md-4">
                        <label>Pay Term <small class="text-muted">(no. of instalments)</small></label>
                        <input type="number" name="pay_term" id="pay_term" class="form-control" min="1" placeholder="Auto-filled" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>Duration (Days)</label>
                        <input type="number" name="loan_duration" id="loan_duration" class="form-control" min="1" placeholder="Auto-filled" readonly>
                    </div>
                    <div class="col-md-4">
                        <label>Interest / Charge (%)</label>
                        <div class="input-group">
                            <input type="number" name="interest_rate" id="interest_rate" class="form-control" step="0.01" min="0" placeholder="Auto-filled" readonly>
                            <span class="input-group-text bg-light">%</span>
                        </div>
                    </div>
                </div>

                {{-- ── account_number (computed) ── --}}
                <div class="section-heading"><i class="bi bi-calculator-fill"></i> account_number</div>
                <div class="row mb-3 g-3">
                    <div class="col-md-3">
                        <label>Expire Date</label>
                        <input type="text" id="preview_expire" class="form-control bg-light" readonly placeholder="—">
                    </div>
                    <div class="col-md-3">
                        <label>Total Amount to Pay (৳)</label>
                        <input type="text" id="preview_total" class="form-control bg-light fw-bold" readonly placeholder="—" style="color:#dc3545;">
                    </div>
                    <div class="col-md-3">
                        <label>Instalment Amount (৳)</label>
                        <input type="text" name="installment" id="preview_installment" class="form-control bg-light fw-bold" readonly placeholder="—" style="color:#0f4c35;">
                    </div>
                    <div class="col-md-3">
                        <label>Profit / Charge Amount (৳)</label>
                        <input type="text" id="preview_profit" class="form-control bg-light" readonly placeholder="—" style="color:#92400e;">
                    </div>
                </div>

                {{-- ── Member Info (read-only from member_infos) ── --}}
                <div class="section-heading"><i class="bi bi-person-lines-fill"></i> Member Information <small class="text-muted fw-normal ms-1">(from GSS record)</small></div>
                <div id="member_info_panel" style="display:none;" class="mb-3">
                    <div class="row g-2">
                        <div class="col-md-3">
                            <label class="text-muted small">Father / Husband</label>
                            <div class="form-control bg-light" id="d_fat_hus_name" style="min-height:38px;">—</div>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small">Mother's Name</label>
                            <div class="form-control bg-light" id="d_mother_name" style="min-height:38px;">—</div>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small">Mobile</label>
                            <div class="form-control bg-light" id="d_mobile_info" style="min-height:38px;">—</div>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small">NID</label>
                            <div class="form-control bg-light" id="d_nid" style="min-height:38px;">—</div>
                        </div>
                        <div class="col-md-6 mt-2">
                            <label class="text-muted small">Address</label>
                            <div class="form-control bg-light" id="d_address_info" style="min-height:38px;">—</div>
                        </div>
                        <div class="col-md-3 mt-2">
                            <label class="text-muted small">Occupation</label>
                            <div class="form-control bg-light" id="d_occupation" style="min-height:38px;">—</div>
                        </div>
                        <div class="col-md-3 mt-2">
                            <label class="text-muted small">Date of Birth</label>
                            <div class="form-control bg-light" id="d_dob" style="min-height:38px;">—</div>
                        </div>
                    </div>
                </div>
                <div id="member_info_empty" class="text-muted small mb-3">
                    <i class="bi bi-info-circle me-1"></i>Select a GSS member above to view their details.
                </div>

                {{-- ── Guarantor ── --}}
                <div class="section-heading"><i class="bi bi-person-check-fill"></i> Guarantor Information</div>
                <div class="guarantor-card mb-3">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label>Guarantor Name <span class="text-danger">*</span></label>
                            <input type="text" name="guarantor_name" class="form-control" placeholder="Full name">
                        </div>
                        <div class="col-md-6">
                            <label>Relation with Loanee</label>
                            <select name="guarantor_relation" class="form-select">
                                <option value="">-- Select Relation --</option>
                                <option value="Spouse">Spouse</option>
                                <option value="Father">Father</option>
                                <option value="Mother">Mother</option>
                                <option value="Brother">Brother</option>
                                <option value="Sister">Sister</option>
                                <option value="Son">Son</option>
                                <option value="Daughter">Daughter</option>
                                <option value="Relative">Relative</option>
                                <option value="Friend">Friend</option>
                                <option value="Colleague">Colleague</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label>Mobile Number</label>
                            <input type="text" name="guarantor_mobile" class="form-control" placeholder="01XXXXXXXXX">
                        </div>
                        <div class="col-md-4">
                            <label>NID Number</label>
                            <input type="text" name="guarantor_nid" class="form-control" placeholder="National ID">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label>Address</label>
                            <textarea name="guarantor_address" class="form-control" rows="2" placeholder="Full address"></textarea>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-danger px-5 py-2" style="border-radius:10px; font-weight:600;">
                        <i class="bi bi-save2 me-1"></i> Save Loan Member
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@php
    $gssMembersJson = $gssMembers->map(fn($m) => [
        'account_number' => $m->account_number,
        'member_name'    => $m->member_name,
    ])->values()->toJson();
@endphp

<script>
document.addEventListener("DOMContentLoaded", function () {
    // ── Set today's date ──
    const today = new Date();
    const fmt = d => String(d.getDate()).padStart(2,'0') + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + d.getFullYear();
    document.getElementById('opening_date').value = fmt(today);

    // ── GSS member data ──
    const gssMembers = @json($gssMembers->map(fn($m) => ['account_number'=>$m->account_number,'member_name'=>$m->member_name])->values());

    const searchInput = document.getElementById('gss_search');
    const sugBox      = document.getElementById('gss_suggestions');
    const clearBtn    = document.getElementById('gss_clear');
    const badge       = document.getElementById('autofill_badge');

    // Build suggestion list
    searchInput.addEventListener('input', function () {
        const q = this.value.trim().toLowerCase();
        sugBox.innerHTML = '';
        sugBox.style.display = 'none';
        if (!q) return;

        const matches = gssMembers.filter(m =>
            m.account_number.toLowerCase().includes(q) ||
            m.member_name.toLowerCase().includes(q)
        ).slice(0, 30);

        if (!matches.length) return;
        matches.forEach(m => {
            const div = document.createElement('div');
            div.className = 'sug-item';
            div.innerHTML = `<span class="sug-acc">${m.account_number}</span><span class="sug-name">${m.member_name}</span>`;
            div.addEventListener('click', () => selectMember(m.account_number, m.member_name));
            sugBox.appendChild(div);
        });
        sugBox.style.display = 'block';
    });

    // Close suggestions on outside click
    document.addEventListener('click', e => {
        if (!e.target.closest('#gss_search_wrap')) sugBox.style.display = 'none';
    });

    // Clear button
    clearBtn.addEventListener('click', clearAutofill);

    function selectMember(accNo, name) {
        searchInput.value = accNo + ' — ' + name;
        sugBox.style.display = 'none';
        document.getElementById('account_no').value = accNo; // store GSS AC no

        // Fetch full member info
        fetch('{{ route('loanmember.info.get-member-info') }}?account_number=' + encodeURIComponent(accNo))
            .then(r => r.json())
            .then(data => {
                if (data.error) { alert('Member not found.'); return; }
                // Display-only member info panel (not stored in loan_member_infos)
                setField('member_name', data.member_name);
                setText('d_fat_hus_name', data.fat_hus_name);
                setText('d_mother_name',  data.mother_name);
                setText('d_mobile_info',  data.member_mobile);
                setText('d_nid',          data.member_nid);
                setText('d_address_info', data.member_address);
                setText('d_occupation',   data.member_occupation);
                setText('d_dob',          data.member_dob);
                document.getElementById('member_info_panel').style.display = 'block';
                document.getElementById('member_info_empty').style.display = 'none';

                // Set group name and trigger account number generation
                const pidField = document.getElementById('pid_name');
                pidField.value = data.group_name;
                pidField.dispatchEvent(new Event('change'));

                badge.style.display = 'inline';
            })
            .catch(() => alert('Failed to fetch member info.'));
    }

    function setField(id, val) {
        const el = document.getElementById(id);
        if (el) el.value = val || '';
    }
    function setText(id, val) {
        const el = document.getElementById(id);
        if (el) el.textContent = val || '—';
    }
    function clearAutofill() {
        searchInput.value = '';
        sugBox.style.display = 'none';
        badge.style.display = 'none';
        setField('member_name', '');
        setField('pid_name', '');
        document.getElementById('account_number').value = '';
        document.getElementById('member_info_panel').style.display = 'none';
        document.getElementById('member_info_empty').style.display = 'block';
        ['d_fat_hus_name','d_mother_name','d_mobile_info','d_nid','d_address_info','d_occupation','d_dob']
            .forEach(id => setText(id, ''));
    }

    // ── Loan type auto-fill ──
    document.getElementById('loan_type').addEventListener('change', function () {
        const opt           = this.options[this.selectedIndex];
        const isAgriculture = this.value === 'Agriculture';
        const rateField     = document.getElementById('interest_rate');

        document.getElementById('loan_duration').value = opt.dataset.days    || '';
        document.getElementById('pay_term').value      = opt.dataset.payterm || '';
        rateField.value                                = opt.dataset.charge  || '';

        const instField = document.getElementById('preview_installment');

        if (isAgriculture) {
            rateField.removeAttribute('readonly');
            rateField.style.background  = '#fff';
            rateField.placeholder       = 'Enter interest %';
            instField.removeAttribute('readonly');
            instField.style.background  = '#fff';
            instField.placeholder       = 'Enter instalment';
        } else {
            rateField.setAttribute('readonly', true);
            rateField.style.background  = '#f9fafb';
            rateField.placeholder       = 'Auto-filled';
            instField.setAttribute('readonly', true);
            instField.style.background  = '#f9fafb';
            instField.placeholder       = '—';
        }

        recalculate();
    });

    // ── Live account_number recalculation ──
    function recalculate() {
        const principal  = parseFloat(document.getElementById('loan_amount')?.value)  || 0;
        const charge     = parseFloat(document.getElementById('interest_rate').value)  || 0;
        const payTerm    = parseFloat(document.getElementById('pay_term').value)       || 0;
        const durationDays = parseInt(document.getElementById('loan_duration').value)  || 0;

        const total      = principal + (principal * charge * 0.01);
        const profit     = total - principal;
        const instalment = payTerm > 0 ? total / payTerm : 0;

        const fmt = n => n > 0 ? n.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '—';
        document.getElementById('preview_total').value       = principal > 0 ? fmt(total)     : '';
        document.getElementById('preview_profit').value      = principal > 0 ? fmt(profit)    : '';
        document.getElementById('preview_installment').value = instalment > 0 ? fmt(instalment) : '';

        // Expire date
        const openingRaw = document.getElementById('opening_date').value;
        if (openingRaw && durationDays > 0) {
            const parts = openingRaw.split('-');
            const loanDate = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
            loanDate.setDate(loanDate.getDate() + durationDays);
            const dd = String(loanDate.getDate()).padStart(2,'0');
            const mm = String(loanDate.getMonth()+1).padStart(2,'0');
            const yyyy = loanDate.getFullYear();
            document.getElementById('preview_expire').value = `${dd}-${mm}-${yyyy}`;
        }
    }

    // Re-calculate on any relevant field change
    document.getElementById('loan_amount')?.addEventListener('input', recalculate);
    document.getElementById('interest_rate').addEventListener('keyup', recalculate);
    document.getElementById('interest_rate').addEventListener('change', recalculate);
    document.getElementById('opening_date').addEventListener('change', recalculate);

    // ── Auto-generate loan account number when group changes ──
    document.getElementById('pid_name').addEventListener('change', function () {
        const groupName = this.value.trim();
        if (!groupName) return;
        fetch('{{ route('loanmember.info.next-account-number') }}?group_name=' + encodeURIComponent(groupName))
            .then(r => r.json())
            .then(data => { document.getElementById('account_number').value = data.account_number || ''; });
    });
});

function previewPhoto(input) {
    if (input.files && input.files[0])
        document.getElementById('photo_preview').src = URL.createObjectURL(input.files[0]);
}
function previewSignature(input) {
    if (input.files && input.files[0])
        document.getElementById('sig_preview').src = URL.createObjectURL(input.files[0]);
}
</script>

@endsection