@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Add Payment</h4>
        <a href="{{ route('reseller.payments.index') }}" class="btn btn-light">Back</a>
    </div>

    @if(isset($selectedCustomer) && $selectedCustomer)
        <div class="alert alert-info d-flex justify-content-between align-items-center">
            <div>
                <strong>Selected company:</strong>
                {{ $selectedCustomer->company_name ?? $selectedCustomer->name }}
            </div>
            <a href="{{ route('reseller.payments.create') }}" class="btn btn-sm btn-outline-secondary">
                Clear selection
            </a>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form method="post" action="{{ route('reseller.payments.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-row align-items-end">
                    <div class="col-xl-4 col-lg-5 col-md-12 mb-3">
                        <label class="d-block">Invoice</label>
                        @if($invoices->count())
                        <div class="border rounded" style="max-height: 260px; overflow-y: auto;">
                            @foreach($invoices as $inv)
                                @php
                                    $invoiceDue = number_format($inv->due_amount, 2, '.', '');
                                    $invoiceTotal = number_format($inv->invoice_amount, 2, '.', '');
                                    $isChecked = old('sales_invoice_id') == $inv->id;
                                @endphp
                                <label class="d-flex align-items-center border-bottom m-0 px-3 py-2 invoice-option {{ $isChecked ? 'bg-light' : '' }}" style="cursor: pointer;">
                                    <input type="radio"
                                        name="sales_invoice_id"
                                        value="{{ $inv->id }}"
                                        class="invoice-radio mr-3"
                                        data-due="{{ $invoiceDue }}"
                                        data-total="{{ $invoiceTotal }}"
                                        {{ $isChecked ? 'checked' : '' }}
                                        required>
                                    <div class="flex-grow-1">
                                        <div class="font-weight-semibold">{{ $inv->invoice_no }}</div>
                                        <div class="small text-muted">
                                            Amount: {{ number_format($inv->invoice_amount, 2) }} |
                                            Due: {{ number_format($inv->due_amount, 2) }}
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                        @else
                            <div class="alert alert-warning mb-0">No invoices found for the selected company.</div>
                        @endif
                    </div>
                    <div class="col-lg-2 col-md-3 mb-3">
                        <label>Transaction Date</label>
                        <input type="date" name="transaction_date" class="form-control" value="{{ old('transaction_date', now()->format('Y-m-d')) }}" required />
                    </div>
                    <div class="col-lg-2 col-md-4 mb-3">
                        <label>Amount</label>
                        <input type="number" step="0.01" min="0.01" name="amount" class="form-control" required id="amountInput" />
                    </div>
                    <div class="col-lg-2 col-md-4 mb-3">
                        <label>Due Amount</label>
                        <input type="text" class="form-control" id="dueAmountDisplay" readonly />
                    </div>
                    <div class="col-lg-2 col-md-4 mb-3 position-relative">
                        <label class="d-flex justify-content-between align-items-center">
                            <span>Advance Payment</span>
                            <span class="badge badge-warning d-none" id="advanceBadge">Overpaid</span>
                        </label>
                        <input type="text" class="form-control" id="advanceAmountDisplay" readonly />
                        <div class="text-muted small mt-1" id="advanceHint" style="display: none;">
                            Amount paid in excess of the due amount
                        </div>
                    </div>
                </div>
                <div class="form-row align-items-end">
                    <div class="col-lg-3 col-md-4 mb-3">
                        <label>Payment Method</label>
                        <select name="payment_method" class="form-control" id="paymentMethodSelect">
                            <option value="">Select Method</option>
                            <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                            <option value="bank_transfer" {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="check" {{ old('payment_method') == 'check' ? 'selected' : '' }}>Cheque</option>
                            <option value="bkash" {{ old('payment_method') == 'bkash' ? 'selected' : '' }}>bKash</option>
                            <option value="nagad" {{ old('payment_method') == 'nagad' ? 'selected' : '' }}>Nagad</option>
                            <option value="rocket" {{ old('payment_method') == 'rocket' ? 'selected' : '' }}>Rocket</option>
                            <option value="online" {{ old('payment_method') == 'online' ? 'selected' : '' }}>Online</option>
                            <option value="other" {{ old('payment_method') == 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-4 mb-3" id="accountHolderGroup">
                        <label>Account Holders</label>
                        <select name="account_holder_id" id="accountHolderSelect" class="form-control">
                            <option value="">Select Account Holder</option>
                            @foreach($accountHolders ?? [] as $holder)
                                <option value="{{ $holder->id }}" {{ old('account_holder_id') == $holder->id ? 'selected' : '' }}>
                                    {{ $holder->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-4 mb-3" id="bankAccountGroup">
                        <label>Bank Accounts</label>
                        <select name="bank_account_info_id" id="bankAccountSelect" class="form-control">
                            <option value="">Select Bank Account</option>
                            @foreach(($bankAccounts ?? []) as $account)
                                <option value="{{ $account->id }}" 
                                        data-account-holder-id="{{ $account->account_holder_id }}"
                                        {{ old('bank_account_info_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->bank_name }} - {{ $account->account_name }} ({{ $account->account_number }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-4 mb-3">
                        <label>Received By</label>
                        <input type="text" name="received_by" class="form-control" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label>Notes</label>
                        <textarea name="notes" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label class="d-flex justify-content-between align-items-center">
                            <span>Payment Images</span>
                            <small class="text-muted">JPEG, PNG, WEBP up to 5&nbsp;MB each</small>
                        </label>
                        <input type="file" name="attachments[]" class="form-control-file" accept="image/*" multiple id="paymentAttachmentsInput">
                        @error('attachments.*')
                            <div class="text-danger small mt-2">{{ $message }}</div>
                        @enderror
                        <div id="paymentAttachmentsPreview" class="d-flex flex-wrap mt-3"></div>
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">Save</button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var invoiceRadios = document.querySelectorAll('.invoice-radio');
    var amountInput = document.getElementById('amountInput');
    var dueDisplay = document.getElementById('dueAmountDisplay');
    var advanceDisplay = document.getElementById('advanceAmountDisplay');
    var advanceBadge = document.getElementById('advanceBadge');
    var advanceHint = document.getElementById('advanceHint');
    var paymentMethodSelect = document.getElementById('paymentMethodSelect');
    var accountHolderGroup = document.getElementById('accountHolderGroup');
    var bankAccountGroup = document.getElementById('bankAccountGroup');

    function formatCurrency(value) {
        var number = parseFloat(value);
        if (isNaN(number)) {
            return '';
        }
        return number.toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function updateAmounts() {
        var selectedRadio = document.querySelector('.invoice-radio:checked');
        var dueValue = selectedRadio ? parseFloat(selectedRadio.getAttribute('data-due')) : null;
        var amountValue = parseFloat(amountInput.value);
        var amountRaw = amountInput.value;

        if (!isNaN(dueValue)) {
            if (amountRaw === '') {
                dueDisplay.value = formatCurrency(dueValue);
            } else if (!isNaN(amountValue)) {
                var remainingDue = Math.max(0, dueValue - amountValue);
                dueDisplay.value = formatCurrency(remainingDue);
            } else {
                dueDisplay.value = '';
            }
        } else {
            dueDisplay.value = '';
        }

        if (!isNaN(amountValue) && !isNaN(dueValue)) {
            var advance = Math.max(0, amountValue - dueValue);
            if (advance > 0) {
                advanceDisplay.value = formatCurrency(advance);
                advanceBadge.classList.remove('d-none');
                advanceHint.style.display = 'block';
            } else {
                advanceDisplay.value = '0.00';
                advanceBadge.classList.add('d-none');
                advanceHint.style.display = 'none';
            }
        } else {
            advanceDisplay.value = '';
            advanceBadge.classList.add('d-none');
            advanceHint.style.display = 'none';
        }
    }

    function handleInvoiceChange(event) {
        var radio = event.target;
        if (!radio.checked) {
            return;
        }
        invoiceRadios.forEach(function (item) {
            var label = item.closest('.invoice-option');
            if (label) {
                label.classList.toggle('bg-light', item === radio);
            }
        });
        var dueValue = radio.getAttribute('data-due');
        amountInput.value = dueValue || '';
        updateAmounts();
    }

    if (invoiceRadios && invoiceRadios.length) {
        invoiceRadios.forEach(function (radio) {
            radio.addEventListener('change', handleInvoiceChange);
        });
        // Ensure highlight on initial selection
        var initialRadio = document.querySelector('.invoice-radio:checked');
        if (initialRadio) {
            var label = initialRadio.closest('.invoice-option');
            if (label) {
                label.classList.add('bg-light');
            }
        }
    }

    if (amountInput) {
        amountInput.addEventListener('input', updateAmounts);
    }

    // Account holder and bank account fields are always visible now

    // Filter bank accounts based on selected account holder
    var accountHolderSelect = document.getElementById('accountHolderSelect');
    var bankAccountSelect = document.getElementById('bankAccountSelect');
    
    function filterBankAccounts() {
        if (!accountHolderSelect || !bankAccountSelect) {
            return;
        }
        
        var selectedAccountHolderId = accountHolderSelect.value;
        var options = bankAccountSelect.querySelectorAll('option');
        var hasVisibleOption = false;
        var currentValue = bankAccountSelect.value;
        
        // Remove any existing "no accounts" message
        options.forEach(function(option) {
            if (option.hasAttribute('data-no-accounts-message')) {
                option.remove();
            }
        });
        
        options.forEach(function(option) {
            if (option.value === '') {
                // Always show the "Select Bank Account" option
                option.style.display = '';
                return;
            }
            
            var accountHolderId = option.getAttribute('data-account-holder-id');
            
            if (!selectedAccountHolderId || accountHolderId === selectedAccountHolderId) {
                option.style.display = '';
                if (option.value !== '') {
                    hasVisibleOption = true;
                }
            } else {
                option.style.display = 'none';
            }
        });
        
        // Reset bank account selection if current selection is hidden
        if (selectedAccountHolderId && currentValue) {
            var selectedOption = bankAccountSelect.querySelector('option[value="' + currentValue + '"]');
            if (selectedOption && selectedOption.style.display === 'none') {
                bankAccountSelect.value = '';
            }
        }
        
        // If no accounts visible for selected account holder, show message
        if (!hasVisibleOption && selectedAccountHolderId) {
            var noAccountsOption = document.createElement('option');
            noAccountsOption.value = '';
            noAccountsOption.textContent = 'No bank accounts found for this account holder';
            noAccountsOption.disabled = true;
            noAccountsOption.setAttribute('data-no-accounts-message', 'true');
            bankAccountSelect.appendChild(noAccountsOption);
        }
    }
    
    if (accountHolderSelect) {
        accountHolderSelect.addEventListener('change', filterBankAccounts);
        // Filter on page load if account holder is already selected
        filterBankAccounts();
    }

    // Initialize displays if page loaded with preselected values
    var preselectedInvoice = document.querySelector('.invoice-radio:checked');
    if (preselectedInvoice && preselectedInvoice.getAttribute('data-due')) {
        amountInput.value = preselectedInvoice.getAttribute('data-due');
    }
    updateAmounts();

    var input = document.getElementById('paymentAttachmentsInput');
    var previewContainer = document.getElementById('paymentAttachmentsPreview');

    if (!input || !previewContainer) {
        return;
    }

    input.addEventListener('change', function () {
        previewContainer.innerHTML = '';
        if (!this.files || !this.files.length) {
            return;
        }

        Array.prototype.forEach.call(this.files, function (file) {
            if (!file.type.startsWith('image/')) {
                return;
            }

            var reader = new FileReader();
            reader.onload = function (event) {
                var wrapper = document.createElement('div');
                wrapper.className = 'mr-2 mb-2';
                wrapper.style.width = '96px';
                wrapper.style.height = '96px';
                wrapper.style.border = '1px solid #dee2e6';
                wrapper.style.borderRadius = '4px';
                wrapper.style.overflow = 'hidden';
                wrapper.style.backgroundColor = '#f8f9fa';

                var img = document.createElement('img');
                img.src = event.target.result;
                img.alt = file.name;
                img.style.width = '100%';
                img.style.height = '100%';
                img.style.objectFit = 'cover';

                wrapper.appendChild(img);
                previewContainer.appendChild(wrapper);
            };
            reader.readAsDataURL(file);
        });
    });
});
</script>
@endpush