@extends('layouts.app')
@section('content')
<div class="container-fluid py-3">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-receipt me-2"></i> Create New Receipt</h5>
                    <div class="text-light mt-1 fw-light" style="font-size: 0.85rem;">
                        Receipt #: {{ $receiptNumber }}
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('receipts.store') }}" id="receiptForm">
                        @csrf

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <h6 class="text-success fw-bold border-bottom border-success pb-2">
                                        <i class="fas fa-user me-2"></i> Customer Information
                                    </h6>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">Customer <span class="text-danger">*</span></label>
                                    <select name="customer_id" class="form-control" id="customerSelect" required>
                                        <option value="">Select Customer</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}"
                                                data-address="{{ $customer->address }}"
                                                data-phone="{{ $customer->contact_1 }}"
                                                data-email="{{ $customer->email }}"
                                                data-vat="{{ $customer->vat }}"
                                                data-tin="{{ $customer->tin }}">
                                                {{ $customer->client_number }} - {{ $customer->full_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('customer_id')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Address</label>
                                        <input type="text" id="customerAddress" class="form-control" readonly>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Telephone</label>
                                        <input type="text" id="customerPhone" class="form-control" readonly>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Email</label>
                                        <input type="text" id="customerEmail" class="form-control" readonly>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label fw-bold">VAT Reg. No.</label>
                                        <input type="text" id="customerVat" class="form-control" readonly>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label fw-bold">TIN</label>
                                        <input type="text" id="customerTin" class="form-control" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-4">
                                    <h6 class="text-success fw-bold border-bottom border-success pb-2">
                                        <i class="fas fa-info-circle me-2"></i> Receipt Information
                                    </h6>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">Receipt Number</label>
                                    <input type="text" class="form-control" value="{{ $receiptNumber }}" readonly>
                                    <input type="hidden" name="receipt_number" value="{{ $receiptNumber }}">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">Date <span class="text-danger">*</span></label>
                                    <input type="date" name="receipt_date" class="form-control"
                                           value="{{ now()->format('Y-m-d') }}" required>
                                    @error('receipt_date')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
    <label class="form-label fw-bold">Payment Method <span class="text-danger">*</span></label>
    <select name="payment_method" class="form-control" required>
        <option value="">Select Payment Method</option>
        <option value="Cash">Cash</option>
        <option value="Check">Cheque</option>
        <option value="Bank Transfer">Bank Transfer</option>
        <option value="Credit Card">Credit Card</option>
        <option value="Debit Card">Debit Card</option>
        <option value="Mobile Money">Mobile Money</option>
    </select>
    @error('payment_method')
        <div class="text-danger small">{{ $message }}</div>
    @enderror
</div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="text-success fw-bold border-bottom border-success pb-2 mb-0">
                                    <i class="fas fa-list me-2"></i> Payment Items
                                </h6>
                                <button type="button" class="btn btn-success btn-sm" id="addLineBtn">
                                    <i class="fas fa-plus me-1"></i> Add Payment
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="paymentItemsTable">
                                    <thead class="bg-success text-white">
                                        <tr>
                                            <th width="5%">#</th>
                                            <th width="25%">Description <span class="text-danger">*</span></th>
                                            <th width="25%">Invoice Reference</th>
                                            <th width="20%">Deposit Account <span class="text-danger">*</span></th>
                                            <th width="20%">Amount <span class="text-danger">*</span></th>
                                            <th width="5%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Lines will be added dynamically -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row justify-content-end mt-4">
                            <div class="col-md-5">
                                <div class="card border-success">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-bold">Total Amount:</span>
                                            <span id="totalAmount" class="fw-bold text-success">$0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-success" id="processReceiptBtn">
                                <i class="fas fa-save me-2"></i> Process Receipt
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Print Modal -->
    @if(session('processed_receipt_id'))
    <div class="modal fade" id="printModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title"><i class="fas fa-print me-2"></i> Print Receipt</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Receipt processed successfully!</p>
                    <p>Do you want to print the receipt now?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Later</button>
                    <a href="{{ route('receipts.print', session('processed_receipt_id')) }}"
                       class="btn btn-success" target="_blank">
                        <i class="fas fa-print me-2"></i> Print Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<script>
    var processedReceiptId = @json(session('processed_receipt_id'));
    
    document.addEventListener('DOMContentLoaded', function() {
        let customerInvoices = [];
        let lineCounter = 0;

        // Populate customer info and fetch invoices
        document.getElementById('customerSelect').addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            document.getElementById('customerAddress').value = selectedOption.dataset.address || '';
            document.getElementById('customerPhone').value = selectedOption.dataset.phone || '';
            document.getElementById('customerEmail').value = selectedOption.dataset.email || '';
            document.getElementById('customerVat').value = selectedOption.dataset.vat || '';
            document.getElementById('customerTin').value = selectedOption.dataset.tin || '';

            if (this.value) {
                // Fetch outstanding invoices for selected customer
                fetch(`/receipts/customer-invoices/${this.value}`)
                    .then(response => {
                        if (!response.ok) throw new Error('Network response was not ok');
                        return response.json();
                    })
                    .then(data => {
                        console.log('Invoices loaded:', data); // For debugging
                        customerInvoices = data;
                        updateAllInvoiceDropdowns();
                    })
                    .catch(error => {
                        console.error('Error fetching invoices:', error);
                        customerInvoices = [];
                        updateAllInvoiceDropdowns();
                        alert('Error loading invoices. Please try again.');
                    });
            } else {
                customerInvoices = [];
                updateAllInvoiceDropdowns();
            }
        });

        // Add payment line
        document.getElementById('addLineBtn').addEventListener('click', function() {
            addNewLine();
        });

        function addNewLine(invoiceData = null) {
            const tbody = document.querySelector('#paymentItemsTable tbody');
            const row = document.createElement('tr');
            const currentIndex = lineCounter++;
            const rowCount = tbody.children.length;

            row.innerHTML = `
                <td>${rowCount + 1}</td>
                <td>
                    <input type="text" name="lines[${currentIndex}][description]"
                           class="form-control form-control-sm description-input" 
                           placeholder="Enter description" required>
                </td>
                <td>
                    <select name="lines[${currentIndex}][invoice_id]"
                            class="form-select form-control-sm invoice-select"
                            data-index="${currentIndex}">
                        <option value="">Select Invoice</option>
                        ${generateInvoiceOptions()}
                    </select>
                </td>
                <td>
                    <select name="lines[${currentIndex}][deposit_account_id]"
                            class="form-select form-control-sm account-select" required>
                        <option value="">Select Account</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">
                                {{ $account->code }} - {{ $account->account_name }}
                            </option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="number" name="lines[${currentIndex}][amount]"
                           class="form-control form-control-sm amount-input"
                           min="0.01" step="0.01" required value="0.00"
                           data-index="${currentIndex}">
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger remove-line">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>`;

            tbody.appendChild(row);

            // Add event listeners
            const invoiceSelect = row.querySelector('.invoice-select');
            const amountInput = row.querySelector('.amount-input');
            const descriptionInput = row.querySelector('.description-input');
            const removeBtn = row.querySelector('.remove-line');

            // Invoice selection change event
            invoiceSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                if (selectedOption.value) {
                    const outstanding = parseFloat(selectedOption.dataset.outstanding) || 0;
                    const invoiceNumber = selectedOption.dataset.invoiceNumber || '';
                    
                    // Auto-fill description
                    descriptionInput.value = `Payment for Invoice ${invoiceNumber}`;
                    
                    // Auto-fill amount with outstanding balance
                    amountInput.value = outstanding.toFixed(2);
                    
                    // Trigger amount calculation
                    amountInput.dispatchEvent(new Event('input', { bubbles: true }));
                } else {
                    // Clear if no invoice selected
                    descriptionInput.value = '';
                    amountInput.value = '0.00';
                    amountInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            });

            // Amount input event for total calculation
            amountInput.addEventListener('input', function() {
                updateTotals();
            });

            // Remove line event
            removeBtn.addEventListener('click', function() {
                row.remove();
                renumberRows();
                updateTotals();
            });

            // Trigger initial update
            updateTotals();
        }

        // Generate invoice options HTML
        function generateInvoiceOptions() {
            if (!customerInvoices || customerInvoices.length === 0) {
                return '<option value="">No invoices available</option>';
            }

            let options = '<option value="">Select Invoice</option>';
            customerInvoices.forEach(invoice => {
                if (invoice.outstanding > 0) {
                    options += `
                        <option value="${invoice.id}" 
                                data-outstanding="${invoice.outstanding}"
                                data-invoice-number="${invoice.invoice_number}">
                            ${invoice.invoice_number} - ${formatCurrency(invoice.outstanding)} 
                            (Due: ${formatDate(invoice.due_date)})
                        </option>`;
                }
            });
            return options;
        }

        // Update all invoice dropdowns
        function updateAllInvoiceDropdowns() {
            document.querySelectorAll('.invoice-select').forEach(dropdown => {
                const currentValue = dropdown.value;
                dropdown.innerHTML = generateInvoiceOptions();
                
                // Restore value if it still exists
                if (currentValue) {
                    const option = dropdown.querySelector(`option[value="${currentValue}"]`);
                    if (option) {
                        dropdown.value = currentValue;
                        
                        // Trigger change event to update description and amount
                        const event = new Event('change', { bubbles: true });
                        dropdown.dispatchEvent(event);
                    }
                }
            });
        }

        // Format currency
        function formatCurrency(amount) {
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
                minimumFractionDigits: 2
            }).format(amount);
        }

        // Format date
        function formatDate(dateString) {
            if (!dateString) return 'N/A';
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        }

        // Renumber rows after deletion
        function renumberRows() {
            const rows = document.querySelectorAll('#paymentItemsTable tbody tr');
            rows.forEach((row, index) => {
                row.querySelector('td:first-child').textContent = index + 1;
            });
        }

        // Update total amount
        function updateTotals() {
            let total = 0;
            document.querySelectorAll('.amount-input').forEach(input => {
                const value = parseFloat(input.value) || 0;
                total += value;
            });
            document.getElementById('totalAmount').textContent = formatCurrency(total);
        }

        // Form submission validation
        document.getElementById('receiptForm').addEventListener('submit', function(e) {
            const totalAmount = parseFloat(document.getElementById('totalAmount').textContent.replace(/[^0-9.-]+/g, '')) || 0;
            
            if (totalAmount <= 0) {
                e.preventDefault();
                alert('Please add at least one payment item with amount greater than 0.');
                return false;
            }

            // Validate that at least one line has amount > 0
            const hasValidAmount = Array.from(document.querySelectorAll('.amount-input'))
                .some(input => parseFloat(input.value) > 0);

            if (!hasValidAmount) {
                e.preventDefault();
                alert('Please add at least one payment item with amount greater than 0.');
                return false;
            }

            // Validate that all lines with invoices have amounts
            const invalidLines = Array.from(document.querySelectorAll('tr')).filter(row => {
                const invoiceSelect = row.querySelector('.invoice-select');
                const amountInput = row.querySelector('.amount-input');
                if (invoiceSelect && invoiceSelect.value) {
                    return !amountInput || parseFloat(amountInput.value) <= 0;
                }
                return false;
            });

            if (invalidLines.length > 0) {
                e.preventDefault();
                alert('Please enter amounts for all selected invoices.');
                return false;
            }
        });

        // Initialize with one line
        addNewLine();

        // Show print modal if receipt was processed
        if (processedReceiptId) {
            var myModal = new bootstrap.Modal(document.getElementById('printModal'));
            myModal.show();
        }
    });
</script>

<style>
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 20px;
}
.table th {
    background-color: #f8f9fa;
}
.table-responsive {
    border-radius: 8px;
    overflow: hidden;
}
</style>
@endsection