@extends('layouts.app')

@section('title', 'Edit Purchase Bill')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-file-invoice mr-2"></i>Edit Purchase Invoice
                    </h1>
                    <p class="text-muted">Bandwidth Purchase Invoice</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Back Button -->
    <div class="row mb-4">
        <div class="col-12">
            <a href="{{ route('reseller.purchase-invoices.index') }}" class="btn btn-primary">
                <i class="fas fa-arrow-left mr-2"></i>Back to List
            </a>
        </div>
    </div>

    <!-- Main Form -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form action="{{ route('reseller.purchase-invoices.update', $bill->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <!-- General Bill Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">General Bill Information</h5>
                            </div>
                            
                            <!-- First Row -->
                            <div class="col-md-3 mb-3">
                                <label for="provider_id" class="form-label font-weight-bold">Provider</label>
                                <select class="form-control" id="provider_id" name="provider_id" required>
                                    <option value="">Select</option>
                                    @foreach($providers as $provider)
                                        <option value="{{ $provider->id }}" {{ $bill->provider_id == $provider->id ? 'selected' : '' }}>
                                            {{ $provider->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="bill_no" class="form-label font-weight-bold">Bill Number</label>
                                <input type="text" class="form-control" id="bill_no" name="bill_no" 
                                       value="{{ $bill->bill_no }}" required>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="bill_month" class="form-label font-weight-bold">Billing Month</label>
                                @php
                                    $billMonthValue = '';
                                    if ($bill->bill_month) {
                                        try {
                                            // Try to parse M-Y format (e.g., "Jan-2025")
                                            if (preg_match('/^[A-Za-z]{3}-\d{4}$/', $bill->bill_month)) {
                                                $billMonthValue = \Carbon\Carbon::createFromFormat('M-Y', $bill->bill_month)->format('Y-m');
                                            } 
                                            // Try to parse Y-m format (already correct)
                                            elseif (preg_match('/^\d{4}-\d{2}$/', $bill->bill_month)) {
                                                $billMonthValue = $bill->bill_month;
                                            }
                                            // Try to parse other formats
                                            else {
                                                $billMonthValue = \Carbon\Carbon::parse($bill->bill_month)->format('Y-m');
                                            }
                                        } catch (\Exception $e) {
                                            $billMonthValue = $bill->bill_month;
                                        }
                                    }
                                @endphp
                                <input type="month" class="form-control" id="bill_month" name="bill_month" 
                                       value="{{ $billMonthValue }}" required>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="bill_date" class="form-label font-weight-bold">Bill Date</label>
                                <input type="date" class="form-control" id="bill_date" name="bill_date" 
                                       value="{{ $bill->bill_date->format('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="{{ $bill->payment_due ? $bill->payment_due->format('Y-m-d') : '' }}">
                            </div>
                            
                            <!-- Second Row -->
                            <div class="col-md-6 mb-3">
                                <label for="provider_invoice" class="form-label font-weight-bold">Invoice Number</label>
                                <input type="text" class="form-control" id="provider_invoice" name="provider_invoice" 
                                       value="{{ $bill->provider_invoice }}">
                            </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">
                                        {{ $bill->attachment ? basename($bill->attachment) : 'Choose File' }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Item Details Table -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">Item Details</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="itemsTable">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Item</th>
                                                <th>Account Head</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">
                                            @foreach($bill->items as $index => $item)
                                            <tr class="item-row">
                                                <td>
                                                    <select class="form-control item-select" name="items[{{ $index }}][bandwidth_item_id]">
                                                        <option value="">Select</option>
                                                        @foreach($bandwidthItems as $bandwidthItem)
                                                            <option value="{{ $bandwidthItem->id }}" 
                                                                    data-buying-price="{{ $bandwidthItem->buying_price }}"
                                                                    data-selling-price="{{ $bandwidthItem->selling_price }}"
                                                                    data-units="{{ $bandwidthItem->units }}"
                                                                    {{ $item->bandwidth_item_id == $bandwidthItem->id ? 'selected' : '' }}>
                                                                {{ $bandwidthItem->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <select class="form-control account-head-select" 
                                                            name="items[{{ $index }}][account_head]" 
                                                            data-index="{{ $index }}">
                                                        <option value="">Select account</option>
                                                        @foreach($accountTypes as $accountType)
                                                            <optgroup label="{{ strtoupper($accountType->type_name ?? 'N/A') }}">
                                                                @if($accountType->subAccountTypes && $accountType->subAccountTypes->count() > 0)
                                                                    @foreach($accountType->subAccountTypes as $subAccountType)
                                                                        @if($subAccountType->subSubAccountTypes && $subAccountType->subSubAccountTypes->count() > 0)
                                                                            @foreach($subAccountType->subSubAccountTypes as $subSubAccountType)
                                                                                <option value="{{ $accountType->account_type_id }}_{{ $subAccountType->sub_account_type_id }}_{{ $subSubAccountType->sub_sub_account_type_id }}"
                                                                                        data-account-type-id="{{ $accountType->account_type_id }}"
                                                                                        data-sub-account-type-id="{{ $subAccountType->sub_account_type_id }}"
                                                                                        data-sub-sub-account-type-id="{{ $subSubAccountType->sub_sub_account_type_id }}"
                                                                                        {{ $item->account_type_id == $accountType->account_type_id && $item->sub_account_type_id == $subAccountType->sub_account_type_id && $item->sub_sub_account_type_id == $subSubAccountType->sub_sub_account_type_id ? 'selected' : '' }}>
                                                                                    → {{ $subAccountType->sub_type_name ?? 'N/A' }} • {{ $subSubAccountType->account_name ?? 'N/A' }} ({{ $subSubAccountType->account_code ?? '' }})
                                                                                </option>
                                                                            @endforeach
                                                                        @else
                                                                            <option value="{{ $accountType->account_type_id }}_{{ $subAccountType->sub_account_type_id }}_"
                                                                                    data-account-type-id="{{ $accountType->account_type_id }}"
                                                                                    data-sub-account-type-id="{{ $subAccountType->sub_account_type_id }}"
                                                                                    data-sub-sub-account-type-id=""
                                                                                    {{ $item->account_type_id == $accountType->account_type_id && $item->sub_account_type_id == $subAccountType->sub_account_type_id && !$item->sub_sub_account_type_id ? 'selected' : '' }}>
                                                                                → {{ $subAccountType->sub_type_name ?? 'N/A' }}
                                                                            </option>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    <option value="{{ $accountType->account_type_id }}__"
                                                                            data-account-type-id="{{ $accountType->account_type_id }}"
                                                                            data-sub-account-type-id=""
                                                                            data-sub-sub-account-type-id=""
                                                                            {{ $item->account_type_id == $accountType->account_type_id && !$item->sub_account_type_id ? 'selected' : '' }}>
                                                                        {{ $accountType->type_name ?? 'N/A' }}
                                                                    </option>
                                                                @endif
                                                            </optgroup>
                                                        @endforeach
                                                    </select>
                                                    <input type="hidden" name="items[{{ $index }}][account_type_id]" 
                                                           class="account-type-id-input" 
                                                           value="{{ $item->account_type_id }}">
                                                    <input type="hidden" name="items[{{ $index }}][sub_account_type_id]" 
                                                           class="sub-account-type-id-input" 
                                                           value="{{ $item->sub_account_type_id }}">
                                                    <input type="hidden" name="items[{{ $index }}][sub_sub_account_type_id]" 
                                                           class="sub-sub-account-type-id-input" 
                                                           value="{{ $item->sub_sub_account_type_id }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="items[{{ $index }}][description]" 
                                                           value="{{ $item->description }}" placeholder="Enter description">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="items[{{ $index }}][unit]" 
                                                           value="{{ $item->unit }}" placeholder="Unit">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control quantity" name="items[{{ $index }}][quantity]" 
                                                           value="{{ $item->quantity }}" min="0" step="0.01" required>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control rate" name="items[{{ $index }}][rate]" 
                                                           value="{{ $item->rate }}" min="0" step="0.01" required>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control vat" name="items[{{ $index }}][vat]" 
                                                           value="{{ $item->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="{{ $item->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="{{ $item->from_date ? $item->from_date->format('Y-m-d') : '' }}">
                                                </td>
                                                <td>
                                                    <input type="date" class="form-control" name="items[{{ $index }}][to_date]"
                                                           value="{{ $item->to_date ? $item->to_date->format('Y-m-d') : '' }}">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control total" name="items[{{ $index }}][total]" 
                                                           value="{{ $item->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-danger btn-sm remove-item"
                                                            @if($loop->first && $bill->items->count() == 1) disabled @endif>
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </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-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">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" {{ $bill->discount_type === 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                            <option value="gross" {{ $bill->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="{{ $bill->discount_value ?: 0 }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 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="{{ $bill->discount_amount }}" readonly>
                                    </div>
                                    <div class="col-md-6 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="{{ $bill->subtotal_after_discount ?: $bill->bill_amount }}" 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="bill_amount" value="{{ $bill->bill_amount }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Remarks/Note Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">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...">{{ $bill->notes }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Save Button -->
                        <div class="row">
                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-check mr-2"></i>Update
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </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;
}

.calculate-item {
    margin-right: 5px;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
</style>

<script>
let itemIndex = {{ $bill->items->count() }};

// 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';
    newRow.innerHTML = `
        <td>
            <select class="form-control item-select" name="items[${itemIndex}][bandwidth_item_id]">
                <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>
        </td>
        <td>
            <select class="form-control account-head-select" 
                    name="items[${itemIndex}][account_head]" 
                    data-index="${itemIndex}">
                <option value="">Select account</option>
                @foreach($accountTypes as $accountType)
                    <optgroup label="{{ strtoupper($accountType->type_name ?? 'N/A') }}">
                        @if($accountType->subAccountTypes && $accountType->subAccountTypes->count() > 0)
                            @foreach($accountType->subAccountTypes as $subAccountType)
                                @if($subAccountType->subSubAccountTypes && $subAccountType->subSubAccountTypes->count() > 0)
                                    @foreach($subAccountType->subSubAccountTypes as $subSubAccountType)
                                        <option value="{{ $accountType->account_type_id }}_{{ $subAccountType->sub_account_type_id }}_{{ $subSubAccountType->sub_sub_account_type_id }}"
                                                data-account-type-id="{{ $accountType->account_type_id }}"
                                                data-sub-account-type-id="{{ $subAccountType->sub_account_type_id }}"
                                                data-sub-sub-account-type-id="{{ $subSubAccountType->sub_sub_account_type_id }}">
                                            → {{ $subAccountType->sub_type_name ?? 'N/A' }} • {{ $subSubAccountType->account_name ?? 'N/A' }} ({{ $subSubAccountType->account_code ?? '' }})
                                        </option>
                                    @endforeach
                                @else
                                    <option value="{{ $accountType->account_type_id }}_{{ $subAccountType->sub_account_type_id }}_"
                                            data-account-type-id="{{ $accountType->account_type_id }}"
                                            data-sub-account-type-id="{{ $subAccountType->sub_account_type_id }}"
                                            data-sub-sub-account-type-id="">
                                        → {{ $subAccountType->sub_type_name ?? 'N/A' }}
                                    </option>
                                @endif
                            @endforeach
                        @else
                            <option value="{{ $accountType->account_type_id }}__"
                                    data-account-type-id="{{ $accountType->account_type_id }}"
                                    data-sub-account-type-id=""
                                    data-sub-sub-account-type-id="">
                                {{ $accountType->type_name ?? 'N/A' }}
                            </option>
                        @endif
                    </optgroup>
                @endforeach
            </select>
            <input type="hidden" name="items[${itemIndex}][account_type_id]" 
                   class="account-type-id-input" value="">
            <input type="hidden" name="items[${itemIndex}][sub_account_type_id]" 
                   class="sub-account-type-id-input" value="">
            <input type="hidden" name="items[${itemIndex}][sub_sub_account_type_id]" 
                   class="sub-sub-account-type-id-input" value="">
        </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-danger btn-sm remove-item">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    tbody.appendChild(newRow);
    updateRemoveButtons();
});

// 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);
    }
});

// Update remove buttons visibility
function updateRemoveButtons() {
    const rows = document.querySelectorAll('.item-row');
    rows.forEach((row, index) => {
        const removeBtn = row.querySelector('.remove-item');
        if (rows.length === 1) {
            removeBtn.style.display = 'none';
        } else {
            removeBtn.style.display = 'inline-block';
        }
    });
}

// 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;
            
            calculationText = `(${quantity} × ${rate} × ${monthsDiff.toFixed(2)}mo) + ${vat}% VAT`;
        } else {
            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 finalTotal = grandTotal - discountAmount;
    
    document.getElementById('discount_amount').value = discountAmount.toFixed(2);
    document.getElementById('subtotal_after_discount').value = finalTotal.toFixed(2);
    document.getElementById('grandTotal').value = finalTotal.toFixed(2);
}

// Handle Account Head selection - update hidden fields
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('account-head-select')) {
        const selectedOption = e.target.options[e.target.selectedIndex];
        const row = e.target.closest('.item-row');
        
        if (selectedOption && selectedOption.value) {
            const accountTypeId = selectedOption.getAttribute('data-account-type-id') || '';
            const subAccountTypeId = selectedOption.getAttribute('data-sub-account-type-id') || '';
            const subSubAccountTypeId = selectedOption.getAttribute('data-sub-sub-account-type-id') || '';
            
            // Update hidden input fields
            row.querySelector('.account-type-id-input').value = accountTypeId;
            row.querySelector('.sub-account-type-id-input').value = subAccountTypeId;
            row.querySelector('.sub-sub-account-type-id-input').value = subSubAccountTypeId;
        } else {
            // Clear hidden fields if no selection
            row.querySelector('.account-type-id-input').value = '';
            row.querySelector('.sub-account-type-id-input').value = '';
            row.querySelector('.sub-sub-account-type-id-input').value = '';
        }
    }
});

// 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
            if (buyingPrice) {
                rateInput.value = buyingPrice;
            } else if (sellingPrice) {
                rateInput.value = sellingPrice;
            }
            
            // 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 : '{{ basename($bill->attachment) ?: "Choose File" }}';
    e.target.nextElementSibling.textContent = fileName;
});

// Initialize calculations on page load
document.addEventListener('DOMContentLoaded', function() {
    // Calculate all items
    document.querySelectorAll('.item-row').forEach(row => {
        const quantityInput = row.querySelector('.quantity');
        if (quantityInput) {
            calculateItemTotal(quantityInput);
        }
    });
    
    calculateGrandTotal();
    updateRemoveButtons();
});
</script>
@endsection