@extends('layouts.app')

@section('title', 'Providers Name')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-server mr-2"></i>Providers Name
                    </h1>
                    <p class="text-muted">Manage providers name and their information</p>
                </div>
                <div>
                    <button class="btn btn-success mr-2" data-toggle="modal" data-target="#payNowModal">
                        <i class="fas fa-money-bill-wave mr-2"></i>Pay Now
                    </button>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#addProviderModal">
                        <i class="fas fa-plus mr-2"></i>Add Provider
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form method="GET" action="{{ route('reseller.bandwidth-providers.index') }}">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="search" class="form-label">Search</label>
                                <input type="text" class="form-control" id="search" name="search" 
                                       value="{{ request('search') }}" placeholder="Search providers...">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">All Status</option>
                                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">&nbsp;</label>
                                <div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search mr-2"></i>Search
                                    </button>
                                    <a href="{{ route('reseller.bandwidth-providers.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times mr-2"></i>Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Providers Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Providers Name List</h6>
                </div>
                <div class="card-body">
                    @if($providers->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Contact Person</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Website</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th>Total Due</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($providers as $provider)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="mr-3">
                                                    <div class="icon-circle bg-primary">
                                                        <i class="fas fa-server text-white"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="font-weight-bold">{{ $provider->name }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $provider->contact_person }}</td>
                                        <td>
                                            @if($provider->contact_email)
                                                <a href="mailto:{{ $provider->contact_email }}">{{ $provider->contact_email }}</a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($provider->contact_phone)
                                                <a href="tel:{{ $provider->contact_phone }}">{{ $provider->contact_phone }}</a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($provider->website)
                                                <a href="{{ $provider->website }}" target="_blank" class="text-primary">
                                                    <i class="fas fa-external-link-alt mr-1"></i>Visit
                                                </a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $provider->status === 'active' ? 'success' : 'secondary' }}">
                                                {{ ucfirst($provider->status) }}
                                            </span>
                                        </td>
                                        <td>{{ $provider->created_at->format('M d, Y') }}</td>
                                        <td>
                                            <span class="font-weight-bold text-danger">
                                                BDT {{ number_format($provider->total_due ?? 0, 2) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('reseller.bandwidth-providers.show', $provider->id) }}" 
                                                   class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-outline-warning" 
                                                        data-toggle="modal" data-target="#editProviderModal{{ $provider->id }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-danger" 
                                                        onclick="deleteProvider({{ $provider->id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-center">
                            {{ $providers->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-server fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No providers name found</h5>
                            <p class="text-muted">Start by adding your first provider name.</p>
                            <button class="btn btn-primary" data-toggle="modal" data-target="#addProviderModal">
                                <i class="fas fa-plus mr-2"></i>Add Provider
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success/Error Messages -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle mr-2"></i>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    </div>
@endif

<!-- Pay Now Modal -->
<div class="modal fade" id="payNowModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form id="payNowForm" method="POST" action="">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Make Payment</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="pay_company_id" class="form-label">Company:</label>
                        <select class="form-control" id="pay_company_id" name="company_id" onchange="loadInvoicesForPayment(this.value)">
                            <option value="">Select Company</option>
                            @foreach($allProviders ?? [] as $provider)
                                <option value="{{ $provider->id }}">{{ $provider->company_name ?? $provider->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="pay_invoice_id" class="form-label">Invoice:</label>
                        <select class="form-control" id="pay_invoice_id" name="invoice_id" onchange="loadInvoiceDetailsForPayment(this.value)">
                            <option value="">Select Invoice</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="pay_amount" class="form-label">Amount <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="pay_amount" name="amount" step="0.01" min="0.01" 
                               oninput="updatePayNowPaymentFields()" onchange="updatePayNowPaymentFields()" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Due Amount</label>
                        <input type="text" class="form-control" id="pay_due_amount_display" value="0.00" readonly style="background:#f0f0f0;">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Advance Payment</label>
                        <input type="text" class="form-control" id="pay_advance_amount_display" value="0.00" readonly style="background:#f0f0f0;">
                        <small class="text-muted">Amount paid in excess of the due amount</small>
                    </div>
                    <div class="form-group">
                        <label for="pay_bank_account" class="form-label">Select Bank Account <span class="text-danger">*</span></label>
                        <select class="form-control" id="pay_bank_account" name="bank_account_info_id" onchange="filterPayNowChequeNumbersByBankAccount(this.value)" required>
                            <option value="">Select Bank Account</option>
                            @foreach(\App\Models\BankAccountInfo::where('is_active', true)->get() as $bank)
                                <option value="{{ $bank->id }}">
                                    @if($bank->account_name)
                                        {{ $bank->bank_name }} - {{ $bank->account_name }} ({{ $bank->account_number }})
                                    @else
                                        {{ $bank->bank_name }} - {{ $bank->account_number }}
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="pay_payment_method" class="form-label">Payment Method</label>
                        <select class="form-control" id="pay_payment_method" name="payment_method" onchange="togglePayNowChequeFields(this.value)">
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="check">Check</option>
                            <option value="cash">Cash</option>
                            <option value="online">Online</option>
                        </select>
                    </div>
                    <!-- Cheque Fields (shown only when Payment Method is Check) -->
                    <div class="form-group pay-now-cheque-fields" style="display: none;">
                        <label for="pay_cheque_number" class="form-label">Cheque Number <span class="text-danger">*</span></label>
                        <select class="form-control" id="pay_cheque_number" name="cheque_number" onchange="updatePayNowFieldsFromCheque(this.value)" required>
                            <option value="">Select Cheque Number</option>
                        </select>
                        <small class="text-muted" id="pay_cheque_message">No issued cheques found for this vendor/company</small>
                    </div>
                    <div class="form-group pay-now-cheque-fields" style="display: none;">
                        <label for="pay_payee_date" class="form-label">Payee Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="pay_payee_date" name="payee_date" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="pay_transaction_date" class="form-label">Transaction Date</label>
                        <input type="date" class="form-control" id="pay_transaction_date" name="transaction_date" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="pay_notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="pay_notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Make Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Provider Modal -->
<div class="modal fade" id="addProviderModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Provider Name</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.bandwidth-providers.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Provider Name *</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_person" class="form-label">Contact Person *</label>
                            <input type="text" class="form-control" id="contact_person" name="contact_person" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_email" class="form-label">Contact Email</label>
                            <input type="email" class="form-control" id="contact_email" name="contact_email">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_phone" class="form-label">Contact Phone</label>
                            <input type="text" class="form-control" id="contact_phone" name="contact_phone">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="3"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="website" class="form-label">Website</label>
                            <input type="url" class="form-control" id="website" name="website">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-control" id="status" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Provider</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Provider Modals -->
@foreach($providers as $provider)
<div class="modal fade" id="editProviderModal{{ $provider->id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Provider Name</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.bandwidth-providers.update', $provider->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Provider Name *</label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ $provider->name }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_person" class="form-label">Contact Person *</label>
                            <input type="text" class="form-control" id="contact_person" name="contact_person" value="{{ $provider->contact_person }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_email" class="form-label">Contact Email</label>
                            <input type="email" class="form-control" id="contact_email" name="contact_email" value="{{ $provider->contact_email }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_phone" class="form-label">Contact Phone</label>
                            <input type="text" class="form-control" id="contact_phone" name="contact_phone" value="{{ $provider->contact_phone }}">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="3">{{ $provider->address }}</textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="website" class="form-label">Website</label>
                            <input type="url" class="form-control" id="website" name="website" value="{{ $provider->website }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-control" id="status" name="status">
                                <option value="active" {{ $provider->status === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ $provider->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Update Provider</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endforeach

<style>
.icon-circle {
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<script>
function deleteProvider(id) {
    if (confirm('Are you sure you want to delete this provider?')) {
        // Create a form and submit it
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("reseller.bandwidth-providers.destroy", ":id") }}'.replace(':id', id);
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method override for DELETE
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);
        
        // Submit the form
        document.body.appendChild(form);
        form.submit();
    }
}

// Load invoices for selected company in Pay Now modal
function loadInvoicesForPayment(companyId) {
    const invoiceSelect = document.getElementById('pay_invoice_id');
    const amountInput = document.getElementById('pay_amount');
    const dueDisplay = document.getElementById('pay_due_amount_display');
    const advanceDisplay = document.getElementById('pay_advance_amount_display');
    const form = document.getElementById('payNowForm');
    
    // Clear invoice dropdown and reset fields
    invoiceSelect.innerHTML = '<option value="">Select Invoice</option>';
    amountInput.value = '';
    amountInput.removeAttribute('data-due');
    dueDisplay.value = '0.00';
    advanceDisplay.value = '0.00';
    
    if (form) {
        form.action = '';
    }
    
    if (!companyId) return;
    
    // Load cheques for this company
    loadChequesForPayment(companyId);
    
    // Fetch invoices for this company via AJAX
    fetch(`{{ url('/reseller/bandwidth-providers') }}/${companyId}/invoices`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.invoices && data.invoices.length > 0) {
                data.invoices.forEach(function(invoice) {
                    const option = document.createElement('option');
                    option.value = invoice.id;
                    option.textContent = (invoice.bill_no || 'Invoice #' + invoice.id) + ' - Due: BDT ' + parseFloat(invoice.due_amount).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                    option.setAttribute('data-due-amount', invoice.due_amount);
                    option.setAttribute('data-bill-no', invoice.bill_no || invoice.id);
                    invoiceSelect.appendChild(option);
                });
            } else {
                const option = document.createElement('option');
                option.value = '';
                option.textContent = 'No invoices with due amount found';
                option.disabled = true;
                invoiceSelect.appendChild(option);
            }
        })
        .catch(error => {
            console.error('Error loading invoices:', error);
            const option = document.createElement('option');
            option.value = '';
            option.textContent = 'Error loading invoices';
            option.disabled = true;
            invoiceSelect.appendChild(option);
        });
}

// Load invoice details when invoice is selected
function loadInvoiceDetailsForPayment(invoiceId) {
    const invoiceSelect = document.getElementById('pay_invoice_id');
    const amountInput = document.getElementById('pay_amount');
    const dueDisplay = document.getElementById('pay_due_amount_display');
    const advanceDisplay = document.getElementById('pay_advance_amount_display');
    const form = document.getElementById('payNowForm');
    
    if (!invoiceId || !invoiceSelect) return;
    
    const selectedOption = invoiceSelect.options[invoiceSelect.selectedIndex];
    if (selectedOption && selectedOption.value) {
        const dueAmount = parseFloat(selectedOption.getAttribute('data-due-amount')) || 0;
        
        // Set amount to due amount
        amountInput.value = dueAmount.toFixed(2);
        amountInput.setAttribute('data-due', dueAmount);
        
        // Update form action
        if (form) {
            form.action = `{{ url('/reseller/purchase-invoices') }}/${invoiceId}/payment`;
        }
        
        // Update due amount and advance payment displays
        updatePayNowPaymentFields();
    } else {
        amountInput.value = '';
        amountInput.removeAttribute('data-due');
        dueDisplay.value = '0.00';
        advanceDisplay.value = '0.00';
        if (form) {
            form.action = '';
        }
    }
}

// Store all cheque options for Pay Now modal
let payNowChequeOptionsStore = [];

// Load cheques for selected company
function loadChequesForPayment(companyId) {
    const chequeSelect = document.getElementById('pay_cheque_number');
    const chequeMessage = document.getElementById('pay_cheque_message');
    
    if (!chequeSelect) return;
    
    // Fetch cheques for this company via AJAX
    fetch(`{{ url('/reseller/bandwidth-providers') }}/${companyId}/cheques`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.cheques && data.cheques.length > 0) {
                // Store all cheque options
                payNowChequeOptionsStore = data.cheques;
                
                // Filter by bank account if one is selected
                const bankAccountId = document.getElementById('pay_bank_account')?.value;
                filterPayNowChequeNumbersByBankAccount(bankAccountId);
                
                if (chequeMessage) {
                    chequeMessage.textContent = '';
                    chequeMessage.style.display = 'none';
                }
            } else {
                chequeSelect.innerHTML = '<option value="">Select Cheque Number</option>';
                if (chequeMessage) {
                    chequeMessage.textContent = 'No issued cheques found for this vendor/company';
                    chequeMessage.style.display = 'block';
                }
            }
        })
        .catch(error => {
            console.error('Error loading cheques:', error);
            chequeSelect.innerHTML = '<option value="">Select Cheque Number</option>';
            if (chequeMessage) {
                chequeMessage.textContent = 'Error loading cheques';
                chequeMessage.style.display = 'block';
            }
        });
}

// Filter cheque numbers by bank account for Pay Now modal
function filterPayNowChequeNumbersByBankAccount(bankAccountId) {
    const chequeSelect = document.getElementById('pay_cheque_number');
    const chequeMessage = document.getElementById('pay_cheque_message');
    
    if (!chequeSelect) return;
    
    // Clear current options
    chequeSelect.innerHTML = '<option value="">Select Cheque Number</option>';
    
    if (!payNowChequeOptionsStore || payNowChequeOptionsStore.length === 0) {
        if (chequeMessage) {
            chequeMessage.textContent = 'No issued cheques found for this vendor/company';
            chequeMessage.style.display = 'block';
        }
        return;
    }
    
    // Filter options based on bank account
    let filteredCheques = payNowChequeOptionsStore;
    if (bankAccountId && bankAccountId !== '') {
        filteredCheques = payNowChequeOptionsStore.filter(cheque => 
            String(cheque.bank_account_id) === String(bankAccountId)
        );
    }
    
    if (filteredCheques.length > 0) {
        filteredCheques.forEach(function(cheque) {
            const option = document.createElement('option');
            option.value = cheque.cheque_number;
            option.textContent = cheque.cheque_number;
            option.setAttribute('data-payee-date', cheque.payee_date || '');
            option.setAttribute('data-amount', cheque.amount || '0');
            option.setAttribute('data-bank-account-id', cheque.bank_account_id || '');
            chequeSelect.appendChild(option);
        });
        
        if (chequeMessage) {
            chequeMessage.textContent = '';
            chequeMessage.style.display = 'none';
        }
    } else {
        if (chequeMessage) {
            chequeMessage.textContent = bankAccountId ? 'No cheques found for selected bank account' : 'No issued cheques found for this vendor/company';
            chequeMessage.style.display = 'block';
        }
    }
}

// Update fields from selected cheque number
function updatePayNowFieldsFromCheque(chequeNumber) {
    const chequeSelect = document.getElementById('pay_cheque_number');
    const amountInput = document.getElementById('pay_amount');
    const payeeDateInput = document.getElementById('pay_payee_date');
    const invoiceSelect = document.getElementById('pay_invoice_id');
    
    if (!chequeNumber || !chequeSelect) {
        return;
    }
    
    const selectedOption = chequeSelect.options[chequeSelect.selectedIndex];
    if (selectedOption && selectedOption.value) {
        const payeeDate = selectedOption.getAttribute('data-payee-date') || '';
        const chequeAmount = parseFloat(selectedOption.getAttribute('data-amount')) || 0;
        
        // Set payee date
        if (payeeDateInput && payeeDate) {
            payeeDateInput.value = payeeDate;
        }
        
        // Set amount from cheque
        if (amountInput && chequeAmount > 0) {
            amountInput.value = chequeAmount.toFixed(2);
            
            // If invoice is selected, use invoice due amount as data-due
            // Otherwise, use cheque amount as data-due
            if (invoiceSelect && invoiceSelect.value) {
                const invoiceOption = invoiceSelect.options[invoiceSelect.selectedIndex];
                if (invoiceOption) {
                    const invoiceDueAmount = parseFloat(invoiceOption.getAttribute('data-due-amount')) || 0;
                    amountInput.setAttribute('data-due', invoiceDueAmount);
                }
            } else {
                amountInput.setAttribute('data-due', chequeAmount);
            }
            
            // Update payment fields
            updatePayNowPaymentFields();
        }
    }
}

// Update payment fields for Pay Now modal
function updatePayNowPaymentFields() {
    const amountInput = document.getElementById('pay_amount');
    const dueDisplay = document.getElementById('pay_due_amount_display');
    const advanceDisplay = document.getElementById('pay_advance_amount_display');
    
    if (!amountInput || !dueDisplay || !advanceDisplay) return;
    
    const paymentAmount = parseFloat(amountInput.value) || 0;
    const dueAmount = parseFloat(amountInput.getAttribute('data-due')) || 0;
    
    const invoicePaymentAmount = Math.min(paymentAmount, dueAmount);
    const advanceAmount = Math.max(0, paymentAmount - dueAmount);
    
    const remainingDue = Math.max(0, dueAmount - invoicePaymentAmount);
    dueDisplay.value = remainingDue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    advanceDisplay.value = advanceAmount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

// Toggle cheque fields for Pay Now modal
function togglePayNowChequeFields(paymentMethod) {
    const chequeFields = document.querySelectorAll('.pay-now-cheque-fields');
    const chequeNumberInput = document.getElementById('pay_cheque_number');
    const payeeDateInput = document.getElementById('pay_payee_date');
    
    if (paymentMethod === 'check') {
        chequeFields.forEach(field => {
            field.style.display = 'block';
        });
        if (chequeNumberInput) {
            chequeNumberInput.setAttribute('required', 'required');
        }
        if (payeeDateInput) {
            payeeDateInput.setAttribute('required', 'required');
        }
    } else {
        chequeFields.forEach(field => {
            field.style.display = 'none';
        });
        if (chequeNumberInput) {
            chequeNumberInput.removeAttribute('required');
            chequeNumberInput.value = '';
        }
        if (payeeDateInput) {
            payeeDateInput.removeAttribute('required');
            payeeDateInput.value = '';
        }
    }
}

// Auto-hide alerts after 5 seconds
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 5000);
</script>
@endsection