@extends('layouts.app')

@section('title', 'Record Payment')
@section('page-title', 'Record Payment')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-10">
        <form action="{{ route('payments.store') }}" method="POST" id="paymentForm">
            @csrf
            
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold text-primary">Customer & Payment Details</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Customer Name <span class="text-danger">*</span></label>
                            <select name="customer_id" id="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ (old('customer_id') == $customer->id || $selected_customer_id == $customer->id) ? 'selected' : '' }}>
                                        {{ $customer->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Invoice <span class="text-danger">*</span></label>
                            <select name="invoice_id" id="invoice_id" class="form-select @error('invoice_id') is-invalid @enderror" required>
                                <option value="">Select Invoice</option>
                                @foreach($invoices as $invoice)
                                    <option value="{{ $invoice->id }}" data-pending="{{ $invoice->pending_amount }}" data-total="{{ $invoice->total_amount }}" {{ old('invoice_id') == $invoice->id ? 'selected' : '' }}>
                                        {{ $invoice->invoice_number }} (Pending: {{ formatCurrency($invoice->pending_amount) }})
                                    </option>
                                @endforeach
                            </select>
                            <div id="invoiceLoading" class="spinner-border spinner-border-sm text-primary d-none mt-2" role="status"></div>
                            @error('invoice_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Payment #</label>
                            <input type="text" name="payment_number" class="form-control bg-light" value="{{ old('payment_number', $nextPaymentNumber) }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Payment Date <span class="text-danger">*</span></label>
                            <input type="date" name="payment_date" class="form-control @error('payment_date') is-invalid @enderror" value="{{ old('payment_date', date('Y-m-d')) }}" required>
                            @error('payment_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Payment Mode <span class="text-danger">*</span></label>
                            <select name="payment_mode" class="form-select @error('payment_mode') is-invalid @enderror" required>
                                <option value="cash" {{ old('payment_mode') == 'cash' ? 'selected' : '' }}>Cash</option>
                                <option value="bank" {{ old('payment_mode') == 'bank' ? 'selected' : '' }}>Bank Transfer</option>
                                <option value="upi" {{ old('payment_mode') == 'upi' ? 'selected' : '' }}>UPI / Digital</option>
                                <option value="check" {{ old('payment_mode') == 'check' ? 'selected' : '' }}>Cheque</option>
                            </select>
                            @error('payment_mode') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Deposit To <span class="text-danger">*</span></label>
                            <select name="bank_account_id" class="form-select @error('bank_account_id') is-invalid @enderror" required>
                                <option value="">-- Select Account --</option>
                                @foreach($bankAccounts as $bankAccount)
                                    <option value="{{ $bankAccount->id }}" {{ old('bank_account_id') == $bankAccount->id ? 'selected' : '' }}>
                                        {{ $bankAccount->name }} ({{ ucfirst($bankAccount->account_type) }})
                                    </option>
                                @endforeach
                            </select>
                            @error('bank_account_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold text-primary">Amount Details</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Paid Amount <span class="text-danger">*</span></label>
                            <div class="input-group input-group-lg">
                                    <span class="input-group-text" id="currency_symbol_addon">{{ getCurrencySymbol() }}</span>
                                <input type="number" step="0.01" name="amount" id="amount" class="form-control border-start-0 @error('amount') is-invalid @enderror" value="{{ old('amount') }}" placeholder="0.00" required>
                            </div>
                            @error('amount') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="bg-light p-3 rounded-3 border">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="text-muted">Invoice Total:</span>
                                    <span id="displayTotal" class="fw-semibold">{{ formatCurrency(0) }}</span>
                                </div>
                                <div class="d-flex justify-content-between text-danger fw-bold">
                                    <span>Pending Balance:</span>
                                    <span id="displayPending">{{ formatCurrency(0) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold text-primary">Additional Information</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Reference Number</label>
                            <input type="text" name="reference_number" class="form-control" value="{{ old('reference_number') }}" placeholder="TRN-123456789">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label fw-bold small text-muted text-uppercase">Notes</label>
                            <textarea name="notes" class="form-control" rows="3" placeholder="Reference for this payment...">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-5 d-flex gap-2">
                <button type="submit" class="btn btn-primary px-5 py-2">Save Payment</button>
                <a href="{{ route('payments.index') }}" class="btn btn-light border px-4 py-2">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
    const currencySymbol = "{{ getCurrencySymbol() }} ";
    document.getElementById('customer_id').addEventListener('change', function() {
        const customerId = this.value;
        const invoiceSelect = document.getElementById('invoice_id');
        const loader = document.getElementById('invoiceLoading');
        
        invoiceSelect.innerHTML = '<option value="">Select Invoice</option>';
        
        if (!customerId) return;
        
        loader.classList.remove('d-none');
        
        fetch(`/payments/customer-invoices/${customerId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(invoice => {
                    const option = document.createElement('option');
                    option.value = invoice.id;
                    option.text = `${invoice.invoice_number} (Pending: ${currencySymbol}${parseFloat(invoice.pending_amount).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})})`;
                    option.dataset.pending = invoice.pending_amount;
                    option.dataset.total = invoice.total_amount;
                    invoiceSelect.add(option);
                });
                loader.classList.add('d-none');
            });
    });

    document.getElementById('invoice_id').addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        const total = selected.dataset.total || 0;
        const pending = selected.dataset.pending || 0;
        
        document.getElementById('displayTotal').innerText = currencySymbol + parseFloat(total).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('displayPending').innerText = currencySymbol + parseFloat(pending).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        
        // Auto-fill amount if empty
        const amountInput = document.getElementById('amount');
        if (!amountInput.value) {
            amountInput.value = pending;
        }
    });
</script>
@endsection