@extends('layouts.app')

@section('title', 'Edit Sales Invoice')

@section('content')
<style>
    /* Simple, clean design without Bootstrap */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 10px;
    }
    
    .container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .header {
        background: #2c3e50;
        color: white;
        padding: 20px;
        text-align: center;
    }
    
    .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 300;
    }
    
    .breadcrumb {
        background: #ecf0f1;
        padding: 10px 20px;
        margin: 0;
        border-bottom: 1px solid #bdc3c7;
    }
    
    .breadcrumb a {
        color: #3498db;
        text-decoration: none;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    
    .content {
        padding: 20px;
    }
    
    .form-section {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .form-section h3 {
        margin: 0 0 15px;
        color: #2c3e50;
        font-size: 18px;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .form-group {
        display: flex;
        flex-direction: column;
    }
    
    .form-group label {
        font-weight: 500;
        margin-bottom: 5px;
        color: #2c3e50;
    }
    
    .form-control {
        padding: 8px 12px;
        border: 1px solid #bdc3c7;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
    
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background: white;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        table-layout: auto;
    }
    
    .table th {
        background: #34495e;
        color: white;
        padding: 12px 8px;
        text-align: left;
        font-weight: 500;
        font-size: 14px;
        white-space: nowrap;
    }
    
    .table td {
        padding: 12px 8px;
        border-bottom: 1px solid #ecf0f1;
        font-size: 14px;
    }
    
    .table tbody tr:hover {
        background: #f8f9fa;
    }
    
    .btn {
        display: inline-block;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-right: 8px;
    }
    
    .btn-primary {
        background: #3498db;
        color: white;
    }
    
    .btn-primary:hover {
        background: #2980b9;
    }
    
    .btn-success {
        background: #27ae60;
        color: white;
    }
    
    .btn-success:hover {
        background: #229954;
    }
    
    .btn-danger {
        background: #e74c3c;
        color: white;
    }
    
    .btn-danger:hover {
        background: #c0392b;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .actions {
        display: flex;
        gap: 4px;
    }
    
    .no-data {
        text-align: center;
        padding: 40px;
        color: #7f8c8d;
        font-style: italic;
    }
    
    .alert {
        padding: 12px 16px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    
    .alert-danger {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    .alert-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    @media (max-width: 768px) {
        body {
            padding: 5px;
        }
        
        .form-row {
            grid-template-columns: 1fr;
        }
        
        .table {
            font-size: 12px;
        }
        
        .table th,
        .table td {
            padding: 6px 4px;
        }
        
        .form-control {
            font-size: 12px;
            padding: 6px 8px;
        }
    }
    
    @media (min-width: 1200px) {
        .form-row {
            grid-template-columns: repeat(4, 1fr);
        }
    }
</style>

<div class="container">
    <!-- Header -->
    <div class="header">
        <h1>Edit Sales Invoice</h1>
    </div>
    
    <!-- Breadcrumb -->
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a> / 
        <a href="{{ route('reseller.sales-invoices.index') }}">Sales Invoices</a> / 
        Edit Sales Invoice
    </div>
    
    <div class="content">
        <!-- Error Messages -->
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul style="margin: 0; padding-left: 20px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        
        <form action="{{ route('reseller.sales-invoices.update-sales', $salesInvoice->id) }}" method="POST">
            @csrf
            @method('PUT')
            
            <!-- General Invoice Information -->
            <div class="form-section">
                <h3>General Invoice Information</h3>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="customer_id">Customer</label>
                        <select class="form-control" id="customer_id" name="customer_id" required>
                            <option value="">Select Customer</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}" {{ old('customer_id', $salesInvoice->customer_id) == $client->id ? 'selected' : '' }}>
                                    {{ $client->company_name ?: $client->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="invoice_no">Invoice Number</label>
                        <input type="text" class="form-control" id="invoice_no" name="invoice_no" 
                               value="{{ $salesInvoice->invoice_no }}" readonly>
                    </div>
                    
                    <div class="form-group">
                        <label for="invoice_month">Invoice Month</label>
                        @php
                            $invoiceMonthValue = '';
                            if ($salesInvoice->invoice_month) {
                                try {
                                    // Try to parse M-Y format (e.g., "Jan-2025")
                                    if (preg_match('/^[A-Za-z]{3}-\d{4}$/', $salesInvoice->invoice_month)) {
                                        $invoiceMonthValue = \Carbon\Carbon::createFromFormat('M-Y', $salesInvoice->invoice_month)->format('Y-m');
                                    } 
                                    // Try to parse Y-m format (already correct)
                                    elseif (preg_match('/^\d{4}-\d{2}$/', $salesInvoice->invoice_month)) {
                                        $invoiceMonthValue = $salesInvoice->invoice_month;
                                    }
                                    // Try to parse other formats
                                    else {
                                        $invoiceMonthValue = \Carbon\Carbon::parse($salesInvoice->invoice_month)->format('Y-m');
                                    }
                                } catch (\Exception $e) {
                                    $invoiceMonthValue = $salesInvoice->invoice_month;
                                }
                            } else {
                                $invoiceMonthValue = \Carbon\Carbon::now()->format('Y-m');
                            }
                        @endphp
                        <input type="month" class="form-control" id="invoice_month" name="invoice_month" 
                               value="{{ old('invoice_month', $invoiceMonthValue) }}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="invoice_date">Invoice Date</label>
                        <input type="date" class="form-control" id="invoice_date" name="invoice_date" 
                               value="{{ old('invoice_date', $salesInvoice->form_invoice_date ? \Carbon\Carbon::parse($salesInvoice->form_invoice_date)->format('Y-m-d') : '') }}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="due_date">Due Date</label>
                        <input type="date" class="form-control" id="due_date" name="due_date" 
                               value="{{ old('due_date', $salesInvoice->form_due_date ? \Carbon\Carbon::parse($salesInvoice->form_due_date)->format('Y-m-d') : '') }}" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="status" required>
                            <option value="pending" {{ old('status', $salesInvoice->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="paid" {{ old('status', $salesInvoice->status) == 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="commissioned" {{ old('status', $salesInvoice->status) == 'commissioned' ? 'selected' : '' }}>Commissioned</option>
                            <option value="cancelled" {{ old('status', $salesInvoice->status) == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="payment_status">Payment Status</label>
                        <select class="form-control" id="payment_status" name="payment_status" required>
                            <option value="pending" {{ old('payment_status', $salesInvoice->payment_status) == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="paid" {{ old('payment_status', $salesInvoice->payment_status) == 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="partial" {{ old('payment_status', $salesInvoice->payment_status) == 'partial' ? 'selected' : '' }}>Partial</option>
                            <option value="overdue" {{ old('payment_status', $salesInvoice->payment_status) == 'overdue' ? 'selected' : '' }}>Overdue</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="total_amount">Total Amount</label>
                        <input type="text" class="form-control" id="total_amount" name="total_amount" 
                               value="৳{{ number_format($salesInvoice->invoice_amount, 2) }}" readonly>
                    </div>
                </div>
            </div>
            
            <!-- Invoice Items -->
            <div class="form-section">
                <h3 style="display:flex; align-items:center; gap:10px;">
                    Item Details
                    @php
                        $rqUpr = (int) request()->query('upr', 0);
                        $rqDwn = (int) request()->query('dwn', 0);
                        $rqDisc = (int) request()->query('disc', 0);
                        $hasRq = ($rqUpr + $rqDwn + $rqDisc) > 0;
                        $rqMap = [];
                        $reqIds = collect(explode(',', (string) request()->query('req', '')))
                            ->filter(fn($v) => is_numeric($v))
                            ->map(fn($v) => (int) $v)
                            ->values();
                        if ($reqIds->count() > 0) {
                            $rqItems = \App\Models\BandwidthUpdownRequest::with('currentSalesInvoiceItem')
                                ->whereIn('id', $reqIds)
                                ->get();
                            foreach ($rqItems as $rq) {
                                $itemId = optional($rq->currentSalesInvoiceItem)->id;
                                if (!$itemId) { continue; }
                                if (!isset($rqMap[$itemId])) { $rqMap[$itemId] = []; }
                                $rqMap[$itemId][] = [
                                    'type' => $rq->request_type,
                                    'bandwidth' => $rq->new_bandwidth_mbps
                                ];
                            }
                        }
                    @endphp
                    @if($hasRq)
                        <span style="background:#e9f5ff;color:#0b69a3;border:1px solid #b6e0fe;border-radius:12px;padding:2px 8px;font-size:12px;">Upgrade: {{ $rqUpr }}</span>
                        <span style="background:#fff8e6;color:#946200;border:1px solid #ffe3a3;border-radius:12px;padding:2px 8px;font-size:12px;">Downgrade: {{ $rqDwn }}</span>
                        <span style="background:#fde8e8;color:#b30d0d;border:1px solid #f8b4b4;border-radius:12px;padding:2px 8px;font-size:12px;">Discontinue: {{ $rqDisc }}</span>
                        {{-- Per-item summary next to header --}}
                        @foreach($salesInvoice->items as $hdrItem)
                            @php $hdrItemRq = $rqMap[$hdrItem->id] ?? []; @endphp
                            @if(!empty($hdrItemRq))
                                @foreach($hdrItemRq as $rq)
                                    @if($rq['type']==='upgrade')
                                        <span style="background:#e9f5ff;color:#0b69a3;border:1px solid #b6e0fe;border-radius:12px;padding:2px 8px;font-size:12px;">
                                            {{ $hdrItem->item_name ?? 'Item' }}: Upgrade to {{ number_format($rq['bandwidth'], 2) }} Mbps
                                        </span>
                                    @elseif($rq['type']==='downgrade')
                                        <span style="background:#fff8e6;color:#946200;border:1px solid #ffe3a3;border-radius:12px;padding:2px 8px;font-size:12px;">
                                            {{ $hdrItem->item_name ?? 'Item' }}: Downgrade to {{ number_format($rq['bandwidth'], 2) }} Mbps
                                        </span>
                                    @elseif($rq['type']==='discontinue')
                                        <span style="background:#fde8e8;color:#b30d0d;border:1px solid #f8b4b4;border-radius:12px;padding:2px 8px;font-size:12px;">
                                            {{ $hdrItem->item_name ?? 'Item' }}: Discontinue
                                        </span>
                                    @endif
                                @endforeach
                            @endif
                        @endforeach
                    @endif
                </h3>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Description</th>
                            <th>Unit</th>
                            <th>Quantity</th>
                            <th>Rate</th>
                            <th>VAT(%)</th>
                            <th>Total VAT</th>
                            <th>From Date</th>
                            <th>To Date</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="itemsTableBody">
                        @php
                            $itemsToShow = isset($rqMap) && !empty($rqMap)
                                ? $salesInvoice->items->filter(function($it) use ($rqMap) { return array_key_exists($it->id, $rqMap); })->values()
                                : $salesInvoice->items;
                        @endphp
                        @foreach($itemsToShow as $index => $item)
                            <tr>
                                <input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
                                <td>
                                    <select class="form-control" name="items[{{ $index }}][product_id]" required>
                                        <option value="">Select</option>
                                        @foreach($availableItems as $availableItem)
                                            <option value="{{ $availableItem->id }}" 
                                                    data-unit="{{ $availableItem->units ?? 'Unit' }}"
                                                    data-item-name="{{ $availableItem->item_name }}"
                                                    {{ (int)$item->product_id == (int)$availableItem->id ? 'selected' : '' }}>
                                                {{ $availableItem->item_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @php /* per-row request badges removed as per requirement */ @endphp
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="items[{{ $index }}][description]" 
                                           value="{{ old('items.'.$index.'.description', $item->description) }}" 
                                           placeholder="Enter description">
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="items[{{ $index }}][unit]" 
                                           value="{{ old('items.'.$index.'.unit', $item->unit) }}" 
                                           placeholder="Unit">
                                </td>
                                <td>
                                    <input type="number" class="form-control quantity" name="items[{{ $index }}][quantity]" 
                                           value="{{ old('items.'.$index.'.quantity', $item->quantity) }}" 
                                           step="0.01" min="0.01" required>
                                </td>
                                <td>
                                    <input type="number" class="form-control rate" name="items[{{ $index }}][rate]" 
                                           value="{{ old('items.'.$index.'.rate', $item->rate) }}" 
                                           step="0.01" min="0" required>
                                </td>
                                <td>
                                    <input type="number" class="form-control vat_percentage" name="items[{{ $index }}][vat_percentage]" 
                                           value="{{ old('items.'.$index.'.vat_percentage', $item->vat_percentage ?? 0) }}" 
                                           step="0.01" min="0" max="100">
                                </td>
                                <td>
                                    <input type="text" class="form-control total_vat" value="{{ number_format($item->vat_amount ?? 0, 2) }}" readonly>
                                </td>
                                <td>
                                    <input type="date" class="form-control" name="items[{{ $index }}][from_date]" 
                                           value="{{ old('items.'.$index.'.from_date', $item->from_date) }}">
                                </td>
                                <td>
                                    <input type="date" class="form-control" name="items[{{ $index }}][to_date]" 
                                           value="{{ old('items.'.$index.'.to_date', $item->to_date) }}">
                                </td>
                                <td>
                                    <input type="text" class="form-control total_amount" value="৳{{ number_format($item->amount, 2) }}" readonly>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-success btn-sm calculateRow">
                                        <i class="fas fa-calculator"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-sm removeItem">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="9" style="text-align: right; font-weight: bold;">Total Amount:</td>
                            <td style="font-weight: bold;" id="totalAmount">৳{{ number_format($salesInvoice->invoice_amount, 2) }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                
                <div style="text-align: center; margin-top: 15px;">
                    <button type="button" class="btn btn-success" id="addItem">
                        <i class="fas fa-plus"></i> Add Item
                    </button>
                </div>
            </div>
            
            <!-- Notes -->
            <div class="form-section">
                <h3>Additional Information</h3>
                <div class="form-group">
                    <label for="notes">Notes</label>
                    <textarea class="form-control" id="notes" name="notes" rows="3" 
                              placeholder="Enter any additional notes...">{{ old('notes', $salesInvoice->notes) }}</textarea>
                </div>
            </div>
            
            <!-- Submit Buttons -->
            <div style="display: flex; justify-content: space-between; margin-top: 30px;">
                <a href="{{ route('reseller.sales-invoices.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Sales Invoices
                </a>
                
                <div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Update Invoice
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = {{ $salesInvoice->items->count() }};
    
    // Initialize calculations for existing rows on page load
    document.querySelectorAll('#itemsTableBody tr').forEach(row => {
        calculateRowAmount(row);
    });
    
    // Calculate total
    calculateTotal();
    
    // Add item functionality
    document.getElementById('addItem').addEventListener('click', function() {
        console.log('Add Item button clicked');
        const tbody = document.getElementById('itemsTableBody');
        console.log('Tbody found:', tbody);
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>
                <select class="form-control" name="items[${itemIndex}][product_id]" required>
                    <option value="">Select</option>
                    @foreach($availableItems as $availableItem)
                        <option value="{{ $availableItem->id }}" data-unit="{{ $availableItem->units ?? 'Unit' }}" data-item-name="{{ $availableItem->item_name }}">
                            {{ $availableItem->item_name }}
                        </option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" class="form-control" name="items[${itemIndex}][description]" 
                       placeholder="Enter description">
            </td>
            <td>
                <input type="text" class="form-control" name="items[${itemIndex}][unit]" 
                       placeholder="Unit">
            </td>
            <td>
                <input type="number" class="form-control quantity" name="items[${itemIndex}][quantity]" 
                       step="0.01" min="0.01" required>
            </td>
            <td>
                <input type="number" class="form-control rate" name="items[${itemIndex}][rate]" 
                       step="0.01" min="0" required>
            </td>
            <td>
                <input type="number" class="form-control vat_percentage" name="items[${itemIndex}][vat_percentage]" 
                       step="0.01" min="0" max="100" value="0">
            </td>
            <td>
                <input type="text" class="form-control total_vat" value="0.00" readonly>
            </td>
            <td>
                <input type="date" class="form-control" name="items[${itemIndex}][from_date]">
            </td>
            <td>
                <input type="date" class="form-control" name="items[${itemIndex}][to_date]">
            </td>
            <td>
                <input type="text" class="form-control total_amount" value="৳0.00" readonly>
            </td>
            <td>
                <button type="button" class="btn btn-success btn-sm calculateRow">
                    <i class="fas fa-calculator"></i>
                </button>
                <button type="button" class="btn btn-danger btn-sm removeItem">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        console.log('Row created:', row);
        tbody.appendChild(row);
        console.log('Row appended to tbody');
        itemIndex++;
        console.log('Item index incremented to:', itemIndex);
        
        // Add event listeners to new row
        addRowEventListeners(row);
    });
    
    // Remove item functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.removeItem')) {
            const row = e.target.closest('tr');
            row.remove();
            calculateTotal();
        }
    });
    
    // Calculate amount when quantity, rate, or VAT changes
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('quantity') || e.target.classList.contains('rate') || e.target.classList.contains('vat_percentage')) {
            const row = e.target.closest('tr');
            calculateRowAmount(row);
            calculateTotal();
        }
    });
    
    // Date calculation functionality
    document.addEventListener('change', function(e) {
        if (e.target.type === 'date' && (e.target.name.includes('[from_date]') || e.target.name.includes('[to_date]'))) {
            const row = e.target.closest('tr');
            const fromDateField = row.querySelector('input[name*="[from_date]"]');
            const toDateField = row.querySelector('input[name*="[to_date]"]');
            
            if (fromDateField.value && toDateField.value) {
                const fromDate = new Date(fromDateField.value);
                const toDate = new Date(toDateField.value);
                
                if (toDate >= fromDate) {
                    // Calculate difference in days
                    const timeDiff = toDate.getTime() - fromDate.getTime();
                    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1; // +1 to include both start and end dates
                    
                    // Debug log for date calculation
                    console.log(`Date Range: ${fromDateField.value} to ${toDateField.value}`);
                    console.log(`Time Difference: ${timeDiff} ms`);
                    console.log(`Days Difference: ${daysDiff} days`);
                    
                    // Store calculated days in a data attribute for calculation
                    row.setAttribute('data-calculated-days', daysDiff);
                    
                    // Trigger calculation (will use calculated days instead of quantity field)
                    calculateRowAmount(row);
                    calculateTotal();
                } else {
                    alert('To Date must be greater than or equal to From Date');
                    toDateField.value = '';
                }
            }
        }
    });
    
    // Item selection functionality
    document.addEventListener('change', function(e) {
        if (e.target.tagName === 'SELECT' && e.target.name.includes('[item_name]')) {
            const row = e.target.closest('tr');
            const unitField = row.querySelector('input[name*="[unit]"]');
            const selectedOption = e.target.options[e.target.selectedIndex];
            const selectedItem = e.target.value;
            
            // Auto-fill unit based on selected item
            if (selectedItem && selectedOption) {
                const unitFromData = selectedOption.getAttribute('data-unit');
                if (unitFromData) {
                    unitField.value = unitFromData;
                } else {
                    // Fallback logic based on item name
                    if (selectedItem.toLowerCase().includes('bandwidth') || selectedItem.toLowerCase().includes('internet')) {
                        unitField.value = 'Mbps';
                    } else if (selectedItem.toLowerCase().includes('month') || selectedItem.toLowerCase().includes('monthly')) {
                        unitField.value = 'Month';
                    } else if (selectedItem.toLowerCase().includes('year') || selectedItem.toLowerCase().includes('yearly')) {
                        unitField.value = 'Year';
                    } else if (selectedItem.toLowerCase().includes('gb') || selectedItem.toLowerCase().includes('gigabyte')) {
                        unitField.value = 'GB';
                    } else if (selectedItem.toLowerCase().includes('mb') || selectedItem.toLowerCase().includes('megabyte')) {
                        unitField.value = 'MB';
                    } else {
                        unitField.value = 'Unit'; // Default unit
                    }
                }
            } else {
                unitField.value = '';
            }
        }
    });
    
    // Add event listeners to existing rows
    document.querySelectorAll('#itemsTableBody tr').forEach(row => {
        addRowEventListeners(row);
    });
    
    function addRowEventListeners(row) {
        const quantityInput = row.querySelector('.quantity');
        const rateInput = row.querySelector('.rate');
        const vatInput = row.querySelector('.vat_percentage');
        
        if (quantityInput && rateInput) {
            quantityInput.addEventListener('input', () => {
                calculateRowAmount(row);
                calculateTotal();
            });
            
            rateInput.addEventListener('input', () => {
                calculateRowAmount(row);
                calculateTotal();
            });
            
            if (vatInput) {
                vatInput.addEventListener('input', () => {
                    calculateRowAmount(row);
                    calculateTotal();
                });
            }
        }
    }
    
    function calculateRowAmount(row) {
        // Use calculated days from date range if available, otherwise use quantity field
        const calculatedDays = row.getAttribute('data-calculated-days');
        const quantityField = row.querySelector('.quantity');
        const rateField = row.querySelector('.rate');
        const vatField = row.querySelector('.vat_percentage');
        
        // Get values from fields
        const quantityValue = parseFloat(quantityField.value) || 0;
        const rateValue = parseFloat(rateField.value) || 0;
        const vatPercentage = parseFloat(vatField.value) || 0;
        
        // Calculate subtotal (Quantity x Rate)
        const subtotal = quantityValue * rateValue;
        
        // If using calculated days (date range), calculate with actual month days
        let finalSubtotal = subtotal;
        if (calculatedDays) {
            // Get the actual month from the date range
            const fromDateField = row.querySelector('input[name*="[from_date]"]');
            const toDateField = row.querySelector('input[name*="[to_date]"]');
            
            if (fromDateField.value && toDateField.value) {
                const fromDate = new Date(fromDateField.value);
                const toDate = new Date(toDateField.value);
                
                // Get the month and year from the date range
                const month = fromDate.getMonth() + 1; // 0-based to 1-based
                const year = fromDate.getFullYear();
                
                // Calculate days in the month (automatically detects 28, 29, 30, 31)
                const daysInMonth = new Date(year, month, 0).getDate();
                
                // Debug log for month detection
                console.log(`Month: ${month}, Year: ${year}, Days in Month: ${daysInMonth}`);
                
                // Calculate daily rate: (Quantity x Rate) ÷ days in month
                const dailyRate = subtotal / daysInMonth;
                
                // Calculate subtotal: daily rate × calculated days
                // If 15 days, it will be half of the month (regardless of month)
                if (parseInt(calculatedDays) === 15) {
                    // 15 days = half of any month (31, 29, 28 days)
                    finalSubtotal = subtotal / 2;
                } else {
                    // Other days: normal day-wise calculation
                    finalSubtotal = dailyRate * calculatedDays;
                }
                
                // Debug log for calculation
                console.log(`=== DATE CALCULATION DEBUG ===`);
                console.log(`Quantity Field Value: ${quantityValue}`);
                console.log(`Rate Field Value: ${rateValue}`);
                console.log(`Calculated Days: ${calculatedDays}`);
                console.log(`Days in Month: ${daysInMonth}`);
                console.log(`Subtotal (Quantity × Rate): ${quantityValue} × ${rateValue} = ${subtotal}`);
                console.log(`Daily Rate: ${subtotal} ÷ ${daysInMonth} = ${dailyRate.toFixed(2)}`);
                console.log(`Final Subtotal: ${finalSubtotal.toFixed(2)}`);
                
                if (parseInt(calculatedDays) === 15) {
                    console.log(`Formula: 15 Days = Half Month: ${subtotal} ÷ 2 = ${finalSubtotal.toFixed(2)}`);
                } else {
                    console.log(`Formula: (${quantityValue} × ${rateValue}) ÷ ${daysInMonth} × ${calculatedDays} = ${finalSubtotal.toFixed(2)}`);
                }
                
                // Special case: 15 days = half of any month
                if (parseInt(calculatedDays) === 15) {
                    console.log(`15 Days = Half of Month: ${subtotal} ÷ 2 = ${finalSubtotal.toFixed(2)}`);
                    console.log(`This works for any month: 31, 29, 28 days`);
                } else {
                    console.log(`Normal Day Calculation: ${dailyRate.toFixed(2)} × ${calculatedDays} = ${finalSubtotal.toFixed(2)}`);
                }
                
                console.log(`=== END DEBUG ===`);
            }
        } else {
            // For manual quantity, use original calculation (no date selected)
            console.log(`Manual Calculation (No Date): ${quantityValue} × ${rateValue} = ${subtotal}`);
        }
        
        // Calculate VAT amount
        const vatAmount = (finalSubtotal * vatPercentage) / 100;
        
        // Calculate total amount: subtotal + VAT
        const totalAmount = finalSubtotal + vatAmount;
        
        // Debug log for final calculation
        console.log(`Final Calculation: Subtotal=${finalSubtotal.toFixed(2)}, VAT=${vatAmount.toFixed(2)}, Total=${totalAmount.toFixed(2)}`);
        
        // Update Total VAT field
        row.querySelector('.total_vat').value = vatAmount.toFixed(2);
        
        // Update Total field: ((Quantity x Rate) ÷ days in month) × (From Date & To Date calculate like 15 days) + VAT
        row.querySelector('.total_amount').value = '৳' + totalAmount.toFixed(2);
    }
    
    function calculateTotal() {
        let total = 0;
        document.querySelectorAll('#itemsTableBody .total_amount').forEach(amountInput => {
            const amount = parseFloat(amountInput.value.replace('৳', '').replace(',', '')) || 0;
            total += amount;
        });
        
        document.getElementById('totalAmount').textContent = '৳' + total.toFixed(2);
        document.getElementById('total_amount').value = '৳' + total.toFixed(2);
    }
    
    // Set minimum date for due date based on invoice date
    document.getElementById('invoice_date').addEventListener('change', function() {
        const invoiceDate = this.value;
        const dueDateInput = document.getElementById('due_date');
        dueDateInput.min = invoiceDate;
        
        if (dueDateInput.value && dueDateInput.value < invoiceDate) {
            dueDateInput.value = invoiceDate;
        }
    });
});
</script>
@endsection