@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">Create Sales Payment Schedule</h4>
        <button type="button" onclick="history.back()" class="btn btn-light">Back</button>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form method="post" action="{{ route('reseller.sales-payment-schedules.store') }}">
                @csrf
                @include('reseller.sales-payment-schedules._form', [
                    'schedule' => null,
                    'submitLabel' => 'Create Schedule'
                ])
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var customerSelect = document.getElementById('customerSelect') || document.querySelector('select[name="users_id"]');
    var invoiceSelect = document.querySelector('select[name="sales_invoice_id"]');
    var invoiceAmountInput = document.querySelector('input[name="sales_invoice_amount"]');
    var companyTotalDueDisplay = document.getElementById('companyTotalDueDisplay');
    if (!customerSelect || !invoiceSelect) {
        return;
    }

    var originalOptions = Array.from(invoiceSelect.options).map(function (opt) {
        return {
            value: opt.value,
            text: opt.text,
            userId: opt.dataset.userId || '',
            amount: opt.dataset.amount || '',
            dueAmount: opt.dataset.dueAmount || opt.dataset.amount || '',
        };
    });

    function calculateCompanyTotalDue(userId) {
        if (!companyTotalDueDisplay || !userId) {
            if (companyTotalDueDisplay) {
                companyTotalDueDisplay.value = '';
            }
            return;
        }
        var totalDue = 0;
        originalOptions.forEach(function (opt) {
            if (opt.userId === userId && opt.value) {
                var dueAmount = parseFloat(opt.dueAmount || 0);
                if (!isNaN(dueAmount)) {
                    totalDue += dueAmount;
                }
            }
        });
        companyTotalDueDisplay.value = totalDue.toFixed(2);
    }

    function rebuildInvoiceOptions(userId) {
        var currentValue = invoiceSelect.value;
        invoiceSelect.innerHTML = '';

        originalOptions.forEach(function (opt, index) {
            if (index === 0 || !userId || opt.userId === userId) {
                var option = document.createElement('option');
                option.value = opt.value;
                option.textContent = opt.text;
                option.dataset.userId = opt.userId;
                option.dataset.amount = opt.amount;
                option.dataset.dueAmount = opt.dueAmount;
                invoiceSelect.appendChild(option);
            }
        });

        if (invoiceSelect.querySelector('option[value="' + currentValue + '"]')) {
            invoiceSelect.value = currentValue;
        } else {
            invoiceSelect.selectedIndex = 0;
        }
        updateInvoiceAmount();
        calculateCompanyTotalDue(userId);
    }

    function updateInvoiceAmount() {
        if (!invoiceAmountInput) {
            return;
        }
        var selectedOption = invoiceSelect.options[invoiceSelect.selectedIndex];
        if (!selectedOption) {
            return;
        }
        var dueAmount = parseFloat(selectedOption.dataset.dueAmount || selectedOption.dataset.amount || '');
        if (!isNaN(dueAmount)) {
            invoiceAmountInput.value = dueAmount.toFixed(2);
            updateExpectedAmounts();
        }
    }

    rebuildInvoiceOptions(customerSelect.value);
    // Calculate company total due on initial load
    calculateCompanyTotalDue(customerSelect.value);
    
    // Trigger change event if user is pre-selected to update invoice list
    if (customerSelect.value) {
        customerSelect.dispatchEvent(new Event('change'));
    }
    
    customerSelect.addEventListener('change', function () {
        rebuildInvoiceOptions(this.value);
        calculateCompanyTotalDue(this.value);
    });
    invoiceSelect.addEventListener('change', updateInvoiceAmount);
    updateInvoiceAmount();

    // Multiple schedule rows management
    var container = document.getElementById('scheduleRowsContainer');
    var addBtn = document.getElementById('addScheduleRow');
    var getNextRowIndex = function() {
        var rows = container.querySelectorAll('.schedule-row');
        return rows.length;
    };

    function updateRowIndices() {
        var rows = container.querySelectorAll('.schedule-row');
        rows.forEach(function (row, index) {
            row.setAttribute('data-row-index', index);
            var inputs = row.querySelectorAll('input');
            inputs.forEach(function (input) {
                var name = input.getAttribute('name');
                if (name) {
                    var fieldName = name.match(/\[(\w+)\]$/);
                    if (fieldName) {
                        input.setAttribute('name', 'schedules[' + index + '][' + fieldName[1] + ']');
                    }
                }
            });
            var removeBtn = row.querySelector('.remove-row');
            if (removeBtn) {
                removeBtn.style.display = rows.length > 1 ? 'block' : 'none';
            }
        });
    }

    function updateExpectedAmounts() {
        var invoiceAmount = parseFloat(invoiceAmountInput.value) || 0;
        var rows = container.querySelectorAll('.schedule-row');
        rows.forEach(function (row) {
            var percentageInput = row.querySelector('.schedule-percentage');
            var expectedAmountInput = row.querySelector('.schedule-expected-amount');
            if (percentageInput && expectedAmountInput && !expectedAmountInput.dataset.manual) {
                var percentage = parseFloat(percentageInput.value) || 0;
                var calculated = (invoiceAmount * percentage) / 100;
                expectedAmountInput.value = calculated.toFixed(2);
            }
        });
    }

    if (addBtn && container) {
        addBtn.addEventListener('click', function () {
            var rowIndex = getNextRowIndex();
            var newRow = document.createElement('div');
            newRow.className = 'schedule-row border rounded p-3 mb-3';
            newRow.setAttribute('data-row-index', rowIndex);
            newRow.innerHTML = '<div class="form-row">' +
                '<div class="form-group col-md-4">' +
                '<label>Expected Payment Date <span class="text-danger">*</span></label>' +
                '<input type="date" name="schedules[' + rowIndex + '][expected_payment_date]" class="form-control schedule-expected-date" required>' +
                '</div>' +
                '<div class="form-group col-md-4">' +
                '<label>Expected %</label>' +
                '<input type="number" step="0.01" min="0" max="100" name="schedules[' + rowIndex + '][expected_amount_percentage]" class="form-control schedule-percentage">' +
                '</div>' +
                '<div class="form-group col-md-4">' +
                '<label>Expected Amount <span class="text-danger">*</span></label>' +
                '<div class="d-flex align-items-end">' +
                '<input type="number" step="0.01" min="0" name="schedules[' + rowIndex + '][expected_payment_amount]" class="form-control schedule-expected-amount" required>' +
                '<button type="button" class="btn btn-sm btn-danger ml-2 remove-row">' +
                '<i class="fas fa-times"></i>' +
                '</button>' +
                '</div>' +
                '</div>' +
                '</div>';

            container.appendChild(newRow);
            updateRowIndices();

            var percentageInput = newRow.querySelector('.schedule-percentage');
            var expectedAmountInput = newRow.querySelector('.schedule-expected-amount');
            if (percentageInput) {
                percentageInput.addEventListener('input', function () {
                    var invoiceAmount = parseFloat(invoiceAmountInput.value) || 0;
                    var percentage = parseFloat(this.value) || 0;
                    if (!expectedAmountInput.dataset.manual) {
                        var calculated = (invoiceAmount * percentage) / 100;
                        expectedAmountInput.value = calculated.toFixed(2);
                    }
                });
            }
            if (expectedAmountInput) {
                expectedAmountInput.addEventListener('input', function () {
                    this.dataset.manual = this.value ? '1' : '';
                });
            }
        });

        container.addEventListener('click', function (e) {
            if (e.target.closest('.remove-row')) {
                var row = e.target.closest('.schedule-row');
                if (row && container.querySelectorAll('.schedule-row').length > 1) {
                    row.remove();
                    updateRowIndices();
                }
            }
        });

        var existingRows = container.querySelectorAll('.schedule-row');
        existingRows.forEach(function (row) {
            var percentageInput = row.querySelector('.schedule-percentage');
            var expectedAmountInput = row.querySelector('.schedule-expected-amount');
            if (percentageInput) {
                percentageInput.addEventListener('input', function () {
                    var invoiceAmount = parseFloat(invoiceAmountInput.value) || 0;
                    var percentage = parseFloat(this.value) || 0;
                    if (!expectedAmountInput.dataset.manual) {
                        var calculated = (invoiceAmount * percentage) / 100;
                        expectedAmountInput.value = calculated.toFixed(2);
                    }
                });
            }
            if (expectedAmountInput) {
                expectedAmountInput.addEventListener('input', function () {
                    this.dataset.manual = this.value ? '1' : '';
                });
            }
        });

        if (invoiceAmountInput) {
            invoiceAmountInput.addEventListener('input', updateExpectedAmounts);
        }
    }
});
</script>
@endpush