@extends('layouts.app')

@section('title', 'Edit Payment Schedule')

@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-edit mr-2"></i>Edit Payment Schedule
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('reseller.payment-schedules.index') }}">Payment Schedules</a></li>
                            <li class="breadcrumb-item active">Edit</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{ route('reseller.payment-schedules.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    @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

    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('reseller.payment-schedules.update', $paymentSchedule->id) }}">
                @csrf
                @method('PUT')
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="provider_id" class="form-label">Provider <span class="text-danger">*</span></label>
                        <select name="provider_id" id="provider_id" class="form-control" required onchange="loadInvoicesForProvider(this.value)">
                            <option value="">Select Provider</option>
                            @foreach($providers as $provider)
                                <option value="{{ $provider->id }}" 
                                        data-total-due="{{ $provider->total_due ?? 0 }}"
                                        {{ old('provider_id', $paymentSchedule->provider_id) == $provider->id ? 'selected' : '' }}>
                                    {{ $provider->company_name ?? $provider->name }} 
                                    @if(($provider->total_due ?? 0) > 0)
                                        (Total Due: BDT {{ number_format($provider->total_due, 2) }})
                                    @endif
                                </option>
                            @endforeach
                        </select>
                        @error('provider_id')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="invoice_id" class="form-label">Invoice</label>
                        <select name="invoice_id" id="invoice_id" class="form-control">
                            <option value="">Select Invoice (Optional)</option>
                            @foreach($invoices as $invoice)
                                <option value="{{ $invoice->id }}" 
                                        data-provider-id="{{ $invoice->provider_id }}"
                                        data-due-amount="{{ $invoice->due_amount }}"
                                        {{ old('invoice_id', $paymentSchedule->invoice_id) == $invoice->id ? 'selected' : '' }}
                                        style="display: none;">
                                    {{ $invoice->bill_no ?? 'Invoice #' . $invoice->id }} - Due: BDT {{ number_format($invoice->due_amount, 2) }}
                                </option>
                            @endforeach
                        </select>
                        @error('invoice_id')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="due_date" class="form-label">Due Date <span class="text-danger">*</span></label>
                        <input type="date" name="due_date" id="due_date" class="form-control" value="{{ old('due_date', $paymentSchedule->due_date->format('Y-m-d')) }}" required>
                        @error('due_date')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="amount" class="form-label">Amount <span class="text-danger">*</span></label>
                        <input type="number" name="amount" id="amount" class="form-control" step="0.01" min="0.01" value="{{ old('amount', $paymentSchedule->amount) }}" required>
                        @error('amount')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="paid_amount" class="form-label">Committed Amount</label>
                        <input type="number" name="paid_amount" id="paid_amount" class="form-control" step="0.01" min="0" value="{{ old('paid_amount', $paymentSchedule->paid_amount) }}" oninput="updatePaymentStatus()">
                        @error('paid_amount')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="payment_status" class="form-label">Payment Status</label>
                        <select name="payment_status" id="payment_status" class="form-control">
                            <option value="pending" {{ old('payment_status', $paymentSchedule->payment_status) == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="partial" {{ old('payment_status', $paymentSchedule->payment_status) == 'partial' ? 'selected' : '' }}>Partial</option>
                            <option value="paid" {{ old('payment_status', $paymentSchedule->payment_status) == 'paid' ? 'selected' : '' }}>Paid</option>
                        </select>
                        @error('payment_status')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="col-md-12 mb-3">
                        <label for="notes" class="form-label">Notes</label>
                        <textarea name="notes" id="notes" class="form-control" rows="3">{{ old('notes', $paymentSchedule->notes) }}</textarea>
                        @error('notes')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                
                <div class="d-flex justify-content-end">
                    <a href="{{ route('reseller.payment-schedules.index') }}" class="btn btn-secondary mr-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i>Update Schedule
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Store all invoice options
let allInvoiceOptions = [];

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const invoiceSelect = document.getElementById('invoice_id');
    
    // Store all invoice options
    allInvoiceOptions = Array.from(invoiceSelect.querySelectorAll('option[data-provider-id]')).map(option => ({
        value: option.value,
        text: option.textContent,
        providerId: option.getAttribute('data-provider-id'),
        dueAmount: option.getAttribute('data-due-amount')
    }));
    
    // Initialize with selected provider if any
    const providerSelect = document.getElementById('provider_id');
    if (providerSelect && providerSelect.value) {
        loadInvoicesForProvider(providerSelect.value);
    }
    
    // Auto-update payment status when paid amount changes
    document.getElementById('paid_amount').addEventListener('input', updatePaymentStatus);
    
    // Add change listener to invoice select for auto-fill amount
    invoiceSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const amountInput = document.getElementById('amount');
        const providerSelect = document.getElementById('provider_id');
        
        if (selectedOption && selectedOption.value) {
            // If invoice is selected, use invoice's due amount
            const dueAmount = parseFloat(selectedOption.getAttribute('data-due-amount')) || 0;
            if (dueAmount > 0) {
                amountInput.value = dueAmount.toFixed(2);
                updatePaymentStatus();
            }
        } else {
            // If invoice is cleared, use provider's total due amount
            if (providerSelect && providerSelect.value) {
                const selectedProviderOption = providerSelect.options[providerSelect.selectedIndex];
                const totalDue = parseFloat(selectedProviderOption.getAttribute('data-total-due')) || 0;
                if (totalDue > 0) {
                    amountInput.value = totalDue.toFixed(2);
                    updatePaymentStatus();
                } else {
                    amountInput.value = '';
                }
            } else {
                amountInput.value = '';
            }
        }
    });
});

function loadInvoicesForProvider(providerId) {
    const invoiceSelect = document.getElementById('invoice_id');
    const amountInput = document.getElementById('amount');
    const providerSelect = document.getElementById('provider_id');
    
    // Store current selected invoice value
    const currentInvoiceValue = invoiceSelect.value;
    
    // Clear invoice dropdown except the first option
    const firstOption = invoiceSelect.querySelector('option[value=""]');
    invoiceSelect.innerHTML = '';
    if (firstOption) {
        invoiceSelect.appendChild(firstOption.cloneNode(true));
    }
    
    if (!providerId) {
        // If no provider selected, hide all invoices and clear amount
        amountInput.value = '';
        return;
    }
    
    // Get total due amount for selected provider
    const selectedProviderOption = providerSelect.options[providerSelect.selectedIndex];
    const totalDue = parseFloat(selectedProviderOption.getAttribute('data-total-due')) || 0;
    
    // Filter and show invoices for selected provider
    allInvoiceOptions.forEach(option => {
        if (option.providerId == providerId) {
            const newOption = document.createElement('option');
            newOption.value = option.value;
            newOption.textContent = option.text;
            newOption.setAttribute('data-provider-id', option.providerId);
            newOption.setAttribute('data-due-amount', option.dueAmount);
            invoiceSelect.appendChild(newOption);
        }
    });
    
    // Restore selected invoice value if it's still available
    if (currentInvoiceValue && invoiceSelect.querySelector(`option[value="${currentInvoiceValue}"]`)) {
        invoiceSelect.value = currentInvoiceValue;
        // If invoice is selected, use invoice's due amount
        const selectedInvoiceOption = invoiceSelect.options[invoiceSelect.selectedIndex];
        const invoiceDueAmount = parseFloat(selectedInvoiceOption.getAttribute('data-due-amount')) || 0;
        if (invoiceDueAmount > 0) {
            amountInput.value = invoiceDueAmount.toFixed(2);
            updatePaymentStatus();
        }
    } else {
        // If no invoice selected, use provider's total due amount
        invoiceSelect.value = '';
        if (totalDue > 0) {
            amountInput.value = totalDue.toFixed(2);
            updatePaymentStatus();
        } else {
            amountInput.value = '';
        }
    }
}

function updatePaymentStatus() {
    const amountInput = document.getElementById('amount');
    const paidAmountInput = document.getElementById('paid_amount');
    const statusSelect = document.getElementById('payment_status');
    
    const amount = parseFloat(amountInput.value) || 0;
    const paidAmount = parseFloat(paidAmountInput.value) || 0;
    
    if (paidAmount >= amount) {
        statusSelect.value = 'paid';
    } else if (paidAmount > 0) {
        statusSelect.value = 'partial';
    } else {
        statusSelect.value = 'pending';
    }
}
</script>
@endpush
@endsection