@extends('layouts.app')
@section('title', 'Record Customer Payment')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('customer-payments.index') }}">Customer Payments</a></li>
<li class="breadcrumb-item active">New Payment</li>
@endsection
@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-cash-stack me-2" style="color:#1d4ed8;"></i>Record Customer Payment</h1>
</div>

<form method="POST" action="{{ route('customer-payments.store') }}">
@csrf
<div class="row g-3">
    <div class="col-12 col-lg-7">
        <div class="card">
            <div class="card-header fw-600">Payment Details</div>
            <div class="card-body">

                <div class="mb-3">
                    <label class="form-label fw-semibold">Customer <span class="text-danger">*</span></label>
                    <select name="customer_id" id="customerSelect" class="form-select" required
                            onchange="loadPendingSales(this.value)">
                        <option value="">— Select Customer —</option>
                        @foreach($customers as $c)
                        <option value="{{ $c->id }}"
                                data-due="{{ $c->current_due }}"
                                {{ $selectedCustomer?->id == $c->id ? 'selected' : '' }}>
                            {{ $c->name }}{{ $c->phone ? ' — '.$c->phone : '' }}
                            (Due: ৳{{ number_format($c->current_due, 0) }})
                        </option>
                        @endforeach
                    </select>
                    <div id="customerDueDisplay" class="{{ $selectedCustomer ? '' : 'd-none' }} mt-2 p-2 rounded"
                         style="background:#eff6ff;font-size:.8rem;">
                        <strong style="color:#1d4ed8;">Total Due:</strong>
                        <span id="customerDueAmt" style="color:#1d4ed8;font-weight:700;font-size:1rem;">
                            ৳{{ number_format($selectedCustomer?->current_due ?? 0, 2) }}
                        </span>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Link to Invoice (optional)</label>
                    <select name="sale_id" id="saleSelect" class="form-select">
                        <option value="">— General Payment —</option>
                        @foreach($pendingSales as $sale)
                        <option value="{{ $sale->id }}" data-due="{{ $sale->due_amount }}">
                            {{ $sale->invoice_no }} — {{ $sale->sale_date->format('d M Y') }}
                            — Due: ৳{{ number_format($sale->due_amount, 2) }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Amount <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="amount" id="amountInput" class="form-control"
                                   value="{{ old('amount') }}" min="0.01" step="0.01" required>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mt-1" onclick="payFullDue()">
                            Collect Full Due
                        </button>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Payment Date <span class="text-danger">*</span></label>
                        <input type="date" name="payment_date" class="form-control"
                               value="{{ old('payment_date', date('Y-m-d')) }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Account <span class="text-danger">*</span></label>
                        <select name="account_id" class="form-select" required>
                            <option value="">— Select Account —</option>
                            @foreach($accounts as $acc)
                            <option value="{{ $acc->id }}">
                                {{ $acc->name }} — Bal: ৳{{ number_format($acc->current_balance, 0) }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Method <span class="text-danger">*</span></label>
                        <select name="payment_method" class="form-select" required>
                            <option value="cash">Cash</option>
                            <option value="mobile_banking">Mobile Banking</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="cheque">Cheque</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Reference</label>
                        <input type="text" name="reference" class="form-control" value="{{ old('reference') }}" placeholder="Transaction ID, cheque no…">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Notes</label>
                        <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" placeholder="Optional">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-5">
        <div class="card mb-3 d-none" id="pendingSalesCard">
            <div class="card-header fw-600">Pending Invoices</div>
            <div class="card-body p-0" id="pendingSalesBody"></div>
        </div>
        <div class="card">
            <div class="card-body">
                <button type="submit" class="btn btn-primary w-100 mb-2" style="font-weight:700;">
                    <i class="bi bi-check-circle me-1"></i>Record Payment
                </button>
                <a href="{{ route('customer-payments.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>
            </div>
        </div>
    </div>
</div>
</form>

@endsection

@push('scripts')
<script>
const PENDING_SALES_URL = '{{ route("customer-payments.pending-sales") }}';

async function loadPendingSales(customerId) {
    const sel    = document.getElementById('customerSelect');
    const opt    = sel.options[sel.selectedIndex];
    const due    = parseFloat(opt?.dataset?.due || 0);
    const dueDiv = document.getElementById('customerDueDisplay');
    document.getElementById('customerDueAmt').textContent =
        '৳' + due.toLocaleString('en-IN',{minimumFractionDigits:2,maximumFractionDigits:2});
    customerId && due > 0 ? dueDiv.classList.remove('d-none') : dueDiv.classList.add('d-none');

    if (!customerId) { document.getElementById('pendingSalesCard').classList.add('d-none'); return; }

    const resp   = await fetch(PENDING_SALES_URL + '?customer_id=' + customerId);
    const sales  = await resp.json();
    const card   = document.getElementById('pendingSalesCard');
    const body   = document.getElementById('pendingSalesBody');
    const saleSel= document.getElementById('saleSelect');

    saleSel.innerHTML = '<option value="">— General Payment —</option>' +
        sales.map(s => `<option value="${s.id}" data-due="${s.due_amount}">${s.invoice_no} — Due: ৳${parseFloat(s.due_amount).toFixed(2)}</option>`).join('');

    body.innerHTML = sales.length ? sales.map(s => `
        <div class="d-flex justify-content-between px-3 py-2 border-bottom" style="font-size:.82rem;cursor:pointer;"
             onclick="document.getElementById('saleSelect').value=${s.id};document.getElementById('amountInput').value=${s.due_amount};">
            <div><div class="fw-600">${s.invoice_no}</div><div class="text-muted">${s.sale_date}</div></div>
            <div style="text-align:right;"><div style="color:#dc2626;font-weight:700;">৳${parseFloat(s.due_amount).toFixed(2)}</div></div>
        </div>`).join('') : '<div class="py-3 text-center text-muted" style="font-size:.875rem;">No pending invoices</div>';

    card.classList.toggle('d-none', !sales.length);
}

function payFullDue() {
    const opt = document.getElementById('saleSelect').options[document.getElementById('saleSelect').selectedIndex];
    const due = opt?.dataset?.due
        ? parseFloat(opt.dataset.due)
        : parseFloat(document.getElementById('customerDueAmt').textContent.replace(/[৳,]/g,'')) || 0;
    document.getElementById('amountInput').value = due.toFixed(2);
}
</script>
@endpush