@extends('layouts.app')

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

@section('content')
<div class="container-fluid purchase-invoice-page">
    <!-- 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>Add Purchase Invoice
                    </h1>
                    <p class="text-muted mb-0">Bandwidth Purchase Invoice</p>
                </div>
                <div>
                    <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>
        </div>
    </div>

    <!-- Main Form -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <ul class="nav nav-tabs mb-4" id="purchaseInvoiceTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="tab-upstream" data-toggle="tab" href="#upstreamInvoice" role="tab" aria-controls="upstreamInvoice" aria-selected="false">
                                <i class="fas fa-network-wired mr-1"></i>Upstream Purchase Invoice
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="tab-general" data-toggle="tab" href="#generalInvoice" role="tab" aria-controls="generalInvoice" aria-selected="false">
                                <i class="fas fa-file-invoice mr-1"></i>General Invoice
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="tab-direct" data-toggle="tab" href="#directExpenseInvoice" role="tab" aria-controls="directExpenseInvoice" aria-selected="false">
                                <i class="fas fa-hand-holding-usd mr-1"></i>Direct Expense Invoice
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" id="purchaseInvoiceTabsContent">
                        <div class="tab-pane fade" id="upstreamInvoice" role="tabpanel" aria-labelledby="tab-upstream">
                            <form action="{{ route('reseller.purchase-invoices.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                        
                                <!-- 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 }}" {{ (isset($selectedProviderId) && (string)$selectedProviderId === (string)$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="{{ $nextBillNo }}" placeholder="Auto-generated">
                                <small class="text-muted">Auto-generated if left empty</small>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="bill_month" class="form-label font-weight-bold">Billing Month</label>
                                <input type="month" class="form-control" id="bill_month" name="bill_month" 
                                       value="{{ date('Y-m') }}" 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="{{ 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">
                            </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="{{ $nextInvoiceNo }}" placeholder="Auto-generated">
                                <small class="text-muted">Auto-generated if left empty</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-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">Item Details</h5>
                                <div class="table-responsive">
                                    @php
                                        $accountHierarchy = $accountTypes ?? collect();
                                    @endphp
                                    <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">
                                            <tr class="item-row">
                                                <td>
                                                    <select class="form-control item-select" name="items[0][bandwidth_item_id]" 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>
                                                </td>
                                                <td>
                                                    <select class="form-control account-select">
                                                        <option value="">Select account</option>
                                                        @forelse($accountHierarchy as $accountType)
                                                            <option value="{{ $accountType->account_type_id }}" class="account-type-option" data-level="account" disabled>
                                                                <strong>{{ strtoupper($accountType->type_name) }}</strong>
                                                            </option>
                                                            @foreach(($accountType->subAccountTypes ?? collect()) as $subType)
                                                                <option value="{{ $subType->sub_account_type_id }}"
                                                                        class="sub-account-type-option"
                                                                        data-level="sub"
                                                                        data-id="{{ $subType->sub_account_type_id }}"
                                                                        data-account-type="{{ $accountType->account_type_id }}">
                                                                    &nbsp;&nbsp;→ {{ $subType->sub_type_name }}
                                                                </option>
                                                                @foreach(($subType->subSubAccountTypes ?? collect()) as $subAccount)
                                                                    <option value="{{ $subAccount->sub_sub_account_type_id }}"
                                                                            data-parent="{{ $subType->sub_account_type_id }}"
                                                                            data-level="subsub"
                                                                            data-account-type="{{ $accountType->account_type_id }}">
                                                                        &nbsp;&nbsp;&nbsp;&nbsp;• {{ $subAccount->account_name }}@if($subAccount->account_code) ({{ $subAccount->account_code }}) @endif
                                                                    </option>
                                                                @endforeach
                                                            @endforeach
                                                        @empty
                                                            <option value="" disabled>No accounts available</option>
                                                        @endforelse
                                                    </select>
                                                    <input type="hidden" name="items[0][account_type_id]" class="account-type-input">
                                                    <input type="hidden" name="items[0][sub_account_type_id]" class="parent-account-input">
                                                    <input type="hidden" name="items[0][sub_sub_account_type_id]" class="child-account-input">
                                                </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-danger btn-sm remove-item" disabled>
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </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">Percentage (%)</option>
                                            <option value="gross">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="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="0" 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="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="bill_amount" value="0" 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..."></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>Save
                                </button>
                            </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="generalInvoice" role="tabpanel" aria-labelledby="tab-general">
                            <form action="{{ route('reseller.purchase-invoices.store') }}" method="POST" enctype="multipart/form-data" id="generalInvoiceForm">
                                @csrf
                                <input type="hidden" name="invoice_type" value="general">
                        
                                <!-- 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="general_provider_id" class="form-label font-weight-bold">Provider/Vendor</label>
                                        <select class="form-control" id="general_provider_id" name="provider_id" required>
                                            <option value="">Select</option>
                                            @foreach($providers as $provider)
                                                <option value="{{ $provider->id }}" {{ (isset($selectedProviderId) && (string)$selectedProviderId === (string)$provider->id) ? 'selected' : '' }}>{{ $provider->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="general_bill_no" class="form-label font-weight-bold">Bill Number</label>
                                        <input type="text" class="form-control" id="general_bill_no" name="bill_no" 
                                               value="{{ $nextBillNo }}" placeholder="Auto-generated">
                                        <small class="text-muted">Auto-generated if left empty</small>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="general_bill_month" class="form-label font-weight-bold">Billing Month</label>
                                        <input type="month" class="form-control" id="general_bill_month" name="bill_month" 
                                               value="{{ date('Y-m') }}" required>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="general_bill_date" class="form-label font-weight-bold">Bill Date</label>
                                        <input type="date" class="form-control" id="general_bill_date" name="bill_date" 
                                               value="{{ date('Y-m-d') }}" required>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="general_payment_due" class="form-label font-weight-bold">Payment Due</label>
                                        <input type="date" class="form-control" id="general_payment_due" name="payment_due">
                                    </div>
                            
                                    <!-- Second Row -->
                                    <div class="col-md-6 mb-3">
                                        <label for="general_provider_invoice" class="form-label font-weight-bold">Invoice Number</label>
                                        <input type="text" class="form-control" id="general_provider_invoice" name="provider_invoice" 
                                               value="{{ $nextInvoiceNo }}" placeholder="Auto-generated">
                                        <small class="text-muted">Auto-generated if left empty</small>
                                    </div>
                            
                                    <div class="col-md-6 mb-3">
                                        <label for="general_attachment" class="form-label font-weight-bold">Attachment</label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="general_attachment" name="attachment">
                                            <label class="custom-file-label" for="general_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">
                                            @php
                                                $accountHierarchy = $accountTypes ?? collect();
                                            @endphp
                                            <table class="table table-bordered" id="generalItemsTable">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>Item Name</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="generalItemsTableBody">
                                                    <tr class="general-item-row">
                                                        <td>
                                                            <input type="text" class="form-control" name="items[0][item_name]" 
                                                                   placeholder="Enter item name" required>
                                                        </td>
                                                        <td>
                                                            <select class="form-control general-account-select">
                                                                <option value="">Select account</option>
                                                                @forelse($accountHierarchy as $accountType)
                                                                    <option value="{{ $accountType->account_type_id }}" class="account-type-option" data-level="account" disabled>
                                                                        <strong>{{ strtoupper($accountType->type_name) }}</strong>
                                                                    </option>
                                                                    @foreach(($accountType->subAccountTypes ?? collect()) as $subType)
                                                                        <option value="{{ $subType->sub_account_type_id }}"
                                                                                class="sub-account-type-option"
                                                                                data-level="sub"
                                                                                data-id="{{ $subType->sub_account_type_id }}"
                                                                                data-account-type="{{ $accountType->account_type_id }}">
                                                                            &nbsp;&nbsp;→ {{ $subType->sub_type_name }}
                                                                        </option>
                                                                        @foreach(($subType->subSubAccountTypes ?? collect()) as $subAccount)
                                                                            <option value="{{ $subAccount->sub_sub_account_type_id }}"
                                                                                    data-parent="{{ $subType->sub_account_type_id }}"
                                                                                    data-level="subsub"
                                                                                    data-account-type="{{ $accountType->account_type_id }}">
                                                                                &nbsp;&nbsp;&nbsp;&nbsp;• {{ $subAccount->account_name }}@if($subAccount->account_code) ({{ $subAccount->account_code }}) @endif
                                                                            </option>
                                                                        @endforeach
                                                                    @endforeach
                                                                @empty
                                                                    <option value="" disabled>No accounts available</option>
                                                                @endforelse
                                                            </select>
                                                            <input type="hidden" name="items[0][account_type_id]" class="general-account-type-input">
                                                            <input type="hidden" name="items[0][sub_account_type_id]" class="general-parent-account-input">
                                                            <input type="hidden" name="items[0][sub_sub_account_type_id]" class="general-child-account-input">
                                                        </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 general-quantity" name="items[0][quantity]" 
                                                                   value="0" min="0" step="0.01" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control general-rate" name="items[0][rate]" 
                                                                   value="0" min="0" step="0.01" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control general-vat" name="items[0][vat]" 
                                                                   value="0" min="0" max="100" step="0.01">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control general-total-vat" name="items[0][total_vat]" 
                                                                   value="0.00" readonly>
                                                            <small class="text-muted general-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 general-total" name="items[0][total]" 
                                                                   value="0.00" readonly>
                                                            <small class="text-muted general-calculation-breakdown" style="display: none;"></small>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-success btn-sm general-calculate-item" title="Calculate Total">
                                                                <i class="fas fa-calculator"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-danger btn-sm general-remove-item" disabled>
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <div class="text-right">
                                            <button type="button" class="btn btn-primary" id="addNewGeneralItem">
                                                <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="general_discount_type" class="form-label font-weight-bold">Discount Type</label>
                                                <select class="form-control" id="general_discount_type" name="discount_type">
                                                    <option value="">Select Discount Type</option>
                                                    <option value="percentage">Percentage (%)</option>
                                                    <option value="gross">Gross Amount</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="general_discount_value" class="form-label font-weight-bold">Discount Value</label>
                                                <input type="number" class="form-control" id="general_discount_value" name="discount_value" 
                                                       step="0.01" min="0" value="0">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="general_discount_amount" class="form-label font-weight-bold">Discount Amount</label>
                                                <input type="number" class="form-control" id="general_discount_amount" name="discount_amount" 
                                                       step="0.01" min="0" value="0" readonly>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="general_subtotal_after_discount" class="form-label font-weight-bold">Subtotal After Discount</label>
                                                <input type="number" class="form-control" id="general_subtotal_after_discount" name="subtotal_after_discount" 
                                                       step="0.01" min="0" value="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="generalGrandTotal" name="bill_amount" value="0" 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="general_notes" name="notes" rows="8" 
                                                          placeholder="Enter remarks or 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>Save
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="directExpenseInvoice" role="tabpanel" aria-labelledby="tab-direct">
                            <form action="{{ route('reseller.purchase-invoices.store') }}" method="POST" enctype="multipart/form-data" id="directExpenseInvoiceForm">
                                @csrf
                                <input type="hidden" name="invoice_type" value="direct_expense">
                        
                                <!-- 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="direct_provider_id" class="form-label font-weight-bold">Provider/Vendor</label>
                                        <select class="form-control" id="direct_provider_id" name="provider_id" required>
                                            <option value="">Select</option>
                                            @foreach($providers as $provider)
                                                <option value="{{ $provider->id }}" {{ (isset($selectedProviderId) && (string)$selectedProviderId === (string)$provider->id) ? 'selected' : '' }}>{{ $provider->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="direct_bill_no" class="form-label font-weight-bold">Bill Number</label>
                                        <input type="text" class="form-control" id="direct_bill_no" name="bill_no" 
                                               value="{{ $nextBillNo }}" placeholder="Auto-generated">
                                        <small class="text-muted">Auto-generated if left empty</small>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="direct_bill_month" class="form-label font-weight-bold">Billing Month</label>
                                        <input type="month" class="form-control" id="direct_bill_month" name="bill_month" 
                                               value="{{ date('Y-m') }}" required>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="direct_bill_date" class="form-label font-weight-bold">Bill Date</label>
                                        <input type="date" class="form-control" id="direct_bill_date" name="bill_date" 
                                               value="{{ date('Y-m-d') }}" required>
                                    </div>
                            
                                    <div class="col-md-3 mb-3">
                                        <label for="direct_payment_due" class="form-label font-weight-bold">Payment Due</label>
                                        <input type="date" class="form-control" id="direct_payment_due" name="payment_due">
                                    </div>
                            
                                    <!-- Second Row -->
                                    <div class="col-md-6 mb-3">
                                        <label for="direct_provider_invoice" class="form-label font-weight-bold">Invoice Number</label>
                                        <input type="text" class="form-control" id="direct_provider_invoice" name="provider_invoice" 
                                               value="{{ $nextInvoiceNo }}" placeholder="Auto-generated">
                                        <small class="text-muted">Auto-generated if left empty</small>
                                    </div>
                            
                                    <div class="col-md-6 mb-3">
                                        <label for="direct_attachment" class="form-label font-weight-bold">Attachment</label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="direct_attachment" name="attachment">
                                            <label class="custom-file-label" for="direct_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">
                                            @php
                                                $accountHierarchy = $accountTypes ?? collect();
                                            @endphp
                                            <table class="table table-bordered" id="directExpenseItemsTable">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>Item Name</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="directExpenseItemsTableBody">
                                                    <tr class="direct-item-row">
                                                        <td>
                                                            <input type="text" class="form-control" name="items[0][item_name]" 
                                                                   placeholder="Enter item name" required>
                                                        </td>
                                                        <td>
                                                            <select class="form-control direct-account-select">
                                                                <option value="">Select account</option>
                                                                @forelse($accountHierarchy as $accountType)
                                                                    <option value="{{ $accountType->account_type_id }}" class="account-type-option" data-level="account" disabled>
                                                                        <strong>{{ strtoupper($accountType->type_name) }}</strong>
                                                                    </option>
                                                                    @foreach(($accountType->subAccountTypes ?? collect()) as $subType)
                                                                        <option value="{{ $subType->sub_account_type_id }}"
                                                                                class="sub-account-type-option"
                                                                                data-level="sub"
                                                                                data-id="{{ $subType->sub_account_type_id }}"
                                                                                data-account-type="{{ $accountType->account_type_id }}">
                                                                            &nbsp;&nbsp;→ {{ $subType->sub_type_name }}
                                                                        </option>
                                                                        @foreach(($subType->subSubAccountTypes ?? collect()) as $subAccount)
                                                                            <option value="{{ $subAccount->sub_sub_account_type_id }}"
                                                                                    data-parent="{{ $subType->sub_account_type_id }}"
                                                                                    data-level="subsub"
                                                                                    data-account-type="{{ $accountType->account_type_id }}">
                                                                                &nbsp;&nbsp;&nbsp;&nbsp;• {{ $subAccount->account_name }}@if($subAccount->account_code) ({{ $subAccount->account_code }}) @endif
                                                                            </option>
                                                                        @endforeach
                                                                    @endforeach
                                                                @empty
                                                                    <option value="" disabled>No accounts available</option>
                                                                @endforelse
                                                            </select>
                                                            <input type="hidden" name="items[0][account_type_id]" class="direct-account-type-input">
                                                            <input type="hidden" name="items[0][sub_account_type_id]" class="direct-parent-account-input">
                                                            <input type="hidden" name="items[0][sub_sub_account_type_id]" class="direct-child-account-input">
                                                        </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 direct-quantity" name="items[0][quantity]" 
                                                                   value="0" min="0" step="0.01" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control direct-rate" name="items[0][rate]" 
                                                                   value="0" min="0" step="0.01" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control direct-vat" name="items[0][vat]" 
                                                                   value="0" min="0" max="100" step="0.01">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control direct-total-vat" name="items[0][total_vat]" 
                                                                   value="0.00" readonly>
                                                            <small class="text-muted direct-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 direct-total" name="items[0][total]" 
                                                                   value="0.00" readonly>
                                                            <small class="text-muted direct-calculation-breakdown" style="display: none;"></small>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-success btn-sm direct-calculate-item" title="Calculate Total">
                                                                <i class="fas fa-calculator"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-danger btn-sm direct-remove-item" disabled>
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <div class="text-right">
                                            <button type="button" class="btn btn-primary" id="addNewDirectItem">
                                                <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="direct_discount_type" class="form-label font-weight-bold">Discount Type</label>
                                                <select class="form-control" id="direct_discount_type" name="discount_type">
                                                    <option value="">Select Discount Type</option>
                                                    <option value="percentage">Percentage (%)</option>
                                                    <option value="gross">Gross Amount</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="direct_discount_value" class="form-label font-weight-bold">Discount Value</label>
                                                <input type="number" class="form-control" id="direct_discount_value" name="discount_value" 
                                                       step="0.01" min="0" value="0">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="direct_discount_amount" class="form-label font-weight-bold">Discount Amount</label>
                                                <input type="number" class="form-control" id="direct_discount_amount" name="discount_amount" 
                                                       step="0.01" min="0" value="0" readonly>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="direct_subtotal_after_discount" class="form-label font-weight-bold">Subtotal After Discount</label>
                                                <input type="number" class="form-control" id="direct_subtotal_after_discount" name="subtotal_after_discount" 
                                                       step="0.01" min="0" value="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="directGrandTotal" name="bill_amount" value="0" 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="direct_notes" name="notes" rows="8" 
                                                          placeholder="Enter remarks or 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>Save
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.purchase-invoice-page {
    font-size: 0.92rem;
}

.purchase-invoice-page h1,
.purchase-invoice-page h5,
.purchase-invoice-page .nav-link {
    font-size: 0.95rem;
}

.purchase-invoice-page label,
.purchase-invoice-page .form-label {
    font-size: 0.85rem;
}

.purchase-invoice-page .form-control,
.purchase-invoice-page .custom-file-label {
    font-size: 0.85rem;
    padding: 0.35rem 0.55rem;
}

.purchase-invoice-page .btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

.purchase-invoice-page table th,
.purchase-invoice-page table td {
    font-size: 0.82rem;
}

.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;
}

.calculate-item i,
.remove-item i {
    font-size: 0.75rem;
}

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

<script>
let itemIndex = 0;

function updateAccountSelection(row) {
    const accountSelect = row.querySelector('.account-select');
    const accountInput = row.querySelector('.account-type-input');
    const parentInput = row.querySelector('.parent-account-input');
    const childInput = row.querySelector('.child-account-input');

    if (!accountSelect || !accountInput || !parentInput || !childInput) {
        return;
    }

    const selectedOption = accountSelect.selectedOptions[0];

    if (!selectedOption) {
        accountInput.value = '';
        parentInput.value = '';
        childInput.value = '';
        return;
    }

    const level = selectedOption.dataset.level;

    if (level === 'sub') {
        accountInput.value = selectedOption.dataset.accountType || '';
        parentInput.value = selectedOption.dataset.id || selectedOption.value || '';
        childInput.value = '';
    } else if (level === 'subsub') {
        accountInput.value = selectedOption.dataset.accountType || '';
        parentInput.value = selectedOption.dataset.parent || '';
        childInput.value = selectedOption.value || '';
    } else {
        accountSelect.value = '';
        accountInput.value = '';
        parentInput.value = '';
        childInput.value = '';
    }
}

// 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]" 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>
        </td>
        <td>
            <select class="form-control account-select">
                <option value="">Select account</option>
                @forelse($accountHierarchy as $accountType)
                    <option value="{{ $accountType->account_type_id }}" disabled class="account-type-option">
                        <strong>{{ strtoupper($accountType->type_name) }}</strong>
                    </option>
                    @foreach(($accountType->subAccountTypes ?? collect()) as $subType)
                        <option value="{{ $subType->sub_account_type_id }}"
                                class="sub-account-type-option"
                                data-level="sub"
                                data-id="{{ $subType->sub_account_type_id }}"
                                data-account-type="{{ $accountType->account_type_id }}">
                            &nbsp;&nbsp;→ {{ $subType->sub_type_name }}
                        </option>
                        @foreach(($subType->subSubAccountTypes ?? collect()) as $subAccount)
                            <option value="{{ $subAccount->sub_sub_account_type_id }}"
                                    data-parent="{{ $subType->sub_account_type_id }}"
                                    data-level="subsub"
                                    data-account-type="{{ $accountType->account_type_id }}">
                                &nbsp;&nbsp;&nbsp;&nbsp;• {{ $subAccount->account_name }}@if($subAccount->account_code) ({{ $subAccount->account_code }}) @endif
                            </option>
                        @endforeach
                    @endforeach
                @empty
                    <option value="" disabled>No accounts available</option>
                @endforelse
            </select>
            <input type="hidden" name="items[${itemIndex}][account_type_id]" class="account-type-input">
            <input type="hidden" name="items[${itemIndex}][sub_account_type_id]" class="parent-account-input">
            <input type="hidden" name="items[${itemIndex}][sub_sub_account_type_id]" class="child-account-input">
        </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();
    updateAccountSelection(newRow);
});

// 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; // 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';
    
    // Debug log
    console.log('Monthly Calculation:', {
        quantity,
        rate,
        vat,
        fromDate,
        toDate,
        daysDiff: fromDate && toDate ? Math.ceil((new Date(toDate).getTime() - new Date(fromDate).getTime()) / (1000 * 3600 * 24)) + 1 : 'N/A',
        daysInMonth: fromDate ? new Date(new Date(fromDate).getFullYear(), new Date(fromDate).getMonth() + 1, 0).getDate() : 'N/A',
        monthsDiff: fromDate && toDate ? (Math.ceil((new Date(toDate).getTime() - new Date(fromDate).getTime()) / (1000 * 3600 * 24)) + 1) / new Date(new Date(fromDate).getFullYear(), new Date(fromDate).getMonth() + 1, 0).getDate() : 'N/A',
        dateMultiplier,
        baseAmount,
        subtotal,
        vatAmount,
        total
    });
    
    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);
}

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

    if (e.target.classList.contains('account-select')) {
        const row = e.target.closest('.item-row');
        updateAccountSelection(row);
    }
});

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

// 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 billMonthInput = document.getElementById('bill_month');
    if (billMonthInput && !billMonthInput.value) {
        billMonthInput.value = billingMonth;
    }
}

// Auto-generate numbers if fields are empty
function autoGenerateNumbers() {
    const billNoField = document.getElementById('bill_no');
    const invoiceNoField = document.getElementById('provider_invoice');
    
    if (!billNoField.value.trim()) {
        billNoField.value = '{{ $nextBillNo }}';
    }
    
    if (!invoiceNoField.value.trim()) {
        invoiceNoField.value = '{{ $nextInvoiceNo }}';
    }
}

// Auto-generate on page load
document.addEventListener('DOMContentLoaded', function() {
    autoGenerateNumbers();
});

// Initialize
updateRemoveButtons();
setCurrentBillingMonth();
document.querySelectorAll('.item-row').forEach(row => updateAccountSelection(row));

// ========== Tab Persistence ==========
// Save active tab to localStorage when tab is changed
document.addEventListener('DOMContentLoaded', function() {
    const tabLinks = document.querySelectorAll('#purchaseInvoiceTabs a[data-toggle="tab"]');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    // Restore saved tab on page load
    const savedTab = localStorage.getItem('purchaseInvoiceActiveTab');
    if (savedTab) {
        const savedTabLink = document.querySelector(`#purchaseInvoiceTabs a[href="${savedTab}"]`);
        const savedTabPane = document.querySelector(savedTab);
        
        if (savedTabLink && savedTabPane) {
            // Remove active class from all tabs and panes
            tabLinks.forEach(link => {
                link.classList.remove('active');
                link.setAttribute('aria-selected', 'false');
            });
            tabPanes.forEach(pane => {
                pane.classList.remove('show', 'active');
            });
            
            // Activate saved tab
            savedTabLink.classList.add('active');
            savedTabLink.setAttribute('aria-selected', 'true');
            savedTabPane.classList.add('show', 'active');
        }
    } else {
        // Default to first tab if no saved tab
        const firstTabLink = tabLinks[0];
        const firstTabPane = document.querySelector(firstTabLink.getAttribute('href'));
        if (firstTabLink && firstTabPane) {
            firstTabLink.classList.add('active');
            firstTabLink.setAttribute('aria-selected', 'true');
            firstTabPane.classList.add('show', 'active');
        }
    }
    
    // Save tab when clicked
    tabLinks.forEach(link => {
        link.addEventListener('shown.bs.tab', function(e) {
            const targetTab = e.target.getAttribute('href');
            localStorage.setItem('purchaseInvoiceActiveTab', targetTab);
        });
    });
    
    // Also handle Bootstrap 4 tab events (if using Bootstrap 4)
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const targetTab = this.getAttribute('href');
            localStorage.setItem('purchaseInvoiceActiveTab', targetTab);
        });
    });
});

// ========== General Invoice JavaScript ==========
let generalItemIndex = 0;

function updateGeneralAccountSelection(row) {
    const accountSelect = row.querySelector('.general-account-select');
    const accountInput = row.querySelector('.general-account-type-input');
    const parentInput = row.querySelector('.general-parent-account-input');
    const childInput = row.querySelector('.general-child-account-input');

    if (!accountSelect || !accountInput || !parentInput || !childInput) {
        return;
    }

    const selectedOption = accountSelect.selectedOptions[0];

    if (!selectedOption) {
        accountInput.value = '';
        parentInput.value = '';
        childInput.value = '';
        return;
    }

    const level = selectedOption.dataset.level;

    if (level === 'sub') {
        accountInput.value = selectedOption.dataset.accountType || '';
        parentInput.value = selectedOption.dataset.id || selectedOption.value || '';
        childInput.value = '';
    } else if (level === 'subsub') {
        accountInput.value = selectedOption.dataset.accountType || '';
        parentInput.value = selectedOption.dataset.parent || '';
        childInput.value = selectedOption.value || '';
    } else {
        accountSelect.value = '';
        accountInput.value = '';
        parentInput.value = '';
        childInput.value = '';
    }
}

// Add new general item row
document.getElementById('addNewGeneralItem').addEventListener('click', function() {
    generalItemIndex++;
    const tbody = document.getElementById('generalItemsTableBody');
    const newRow = document.createElement('tr');
    newRow.className = 'general-item-row';
    newRow.innerHTML = `
        <td>
            <input type="text" class="form-control" name="items[${generalItemIndex}][item_name]" 
                   placeholder="Enter item name" required>
        </td>
        <td>
            <select class="form-control general-account-select">
                <option value="">Select account</option>
                @forelse($accountHierarchy as $accountType)
                    <option value="{{ $accountType->account_type_id }}" disabled class="account-type-option">
                        <strong>{{ strtoupper($accountType->type_name) }}</strong>
                    </option>
                    @foreach(($accountType->subAccountTypes ?? collect()) as $subType)
                        <option value="{{ $subType->sub_account_type_id }}"
                                class="sub-account-type-option"
                                data-level="sub"
                                data-id="{{ $subType->sub_account_type_id }}"
                                data-account-type="{{ $accountType->account_type_id }}">
                            &nbsp;&nbsp;→ {{ $subType->sub_type_name }}
                        </option>
                        @foreach(($subType->subSubAccountTypes ?? collect()) as $subAccount)
                            <option value="{{ $subAccount->sub_sub_account_type_id }}"
                                    data-parent="{{ $subType->sub_account_type_id }}"
                                    data-level="subsub"
                                    data-account-type="{{ $accountType->account_type_id }}">
                                &nbsp;&nbsp;&nbsp;&nbsp;• {{ $subAccount->account_name }}@if($subAccount->account_code) ({{ $subAccount->account_code }}) @endif
                            </option>
                        @endforeach
                    @endforeach
                @empty
                    <option value="" disabled>No accounts available</option>
                @endforelse
            </select>
            <input type="hidden" name="items[${generalItemIndex}][account_type_id]" class="general-account-type-input">
            <input type="hidden" name="items[${generalItemIndex}][sub_account_type_id]" class="general-parent-account-input">
            <input type="hidden" name="items[${generalItemIndex}][sub_sub_account_type_id]" class="general-child-account-input">
        </td>
        <td>
            <input type="text" class="form-control" name="items[${generalItemIndex}][description]" 
                   placeholder="Enter description">
        </td>
        <td>
            <input type="text" class="form-control" name="items[${generalItemIndex}][unit]" 
                   placeholder="Unit">
        </td>
        <td>
            <input type="number" class="form-control general-quantity" name="items[${generalItemIndex}][quantity]" 
                   value="0" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control general-rate" name="items[${generalItemIndex}][rate]" 
                   value="0" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control general-vat" name="items[${generalItemIndex}][vat]" 
                   value="0" min="0" max="100" step="0.01">
        </td>
        <td>
            <input type="number" class="form-control general-total-vat" name="items[${generalItemIndex}][total_vat]" 
                   value="0.00" readonly>
            <small class="text-muted general-vat-breakdown" style="display: none;"></small>
        </td>
        <td>
            <input type="date" class="form-control" name="items[${generalItemIndex}][from_date]">
        </td>
        <td>
            <input type="date" class="form-control" name="items[${generalItemIndex}][to_date]">
        </td>
        <td>
            <input type="number" class="form-control general-total" name="items[${generalItemIndex}][total]" 
                   value="0.00" readonly>
            <small class="text-muted general-calculation-breakdown" style="display: none;"></small>
        </td>
        <td>
            <button type="button" class="btn btn-success btn-sm general-calculate-item" title="Calculate Total">
                <i class="fas fa-calculator"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm general-remove-item">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    tbody.appendChild(newRow);
    updateGeneralRemoveButtons();
    updateGeneralAccountSelection(newRow);
});

// Remove general item row
document.addEventListener('click', function(e) {
    if (e.target.closest('.general-remove-item')) {
        e.target.closest('.general-item-row').remove();
        updateGeneralRemoveButtons();
        calculateGeneralGrandTotal();
    }
    
    if (e.target.closest('.general-calculate-item')) {
        const row = e.target.closest('.general-item-row');
        const quantityInput = row.querySelector('.general-quantity');
        calculateGeneralItemTotal(quantityInput);
    }
});

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

// Calculate general item total
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('general-quantity') || 
        e.target.classList.contains('general-rate') || 
        e.target.classList.contains('general-vat')) {
        calculateGeneralItemTotal(e.target);
    }
    
    // Calculate discount when discount fields change
    if (e.target.id === 'general_discount_type' || e.target.id === 'general_discount_value') {
        calculateGeneralGrandTotal();
    }
});

// Handle date field changes for general invoice
document.addEventListener('change', function(e) {
    if (e.target.name && (e.target.name.includes('[from_date]') || e.target.name.includes('[to_date]'))) {
        if (e.target.closest('.general-item-row')) {
            calculateGeneralItemTotal(e.target);
        }
    }
    
    if (e.target.classList.contains('general-account-select')) {
        const row = e.target.closest('.general-item-row');
        updateGeneralAccountSelection(row);
    }
});

// Calculate general item total
function calculateGeneralItemTotal(input) {
    const row = input.closest('.general-item-row');
    const quantity = parseFloat(row.querySelector('.general-quantity').value) || 0;
    const rate = parseFloat(row.querySelector('.general-rate').value) || 0;
    const vat = parseFloat(row.querySelector('.general-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;
            
            // 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
            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('.general-total').value = total.toFixed(2);
    
    // Update the total VAT field
    row.querySelector('.general-total-vat').value = vatAmount.toFixed(2);
    
    // Show calculation breakdown
    const breakdownElement = row.querySelector('.general-calculation-breakdown');
    breakdownElement.textContent = calculationText;
    breakdownElement.style.display = 'block';
    
    // Show VAT breakdown
    const vatBreakdownElement = row.querySelector('.general-vat-breakdown');
    vatBreakdownElement.textContent = `VAT: BDT${vatAmount.toFixed(2)}`;
    vatBreakdownElement.style.display = 'block';
    
    calculateGeneralGrandTotal();
}

// Calculate general grand total
function calculateGeneralGrandTotal() {
    const totals = document.querySelectorAll('.general-total');
    let grandTotal = 0;
    
    totals.forEach(total => {
        grandTotal += parseFloat(total.value) || 0;
    });
    
    // Apply discount
    const discountType = document.getElementById('general_discount_type').value;
    const discountValue = parseFloat(document.getElementById('general_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('general_discount_amount').value = discountAmount.toFixed(2);
    document.getElementById('general_subtotal_after_discount').value = finalTotal.toFixed(2);
    document.getElementById('generalGrandTotal').value = finalTotal.toFixed(2);
}

// Custom file input for general invoice
document.addEventListener('change', function(e) {
    if (e.target.id === 'general_attachment') {
        const fileName = e.target.files[0] ? e.target.files[0].name : 'Choose File';
        e.target.nextElementSibling.textContent = fileName;
    }
});

// Auto-generate numbers for general invoice
function autoGenerateGeneralNumbers() {
    const billNoField = document.getElementById('general_bill_no');
    const invoiceNoField = document.getElementById('general_provider_invoice');
    
    if (billNoField && !billNoField.value.trim()) {
        billNoField.value = '{{ $nextBillNo }}';
    }
    
    if (invoiceNoField && !invoiceNoField.value.trim()) {
        invoiceNoField.value = '{{ $nextInvoiceNo }}';
    }
}

// Initialize general invoice
document.addEventListener('DOMContentLoaded', function() {
    updateGeneralRemoveButtons();
    autoGenerateGeneralNumbers();
    document.querySelectorAll('.general-item-row').forEach(row => updateGeneralAccountSelection(row));
});

// ========== Direct Expense Invoice JavaScript ==========
let directItemIndex = 0;

function updateDirectAccountSelection(row) {
    const accountSelect = row.querySelector('.direct-account-select');
    const accountInput = row.querySelector('.direct-account-type-input');
    const parentInput = row.querySelector('.direct-parent-account-input');
    const childInput = row.querySelector('.direct-child-account-input');

    if (!accountSelect || !accountInput || !parentInput || !childInput) {
        return;
    }

    const selectedOption = accountSelect.selectedOptions[0];

    if (!selectedOption) {
        accountInput.value = '';
        parentInput.value = '';
        childInput.value = '';
        return;
    }

    const level = selectedOption.dataset.level;

    if (level === 'sub') {
        accountInput.value = selectedOption.dataset.accountType || '';
        parentInput.value = selectedOption.dataset.id || selectedOption.value || '';
        childInput.value = '';
    } else if (level === 'subsub') {
        accountInput.value = selectedOption.dataset.accountType || '';
        parentInput.value = selectedOption.dataset.parent || '';
        childInput.value = selectedOption.value || '';
    } else {
        accountSelect.value = '';
        accountInput.value = '';
        parentInput.value = '';
        childInput.value = '';
    }
}

// Add new direct expense item row
document.getElementById('addNewDirectItem').addEventListener('click', function() {
    directItemIndex++;
    const tbody = document.getElementById('directExpenseItemsTableBody');
    const newRow = document.createElement('tr');
    newRow.className = 'direct-item-row';
    newRow.innerHTML = `
        <td>
            <input type="text" class="form-control" name="items[${directItemIndex}][item_name]" 
                   placeholder="Enter item name" required>
        </td>
        <td>
            <select class="form-control direct-account-select">
                <option value="">Select account</option>
                @forelse($accountHierarchy as $accountType)
                    <option value="{{ $accountType->account_type_id }}" disabled class="account-type-option">
                        <strong>{{ strtoupper($accountType->type_name) }}</strong>
                    </option>
                    @foreach(($accountType->subAccountTypes ?? collect()) as $subType)
                        <option value="{{ $subType->sub_account_type_id }}"
                                class="sub-account-type-option"
                                data-level="sub"
                                data-id="{{ $subType->sub_account_type_id }}"
                                data-account-type="{{ $accountType->account_type_id }}">
                            &nbsp;&nbsp;→ {{ $subType->sub_type_name }}
                        </option>
                        @foreach(($subType->subSubAccountTypes ?? collect()) as $subAccount)
                            <option value="{{ $subAccount->sub_sub_account_type_id }}"
                                    data-parent="{{ $subType->sub_account_type_id }}"
                                    data-level="subsub"
                                    data-account-type="{{ $accountType->account_type_id }}">
                                &nbsp;&nbsp;&nbsp;&nbsp;• {{ $subAccount->account_name }}@if($subAccount->account_code) ({{ $subAccount->account_code }}) @endif
                            </option>
                        @endforeach
                    @endforeach
                @empty
                    <option value="" disabled>No accounts available</option>
                @endforelse
            </select>
            <input type="hidden" name="items[${directItemIndex}][account_type_id]" class="direct-account-type-input">
            <input type="hidden" name="items[${directItemIndex}][sub_account_type_id]" class="direct-parent-account-input">
            <input type="hidden" name="items[${directItemIndex}][sub_sub_account_type_id]" class="direct-child-account-input">
        </td>
        <td>
            <input type="text" class="form-control" name="items[${directItemIndex}][description]" 
                   placeholder="Enter description">
        </td>
        <td>
            <input type="text" class="form-control" name="items[${directItemIndex}][unit]" 
                   placeholder="Unit">
        </td>
        <td>
            <input type="number" class="form-control direct-quantity" name="items[${directItemIndex}][quantity]" 
                   value="0" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control direct-rate" name="items[${directItemIndex}][rate]" 
                   value="0" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control direct-vat" name="items[${directItemIndex}][vat]" 
                   value="0" min="0" max="100" step="0.01">
        </td>
        <td>
            <input type="number" class="form-control direct-total-vat" name="items[${directItemIndex}][total_vat]" 
                   value="0.00" readonly>
            <small class="text-muted direct-vat-breakdown" style="display: none;"></small>
        </td>
        <td>
            <input type="date" class="form-control" name="items[${directItemIndex}][from_date]">
        </td>
        <td>
            <input type="date" class="form-control" name="items[${directItemIndex}][to_date]">
        </td>
        <td>
            <input type="number" class="form-control direct-total" name="items[${directItemIndex}][total]" 
                   value="0.00" readonly>
            <small class="text-muted direct-calculation-breakdown" style="display: none;"></small>
        </td>
        <td>
            <button type="button" class="btn btn-success btn-sm direct-calculate-item" title="Calculate Total">
                <i class="fas fa-calculator"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm direct-remove-item">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    tbody.appendChild(newRow);
    updateDirectRemoveButtons();
    updateDirectAccountSelection(newRow);
});

// Remove direct expense item row
document.addEventListener('click', function(e) {
    if (e.target.closest('.direct-remove-item')) {
        e.target.closest('.direct-item-row').remove();
        updateDirectRemoveButtons();
        calculateDirectGrandTotal();
    }
    
    if (e.target.closest('.direct-calculate-item')) {
        const row = e.target.closest('.direct-item-row');
        const quantityInput = row.querySelector('.direct-quantity');
        calculateDirectItemTotal(quantityInput);
    }
});

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

// Calculate direct expense item total
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('direct-quantity') || 
        e.target.classList.contains('direct-rate') || 
        e.target.classList.contains('direct-vat')) {
        calculateDirectItemTotal(e.target);
    }
    
    // Calculate discount when discount fields change
    if (e.target.id === 'direct_discount_type' || e.target.id === 'direct_discount_value') {
        calculateDirectGrandTotal();
    }
});

// Handle date field changes for direct expense invoice
document.addEventListener('change', function(e) {
    if (e.target.name && (e.target.name.includes('[from_date]') || e.target.name.includes('[to_date]'))) {
        if (e.target.closest('.direct-item-row')) {
            calculateDirectItemTotal(e.target);
        }
    }
    
    if (e.target.classList.contains('direct-account-select')) {
        const row = e.target.closest('.direct-item-row');
        updateDirectAccountSelection(row);
    }
});

// Calculate direct expense item total
function calculateDirectItemTotal(input) {
    const row = input.closest('.direct-item-row');
    const quantity = parseFloat(row.querySelector('.direct-quantity').value) || 0;
    const rate = parseFloat(row.querySelector('.direct-rate').value) || 0;
    const vat = parseFloat(row.querySelector('.direct-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;
            
            // 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
            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('.direct-total').value = total.toFixed(2);
    
    // Update the total VAT field
    row.querySelector('.direct-total-vat').value = vatAmount.toFixed(2);
    
    // Show calculation breakdown
    const breakdownElement = row.querySelector('.direct-calculation-breakdown');
    breakdownElement.textContent = calculationText;
    breakdownElement.style.display = 'block';
    
    // Show VAT breakdown
    const vatBreakdownElement = row.querySelector('.direct-vat-breakdown');
    vatBreakdownElement.textContent = `VAT: BDT${vatAmount.toFixed(2)}`;
    vatBreakdownElement.style.display = 'block';
    
    calculateDirectGrandTotal();
}

// Calculate direct expense grand total
function calculateDirectGrandTotal() {
    const totals = document.querySelectorAll('.direct-total');
    let grandTotal = 0;
    
    totals.forEach(total => {
        grandTotal += parseFloat(total.value) || 0;
    });
    
    // Apply discount
    const discountType = document.getElementById('direct_discount_type').value;
    const discountValue = parseFloat(document.getElementById('direct_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('direct_discount_amount').value = discountAmount.toFixed(2);
    document.getElementById('direct_subtotal_after_discount').value = finalTotal.toFixed(2);
    document.getElementById('directGrandTotal').value = finalTotal.toFixed(2);
}

// Custom file input for direct expense invoice
document.addEventListener('change', function(e) {
    if (e.target.id === 'direct_attachment') {
        const fileName = e.target.files[0] ? e.target.files[0].name : 'Choose File';
        e.target.nextElementSibling.textContent = fileName;
    }
});

// Auto-generate numbers for direct expense invoice
function autoGenerateDirectNumbers() {
    const billNoField = document.getElementById('direct_bill_no');
    const invoiceNoField = document.getElementById('direct_provider_invoice');
    
    if (billNoField && !billNoField.value.trim()) {
        billNoField.value = '{{ $nextBillNo }}';
    }
    
    if (invoiceNoField && !invoiceNoField.value.trim()) {
        invoiceNoField.value = '{{ $nextInvoiceNo }}';
    }
}

// Initialize direct expense invoice
document.addEventListener('DOMContentLoaded', function() {
    updateDirectRemoveButtons();
    autoGenerateDirectNumbers();
    document.querySelectorAll('.direct-item-row').forEach(row => updateDirectAccountSelection(row));
});
</script>
@endsection