@extends('layout.app')
@section('title', 'Create Trip Sheet')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Trip Sheet</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('trip-sheet.index') }}">Trip Sheet List</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Create Trip Sheet</li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <div class="d-flex flex-row gap-1">
            <a href="{{ route('trip-sheet.index') }}" class="btn btn-sm btn-outline-primary">
                <i class="ri-skip-back-line"></i> Back
            </a>
        </div>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    {!! Form::open(['route' => 'trip-sheet.store', 'method' => 'POST', 'class' => 'row g-3', 'id' => 'tripSheetForm']) !!}

                    <h6 class="text-primary mb-3"><i class="ri-truck-line"></i> Trip Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <label class="form-label" for="trip_sheet_no">Trip Sheet No. <span class="text-danger">*</span></label>
                            <input type="text" name="trip_sheet_no" id="trip_sheet_no" value="{{ $nextTripSheetNo }}" class="form-control readonly" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="date">Date <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                                <input type="text" name="date" id="date" value="{{ old('date', $freightEntry ? \Carbon\Carbon::parse($freightEntry->date)->format('d-m-Y') : \Carbon\Carbon::now()->format('d-m-Y')) }}" class="form-control datepicker" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="vehicle_id">Vehicle <span class="text-danger">*</span></label>
                            {!! Form::select('vehicle_id', ['' => '-- Select Vehicle --'] + $vehicles, $freightEntry ? $freightEntry->vehicle_id : null, ['class' => 'form-control select2', 'id' => 'vehicle_id', 'required']) !!}
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="employee_id">Driver</label>
                            {!! Form::select('employee_id', ['' => '-- Select Driver --'] + $drivers, $freightEntry ? $freightEntry->employee_id : null, ['class' => 'form-control select2', 'id' => 'employee_id'] + ($freightEntry && $freightEntry->employee_id ? ['disabled' => 'disabled'] : [])) !!}
                            @if($freightEntry && $freightEntry->employee_id)
                                <input type="hidden" name="employee_id" id="hidden_employee_id_php" value="{{ $freightEntry->employee_id }}">
                            @endif
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="from_location">Route From <span class="text-danger">*</span></label>
                            <input type="text" name="from_location" id="from_location" value="{{ $freightEntry ? $freightEntry->from_location : '' }}" class="form-control" required placeholder="Origin">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="to_location">Route To <span class="text-danger">*</span></label>
                            <input type="text" name="to_location" id="to_location" value="{{ $freightEntry ? $freightEntry->to_location : '' }}" class="form-control" required placeholder="Destination">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="start_km">Start KM</label>
                            <input type="number" name="start_km" id="start_km" class="form-control" placeholder="Start KM" min="0">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="end_km">End KM</label>
                            <input type="number" name="end_km" id="end_km" class="form-control" placeholder="End KM" min="0">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="total_km_display">Total KM</label>
                            <input type="text" id="total_km_display" class="form-control readonly" readonly value="0">
                        </div>
                    </div>

                    <ul class="nav nav-tabs nav-tabs-custom mb-3" role="tablist" id="gr-tabs">
                        <li class="nav-item">
                            <a class="nav-link active fw-bold" data-bs-toggle="tab" href="#panel-own" role="tab" data-tab="own">OWN GR</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fw-bold" data-bs-toggle="tab" href="#panel-other" role="tab" data-tab="other">OTHER TRANSPORTER'S GR</a>
                        </li>
                    </ul>

                    <input type="hidden" name="gr_type" id="gr_type" value="own">

                    <div class="tab-content border p-3 bg-light rounded mb-4">
                        <div class="tab-pane active" id="panel-own" role="tabpanel">
                            <div class="row g-3">
                                @if($freightEntry)
                                <input type="hidden" name="freight_entry_id" value="{{ $freightEntry->id }}">
                                <input type="hidden" name="freight_amount" id="freight_amount" value="{{ $freightEntry->grand_total }}">
                                @else
                                <div class="col-md-6">
                                    <div class="d-flex justify-content align-items-center mb-1">
                                        <label class="form-label mb-0" for="freight_entry_id">Select Freight Entry (LR)</label>
                                        <a href="{{ route('freight-entry.create') }}" class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center ms-2" style="width: 26px; height: 26px; padding: 0;" title="Add Freight Entry" target="_blank"><i class="ri-add-line" style="font-size: 16px; font-weight: bold; color: white;"></i></a>
                                    </div>
                                    {!! Form::select('freight_entry_id', ['' => '-- Select Freight Entry --'] + ($freightEntries ?? []), null, ['class' => 'form-control select2', 'id' => 'freight_entry_id']) !!}
                                    <input type="hidden" name="freight_amount" id="freight_amount" value="0">
                                </div>
                                @endif

                                <div class="col-md-3">
                                    <label class="form-label" for="consignor">Consignor</label>
                                    <input type="text" name="consignor" id="consignor" class="form-control" placeholder="Sender company" value="{{ $freightEntry ? ($freightEntry->consignor->party_name ?? '') : '' }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="consignee">Consignee</label>
                                    <input type="text" name="consignee" id="consignee" class="form-control" placeholder="Receiver company" value="{{ $freightEntry ? ($freightEntry->consignee->party_name ?? '') : '' }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="own_gr_no">GR / LR No.</label>
                                    <input type="text" name="own_gr_no" id="own_gr_no" class="form-control" placeholder="GR-0000" value="{{ $freightEntry ? $freightEntry->lr_no : '' }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="material">Material</label>
                                    @php
                                        $feMaterial = '';
                                        $feWeight = '';
                                        if($freightEntry && $freightEntry->items) {
                                            $feMaterial = $freightEntry->items->pluck('material_name')->filter()->unique()->implode(', ');
                                            $feWeight = $freightEntry->items->sum('charge_weight');
                                        }
                                    @endphp
                                    <input type="text" name="material" id="material" class="form-control" placeholder="Goods description" value="{{ $feMaterial }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="weight">Weight (MT)</label>
                                    <input type="number" step="0.01" name="weight" id="weight" class="form-control" placeholder="0.00" value="{{ $feWeight }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="eway_bill">E-way Bill No.</label>
                                    <input type="text" name="eway_bill" id="eway_bill" class="form-control" placeholder="Optional" value="{{ $freightEntry ? $freightEntry->eway_bil_no : '' }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="freight_display">Freight Amount (₹)</label>
                                    <input type="number" step="0.01" id="freight_display" name="own_freight_amount" class="form-control revenue-input fw-bold" placeholder="0" value="{{ $freightEntry ? $freightEntry->grand_total : '' }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane" id="panel-other" role="tabpanel">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label" for="booked_through">Booked Through (Broker)</label>
                                    <input type="text" name="booked_through" id="booked_through" class="form-control" placeholder="Transporter/Broker">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="other_gr_no">Their GR / LR No.</label>
                                    <input type="text" name="other_gr_no" id="other_gr_no" class="form-control" placeholder="GR-0000">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="other_material">Material</label>
                                    <input type="text" name="other_material" id="other_material" class="form-control" placeholder="Goods description">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="hire_amount">Hire Amount Receivable (₹)</label>
                                    <input type="number" step="0.01" name="hire_amount" id="hire_amount" class="form-control revenue-input fw-bold" placeholder="0">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="commission">Commission / Brokerage (₹)</label>
                                    <input type="number" step="0.01" name="commission" id="commission" class="form-control revenue-input" placeholder="0">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="net_hire">Net Hire (Auto)</label>
                                    <input type="text" name="net_hire" id="net_hire" class="form-control readonly" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="text-primary mb-0"><i class="ri-money-dollar-circle-line"></i> Expenses <span id="expenseCount" class="text-muted small">(1 entry)</span></h6>
                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill" id="addExpenseBtn">
                            <i class="ri-add-line"></i> Add expense
                        </button>
                    </div>

                    <div id="expenseRows" class="mb-2">
                        <div class="expense-row row g-2 align-items-center bg-light p-2 rounded mb-2 border">
                            <div class="col-md-3">
                                <select name="expenses[0][expense_type]" class="form-select form-select-sm expense-type">
                                    <option value="">-- Select --</option>
                                    <option value="Diesel">Diesel</option>
                                    <option value="Toll">Toll</option>
                                    <option value="Loading">Loading</option>
                                    <option value="Unloading">Unloading</option>
                                    <option value="Driver Bata/Allowance">Driver Bata/Allowance</option>
                                    <option value="RTO / Police">RTO / Police</option>
                                    <option value="Repair & Maintenance">Repair & Maintenance</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="number" step="0.01" name="expenses[0][amount]" class="form-control form-control-sm expense-amount text-end fw-bold" placeholder="Amount (₹)">
                            </div>
                            <div class="col-md-2 expense-litres-col">
                                <input type="number" step="0.01" name="expenses[0][litres]" class="form-control form-control-sm expense-litres text-end" placeholder="Litres" style="color: #c9821f; border-color: #f2a93b;">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="expenses[0][remarks]" class="form-control form-control-sm" placeholder="Note / location (optional)">
                            </div>
                            <div class="col-md-1 text-center">
                                <button type="button" class="btn btn-link text-danger p-0 border-0 row-delete invisible"><i class="ri-close-line fs-5"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="text-muted small fst-italic mb-3" id="emptyState" style="display: none;">No expenses added yet. Click "+ Add expense" to start.</div>

                    <hr class="mt-2">
                    <div class="col-md-12">
                        <div class="card bg-light border-primary border-opacity-25 shadow-sm mb-0 rounded-3">
                            <div class="card-header border-bottom border-primary border-opacity-25 pb-2 pt-3 bg-white">
                                <h6 class="mb-0 text-uppercase tracking-widest text-primary fw-bold" style="letter-spacing: 1px;"><i class="ri-dashboard-2-line"></i> TRIP COMPUTER <span class="text-success">— LIVE</span></h6>
                            </div>
                            <div class="card-body">
                                <div class="row text-center text-md-start">
                                    <div class="col-md-4 mb-3">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Total Revenue</div>
                                        <h4 class="mb-0 text-primary fw-bold font-monospace" id="outRevenue">₹0</h4>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Total Expense</div>
                                        <h4 class="mb-0 text-danger fw-bold font-monospace" id="outExpense">₹0</h4>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Net P&L</div>
                                        <h4 class="mb-0 text-success fw-bold font-monospace" id="outNet">₹0</h4>
                                    </div>
                                </div>
                                <div class="row text-center text-md-start mt-1">
                                    <div class="col-md-4 mb-3 mb-md-0">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Total KM Run</div>
                                        <h5 class="mb-0 text-dark fw-bold font-monospace" id="outKm">0 km</h5>
                                    </div>
                                    <div class="col-md-4 mb-3 mb-md-0">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Revenue / KM</div>
                                        <h5 class="mb-0 text-dark fw-bold font-monospace" id="outRevKm">₹0</h5>
                                    </div>
                                    <div class="col-md-4 mb-3 mb-md-0">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Net / KM</div>
                                        <h5 class="mb-0 text-dark fw-bold font-monospace" id="outNetKm">₹0</h5>
                                    </div>
                                </div>
                                <div class="row text-center text-md-start mt-3">
                                    <div class="col-md-4 mb-3 mb-md-0">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Diesel Filled</div>
                                        <h5 class="mb-0 text-dark fw-bold font-monospace" id="outDieselLitres">0 L</h5>
                                    </div>
                                    <div class="col-md-4 mb-3 mb-md-0">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Mileage</div>
                                        <h5 class="mb-0 text-dark fw-bold font-monospace" id="outMileage">0 km/L</h5>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-dark small text-uppercase fw-bold mb-1">Diesel Cost / KM</div>
                                        <h5 class="mb-0 text-dark fw-bold font-monospace" id="outDieselCostKm">₹0</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-1 mb-3">
                        <div class="col-md-4">
                            <label class="form-label" for="start_time">Start Time</label>
                            <input type="datetime-local" name="start_time" id="start_time" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="end_time">End Time</label>
                            <input type="datetime-local" name="end_time" id="end_time" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="status">Status</label>
                            {!! Form::select('status', ['Draft' => 'Draft', 'In Progress' => 'In Progress', 'Completed' => 'Completed'], 'Draft', ['class' => 'form-select select2', 'id' => 'status']) !!}
                        </div>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label" for="remarks">Remarks</label>
                        <textarea name="remarks" id="remarks" rows="2" class="form-control" placeholder="Enter any remarks..."></textarea>
                    </div>

                    <div class="col-12 mt-3 text-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line"></i> Save Trip Sheet
                        </button>
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $(document).ready(function() {
        let expRowIdx = 1;

        // Initialize existing datepickers
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            locale: { format: 'DD-MM-YYYY' }
        });

        const expenseTypes = ["Diesel","Toll","Loading","Unloading","Driver Bata/Allowance","RTO / Police","Repair & Maintenance","Other"];
        const rowsContainer = $('#expenseRows');

        function buildRow(type, amount, note, litres) {
            expRowIdx++;
            let optionsHtml = '<option value="">-- Select --</option>';
            expenseTypes.forEach(t => {
                optionsHtml += `<option value="${t}" ${t === type ? 'selected' : ''}>${t}</option>`;
            });

            let displayLitres = type === 'Diesel' ? '' : 'display: none;';
            
            let html = `
                <div class="expense-row row g-2 align-items-center bg-light p-2 rounded mb-2 border">
                    <div class="col-md-3">
                        <select name="expenses[${expRowIdx}][expense_type]" class="form-select form-select-sm expense-type">
                            ${optionsHtml}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="number" step="0.01" name="expenses[${expRowIdx}][amount]" class="form-control form-control-sm expense-amount text-end fw-bold" placeholder="Amount (₹)" value="${amount || ''}">
                    </div>
                    <div class="col-md-2 expense-litres-col" style="${displayLitres}">
                        <input type="number" step="0.01" name="expenses[${expRowIdx}][litres]" class="form-control form-control-sm expense-litres text-end" placeholder="Litres" style="color: #c9821f; border-color: #f2a93b;" value="${litres || ''}">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="expenses[${expRowIdx}][remarks]" class="form-control form-control-sm" placeholder="Note / location (optional)" value="${note || ''}">
                    </div>
                    <div class="col-md-1 text-center">
                        <button type="button" class="btn btn-link text-danger p-0 border-0 row-delete"><i class="ri-close-line fs-5"></i></button>
                    </div>
                </div>
            `;
            rowsContainer.append(html);
        }

        function refreshEmptyState() {
            const rows = $('.expense-row');
            if(rows.length === 0) {
                $('#emptyState').show();
            } else {
                $('#emptyState').hide();
            }
            $('#expenseCount').text('(' + rows.length + ' ' + (rows.length === 1 ? 'entry' : 'entries') + ')');
        }

        $('#addExpenseBtn').on('click', function() {
            buildRow('', '', '');
            refreshEmptyState();
            recalc();
        });

        $(document).on('click', '.row-delete', function() {
            $(this).closest('.expense-row').remove();
            refreshEmptyState();
            recalc();
        });

        $(document).on('change', '.expense-type', function() {
            let isDiesel = $(this).val() === 'Diesel';
            let col = $(this).closest('.expense-row').find('.expense-litres-col');
            if(isDiesel) {
                col.show();
            } else {
                col.hide();
                col.find('.expense-litres').val('');
            }
            recalc();
        });

        $(document).on('input', '.expense-amount, .expense-litres, .revenue-input, #start_km, #end_km', function() {
            recalc();
        });

        let activeTab = 'own';
        $('.nav-link[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            activeTab = $(e.target).data('tab');
            $('#gr_type').val(activeTab);
            recalc();
        });

        function num(val) {
            const v = parseFloat(val);
            return isNaN(v) ? 0 : v;
        }

        function fmtRupee(n) {
            return '₹' + Math.round(n).toLocaleString('en-IN');
        }

        function recalc() {
            let revenue = 0;
            if (activeTab === 'own') {
                revenue = num($('#freight_display').val());
                $('#freight_amount').val(revenue);
            } else {
                const hire = num($('#hire_amount').val());
                const comm = num($('#commission').val());
                const net = hire - comm;
                $('#net_hire').val(net);
                revenue = net;
            }

            let totalExpense = 0;
            let dieselLitres = 0;
            let dieselCost = 0;

            $('.expense-row').each(function() {
                const amt = parseFloat($(this).find('.expense-amount').val());
                const validAmt = isNaN(amt) ? 0 : amt;
                totalExpense += validAmt;

                const type = $(this).find('.expense-type').val();
                if(type === 'Diesel') {
                    const lit = parseFloat($(this).find('.expense-litres').val());
                    if(!isNaN(lit)) dieselLitres += lit;
                    dieselCost += validAmt;
                }
            });

            const odoStart = num($('#start_km').val());
            const odoEnd = num($('#end_km').val());
            const totalKm = Math.max(0, odoEnd - odoStart);
            $('#total_km_display').val(totalKm);

            const net = revenue - totalExpense;
            const revPerKm = totalKm > 0 ? revenue / totalKm : 0;
            const netPerKm = totalKm > 0 ? net / totalKm : 0;
            const mileage = dieselLitres > 0 ? totalKm / dieselLitres : 0;
            const dieselCostPerKm = totalKm > 0 ? dieselCost / totalKm : 0;

            $('#outRevenue').text(fmtRupee(revenue));
            $('#outExpense').text(fmtRupee(totalExpense));
            
            let outNet = $('#outNet');
            outNet.text(fmtRupee(net));
            outNet.removeClass('text-success text-danger').addClass(net >= 0 ? 'text-success' : 'text-danger');

            $('#outKm').text(totalKm.toLocaleString('en-IN') + ' km');
            $('#outRevKm').text(fmtRupee(revPerKm));
            $('#outNetKm').text(fmtRupee(netPerKm));
            $('#outDieselLitres').text(dieselLitres.toLocaleString('en-IN', {maximumFractionDigits:1}) + ' L');
            $('#outMileage').text((mileage > 0 ? mileage.toFixed(2) : '0') + ' km/L');
            $('#outDieselCostKm').text(fmtRupee(dieselCostPerKm));
        }

        @if(!$freightEntry)
        $('#freight_entry_id').on('change', function() {
            let feId = $(this).val();
            if (!feId) return;

            $.ajax({
                url: '{{ url("trip-sheet/get-freight-data") }}/' + feId,
                type: 'GET',
                success: function(data) {
                    window.isFreightTrigger = true;
                    $('#vehicle_id').val(data.vehicle_id).trigger('change');
                    window.isFreightTrigger = false;

                    if (data.employee_id) {
                        if ($('#employee_id').find('option[value="'+data.employee_id+'"]').length === 0) {
                            $('#employee_id').append('<option value="'+data.employee_id+'">'+data.driver_name+'</option>');
                        }
                        $('#employee_id').val(data.employee_id).trigger('change');
                        
                        $('#employee_id').prop('disabled', true);
                        if ($('#hidden_employee_id_ajax').length === 0) {
                            $('#employee_id').after('<input type="hidden" name="employee_id" id="hidden_employee_id_ajax" value="'+data.employee_id+'">');
                        } else {
                            $('#hidden_employee_id_ajax').val(data.employee_id);
                        }
                    } else {
                        $('#employee_id').val('').trigger('change');
                        $('#employee_id').prop('disabled', false);
                        $('#hidden_employee_id_ajax').remove();
                    }
                    
                    $('#driver_name').val(data.driver_name);
                    $('#from_location').val(data.from_location);
                    $('#to_location').val(data.to_location);
                    
                    $('#consignor').val(data.consignor);
                    $('#consignee').val(data.consignee);
                    $('#own_gr_no').val(data.lr_no);
                    $('#material').val(data.material);
                    $('#weight').val(data.weight);
                    $('#eway_bill').val(data.eway_bill);
                    
                    $('#freight_amount').val(data.freight_amount);
                    $('#freight_display').val(data.freight_amount);
                    
                    if (data.date) {
                        let formattedDate = moment(data.date, "YYYY-MM-DD").format("DD-MM-YYYY");
                        $('#date').val(formattedDate);
                    }

                    if (data.expenses && data.expenses.length > 0) {
                        let hasExpenses = false;
                        $('#expenseRows').empty();
                        data.expenses.forEach(function(exp) {
                            if (parseFloat(exp.amount) > 0) {
                                buildRow(exp.type, exp.amount, exp.remark);
                                hasExpenses = true;
                            }
                        });
                        if (!hasExpenses) {
                            buildRow('', '', '');
                        }
                        refreshEmptyState();
                    }

                    recalc();
                }
            });
        });
        @else
        // If freight entry is pre-loaded via createFromFreight
        @php
            $initialExpenses = [];
            if ($freightEntry->loading_charge > 0) $initialExpenses[] = ['type' => 'Loading', 'amount' => $freightEntry->loading_charge, 'remark' => ''];
            if ($freightEntry->unloading_charge > 0) $initialExpenses[] = ['type' => 'Unloading', 'amount' => $freightEntry->unloading_charge, 'remark' => ''];
            if ($freightEntry->holding_charge > 0) $initialExpenses[] = ['type' => 'Other', 'amount' => $freightEntry->holding_charge, 'remark' => 'Holding Charge'];
            if ($freightEntry->vasuli_charge > 0) $initialExpenses[] = ['type' => 'Other', 'amount' => $freightEntry->vasuli_charge, 'remark' => 'Vasuli'];
            if ($freightEntry->kata_charge > 0) $initialExpenses[] = ['type' => 'Other', 'amount' => $freightEntry->kata_charge, 'remark' => 'Kata Charge'];
            if ($freightEntry->challan_charge > 0) $initialExpenses[] = ['type' => 'RTO / Police', 'amount' => $freightEntry->challan_charge, 'remark' => 'Challan'];
            if ($freightEntry->overload_charge > 0) $initialExpenses[] = ['type' => 'RTO / Police', 'amount' => $freightEntry->overload_charge, 'remark' => 'Overload'];
            if ($freightEntry->other_charge > 0) $initialExpenses[] = ['type' => 'Other', 'amount' => $freightEntry->other_charge, 'remark' => 'Other Charge'];
        @endphp

        let initialExpenses = {!! json_encode($initialExpenses) !!};
        if (initialExpenses.length > 0) {
            $('#expenseRows').empty();
            initialExpenses.forEach(function(exp) {
                buildRow(exp.type, exp.amount, exp.remark);
            });
            refreshEmptyState();
        }
        @endif



        // Load available drivers on page load
        function loadAvailableDrivers(selectedDriverId = null) {
            $.ajax({
                url: '/employee/available-drivers',
                type: 'GET',
                success: function(res) {
                    if (res.success) {
                        let dropdown = $('#employee_id');
                        let currentVal = selectedDriverId || dropdown.val();
                        dropdown.empty();
                        dropdown.append('<option value="">-- Select Driver --</option>');
                        res.data.forEach(function(driver) {
                            dropdown.append('<option value="' + driver.id + '">' + driver.employee_name + '</option>');
                        });
                        
                        if (currentVal) {
                            if (dropdown.find('option[value="'+currentVal+'"]').length === 0) {
                                dropdown.append('<option value="' + currentVal + '">' + "{{ $freightEntry && $freightEntry->employee ? $freightEntry->employee->employee_name : 'Current Driver' }}" + '</option>');
                            }
                            dropdown.val(currentVal).trigger('change');
                        }
                    }
                }
            });
        }

        // Call on load (pass freight entry's driver if auto-populated)
        loadAvailableDrivers("{{ $freightEntry ? $freightEntry->employee_id : old('employee_id') }}");

        // Auto-fetch and select assigned driver based on vehicle
        $('#vehicle_id').on('change', function() {
            if (window.isFreightTrigger) return; // Skip if triggered by freight entry

            let vehicleId = $(this).val();
            if (vehicleId) {
                $.ajax({
                    url: '/truck-assign/get-assigned-driver/' + vehicleId,
                    type: 'GET',
                    success: function(res) {
                        if (res.success) {
                            if (res.is_busy) {
                                alert('Driver ' + res.employee_name + ' is currently on another active trip. Please select another available driver.');
                                $('#employee_id').val('').trigger('change');
                                $('#driver_name').val('');
                                $('#employee_id').prop('disabled', false);
                                $('#hidden_employee_id').remove();
                            } else {
                                if ($('#employee_id').find('option[value="'+res.employee_id+'"]').length === 0) {
                                    $('#employee_id').append('<option value="'+res.employee_id+'">'+res.employee_name+'</option>');
                                }
                                $('#employee_id').val(res.employee_id).trigger('change');
                                $('#driver_name').val(res.employee_name).attr('readonly', true);
                                
                                $('#employee_id').prop('disabled', true);
                                if ($('#hidden_employee_id').length === 0) {
                                    $('#employee_id').after('<input type="hidden" name="employee_id" id="hidden_employee_id" value="'+res.employee_id+'">');
                                } else {
                                    $('#hidden_employee_id').val(res.employee_id);
                                }
                            }
                        } else {
                            $('#employee_id').val('').trigger('change');
                            $('#driver_name').attr('readonly', false);
                            $('#employee_id').prop('disabled', false);
                            $('#hidden_employee_id').remove();
                        }
                    }
                });
            } else {
                $('#employee_id').val('').trigger('change');
                $('#driver_name').attr('readonly', false);
                $('#employee_id').prop('disabled', false);
                $('#hidden_employee_id').remove();
            }
        });
        
        // Initial Calculation
        recalc();
    });
</script>
@endpush