@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h4">Record Payment</h2>
                <a href="{{ route('vendor-payments.index') }}" class="btn btn-light border">
                    <i class="fas fa-times me-1"></i> Cancel
                </a>
            </div>

            <form action="{{ route('vendor-payments.store') }}" method="POST" id="paymentForm">
                @csrf
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="card-title mb-0">Payment Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label required">Vendor</label>
                                <select name="vendor_id" id="vendor_id" class="form-select @error('vendor_id') is-invalid @enderror" required>
                                    <option value="">Select Vendor</option>
                                    @foreach($vendors as $vendor)
                                        <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                    @endforeach
                                </select>
                                @error('vendor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label required">Payment #</label>
                                <input type="text" name="payment_number" class="form-control @error('payment_number') is-invalid @enderror" value="{{ $payment_number }}" required>
                                @error('payment_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label required">Payment Date</label>
                                <input type="date" name="payment_date" class="form-control @error('payment_date') is-invalid @enderror" value="{{ 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 required">Payment Mode</label>
                                <select name="payment_mode" class="form-select @error('payment_mode') is-invalid @enderror" required>
                                    <option value="Cash">Cash</option>
                                    <option value="Bank Transfer">Bank Transfer</option>
                                    <option value="Check">Check</option>
                                    <option value="UPI">UPI</option>
                                </select>
                                @error('payment_mode') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label required">Paid Through Account</label>
                                <select name="paid_through_account_id" class="form-select @error('paid_through_account_id') is-invalid @enderror" required>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->code }})</option>
                                    @endforeach
                                </select>
                                @error('paid_through_account_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-primary fw-bold">Amount To Pay</label>
                                <input type="number" name="amount" id="total_amount" step="0.01" class="form-control fw-bold border-primary @error('amount') is-invalid @enderror" placeholder="0.00" required>
                                @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Reference #</label>
                                <input type="text" name="reference_number" class="form-control" placeholder="e.g. TXN123456">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Notes</label>
                                <textarea name="notes" class="form-control" rows="2" placeholder="Add a note..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bill Allocations -->
                <div class="card border-0 shadow-sm mb-4 d-none" id="billsCard">
                    <div class="card-header bg-white py-3">
                        <h5 class="card-title mb-0">Unpaid Bills</h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover align-middle mb-0" id="billsTable">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4">Bill #</th>
                                    <th>Date</th>
                                    <th>Total Amount</th>
                                    <th>Balance</th>
                                    <th width="200">Payment</th>
                                    <th class="pe-4 text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer bg-light d-flex justify-content-end align-items-center py-3">
                        <div class="me-4 text-end">
                            <div class="text-muted small">Total Allocated</div>
                            <div class="h5 mb-0 fw-bold" id="allocated_display">{{ getCurrencySymbol() }}0.00</div>
                        </div>
                        <div class="text-end">
                            <div class="text-muted small">Remaining to Allocate</div>
                            <div class="h5 mb-0 fw-bold text-danger" id="remaining_display">{{ getCurrencySymbol() }}0.00</div>
                        </div>
                    </div>
                </div>

                <div class="mb-5 d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary px-5 py-2">
                        <i class="fas fa-save me-1"></i> Save Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const currencySymbol = '{{ getCurrencySymbol() }}';
    const vendorSelect = document.getElementById('vendor_id');
    const totalAmountInput = document.getElementById('total_amount');
    const billsCard = document.getElementById('billsCard');
    const billsTableBody = document.querySelector('#billsTable tbody');
    const allocatedDisplay = document.getElementById('allocated_display');
    const remainingDisplay = document.getElementById('remaining_display');
    const form = document.getElementById('paymentForm');

    vendorSelect.addEventListener('change', function() {
        const vendorId = this.value;
        if (!vendorId) {
            billsCard.classList.add('d-none');
            return;
        }

        fetch(`{{ url('vendor-payments/bills') }}/${vendorId}`)
            .then(response => response.json())
            .then(data => {
                billsTableBody.innerHTML = '';
                if (data.length > 0) {
                    data.forEach((bill, index) => {
                        const row = `
                            <tr>
                                <td class="ps-4 font-monospace small">${bill.bill_number}</td>
                                <td>${new Date(bill.bill_date).toLocaleDateString()}</td>
                                <td>${currencySymbol}${parseFloat(bill.total_amount).toLocaleString()}</td>
                                <td class="text-danger fw-bold">${currencySymbol}${parseFloat(bill.balance_amount).toLocaleString()}</td>
                                <td>
                                    <input type="hidden" name="allocations[${index}][bill_id]" value="${bill.id}">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">${currencySymbol}</span>
                                        <input type="number" name="allocations[${index}][amount]" 
                                            class="form-control allocation-input" 
                                            step="0.01" min="0" max="${bill.balance_amount}" 
                                            data-index="${index}" data-balance="${bill.balance_amount}">
                                    </div>
                                </td>
                                <td class="pe-4 text-end">
                                    <button type="button" class="btn btn-sm btn-outline-secondary pay-full" data-index="${index}" data-balance="${bill.balance_amount}">Full</button>
                                </td>
                            </tr>
                        `;
                        billsTableBody.insertAdjacentHTML('beforeend', row);
                    });
                    billsCard.classList.remove('d-none');
                    setupAllocationListeners();
                } else {
                    billsTableBody.innerHTML = '<tr><td colspan="6" class="text-center py-4 text-muted">No unpaid bills found for this vendor.</td></tr>';
                    billsCard.classList.remove('d-none');
                }
            });
    });

    totalAmountInput.addEventListener('input', updateBalance);

    function setupAllocationListeners() {
        document.querySelectorAll('.allocation-input').forEach(input => {
            input.addEventListener('input', updateBalance);
        });

        document.querySelectorAll('.pay-full').forEach(btn => {
            btn.addEventListener('click', function() {
                const index = this.dataset.index;
                const balance = this.dataset.balance;
                const input = document.querySelector(`.allocation-input[data-index="${index}"]`);
                
                // Automatically allocate remaining amount or full bill balance
                const totalAmount = parseFloat(totalAmountInput.value) || 0;
                let currentAllocated = 0;
                document.querySelectorAll('.allocation-input').forEach(i => {
                    if (i !== input) currentAllocated += parseFloat(i.value) || 0;
                });

                const remainingToAllocate = Math.max(0, totalAmount - currentAllocated);
                input.value = Math.min(balance, remainingToAllocate).toFixed(2);
                updateBalance();
            });
        });
    }

    function updateBalance() {
        const totalAmount = parseFloat(totalAmountInput.value) || 0;
        let allocated = 0;
        document.querySelectorAll('.allocation-input').forEach(input => {
            allocated += parseFloat(input.value) || 0;
        });

        allocatedDisplay.textContent = `${currencySymbol}${allocated.toLocaleString(undefined, {minimumFractionDigits: 2})}`;
        const remaining = totalAmount - allocated;
        remainingDisplay.textContent = `${currencySymbol}${remaining.toLocaleString(undefined, {minimumFractionDigits: 2})}`;
        
        if (remaining === 0) {
            remainingDisplay.classList.remove('text-danger');
            remainingDisplay.classList.add('text-success');
        } else {
            remainingDisplay.classList.add('text-danger');
            remainingDisplay.classList.remove('text-success');
        }
    }

    form.addEventListener('submit', function(e) {
        const totalAmount = parseFloat(totalAmountInput.value) || 0;
        let allocated = 0;
        document.querySelectorAll('.allocation-input').forEach(input => {
            allocated += parseFloat(input.value) || 0;
        });

        if (totalAmount <= 0) {
            e.preventDefault();
            alert('Please enter a payment amount.');
            return;
        }

        if (Math.abs(totalAmount - allocated) > 0.01) {
            e.preventDefault();
            alert(`The total payment amount (${currencySymbol}${totalAmount}) must match the sum of bill allocations (${currencySymbol}${allocated}). Remaining to allocate: ${currencySymbol}${(totalAmount - allocated).toFixed(2)}`);
        }
    });
});
</script>
@endpush

<style>
    .required:after { content:" *"; color: red; }
</style>