@extends('garage.layouts.app')

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

@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;
        chequeFields.style.display = 'none';
        bankFields.style.display = 'none';
        if (method === 'cheque') {
            chequeFields.style.display = 'block';
        } else if (['bank_transfer', 'card', 'online'].includes(method)) {
            bankFields.style.display = 'block';
        }
    }

    paymentMethodSelect.addEventListener('change', togglePaymentFields);
    togglePaymentFields();

    const vendorSelect = document.getElementById('vendorSelect');
    const invoiceSelect = document.getElementById('invoiceSelect');

    function filterInvoicesByVendor() {
        const vendorId = vendorSelect.value;
        Array.from(invoiceSelect.options).forEach(function(opt) {
            if (!opt.value) {
                opt.hidden = false;
                return;
            }
            const optVendor = opt.getAttribute('data-vendor-id') || '';
            opt.hidden = vendorId !== '' && optVendor !== vendorId;
        });
        if (invoiceSelect.selectedOptions[0]?.hidden) {
            invoiceSelect.value = '';
        }
    }

    vendorSelect.addEventListener('change', filterInvoicesByVendor);
    filterInvoicesByVendor();

    invoiceSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const amountInput = document.getElementById('amount');
        if (selectedOption.value) {
            const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
            amountInput.setAttribute('max', balance);
            amountInput.setAttribute('data-max-balance', balance);
        } else {
            amountInput.removeAttribute('max');
            amountInput.removeAttribute('data-max-balance');
        }
    });

    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('');
        }
    });
});
</script>
@endpush

@section('content')
@if(session('success'))<div class="alert alert-success py-2 small mx-2">{{ session('success') }}</div>@endif
@if(session('error'))<div class="alert alert-danger py-2 small mx-2">{{ session('error') }}</div>@endif
<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-credit-card me-2"></i>Record Payment Made
                </h5>
                <a href="{{ route('garage.payments-made.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-made.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">Vendor</label>
                            <select class="form-select @error('vendor_ledger_id') is-invalid @enderror" name="vendor_ledger_id" id="vendorSelect">
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                <option value="{{ $vendor->id }}" {{ old('vendor_ledger_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                            @error('vendor_ledger_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Purchase Invoice (Optional)</label>
                            <select class="form-select @error('purchase_invoice_id') is-invalid @enderror" name="purchase_invoice_id" id="invoiceSelect">
                                <option value="">Select Invoice</option>
                                @foreach($purchaseInvoices as $invoice)
                                <option value="{{ $invoice->id }}" {{ old('purchase_invoice_id') == $invoice->id ? 'selected' : '' }} data-balance="{{ $invoice->balance_amount }}" data-vendor-id="{{ $invoice->vendor_ledger_id }}">
                                    {{ $invoice->bill_number }} - Balance: PKR {{ number_format($invoice->balance_amount, 2) }}
                                </option>
                                @endforeach
                            </select>
                            @error('purchase_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>

                    <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>

                    <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-made.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