@extends('garage.layouts.app')

@section('title', 'Record Payment Received')

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentMethodSelect = document.getElementById('paymentMethod');
    const chequeFields = document.getElementById('chequeFields');
    const bankFields = document.getElementById('bankFields');
    
    function togglePaymentFields() {
        const method = paymentMethodSelect.value;
        
        // Hide all conditional fields
        chequeFields.style.display = 'none';
        bankFields.style.display = 'none';
        
        // Show relevant fields based on payment method
        if (method === 'cheque') {
            chequeFields.style.display = 'block';
        } else if (['bank_transfer', 'card', 'online'].includes(method)) {
            bankFields.style.display = 'block';
        }
    }
    
    paymentMethodSelect.addEventListener('change', togglePaymentFields);
    togglePaymentFields(); // Initialize on page load
    
    // Load invoices when customer changes
    const customerSelect = document.getElementById('customerSelect');
    const invoiceSelect = document.getElementById('invoiceSelect');
    
    customerSelect.addEventListener('change', function() {
        const customerId = this.value;
        
        if (!customerId) {
            invoiceSelect.innerHTML = '<option value="">Select Invoice</option>';
            return;
        }
        
        fetch(`/garage/api/invoices?customer_id=${customerId}`)
            .then(response => response.json())
            .then(data => {
                invoiceSelect.innerHTML = '<option value="">Select Invoice</option>';
                data.forEach(invoice => {
                    const option = document.createElement('option');
                    option.value = invoice.id;
                    option.textContent = `${invoice.invoice_number} - Balance: PKR ${parseFloat(invoice.balance_amount).toFixed(2)}`;
                    option.setAttribute('data-balance', invoice.balance_amount);
                    invoiceSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error loading invoices:', error);
            });
    });
    
    // Update max amount when invoice is selected
    invoiceSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
            const amountInput = document.getElementById('amount');
            amountInput.setAttribute('max', balance);
            amountInput.setAttribute('data-max-balance', balance);
        } else {
            const amountInput = document.getElementById('amount');
            amountInput.removeAttribute('max');
            amountInput.removeAttribute('data-max-balance');
        }
    });
    
    // Validate amount on input
    document.getElementById('amount').addEventListener('input', function() {
        const maxBalance = this.getAttribute('data-max-balance');
        if (maxBalance && parseFloat(this.value) > parseFloat(maxBalance)) {
            this.setCustomValidity(`Amount cannot exceed invoice balance of PKR ${parseFloat(maxBalance).toFixed(2)}`);
        } else {
            this.setCustomValidity('');
        }
    });
    
    // Pre-select customer if invoice is pre-selected
    @if(isset($selectedInvoice) && $selectedInvoice)
    if (invoiceSelect.value) {
        customerSelect.value = '{{ $selectedInvoice->customer_ledger_id }}';
        const selectedOption = invoiceSelect.options[invoiceSelect.selectedIndex];
        if (selectedOption) {
            const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
            const amountInput = document.getElementById('amount');
            amountInput.setAttribute('max', balance);
            amountInput.setAttribute('data-max-balance', balance);
            // Pre-fill amount with balance if balance is small
            if (balance > 0 && balance <= 100000) {
                amountInput.value = balance.toFixed(2);
            }
        }
    }
    @endif
});
</script>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="bi bi-cash-coin me-2"></i>Record Payment Received
                </h5>
                <a href="{{ route('garage.payments-received.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to List
                </a>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('garage.payments-received.store') }}" id="paymentForm">
                    @csrf

                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Payment Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('payment_number') is-invalid @enderror" name="payment_number" value="{{ old('payment_number', $paymentNumber) }}" required readonly>
                            @error('payment_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Payment Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('payment_date') is-invalid @enderror" name="payment_date" value="{{ old('payment_date', date('Y-m-d')) }}" required>
                            @error('payment_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Reference Number</label>
                            <input type="text" class="form-control @error('reference_number') is-invalid @enderror" name="reference_number" value="{{ old('reference_number') }}">
                            @error('reference_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <select class="form-select @error('status') is-invalid @enderror" name="status">
                                <option value="draft" {{ old('status', 'draft') === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="posted" {{ old('status') === 'posted' ? 'selected' : '' }}>Posted</option>
                            </select>
                            @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Customer</label>
                            <select class="form-select @error('customer_ledger_id') is-invalid @enderror" name="customer_ledger_id" id="customerSelect">
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ old('customer_ledger_id', isset($selectedInvoice) ? $selectedInvoice->customer_ledger_id : null) == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            @error('customer_ledger_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Invoice (Optional)</label>
                            <select class="form-select @error('invoice_id') is-invalid @enderror" name="invoice_id" id="invoiceSelect">
                                <option value="">Select Invoice</option>
                                @foreach($invoices as $invoice)
                                <option value="{{ $invoice->id }}" {{ old('invoice_id', $invoiceId ?? null) == $invoice->id ? 'selected' : '' }} data-balance="{{ $invoice->balance_amount }}">
                                    {{ $invoice->invoice_number }} - Balance: PKR {{ number_format($invoice->balance_amount, 2) }}
                                </option>
                                @endforeach
                            </select>
                            @error('invoice_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label">Payment Method <span class="text-danger">*</span></label>
                            <select class="form-select @error('payment_method') is-invalid @enderror" name="payment_method" id="paymentMethod" required>
                                <option value="cash" {{ old('payment_method', 'cash') === 'cash' ? 'selected' : '' }}>Cash</option>
                                <option value="cheque" {{ old('payment_method') === 'cheque' ? 'selected' : '' }}>Cheque</option>
                                <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                <option value="card" {{ old('payment_method') === 'card' ? 'selected' : '' }}>Card</option>
                                <option value="online" {{ old('payment_method') === 'online' ? 'selected' : '' }}>Online</option>
                                <option value="other" {{ old('payment_method') === 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('payment_method')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">PKR</span>
                                <input type="number" step="0.01" class="form-control @error('amount') is-invalid @enderror" name="amount" id="amount" value="{{ old('amount') }}" min="0.01" required>
                            </div>
                            @error('amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Cheque Fields -->
                    <div id="chequeFields" style="display: none;">
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label">Cheque Number</label>
                                <input type="text" class="form-control @error('cheque_number') is-invalid @enderror" name="cheque_number" value="{{ old('cheque_number') }}">
                                @error('cheque_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Cheque Date</label>
                                <input type="date" class="form-control @error('cheque_date') is-invalid @enderror" name="cheque_date" value="{{ old('cheque_date') }}">
                                @error('cheque_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Bank Name</label>
                                <input type="text" class="form-control @error('bank_name') is-invalid @enderror" name="bank_name" value="{{ old('bank_name') }}">
                                @error('bank_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Bank Transfer/Card/Online Fields -->
                    <div id="bankFields" style="display: none;">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Bank Name</label>
                                <input type="text" class="form-control @error('bank_name') is-invalid @enderror" name="bank_name" value="{{ old('bank_name') }}">
                                @error('bank_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Transaction Reference</label>
                                <input type="text" class="form-control @error('transaction_reference') is-invalid @enderror" name="transaction_reference" value="{{ old('transaction_reference') }}">
                                @error('transaction_reference')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" name="notes" rows="3">{{ old('notes') }}</textarea>
                            @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('garage.payments-received.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Save Payment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection