@extends('layouts.app')

@section('title', isset($invoice) ? 'Edit Sales Invoice' : 'Create Sales Invoice')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800" style="font-size: 1.4rem;">
                        <i class="fas fa-file-invoice mr-2"></i>{{ isset($invoice) ? 'Edit Sales Invoice' : 'Create Sales Invoice' }}
                    </h1>
                    <p class="text-muted mb-0" style="font-size: 0.85rem;">Sales Invoice Management</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Back Button -->
    <div class="row mb-2">
        <div class="col-12">
            <button type="button" onclick="history.back()" class="btn btn-primary">
                <i class="fas fa-arrow-left mr-2"></i>Back to List
            </button>
        </div>
    </div>

    <!-- Main Form -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <!-- Success/Error Messages -->
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ isset($invoice) ? route('reseller.sales-invoices.update', $invoice->id) : route('reseller.sales-invoices.store') }}" method="POST" enctype="multipart/form-data" id="salesInvoiceForm">
                        @csrf
                        @if(isset($invoice))
                            @method('PUT')
                        @endif
                        
                        <!-- General Invoice Information -->
                        <div class="row mb-2">
                            <div class="col-12">
                                <h5 class="text-primary mb-2" style="font-size: 1rem;">General Invoice Information</h5>
                            </div>
                            
                            <!-- First Row -->
                            <div class="col-md-3 mb-3">
                                <label for="customer_id" class="form-label font-weight-bold">Customer <span class="text-danger">*</span></label>
                                <select class="form-control" id="customer_id" name="customer_id" required>
                                    <option value="">Select</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}" {{ old('customer_id', isset($invoice) ? $invoice->customer_id : (isset($preselectedCustomerId) ? $preselectedCustomerId : null)) == $customer->id ? 'selected' : '' }}>
                                            {{ $customer->company_name ?: $customer->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="invoice_no" class="form-label font-weight-bold">Invoice Number</label>
                                <input type="text" class="form-control" id="invoice_no" name="invoice_no" 
                                       value="{{ isset($invoice) ? $invoice->invoice_no : ($nextInvoiceNo ?? '') }}" readonly>
                                <small class="text-muted">Auto-generated</small>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="invoice_month" class="form-label font-weight-bold">Invoice Month</label>
                                <input type="month" class="form-control" id="invoice_month" name="invoice_month" 
                                       value="{{ isset($invoice) ? $invoice->invoice_month : date('Y-m') }}" required>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="invoice_date" class="form-label font-weight-bold">Invoice Date</label>
                                <input type="date" class="form-control" id="invoice_date" name="invoice_date" 
                                       value="{{ isset($invoice) ? optional($invoice->invoice_date)->format('Y-m-d') : ($defaultInvoiceDate ?? date('Y-m-d')) }}" required>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="payment_due" class="form-label font-weight-bold">Payment Due</label>
                                <input type="date" class="form-control" id="payment_due" name="payment_due" value="{{ isset($invoice) && $invoice->payment_due ? optional($invoice->payment_due)->format('Y-m-d') : ($defaultPaymentDue ?? '') }}">
                            </div>
                            
                            <!-- Second Row -->
                            <div class="col-md-6 mb-3">
                                <label for="customer_invoice" class="form-label font-weight-bold">Customer Invoice Number</label>
                                <input type="text" class="form-control" id="customer_invoice" name="customer_invoice" 
                                       value="{{ isset($invoice) ? $invoice->customer_invoice : ($nextCustomerInvoiceNo ?? '') }}" readonly>
                                <small class="text-muted">Auto-generated</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="attachment" class="form-label font-weight-bold">Attachment</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="attachment" name="attachment">
                                    <label class="custom-file-label" for="attachment">Choose File</label>
                                </div>
                            </div>
                        </div>

                        <!-- Item Details Table -->
                        <div class="row mb-2">
                            <div class="col-12">
                                <h5 class="text-primary mb-2" style="font-size: 1rem;">Item Details</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="itemsTable">
                                        <thead class="thead-dark">
                                            <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">
                                            @if(isset($invoice))
                                                @foreach($invoice->items as $index => $existing)
                                                    <tr class="item-row">
                                                        <td>
                                                            <select class="form-control item-select" name="items[{{ $index }}][product_id]" data-item-name-input="items[{{ $index }}][item_name]" required>
                                                                <option value="">Select</option>
                                                                @foreach($bandwidthItems as $item)
                                                                    <option value="{{ $item->id }}" {{ $existing->item_name == $item->name ? 'selected' : '' }}
                                                                            data-buying-price="{{ $item->buying_price }}"
                                                                            data-selling-price="{{ $item->selling_price }}"
                                                                            data-units="{{ $item->units }}">
                                                                        {{ $item->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <input type="hidden" name="items[{{ $index }}][item_name]" value="{{ $existing->item_name }}">
                                                            <input type="hidden" name="items[{{ $index }}][connection_type_id]" class="connection-type-id-input" value="{{ $existing->connection_type_id ?? '' }}">
                                                            <input type="hidden" name="items[{{ $index }}][note]" class="connection-type-note-input" value="{{ $existing->note ?? '' }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control" name="items[{{ $index }}][description]" value="{{ $existing->description }}" placeholder="Enter description">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control" name="items[{{ $index }}][unit]" value="{{ $existing->unit }}" placeholder="Unit">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control quantity" name="items[{{ $index }}][quantity]" value="{{ $existing->quantity }}" min="0" step="0.01" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control rate" name="items[{{ $index }}][rate]" value="{{ $existing->rate }}" min="0" step="0.01" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control vat" name="items[{{ $index }}][vat]" value="{{ $existing->vat_percentage }}" min="0" max="100" step="0.01">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control total-vat" name="items[{{ $index }}][total_vat]" value="{{ $existing->total_vat }}" readonly>
                                                            <small class="text-muted vat-breakdown" style="display: none;"></small>
                                                        </td>
                                                        <td>
                                                            <input type="date" class="form-control" name="items[{{ $index }}][from_date]" value="{{ optional($existing->from_date)->format('Y-m-d') }}">
                                                        </td>
                                                        <td>
                                                            <input type="date" class="form-control" name="items[{{ $index }}][to_date]" value="{{ optional($existing->to_date)->format('Y-m-d') }}">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control total" name="items[{{ $index }}][total]" value="{{ $existing->total_amount }}" readonly>
                                                            <small class="text-muted calculation-breakdown" style="display: none;"></small>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-success btn-sm calculate-item" title="Calculate Total">
                                                                <i class="fas fa-calculator"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-info btn-sm connection-type-btn" title="Select Connection Type" data-index="{{ $index }}">
                                                                <i class="fas fa-network-wired"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-danger btn-sm remove-item">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                            <div class="connection-type-info mt-1" style="display: none;">
                                                                <span class="connection-type-badge badge badge-secondary"></span>
                                                                <small class="connection-type-note-display text-muted d-block mt-1" style="font-size: 0.7rem; max-width: 150px; word-wrap: break-word;"></small>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="connection-type-row" data-parent-index="{{ $index }}" style="display: none; background-color: #f8f9fa;">
                                                        <td colspan="11">
                                                            <div class="row p-2">
                                                                <div class="col-md-6">
                                                                    <label class="font-weight-bold mb-2">Search Connection Type:</label>
                                                                    <input type="text" class="form-control connection-type-search" placeholder="Type to search connection types..." autocomplete="off">
                                                                    <div class="connection-type-list mt-2" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; background: white; display: none;">
                                                                        <ul class="list-group mb-0">
                                                                            @foreach($connectionTypes ?? [] as $connectionType)
                                                                                <li class="list-group-item connection-type-option" style="cursor: pointer;" data-id="{{ $connectionType->id }}" data-name="{{ $connectionType->name }}">
                                                                                    {{ $connectionType->name }}
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="font-weight-bold mb-2">Note:</label>
                                                                    <textarea class="form-control connection-type-note" rows="3" placeholder="Enter note...">{{ $existing->note ?? '' }}</textarea>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr class="item-row">
                                                    <td>
                                                        <select class="form-control item-select" name="items[0][product_id]" data-item-name-input="items[0][item_name]" required>
                                                            <option value="">Select</option>
                                                            @foreach($bandwidthItems as $item)
                                                                <option value="{{ $item->id }}" 
                                                                        data-buying-price="{{ $item->buying_price }}"
                                                                        data-selling-price="{{ $item->selling_price }}"
                                                                        data-units="{{ $item->units }}">
                                                                    {{ $item->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <input type="hidden" name="items[0][item_name]" value="">
                                                        <input type="hidden" name="items[0][connection_type_id]" class="connection-type-id-input" value="">
                                                        <input type="hidden" name="items[0][note]" class="connection-type-note-input" value="">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="items[0][description]" placeholder="Enter description">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="items[0][unit]" placeholder="Unit">
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control quantity" name="items[0][quantity]" value="0" min="0" step="0.01" required>
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control rate" name="items[0][rate]" value="0" min="0" step="0.01" required>
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control vat" name="items[0][vat]" value="0" min="0" max="100" step="0.01">
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control total-vat" name="items[0][total_vat]" value="0.00" readonly>
                                                        <small class="text-muted vat-breakdown" style="display: none;"></small>
                                                    </td>
                                                    <td>
                                                        <input type="date" class="form-control" name="items[0][from_date]">
                                                    </td>
                                                    <td>
                                                        <input type="date" class="form-control" name="items[0][to_date]">
                                                    </td>
                                                    <td>
                                                        <input type="number" class="form-control total" name="items[0][total]" value="0.00" readonly>
                                                        <small class="text-muted calculation-breakdown" style="display: none;"></small>
                                                    </td>
                                                        <td>
                                                            <button type="button" class="btn btn-success btn-sm calculate-item" title="Calculate Total">
                                                                <i class="fas fa-calculator"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-info btn-sm connection-type-btn" title="Select Connection Type" data-index="0">
                                                                <i class="fas fa-network-wired"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-danger btn-sm remove-item" style="display: none;" disabled>
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                            <a href="#" class="btn btn-info btn-sm nttn-link-icon" style="display: none;" title="Add NTTN Link" target="_blank">
                                                                <i class="fas fa-link"></i>
                                                            </a>
                                                            <div class="connection-type-info mt-1" style="display: none;">
                                                                <span class="connection-type-badge badge badge-secondary"></span>
                                                                <small class="connection-type-note-display text-muted d-block mt-1" style="font-size: 0.7rem; max-width: 150px; word-wrap: break-word;"></small>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="connection-type-row" data-parent-index="0" style="display: none; background-color: #f8f9fa;">
                                                        <td colspan="11">
                                                            <div class="row p-2">
                                                                <div class="col-md-6">
                                                                    <label class="font-weight-bold mb-2">Search Connection Type:</label>
                                                                    <input type="text" class="form-control connection-type-search" placeholder="Type to search connection types..." autocomplete="off">
                                                                    <div class="connection-type-list mt-2" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; background: white; display: none;">
                                                                        <ul class="list-group mb-0">
                                                                            @foreach($connectionTypes ?? [] as $connectionType)
                                                                                <li class="list-group-item connection-type-option" style="cursor: pointer;" data-id="{{ $connectionType->id }}" data-name="{{ $connectionType->name }}">
                                                                                    {{ $connectionType->name }}
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="font-weight-bold mb-2">Note:</label>
                                                                    <textarea class="form-control connection-type-note" rows="3" placeholder="Enter note..."></textarea>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="text-right">
                                    <button type="button" class="btn btn-primary" id="addNewItem">
                                        <i class="fas fa-plus mr-2"></i>Add New
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Discount Section -->
                        <div class="row mb-2">
                            <div class="col-12">
                                <h5 class="text-primary mb-2" style="font-size: 1rem;">Discount</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="discount_type" class="form-label font-weight-bold">Discount Type</label>
                                        <select class="form-control" id="discount_type" name="discount_type">
                                            <option value="">Select Discount Type</option>
                                            <option value="percentage" {{ isset($invoice) && $invoice->discount_type === 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                            <option value="gross" {{ isset($invoice) && $invoice->discount_type === 'gross' ? 'selected' : '' }}>Gross Amount</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="discount_value" class="form-label font-weight-bold">Discount Value</label>
                                        <input type="number" class="form-control" id="discount_value" name="discount_value" 
                                               step="0.01" min="0" value="{{ isset($invoice) ? $invoice->discount_value : 0 }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="discount_amount" class="form-label font-weight-bold">Discount Amount</label>
                                        <input type="number" class="form-control" id="discount_amount" name="discount_amount" 
                                               step="0.01" min="0" value="{{ isset($invoice) ? $invoice->discount_amount : 0 }}" readonly>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="subtotal_after_discount" class="form-label font-weight-bold">Subtotal After Discount</label>
                                        <input type="number" class="form-control" id="subtotal_after_discount" name="subtotal_after_discount" 
                                               step="0.01" min="0" value="{{ isset($invoice) ? $invoice->subtotal_after_discount : 0 }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Total Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="text-primary mb-0">Total</h5>
                                    <div class="form-group mb-0">
                                        <input type="number" class="form-control text-right font-weight-bold" 
                                               id="grandTotal" name="invoice_amount" value="{{ isset($invoice) ? $invoice->invoice_amount : 0 }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Remarks/Note Section -->
                        <div class="row mb-2">
                            <div class="col-12">
                                <h5 class="text-primary mb-2" style="font-size: 1rem;">Remarks/Note</h5>
                                <div class="card">
                                    <div class="card-header bg-light">
                                        <div class="btn-toolbar" role="toolbar">
                                            <div class="btn-group mr-2" role="group">
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Undo">
                                                    <i class="fas fa-undo"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Redo">
                                                    <i class="fas fa-redo"></i>
                                                </button>
                                            </div>
                                            <div class="btn-group mr-2" role="group">
                                                <select class="form-control form-control-sm">
                                                    <option>Formats</option>
                                                </select>
                                            </div>
                                            <div class="btn-group mr-2" role="group">
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Bold">
                                                    <strong>B</strong>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Italic">
                                                    <em>I</em>
                                                </button>
                                            </div>
                                            <div class="btn-group mr-2" role="group">
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Align Left">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Align Center">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Align Right">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-sm btn-outline-secondary" title="Bullet List">
                                                    <i class="fas fa-list-ul"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <textarea class="form-control" id="notes" name="notes" rows="8" 
                                                  placeholder="Enter remarks or notes...">{{ isset($invoice) ? $invoice->notes : '' }}</textarea>
                                        <div class="form-check mt-3">
                                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                                            <label class="form-check-label" for="is_active">Active</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Save Button -->
                        <div class="row">
                            <div class="col-12 text-right">
                                <button type="button" class="btn btn-info btn-lg mr-2" id="viewInvoiceBtn">
                                    <i class="fas fa-eye mr-2"></i>View
                                </button>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-check mr-2"></i>Save
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-xl" role="document" style="z-index: 1050; margin-top: 50px;">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="previewModalLabel">
                    <i class="fas fa-eye mr-2"></i>Invoice Preview
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="previewContent">
                    <!-- Preview content will be inserted here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="if(typeof closePreviewModal === 'function') closePreviewModal(); else { const modal = document.getElementById('previewModal'); if(modal) { modal.style.display = 'none'; modal.classList.remove('show'); document.body.classList.remove('modal-open'); document.body.style.overflow = ''; const backdrop = document.getElementById('modalBackdrop'); if(backdrop) backdrop.remove(); } }">Close</button>
                <button type="button" class="btn btn-primary" onclick="if(typeof closePreviewModal === 'function') closePreviewModal(); const form = document.querySelector('form'); if(form) form.submit();">
                    <i class="fas fa-check mr-2"></i>Save Invoice
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.thead-dark th {
    background-color: #343a40;
    color: white;
    border-color: #454d55;
}

.item-row:first-child .remove-item {
    display: none;
}

.custom-file-label::after {
    content: "Choose File";
}

.form-label {
    font-weight: bold;
    color: #495057;
}

.card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

.btn-toolbar .btn-group {
    margin-right: 0.5rem;
}

.btn-toolbar .btn-group:last-child {
    margin-right: 0;
}

.calculation-breakdown {
    font-size: 0.75rem;
    font-style: italic;
    color: #6c757d;
    margin-top: 2px;
    display: block;
}

.vat-breakdown {
    font-size: 0.75rem;
    font-style: italic;
    color: #6c757d;
    margin-top: 2px;
    display: block;
}

.total-vat {
    background-color: #f8f9fa;
    font-weight: bold;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Action column buttons - make them inline */
.item-row td:last-child {
    white-space: nowrap;
}

.item-row td:last-child .btn,
.item-row td:last-child .nttn-link-icon {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 1px !important;
}

.calculate-item {
    padding: 0.1rem 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-right: 1px !important;
}

.calculate-item i {
    font-size: 0.55rem !important;
}

.connection-type-btn {
    padding: 0.1rem 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.connection-type-btn i {
    font-size: 0.55rem !important;
}

.remove-item {
    margin-left: 1px !important;
    margin-right: 1px !important;
    padding: 0.1rem 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.remove-item i {
    font-size: 0.55rem !important;
}

.nttn-link-icon {
    margin-left: 1px !important;
    padding: 0.1rem 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}

.nttn-link-icon i {
    font-size: 0.55rem !important;
}
</style>

<script>
let itemIndex = {{ isset($invoice) && $invoice->items->count() > 0 ? $invoice->items->count() - 1 : 0 }};

// Connection Types data for JavaScript
const connectionTypes = @json($connectionTypes ?? []);

// Track the last selected connection type to apply to new rows
let lastSelectedConnectionTypeId = '';
let lastSelectedConnectionTypeName = '';
let lastSelectedNote = '';

// Add new item row
document.getElementById('addNewItem').addEventListener('click', function() {
    itemIndex++;
    const tbody = document.getElementById('itemsTableBody');
    const newRow = document.createElement('tr');
    newRow.className = 'item-row';
    
    // Build connection type options
    let connectionTypeOptions = '<option value="">Select Connection Type</option>';
    connectionTypes.forEach(function(ct) {
        connectionTypeOptions += `<option value="${ct.id}">${ct.name}</option>`;
    });
    
    newRow.innerHTML = `
        <td>
            <select class="form-control item-select" name="items[${itemIndex}][product_id]" data-item-name-input="items[${itemIndex}][item_name]" required>
                <option value="">Select</option>
                @foreach($bandwidthItems as $item)
                    <option value="{{ $item->id }}" 
                            data-buying-price="{{ $item->buying_price }}"
                            data-selling-price="{{ $item->selling_price }}"
                            data-units="{{ $item->units }}">
                        {{ $item->name }}
                    </option>
                @endforeach
            </select>
            <input type="hidden" name="items[${itemIndex}][item_name]" value="">
            <input type="hidden" name="items[${itemIndex}][connection_type_id]" class="connection-type-id-input" value="${lastSelectedConnectionTypeId}">
            <input type="hidden" name="items[${itemIndex}][note]" class="connection-type-note-input" value="${lastSelectedNote || ''}">
        </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]" 
                   value="0" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control rate" name="items[${itemIndex}][rate]" 
                   value="0" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control vat" name="items[${itemIndex}][vat]" 
                   value="0" min="0" max="100" step="0.01">
        </td>
        <td>
            <input type="number" class="form-control total-vat" name="items[${itemIndex}][total_vat]" 
                   value="0.00" readonly>
            <small class="text-muted vat-breakdown" style="display: none;"></small>
        </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="number" class="form-control total" name="items[${itemIndex}][total]" 
                   value="0.00" readonly>
            <small class="text-muted calculation-breakdown" style="display: none;"></small>
        </td>
        <td>
            <button type="button" class="btn btn-success btn-sm calculate-item" title="Calculate Total">
                <i class="fas fa-calculator"></i>
            </button>
            <button type="button" class="btn btn-info btn-sm connection-type-btn" title="Select Connection Type" data-index="${itemIndex}">
                <i class="fas fa-network-wired"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm remove-item">
                <i class="fas fa-trash"></i>
            </button>
            <a href="#" class="btn btn-info btn-sm nttn-link-icon" style="display: none;" title="Add NTTN Link" target="_blank">
                <i class="fas fa-link"></i>
            </a>
            <div class="connection-type-info mt-1" style="display: none;">
                <span class="connection-type-badge badge badge-secondary"></span>
                <small class="connection-type-note-display text-muted d-block mt-1" style="font-size: 0.7rem; max-width: 150px; word-wrap: break-word;"></small>
            </div>
        </td>
    `;
    
    // Create connection type selection row
    const connectionTypeRow = document.createElement('tr');
    connectionTypeRow.className = 'connection-type-row';
    connectionTypeRow.setAttribute('data-parent-index', itemIndex);
    connectionTypeRow.style.display = 'none';
    connectionTypeRow.style.backgroundColor = '#f8f9fa';
    
    let connectionTypeOptionsHtml = '';
    connectionTypes.forEach(function(ct) {
        connectionTypeOptionsHtml += `<li class="list-group-item connection-type-option" style="cursor: pointer;" data-id="${ct.id}" data-name="${ct.name}">${ct.name}</li>`;
    });
    
    connectionTypeRow.innerHTML = `
        <td colspan="11">
            <div class="row p-2">
                <div class="col-md-6">
                    <label class="font-weight-bold mb-2">Search Connection Type:</label>
                    <input type="text" class="form-control connection-type-search" placeholder="Type to search connection types..." autocomplete="off">
                    <div class="connection-type-list mt-2" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; background: white; display: none;">
                        <ul class="list-group mb-0">
                            ${connectionTypeOptionsHtml}
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="font-weight-bold mb-2">Note:</label>
                    <textarea class="form-control connection-type-note" rows="3" placeholder="Enter note..."></textarea>
                </div>
            </div>
        </td>
    `;
    
    tbody.appendChild(newRow);
    tbody.appendChild(connectionTypeRow);
    
    // Apply last selected connection type and note to new row if available
    if (lastSelectedConnectionTypeId) {
        const newRowConnectionTypeInput = newRow.querySelector(`input[name="items[${itemIndex}][connection_type_id]"]`);
        const newRowConnectionTypeInfo = newRow.querySelector('.connection-type-info');
        const newRowConnectionTypeBadge = newRow.querySelector('.connection-type-badge');
        const newRowNoteInput = newRow.querySelector(`input[name="items[${itemIndex}][note]"]`);
        const newRowNoteDisplay = newRow.querySelector('.connection-type-note-display');
        
        if (newRowConnectionTypeInput) {
            newRowConnectionTypeInput.value = lastSelectedConnectionTypeId;
            if (newRowConnectionTypeInfo && lastSelectedConnectionTypeName) {
                newRowConnectionTypeInfo.style.display = 'block';
                if (newRowConnectionTypeBadge) {
                    newRowConnectionTypeBadge.textContent = lastSelectedConnectionTypeName;
                }
            }
        }
        // Always handle note, even if empty
        if (newRowNoteInput) {
            newRowNoteInput.value = lastSelectedNote || '';
            if (newRowNoteDisplay) {
                newRowNoteDisplay.textContent = lastSelectedNote || '';
            }
            // Show connection type info if note exists
            if (lastSelectedNote && newRowConnectionTypeInfo) {
                newRowConnectionTypeInfo.style.display = 'block';
            }
        }
    }
    
    updateRemoveButtons();
    
    // Attach connection type event listeners to new row
    setTimeout(() => {
        attachConnectionTypeEvents(itemIndex);
    }, 100);
    
    // Check NTTN links for newly added row
    const customerSelect = document.getElementById('customer_id');
    if (customerSelect && customerSelect.value) {
        setTimeout(function() {
            checkNttnLinks(customerSelect.value);
        }, 100);
    }
});

// Remove item row and calculate button
document.addEventListener('click', function(e) {
    if (e.target.closest('.remove-item')) {
        e.target.closest('.item-row').remove();
        updateRemoveButtons();
        calculateGrandTotal();
    }
    
    if (e.target.closest('.calculate-item')) {
        const row = e.target.closest('.item-row');
        const quantityInput = row.querySelector('.quantity');
        calculateItemTotal(quantityInput);
    }
});

// Cascade connection type and note to all rows below the specified index
function cascadeConnectionTypeToRowsBelow(currentIndex, connectionTypeId, connectionTypeName, noteValue = '') {
    // Get all item rows
    const allRows = Array.from(document.querySelectorAll('.item-row'));
    
    // Find the current row by matching the index
    let currentRowFound = false;
    
    allRows.forEach((row) => {
        // Extract index from the connection_type_id input field in the row
        const connectionTypeInput = row.querySelector('input[name*="[connection_type_id]"]');
        if (!connectionTypeInput) return;
        
        const nameMatch = connectionTypeInput.name.match(/items\[(\d+)\]/);
        if (!nameMatch) return;
        
        const rowIndex = parseInt(nameMatch[1]);
        
        // If we haven't found the current row yet, check if this is it
        if (!currentRowFound) {
            if (rowIndex === currentIndex) {
                currentRowFound = true;
            }
            return; // Skip rows before the current one
        }
        
        // Now we're processing rows from the current row onwards (including current row)
        // Update ALL rows with the same connection type ID (override existing values)
        connectionTypeInput.value = connectionTypeId;
        
        // Update connection type display
        const connectionTypeInfo = row.querySelector('.connection-type-info');
        const connectionTypeBadge = row.querySelector('.connection-type-badge');
        if (connectionTypeInfo && connectionTypeName) {
            connectionTypeInfo.style.display = 'block';
            if (connectionTypeBadge) {
                connectionTypeBadge.textContent = connectionTypeName;
            }
        }
        
        // Update note for all rows (including current row)
        const noteInput = row.querySelector(`input[name="items[${rowIndex}][note]"]`);
        const noteDisplay = row.querySelector('.connection-type-note-display');
        if (noteInput) {
            noteInput.value = noteValue || '';
            // Always update display
            if (noteDisplay) {
                noteDisplay.textContent = noteValue || '';
            }
            // Show connection type info if note exists
            if (noteValue && connectionTypeInfo) {
                connectionTypeInfo.style.display = 'block';
            } else if (!noteValue && connectionTypeInfo) {
                // Hide if no note (unless connection type badge exists)
                const connectionTypeBadge = row.querySelector('.connection-type-badge');
                if (!connectionTypeBadge || !connectionTypeBadge.textContent) {
                    connectionTypeInfo.style.display = 'none';
                }
            }
        }
    });
}

// Cascade note to all rows below the specified index (including the current row)
function cascadeNoteToAllRowsBelow(currentIndex, noteValue) {
    // Get all item rows
    const allRows = Array.from(document.querySelectorAll('.item-row'));
    
    allRows.forEach((row) => {
        // Extract index from any input field in the row
        const anyInput = row.querySelector('input[name*="items["]');
        if (!anyInput) return;
        
        const nameMatch = anyInput.name.match(/items\[(\d+)\]/);
        if (!nameMatch) return;
        
        const rowIndex = parseInt(nameMatch[1]);
        
        // If this is the current row or any row below it, update the note
        if (rowIndex >= currentIndex) {
            const noteInput = row.querySelector(`input[name="items[${rowIndex}][note]"]`);
            const noteDisplay = row.querySelector('.connection-type-note-display');
            const connectionTypeInfo = row.querySelector('.connection-type-info');
            
            if (noteInput) {
                noteInput.value = noteValue || '';
                // Always update display
                if (noteDisplay) {
                    noteDisplay.textContent = noteValue || '';
                }
                // Show connection type info if note exists (must show to display the note)
                if (noteValue && noteValue.trim() !== '' && connectionTypeInfo) {
                    connectionTypeInfo.style.display = 'block';
                } else if (!noteValue || noteValue.trim() === '') {
                    // Hide only if no note AND no connection type badge
                    const connectionTypeBadge = row.querySelector('.connection-type-badge');
                    if (connectionTypeInfo && (!connectionTypeBadge || !connectionTypeBadge.textContent || connectionTypeBadge.textContent.trim() === '')) {
                        connectionTypeInfo.style.display = 'none';
                    }
                }
            }
        }
    });
}

// Connection Type functionality
function attachConnectionTypeEvents(index) {
    // Find item row by checking all rows for matching input
    let itemRow = null;
    document.querySelectorAll('.item-row').forEach(row => {
        const input = row.querySelector(`input[name="items[${index}][connection_type_id]"]`);
        if (input) {
            itemRow = row;
        }
    });
    
    if (!itemRow) return;
    
    const connectionTypeBtn = itemRow.querySelector(`.connection-type-btn[data-index="${index}"]`);
    const connectionTypeRow = document.querySelector(`tr.connection-type-row[data-parent-index="${index}"]`);
    const connectionTypeInput = itemRow.querySelector(`input[name="items[${index}][connection_type_id]"]`);
    const connectionTypeNoteInput = itemRow.querySelector(`input[name="items[${index}][note]"]`);
    const connectionTypeInfo = itemRow.querySelector('.connection-type-info');
    const connectionTypeBadge = itemRow.querySelector('.connection-type-badge');
    const connectionTypeNoteDisplay = itemRow.querySelector('.connection-type-note-display');
    const connectionTypeNoteTextarea = connectionTypeRow ? connectionTypeRow.querySelector('.connection-type-note') : null;
    
    if (!connectionTypeBtn || !connectionTypeRow) return;
    
    // Load existing note value into textarea
    if (connectionTypeNoteTextarea && connectionTypeNoteInput) {
        connectionTypeNoteTextarea.value = connectionTypeNoteInput.value || '';
    }
    
    // Update hidden note input when textarea changes and cascade to all rows below
    if (connectionTypeNoteTextarea && connectionTypeNoteInput) {
        connectionTypeNoteTextarea.addEventListener('input', function() {
            const noteValue = this.value;
            // Update global tracking
            lastSelectedNote = noteValue;
            // Update current row's note
            connectionTypeNoteInput.value = noteValue;
            // Update display in action column
            if (connectionTypeNoteDisplay) {
                connectionTypeNoteDisplay.textContent = noteValue || '';
            }
            // Cascade note to all rows below (including current row)
            cascadeNoteToAllRowsBelow(index, noteValue);
        });
    }
    
    // Toggle connection type row on button click
    connectionTypeBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        const isVisible = connectionTypeRow.style.display !== 'none';
        
        // Close all other connection type rows
        document.querySelectorAll('.connection-type-row').forEach(row => {
            if (row !== connectionTypeRow) {
                row.style.display = 'none';
            }
        });
        
        // Toggle current row
        connectionTypeRow.style.display = isVisible ? 'none' : 'table-row';
        
        // Focus search input if opening
        if (!isVisible) {
            const searchInput = connectionTypeRow.querySelector('.connection-type-search');
            if (searchInput) {
                setTimeout(() => searchInput.focus(), 100);
            }
        }
    });
    
    // Search functionality
    const searchInput = connectionTypeRow.querySelector('.connection-type-search');
    const connectionTypeList = connectionTypeRow.querySelector('.connection-type-list');
    const connectionTypeOptions = connectionTypeRow.querySelectorAll('.connection-type-option');
    
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            let hasMatch = false;
            
            connectionTypeOptions.forEach(option => {
                const text = option.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    option.style.display = '';
                    hasMatch = true;
                } else {
                    option.style.display = 'none';
                }
            });
            
            connectionTypeList.style.display = hasMatch && searchTerm ? 'block' : 'none';
        });
        
        searchInput.addEventListener('focus', function() {
            if (this.value) {
                connectionTypeList.style.display = 'block';
            }
        });
    }
    
    // Select connection type
    connectionTypeOptions.forEach(option => {
        option.addEventListener('click', function() {
            const id = this.getAttribute('data-id');
            const name = this.getAttribute('data-name');
            
            // Update global tracking variables
            lastSelectedConnectionTypeId = id;
            lastSelectedConnectionTypeName = name;
            
            if (connectionTypeInput) {
                connectionTypeInput.value = id;
            }
            
            // Get note value from textarea
            const noteValue = connectionTypeNoteTextarea ? connectionTypeNoteTextarea.value : '';
            
            // Update current row's note
            if (connectionTypeNoteInput) {
                connectionTypeNoteInput.value = noteValue;
            }
            
            // Update display in action column
            if (connectionTypeInfo) {
                connectionTypeInfo.style.display = 'block';
            }
            if (connectionTypeBadge) {
                connectionTypeBadge.textContent = name;
            }
            if (connectionTypeNoteDisplay) {
                connectionTypeNoteDisplay.textContent = noteValue || '';
            }
            
            // Cascade connection type and note to all rows below this one (including current row)
            cascadeConnectionTypeToRowsBelow(index, id, name, noteValue);
            
            // Close the row and clear search
            connectionTypeRow.style.display = 'none';
            if (searchInput) {
                searchInput.value = '';
            }
            connectionTypeList.style.display = 'none';
        });
    });
}

// Initialize connection type events for existing rows
document.addEventListener('DOMContentLoaded', function() {
    // Attach events to existing rows
    const existingRows = document.querySelectorAll('.item-row');
    existingRows.forEach((row, index) => {
        const connectionTypeBtn = row.querySelector('.connection-type-btn');
        if (connectionTypeBtn) {
            const btnIndex = connectionTypeBtn.getAttribute('data-index');
            if (btnIndex !== null) {
                attachConnectionTypeEvents(btnIndex);
            }
        }
    });
    
    // Load existing connection type values and show badges
    // Also track the last connection type and note found to apply to new rows
    existingRows.forEach(row => {
        const connectionTypeInput = row.querySelector('.connection-type-id-input');
        const connectionTypeInfo = row.querySelector('.connection-type-info');
        const connectionTypeBadge = row.querySelector('.connection-type-badge');
        const noteInput = row.querySelector('.connection-type-note-input');
        const noteDisplay = row.querySelector('.connection-type-note-display');
        
        if (connectionTypeInput && connectionTypeInput.value && connectionTypes.length > 0) {
            const connectionType = connectionTypes.find(ct => ct.id == connectionTypeInput.value);
            if (connectionType) {
                // Update global tracking with the last found connection type
                lastSelectedConnectionTypeId = connectionTypeInput.value;
                lastSelectedConnectionTypeName = connectionType.name;
                
                // Show connection type info
                if (connectionTypeInfo) {
                    connectionTypeInfo.style.display = 'block';
                }
                if (connectionTypeBadge) {
                    connectionTypeBadge.textContent = connectionType.name;
                }
            }
        }
        
        // Track last note value and display it
        if (noteInput) {
            if (noteInput.value) {
                lastSelectedNote = noteInput.value;
            }
            // Show note in action column
            if (noteDisplay) {
                noteDisplay.textContent = noteInput.value || '';
            }
            // Show connection type info if note exists
            if (noteInput.value && connectionTypeInfo) {
                connectionTypeInfo.style.display = 'block';
            }
        }
    });
});

// Ensure notes are cascaded before form submission
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('salesInvoiceForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Before submitting, ensure all notes are properly cascaded
            const allRows = Array.from(document.querySelectorAll('.item-row'));
            let lastNote = '';
            
            allRows.forEach((row) => {
                // Extract index from any input field in the row
                const anyInput = row.querySelector('input[name*="items["]');
                if (!anyInput) return;
                
                const nameMatch = anyInput.name.match(/items\[(\d+)\]/);
                if (!nameMatch) return;
                
                const rowIndex = parseInt(nameMatch[1]);
                const noteInput = row.querySelector(`input[name="items[${rowIndex}][note]"]`);
                
                // If this row has a note, update lastNote for cascading to subsequent rows
                if (noteInput && noteInput.value && noteInput.value.trim() !== '') {
                    lastNote = noteInput.value;
                } else if (lastNote && noteInput) {
                    // If this row doesn't have a note but we have a lastNote, cascade it
                    noteInput.value = lastNote;
                    const noteDisplay = row.querySelector('.connection-type-note-display');
                    if (noteDisplay) {
                        noteDisplay.textContent = lastNote;
                    }
                    const connectionTypeInfo = row.querySelector('.connection-type-info');
                    if (connectionTypeInfo && lastNote) {
                        connectionTypeInfo.style.display = 'block';
                    }
                }
            });
            
            console.log('Form submitting with all notes cascaded');
        });
    }
});

// Update remove buttons visibility
function updateRemoveButtons() {
    const customerSelect = document.getElementById('customer_id');
    const customerId = customerSelect ? customerSelect.value : '';
    
    const rows = document.querySelectorAll('.item-row');
    rows.forEach((row, index) => {
        const removeBtn = row.querySelector('.remove-item');
        if (!customerId) {
            // Hide if no customer selected
            removeBtn.style.display = 'none';
        } else if (rows.length === 1) {
            // Hide if only one row
            removeBtn.style.display = 'none';
        } else {
            // Show if customer selected and multiple rows
            removeBtn.style.display = 'inline-block';
            removeBtn.disabled = false;
        }
    });
}

// Calculate item total
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('quantity') || 
        e.target.classList.contains('rate') || 
        e.target.classList.contains('vat')) {
        calculateItemTotal(e.target);
    }
    
    // Calculate discount when discount fields change
    if (e.target.id === 'discount_type' || e.target.id === 'discount_value') {
        calculateGrandTotal();
    }
});

// Handle date field changes
document.addEventListener('change', function(e) {
    if (e.target.name && (e.target.name.includes('[from_date]') || e.target.name.includes('[to_date]'))) {
        calculateItemTotal(e.target);
    }
});

// Calculate item total
function calculateItemTotal(input) {
    const row = input.closest('.item-row');
    const quantity = parseFloat(row.querySelector('.quantity').value) || 0;
    const rate = parseFloat(row.querySelector('.rate').value) || 0;
    const vat = parseFloat(row.querySelector('.vat').value) || 0;
    const fromDate = row.querySelector('input[name*="[from_date]"]').value;
    const toDate = row.querySelector('input[name*="[to_date]"]').value;
    
    // Calculate base amount (Quantity × Rate)
    const baseAmount = quantity * rate;
    
    // Calculate Date To Date multiplier if both dates are provided
    let dateMultiplier = 1;
    let calculationText = '';
    
    if (fromDate && toDate) {
        const from = new Date(fromDate);
        const to = new Date(toDate);
        
        // Validate dates
        if (from <= to) {
            // Calculate difference in days
            const timeDiff = to.getTime() - from.getTime();
            const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1; // +1 to include both start and end dates
            
            // Get actual days in the month
            const fromMonth = from.getMonth();
            const fromYear = from.getFullYear();
            const daysInMonth = new Date(fromYear, fromMonth + 1, 0).getDate();
            
            // Calculate monthly multiplier based on actual days in month
            const monthsDiff = daysDiff / daysInMonth;
            dateMultiplier = monthsDiff; // Use exact calculation without minimum
            
            calculationText = `(${quantity} × ${rate} × ${monthsDiff.toFixed(2)}mo) + ${vat}% VAT`;
        } else {
            // Invalid date range
            calculationText = 'Invalid date range';
        }
    } else {
        calculationText = `(${quantity} × ${rate}) + ${vat}% VAT`;
    }
    
    // Calculate subtotal with date multiplier
    const subtotal = baseAmount * dateMultiplier;
    
    // Calculate VAT amount
    const vatAmount = (subtotal * vat) / 100;
    
    // Calculate final total
    const total = subtotal + vatAmount;
    
    // Update the total field
    row.querySelector('.total').value = total.toFixed(2);
    
    // Update the total VAT field
    row.querySelector('.total-vat').value = vatAmount.toFixed(2);
    
    // Show calculation breakdown
    const breakdownElement = row.querySelector('.calculation-breakdown');
    breakdownElement.textContent = calculationText;
    breakdownElement.style.display = 'block';
    
    // Show VAT breakdown
    const vatBreakdownElement = row.querySelector('.vat-breakdown');
    vatBreakdownElement.textContent = `VAT: BDT${vatAmount.toFixed(2)}`;
    vatBreakdownElement.style.display = 'block';
    
    calculateGrandTotal();
}

// Calculate grand total
function calculateGrandTotal() {
    const totals = document.querySelectorAll('.total');
    let grandTotal = 0;
    
    totals.forEach(total => {
        grandTotal += parseFloat(total.value) || 0;
    });
    
    // Apply discount
    const discountType = document.getElementById('discount_type').value;
    const discountValue = parseFloat(document.getElementById('discount_value').value) || 0;
    let discountAmount = 0;
    
    if (discountType === 'percentage') {
        discountAmount = (grandTotal * discountValue) / 100;
    } else if (discountType === 'gross') {
        discountAmount = discountValue;
    }
    
    const subtotalAfterDiscount = grandTotal - discountAmount;
    
    document.getElementById('discount_amount').value = discountAmount.toFixed(2);
    document.getElementById('subtotal_after_discount').value = subtotalAfterDiscount.toFixed(2);
    document.getElementById('grandTotal').value = subtotalAfterDiscount.toFixed(2);
}

// Auto-fill rate and unit when item is selected
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('item-select')) {
        const option = e.target.selectedOptions[0];
        if (option) {
            const buyingPrice = option.getAttribute('data-buying-price');
            const sellingPrice = option.getAttribute('data-selling-price');
            const units = option.getAttribute('data-units');
            const rateInput = e.target.closest('.item-row').querySelector('.rate');
            const unitInput = e.target.closest('.item-row').querySelector('input[name*="[unit]"]');
            
            // Auto-fill rate (use selling price for sales invoice)
            if (sellingPrice) {
                rateInput.value = sellingPrice;
            } else if (buyingPrice) {
                rateInput.value = buyingPrice;
            }
            
            // Auto-fill unit
            if (units && unitInput) {
                unitInput.value = units;
            }
            
            calculateItemTotal(rateInput);
        }
    }
});

// Custom file input
document.querySelector('.custom-file-input').addEventListener('change', function(e) {
    const fileName = e.target.files[0] ? e.target.files[0].name : 'Choose File';
    e.target.nextElementSibling.textContent = fileName;
});

// Add event listeners for discount and advance adjustment fields
document.addEventListener('DOMContentLoaded', function() {
    const discountTypeSelect = document.getElementById('discount_type');
    const discountValueInput = document.getElementById('discount_value');
    const advanceAdjustmentInput = document.getElementById('advanceAdjustment');
    
    if (discountTypeSelect) {
        discountTypeSelect.addEventListener('change', calculateGrandTotal);
    }
    
    if (discountValueInput) {
        discountValueInput.addEventListener('input', calculateGrandTotal);
    }
    
    if (advanceAdjustmentInput) {
        advanceAdjustmentInput.addEventListener('input', calculateGrandTotal);
    }
});

// Set current billing month
function setCurrentBillingMonth() {
    const today = new Date();
    const currentMonth = String(today.getMonth() + 1).padStart(2, '0'); // Add 1 because getMonth() returns 0-11
    const currentYear = today.getFullYear();
    const billingMonth = `${currentYear}-${currentMonth}`; // YYYY-MM format
    
    const invoiceMonthInput = document.getElementById('invoice_month');
    if (invoiceMonthInput && !invoiceMonthInput.value) {
        invoiceMonthInput.value = billingMonth;
    }
}

// Note: Invoice numbers are now auto-generated and read-only


// Initialize existing item selectors
function initializeExistingItems() {
    const existingSelects = document.querySelectorAll('.item-select');
    existingSelects.forEach(select => {
        select.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption.value) {
                const row = this.closest('tr');
                const rateInput = row.querySelector('.rate');
                const unitInput = row.querySelector('input[name*="[unit]"]');
                const hiddenItemNameName = this.getAttribute('data-item-name-input');
                const hiddenItemNameInput = hiddenItemNameName ? row.querySelector(`input[name='${hiddenItemNameName}']`) : null;
                
                // Set rate and unit from selected bandwidth item
                rateInput.value = selectedOption.dataset.sellingPrice || 0;
                unitInput.value = selectedOption.dataset.units || '';
                if (hiddenItemNameInput) {
                    hiddenItemNameInput.value = selectedOption.textContent.trim();
                }
                
                // Trigger calculation
                calculateItemTotal(row);
            }
        });
    });
}

// Initialize
updateRemoveButtons();
setCurrentBillingMonth();
initializeExistingItems();

// View Invoice Preview
function setupViewButton() {
    const viewBtn = document.getElementById('viewInvoiceBtn');
    if (!viewBtn) {
        console.error('View button not found');
        return;
    }
    
    viewBtn.addEventListener('click', function(e) {
        e.preventDefault();
        console.log('View button clicked');
    // Collect form data with null checks
    const customerEl = document.getElementById('customer_id');
    const invoiceNoEl = document.getElementById('invoice_no');
    const invoiceMonthEl = document.getElementById('invoice_month');
    const paymentDueEl = document.getElementById('payment_due');
    const invoiceDateEl = document.getElementById('invoice_date');
    const discountTypeEl = document.getElementById('discount_type');
    const discountValueEl = document.getElementById('discount_value');
    const discountAmountEl = document.getElementById('discount_amount');
    const subtotalAfterDiscountEl = document.getElementById('subtotal_after_discount');
    const grandTotalEl = document.getElementById('grandTotal');
    const notesEl = document.getElementById('notes');
    const isActiveEl = document.getElementById('is_active');
    
    const formData = {
        customer: customerEl && customerEl.selectedOptions[0] ? customerEl.selectedOptions[0].text : 'Not selected',
        invoiceNo: invoiceNoEl ? invoiceNoEl.value : 'Auto-generated',
        invoiceMonth: invoiceMonthEl ? invoiceMonthEl.value : '',
        invoiceDate: invoiceDateEl ? invoiceDateEl.value : '',
        paymentDue: paymentDueEl ? paymentDueEl.value : '',
        discountType: discountTypeEl ? discountTypeEl.value : '',
        discountValue: discountValueEl ? discountValueEl.value : '0',
        discountAmount: discountAmountEl ? discountAmountEl.value : '0',
        subtotalAfterDiscount: subtotalAfterDiscountEl ? subtotalAfterDiscountEl.value : '0',
        grandTotal: grandTotalEl ? grandTotalEl.value : '0',
        notes: notesEl ? notesEl.value : '',
        isActive: isActiveEl && isActiveEl.checked ? 'Yes' : 'No'
    };
    
    // Collect items with null checks
    // Track current connection type as we iterate through rows
    let currentConnectionTypeId = '';
    let currentConnectionTypeName = 'No Connection Type';
    
    const items = [];
    const itemRows = document.querySelectorAll('.item-row');
    itemRows.forEach((row, index) => {
        const productSelect = row.querySelector('.item-select');
        const productName = productSelect && productSelect.selectedOptions[0] ? productSelect.selectedOptions[0].text : (productSelect && productSelect.options[0] ? productSelect.options[0].text : 'Not selected');
        
        const descriptionInput = row.querySelector('input[name*="[description]"]');
        const unitInput = row.querySelector('input[name*="[unit]"]');
        const quantityInput = row.querySelector('.quantity');
        const rateInput = row.querySelector('.rate');
        const vatInput = row.querySelector('.vat');
        const totalVatInput = row.querySelector('.total-vat');
        const fromDateInput = row.querySelector('input[name*="[from_date]"]');
        const toDateInput = row.querySelector('input[name*="[to_date]"]');
        const totalInput = row.querySelector('.total');
        const connectionTypeInput = row.querySelector('input[name*="[connection_type_id]"]');
        
        const description = descriptionInput ? descriptionInput.value : '';
        const unit = unitInput ? unitInput.value : '';
        const quantity = quantityInput ? quantityInput.value : '0';
        const rate = rateInput ? rateInput.value : '0';
        const vat = vatInput ? vatInput.value : '0';
        const totalVat = totalVatInput ? totalVatInput.value : '0';
        const fromDate = fromDateInput ? fromDateInput.value : '';
        const toDate = toDateInput ? toDateInput.value : '';
        const total = totalInput ? totalInput.value : '0';
        const connectionTypeId = connectionTypeInput ? connectionTypeInput.value : '';
        
        // If this row has a connection type selected, update current connection type
        // This connection type will apply to this row and all subsequent rows until a new one is selected
        if (connectionTypeId && connectionTypes && connectionTypes.length > 0) {
            const connectionType = connectionTypes.find(ct => ct.id == connectionTypeId);
            if (connectionType) {
                currentConnectionTypeId = connectionTypeId;
                currentConnectionTypeName = connectionType.name;
            }
        }
        
        // Use current connection type for this item
        items.push({
            productName,
            description,
            unit,
            quantity,
            rate,
            vat,
            totalVat,
            fromDate,
            toDate,
            total,
            connectionTypeName: currentConnectionTypeName,
            connectionTypeId: currentConnectionTypeId
        });
    });
    
    // Build preview HTML
    let previewHTML = `
        <div class="invoice-preview">
            <div class="row mb-4">
                <div class="col-12">
                    <h4 class="text-primary mb-3">Invoice Information</h4>
                    <table class="table table-bordered">
                        <tr>
                            <th width="200">Customer:</th>
                            <td>${formData.customer}</td>
                        </tr>
                        <tr>
                            <th>Invoice Number:</th>
                            <td>${formData.invoiceNo}</td>
                        </tr>
                        <tr>
                            <th>Invoice Month:</th>
                            <td>${formData.invoiceMonth || 'Not set'}</td>
                        </tr>
                        <tr>
                            <th>Invoice Date:</th>
                            <td>${formData.invoiceDate || 'Not set'}</td>
                        </tr>
                        <tr>
                            <th>Payment Due:</th>
                            <td>${formData.paymentDue || 'Not set'}</td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td><span class="badge badge-${formData.isActive === 'Yes' ? 'success' : 'secondary'}">${formData.isActive}</span></td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="row mb-4">
                <div class="col-12">
                    <h4 class="text-primary mb-3">Invoice Items</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Product/Item</th>
                                    <th>Connection Type</th>
                                    <th>Description</th>
                                    <th>Unit</th>
                                    <th class="text-right">Quantity</th>
                                    <th class="text-right">Rate</th>
                                    <th class="text-right">VAT %</th>
                                    <th class="text-right">VAT Amount</th>
                                    <th>From Date</th>
                                    <th>To Date</th>
                                    <th class="text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody>
    `;
    
    // Group items by Connection Type, maintaining the order in which Connection Types first appear
    // Items with the same Connection Type that appear consecutively will be grouped together
    const groupedItems = [];
    let currentGroup = null;
    
    items.forEach((item, index) => {
        const connectionType = item.connectionTypeName || 'No Connection Type';
        
        // If this is a new connection type (different from current group), start a new group
        if (!currentGroup || currentGroup.connectionType !== connectionType) {
            currentGroup = {
                connectionType: connectionType,
                items: []
            };
            groupedItems.push(currentGroup);
        }
        
        // Add item to current group
        currentGroup.items.push({...item, originalIndex: index + 1});
    });
    
    // Display items grouped by Connection Type in the order Connection Types first appear
    let rowNumber = 1;
    groupedItems.forEach(group => {
        // Only show header if there are items for this connection type
        if (group.items && group.items.length > 0) {
            // Add connection type header row
            previewHTML += `
                <tr style="background-color: #e9ecef; font-weight: bold;">
                    <td colspan="12" style="padding: 10px;">
                        <i class="fas fa-network-wired mr-2"></i>Connection Type: ${group.connectionType}
                    </td>
                </tr>
            `;
            
            // Add items for this connection type group
            group.items.forEach(item => {
                previewHTML += `
                    <tr>
                        <td>${rowNumber}</td>
                        <td>${item.productName}</td>
                        <td>${item.connectionTypeName || '-'}</td>
                        <td>${item.description || '-'}</td>
                        <td>${item.unit || '-'}</td>
                        <td class="text-right">${parseFloat(item.quantity).toFixed(2)}</td>
                        <td class="text-right">৳ ${parseFloat(item.rate).toFixed(2)}</td>
                        <td class="text-right">${parseFloat(item.vat).toFixed(2)}%</td>
                        <td class="text-right">৳ ${parseFloat(item.totalVat).toFixed(2)}</td>
                        <td>${item.fromDate || '-'}</td>
                        <td>${item.toDate || '-'}</td>
                        <td class="text-right"><strong>৳ ${parseFloat(item.total).toFixed(2)}</strong></td>
                    </tr>
                `;
                rowNumber++;
            });
        }
    });
    
    previewHTML += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="row mb-4">
                <div class="col-md-6 offset-md-6">
                    <table class="table table-bordered">
                        <tr>
                            <th>Subtotal:</th>
                            <td class="text-right">৳ ${parseFloat(formData.grandTotal).toFixed(2)}</td>
                        </tr>
    `;
    
    if (formData.discountType) {
        previewHTML += `
                        <tr>
                            <th>Discount Type:</th>
                            <td class="text-right">${formData.discountType === 'percentage' ? 'Percentage' : 'Gross Amount'}</td>
                        </tr>
                        <tr>
                            <th>Discount Value:</th>
                            <td class="text-right">${formData.discountType === 'percentage' ? formData.discountValue + '%' : '৳ ' + parseFloat(formData.discountValue).toFixed(2)}</td>
                        </tr>
                        <tr>
                            <th>Discount Amount:</th>
                            <td class="text-right">৳ ${parseFloat(formData.discountAmount).toFixed(2)}</td>
                        </tr>
                        <tr>
                            <th>Subtotal After Discount:</th>
                            <td class="text-right">৳ ${parseFloat(formData.subtotalAfterDiscount).toFixed(2)}</td>
                        </tr>
        `;
    }
    
    previewHTML += `
                        <tr class="bg-light">
                            <th><h5 class="mb-0">Grand Total:</h5></th>
                            <td class="text-right"><h5 class="mb-0 text-primary">৳ ${parseFloat(formData.grandTotal).toFixed(2)}</h5></td>
                        </tr>
                    </table>
                </div>
            </div>
    `;
    
    if (formData.notes) {
        previewHTML += `
            <div class="row mb-4">
                <div class="col-12">
                    <h4 class="text-primary mb-3">Notes/Remarks</h4>
                    <div class="card">
                        <div class="card-body">
                            ${formData.notes.replace(/\n/g, '<br>')}
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    previewHTML += `</div>`;
    
    // Insert preview content
    const previewContentDiv = document.getElementById('previewContent');
    if (previewContentDiv) {
        previewContentDiv.innerHTML = previewHTML;
    } else {
        console.error('Preview content div not found');
        return;
    }
    
    // Show modal using vanilla JavaScript
    const modal = document.getElementById('previewModal');
    if (!modal) {
        console.error('Modal not found');
        return;
    }
    
    // Remove existing backdrop if any
    const existingBackdrop = document.getElementById('modalBackdrop');
    if (existingBackdrop) {
        existingBackdrop.remove();
    }
    
    // Show modal
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    modal.setAttribute('aria-modal', 'true');
    document.body.classList.add('modal-open');
    document.body.style.overflow = 'hidden';
    document.body.style.paddingRight = '15px';
    
    // Create backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.id = 'modalBackdrop';
    backdrop.style.zIndex = '1040';
    backdrop.style.position = 'fixed';
    backdrop.style.top = '0';
    backdrop.style.left = '0';
    backdrop.style.width = '100%';
    backdrop.style.height = '100%';
    backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    document.body.appendChild(backdrop);
    
    // Close modal when clicking backdrop
    backdrop.addEventListener('click', function() {
        closePreviewModal();
    });
    
    // Close modal function
    window.closePreviewModal = function() {
        modal.style.display = 'none';
        modal.classList.remove('show');
        modal.setAttribute('aria-hidden', 'true');
        modal.setAttribute('aria-modal', 'false');
        document.body.classList.remove('modal-open');
        document.body.style.overflow = '';
        document.body.style.paddingRight = '';
        const backdrop = document.getElementById('modalBackdrop');
        if (backdrop) {
            backdrop.remove();
        }
    };
    
    // Add close event listeners to close buttons
    const closeButtons = modal.querySelectorAll('[data-dismiss="modal"], .close');
    closeButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            window.closePreviewModal();
        });
    });
    
    console.log('Modal should be visible now');
    });
}

// Setup view button when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupViewButton);
} else {
    setupViewButton();
}

// Handle customer selection to show/hide NTTN link icon
document.addEventListener('DOMContentLoaded', function() {
    const customerSelect = document.getElementById('customer_id');
    if (!customerSelect) return;
    
    // Function to check and show NTTN link icon and delete icon
    window.checkNttnLinks = function(customerId) {
        if (!customerId) {
            // Hide all NTTN link icons and delete icons
            document.querySelectorAll('.nttn-link-icon').forEach(icon => {
                icon.style.display = 'none';
            });
            document.querySelectorAll('.remove-item').forEach(icon => {
                icon.style.display = 'none';
            });
            // Update remove buttons visibility
            updateRemoveButtons();
            return;
        }
        
        // Show delete icons when customer is selected
        updateRemoveButtons();
        
        // Check if customer has NTTN links via AJAX
        fetch(`/reseller/nttn-links/check-customer/${customerId}`)
            .then(response => response.json())
            .then(data => {
                if (data.hasLinks) {
                    // Show NTTN link icons and set href only if customer has NTTN links
                    document.querySelectorAll('.nttn-link-icon').forEach(icon => {
                        icon.href = `/reseller/nttn-links/create?customer_id=${customerId}`;
                        icon.style.display = 'inline-block';
                    });
                } else {
                    // Hide NTTN link icons if customer has no NTTN links
                    document.querySelectorAll('.nttn-link-icon').forEach(icon => {
                        icon.style.display = 'none';
                    });
                }
            })
            .catch(error => {
                console.error('Error checking NTTN links:', error);
                // Hide icons on error
                document.querySelectorAll('.nttn-link-icon').forEach(icon => {
                    icon.style.display = 'none';
                });
            });
    };
    
    // Initially hide all icons
    document.querySelectorAll('.nttn-link-icon').forEach(icon => {
        icon.style.display = 'none';
    });
    document.querySelectorAll('.remove-item').forEach(icon => {
        icon.style.display = 'none';
    });
    
    // Check on initial load if customer is already selected
    if (customerSelect.value) {
        checkNttnLinks(customerSelect.value);
    }
    
    // Check when customer selection changes
    customerSelect.addEventListener('change', function() {
        checkNttnLinks(this.value);
    });
    
    // Handle NTTN link icon click to add links to table
    document.addEventListener('click', function(e) {
        if (e.target.closest('.nttn-link-icon')) {
            e.preventDefault();
            const icon = e.target.closest('.nttn-link-icon');
            const customerId = customerSelect.value;
            
            if (!customerId) {
                alert('Please select a customer first');
                return;
            }
            
            // Fetch customer's NTTN links
            fetch(`/reseller/nttn-links/get-customer-links/${customerId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.links && data.links.length > 0) {
                        // Check if first row is empty
                        const firstRow = document.querySelector('.item-row');
                        const firstRowQuantity = firstRow ? firstRow.querySelector('.quantity') : null;
                        const firstRowRate = firstRow ? firstRow.querySelector('.rate') : null;
                        const isFirstRowEmpty = firstRow && firstRowQuantity && firstRowRate && 
                                              (!firstRowQuantity.value || firstRowQuantity.value == '0') &&
                                              (!firstRowRate.value || firstRowRate.value == '0');
                        
                        let addedCount = 0;
                        
                        // Add each link as a row
                        data.links.forEach(function(link, index) {
                            // If first row is empty and this is the first link, replace first row
                            if (isFirstRowEmpty && index === 0 && firstRow) {
                                populateFirstRow(firstRow, link);
                                addedCount++;
                            } else {
                                // Otherwise add as new row
                                addNttnLinkRow(link);
                                addedCount++;
                            }
                        });
                        
                        // Recalculate totals
                        calculateGrandTotal();
                        
                        alert(`Added ${addedCount} NTTN link(s) to the invoice`);
                    } else {
                        alert('No active NTTN links found for this customer');
                    }
                })
                .catch(error => {
                    console.error('Error fetching NTTN links:', error);
                    alert('Error fetching NTTN links. Please try again.');
                });
        }
    });
    
    // Function to populate first row with NTTN link data
    window.populateFirstRow = function(row, link) {
        // Get the first item select to find matching option
        const firstItemSelect = document.querySelector('.item-select');
        let itemOptionValue = '';
        
        if (firstItemSelect) {
            firstItemSelect.querySelectorAll('option').forEach(option => {
                if (option.value && option.textContent.trim() === link.item_name) {
                    itemOptionValue = option.value;
                }
            });
        }
        
        // Populate fields
        const itemSelect = row.querySelector('.item-select');
        if (itemSelect && itemOptionValue) {
            itemSelect.value = itemOptionValue;
            // Get unit from selected option
            const selectedOption = itemSelect.options[itemSelect.selectedIndex];
            const units = selectedOption ? selectedOption.getAttribute('data-units') : '';
            const unitInput = row.querySelector('input[name*="[unit]"]');
            if (unitInput && units) {
                unitInput.value = units;
            }
            // Trigger change event to auto-fill rate
            itemSelect.dispatchEvent(new Event('change'));
        }
        
        const hiddenItemName = row.querySelector('input[name*="[item_name]"]');
        if (hiddenItemName) {
            hiddenItemName.value = link.item_name || '';
        }
        
        const descriptionInput = row.querySelector('input[name*="[description]"]');
        if (descriptionInput) {
            // Use link_name for description field (from nttn_links table)
            descriptionInput.value = (link.link_name || link.description || '').trim();
        }
        
        const quantityInput = row.querySelector('.quantity');
        if (quantityInput) {
            quantityInput.value = link.quantity || 0;
        }
        
        const rateInput = row.querySelector('.rate');
        if (rateInput) {
            rateInput.value = link.rate || 0;
        }
        
        const vatInput = row.querySelector('.vat');
        if (vatInput) {
            vatInput.value = link.vat || 0;
        }
        
        const totalVatInput = row.querySelector('.total-vat');
        if (totalVatInput) {
            totalVatInput.value = (link.total_vat || 0).toFixed(2);
        }
        
        const totalInput = row.querySelector('.total');
        if (totalInput) {
            totalInput.value = (link.total || 0).toFixed(2);
        }
        
        // Trigger calculation
        if (quantityInput) {
            calculateItemTotal(quantityInput);
        }
    };
    
    // Function to add NTTN link as a row
    window.addNttnLinkRow = function(link) {
        itemIndex++;
        const tbody = document.getElementById('itemsTableBody');
        const newRow = document.createElement('tr');
        newRow.className = 'item-row';
        
        // Get the first item select to clone options
        const firstItemSelect = document.querySelector('.item-select');
        let itemOptionsHTML = '<option value="">Select</option>';
        let itemOptionValue = '';
        
        if (firstItemSelect) {
            firstItemSelect.querySelectorAll('option').forEach(option => {
                if (option.value) {
                    const isSelected = option.textContent.trim() === link.item_name;
                    if (isSelected) {
                        itemOptionValue = option.value;
                    }
                    itemOptionsHTML += `<option value="${option.value}" ${isSelected ? 'selected' : ''}
                            data-buying-price="${option.getAttribute('data-buying-price') || ''}"
                            data-selling-price="${option.getAttribute('data-selling-price') || ''}"
                            data-units="${option.getAttribute('data-units') || ''}">
                        ${option.textContent}
                    </option>`;
                }
            });
        }
        
        newRow.innerHTML = `
            <td>
                <select class="form-control item-select" name="items[${itemIndex}][product_id]" data-item-name-input="items[${itemIndex}][item_name]" required>
                    ${itemOptionsHTML}
                </select>
                <input type="hidden" name="items[${itemIndex}][item_name]" value="${link.item_name || ''}">
            </td>
            <td>
                <input type="text" class="form-control" name="items[${itemIndex}][description]" value="${link.link_name || link.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]" value="${link.quantity || 0}" min="0" step="0.01" required>
            </td>
            <td>
                <input type="number" class="form-control rate" name="items[${itemIndex}][rate]" value="${link.rate || 0}" min="0" step="0.01" required>
            </td>
            <td>
                <input type="number" class="form-control vat" name="items[${itemIndex}][vat]" value="${link.vat || 0}" min="0" max="100" step="0.01">
            </td>
            <td>
                <input type="number" class="form-control total-vat" name="items[${itemIndex}][total_vat]" value="${(link.total_vat || 0).toFixed(2)}" readonly>
                <small class="text-muted vat-breakdown" style="display: none;"></small>
            </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="number" class="form-control total" name="items[${itemIndex}][total]" value="${(link.total || 0).toFixed(2)}" readonly>
                <small class="text-muted calculation-breakdown" style="display: none;"></small>
            </td>
            <td>
                <button type="button" class="btn btn-success btn-sm calculate-item" title="Calculate Total">
                    <i class="fas fa-calculator"></i>
                </button>
                <button type="button" class="btn btn-danger btn-sm remove-item" style="display: none;">
                    <i class="fas fa-trash"></i>
                </button>
                <a href="#" class="btn btn-info btn-sm nttn-link-icon" style="display: none;" title="Add NTTN Link" target="_blank">
                    <i class="fas fa-link"></i>
                </a>
            </td>
        `;
        
        tbody.appendChild(newRow);
        
        // Set item name in hidden input
        const hiddenInput = newRow.querySelector('input[name*="[item_name]"]');
        if (hiddenInput) {
            hiddenInput.value = link.item_name || '';
        }
        
        // Trigger item select change to auto-fill rate and unit
        const select = newRow.querySelector('.item-select');
        if (select && itemOptionValue) {
            select.value = itemOptionValue;
            // Get unit from selected option
            const selectedOption = select.options[select.selectedIndex];
            const units = selectedOption ? selectedOption.getAttribute('data-units') : '';
            const unitInput = newRow.querySelector('input[name*="[unit]"]');
            if (unitInput && units) {
                unitInput.value = units;
            }
            // Trigger change event to auto-fill rate
            select.dispatchEvent(new Event('change'));
        }
        
        // Update remove buttons and check NTTN links only if customer is selected
        const customerSelect = document.getElementById('customer_id');
        if (customerSelect && customerSelect.value) {
            updateRemoveButtons();
            setTimeout(function() {
                checkNttnLinks(customerSelect.value);
            }, 100);
        } else {
            // Hide icons if no customer selected
            const newRowIcons = newRow.querySelectorAll('.nttn-link-icon, .remove-item');
            newRowIcons.forEach(icon => {
                icon.style.display = 'none';
            });
            updateRemoveButtons();
        }
    };
});
</script>

@section('styles')
<style>
/* Reduce header spacing */
.row.mb-4 {
    margin-bottom: 1rem !important;
}

h1.h3 {
    font-size: 1.4rem !important;
    margin-bottom: 0.25rem !important;
}

h5.text-primary {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
}

/* Reduce card body padding */
.card-body {
    padding: 1rem 1.25rem !important;
}

/* Reduce form group margins */
.mb-3 {
    margin-bottom: 0.75rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

/* Reduce input field padding */
.form-control, .form-select {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
    height: calc(1.5em + 0.8rem + 2px) !important;
}

/* Reduce label spacing */
.form-label {
    margin-bottom: 0.35rem !important;
    font-size: 0.875rem !important;
}

/* Reduce table row height */
.table td, .table th {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
}

/* Reduce button padding */
.btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
}

/* Reduce alert padding */
.alert {
    padding: 0.6rem 1rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.875rem !important;
}

/* Reduce textarea min height */
textarea.form-control {
    min-height: 60px !important;
    padding: 0.4rem 0.75rem !important;
}

/* Reduce small text */
small {
    font-size: 0.75rem !important;
}

/* Reduce input group spacing */
.input-group .form-control {
    padding: 0.4rem 0.75rem !important;
}

.input-group-text {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
}

/* Reduce modal padding */
.modal-body {
    padding: 1rem !important;
}

.modal-header {
    padding: 0.75rem 1rem !important;
}

.modal-footer {
    padding: 0.75rem 1rem !important;
}

/* Reduce table button sizes */
.table .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
}
</style>
@endsection
@endsection