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

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}">
<style>
/* Page-Specific Modern Styles for Trip Sheet */
.ts-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    overflow: hidden;
}
.ts-card-header {
    padding: 14px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ts-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ts-card-title i {
    font-size: 18px;
    color: #f97316;
}
.ts-card-body {
    padding: 20px;
}

/* Modern Form Elements */
.ts-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
    display: block;
}
.ts-label .required {
    color: #ef4444;
}
.form-control, .form-select {
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13.5px;
    color: #0f172a;
    padding: 8px 12px;
    transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
    outline: none;
}
.form-control.readonly {
    background-color: #f8fafc;
    color: #64748b;
    font-weight: 600;
}
.input-group-text {
    border: 1.5px solid #cbd5e1;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
}
.input-group .form-control {
    border-radius: 0 8px 8px 0;
}

/* Custom Select2 Styling to match modern input controls */
.select2.select2-container {
    width: 100% !important;
}
.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    padding-left: 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}
.select2-dropdown {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    overflow: hidden;
    z-index: 1060 !important;
}
.select2-search--dropdown {
    padding: 8px !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: #f97316 !important;
}
.select2-results__option {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

/* Segmented Pill Tabs for GR Type */
.segmented-nav {
    display: inline-flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    gap: 4px;
    margin-bottom: 16px;
}
.segmented-nav .nav-link {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 7px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.segmented-nav .nav-link:hover {
    color: #0f172a;
}
.segmented-nav .nav-link.active {
    background: #ffffff;
    color: #f97316;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Inner Tab Box */
.gr-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
}

/* Expense Rows */
.expense-card-row {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    transition: all 0.15s ease;
}
.expense-card-row:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Modern Trip Computer / Cockpit */
.cockpit-card {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #334155;
}
.cockpit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 18px;
}
.cockpit-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f8fafc;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cockpit-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cockpit-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
}

/* Cockpit Tiles */
.cockpit-main-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.cockpit-tile {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}
.cockpit-tile:hover {
    background: rgba(255, 255, 255, 0.08);
}
.cockpit-tile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 4px;
}
.cockpit-tile-val {
    font-size: 20px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin: 0;
}

.cockpit-sub-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.cockpit-sub-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}
.cockpit-sub-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 2px;
}
.cockpit-sub-val {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin: 0;
}

/* Save Button */
.btn-save-trip {
    background: #f97316;
    color: #ffffff;
    border: 1.5px solid #f97316;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.btn-save-trip:hover {
    background: #ea580c;
    border-color: #ea580c;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
}

@media (max-width: 991.98px) {
    .cockpit-sub-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767.98px) {
    .cockpit-main-grid {
        grid-template-columns: 1fr;
    }
    .cockpit-sub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .segmented-nav {
        width: 100%;
    }
    .segmented-nav .nav-link {
        flex: 1;
        justify-content: center;
    }
}
</style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center mb-3">
    <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-flex align-items-center gap-2">
        <a href="{{ route('trip-sheet.index') }}" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-1">
            <i class="ri-arrow-left-line"></i> Back
        </a>
    </div>
</div>

<div class="app-body">
    @if(session('error') || session('error_msg'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="ri-error-warning-line me-2"></i> {{ session('error') ?: session('error_msg') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if(session('success') || session('success_msg'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="ri-checkbox-circle-line me-2"></i> {{ session('success') ?: session('success_msg') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {!! Form::open(['route' => 'trip-sheet.store', 'method' => 'POST', 'id' => 'tripSheetForm']) !!}

    <!-- 1. Primary Trip & Vehicle Details -->
    <div class="ts-card">
        <div class="ts-card-header">
            <h6 class="ts-card-title">
                <i class="ri-truck-line"></i> Trip Details & Vehicle Assignment
            </h6>
            <span class="badge bg-light text-dark border px-2 py-1 font-monospace" style="font-size: 12px;">
                TRIP #{{ $nextTripSheetNo }}
            </span>
        </div>
        <div class="ts-card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="ts-label" for="trip_sheet_no">Trip Sheet No. <span class="required">*</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="ts-label" for="date">Date <span class="required">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text bg-light"><i class="ri-calendar-todo-line text-muted"></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="ts-label" for="vehicle_id">Vehicle <span class="required">*</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="ts-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="ts-label" for="from_location">Route From <span class="required">*</span></label>
                    <input type="text" name="from_location" id="from_location" value="{{ $freightEntry ? $freightEntry->from_location : '' }}" class="form-control" required placeholder="Origin City / Hub">
                </div>
                <div class="col-md-3">
                    <label class="ts-label" for="to_location">Route To <span class="required">*</span></label>
                    <input type="text" name="to_location" id="to_location" value="{{ $freightEntry ? $freightEntry->to_location : '' }}" class="form-control" required placeholder="Destination City / Hub">
                </div>
                <div class="col-md-2">
                    <label class="ts-label" for="start_km">Start KM</label>
                    <input type="number" name="start_km" id="start_km" class="form-control font-monospace" placeholder="0" min="0">
                </div>
                <div class="col-md-2">
                    <label class="ts-label" for="end_km">End KM</label>
                    <input type="number" name="end_km" id="end_km" class="form-control font-monospace" placeholder="0" min="0">
                </div>
                <div class="col-md-2">
                    <label class="ts-label" for="total_km_display">Total KM</label>
                    <input type="text" id="total_km_display" class="form-control readonly font-monospace fw-bold text-primary" readonly value="0">
                </div>
            </div>
        </div>
    </div>

    <!-- 2. Consignment / GR Selection -->
    <div class="ts-card">
        <div class="ts-card-header">
            <h6 class="ts-card-title">
                <i class="ri-file-list-3-line"></i> Consignment & Freight Revenue
            </h6>
        </div>
        <div class="ts-card-body">
            <!-- Modern Segmented Pill Switch -->
            <ul class="nav segmented-nav" role="tablist" id="gr-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#panel-own" role="tab" data-tab="own">
                        <i class="ri-building-line"></i> OWN GR
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#panel-other" role="tab" data-tab="other">
                        <i class="ri-truck-line"></i> OTHER TRANSPORTER'S GR
                    </a>
                </li>
            </ul>

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

            <div class="tab-content">
                <!-- Panel 1: Own GR -->
                <div class="tab-pane active gr-box" 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-between align-items-center mb-1">
                                <label class="ts-label mb-0" for="freight_entry_id">Select Freight Entry (LR)</label>
                                <a href="{{ route('freight-entry.create') }}" class="btn btn-outline-primary btn-sm rounded-pill d-inline-flex align-items-center gap-1 py-0 px-2" style="font-size: 11.5px;" title="Add Freight Entry" target="_blank">
                                    <i class="ri-add-line"></i> New LR
                                </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="ts-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="ts-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="ts-label" for="own_gr_no">GR / LR No.</label>
                            <input type="text" name="own_gr_no" id="own_gr_no" class="form-control font-monospace" placeholder="GR-0000" value="{{ $freightEntry ? $freightEntry->lr_no : '' }}">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-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="ts-label" for="weight">Weight (MT)</label>
                            <input type="number" step="0.01" name="weight" id="weight" class="form-control font-monospace" placeholder="0.00" value="{{ $feWeight }}">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-label" for="eway_bill">E-way Bill No.</label>
                            <input type="text" name="eway_bill" id="eway_bill" class="form-control font-monospace" placeholder="Optional" value="{{ $freightEntry ? $freightEntry->eway_bil_no : '' }}">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-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 text-success font-monospace" placeholder="0" value="{{ $freightEntry ? $freightEntry->grand_total : '' }}">
                        </div>
                    </div>
                </div>
                
                <!-- Panel 2: Other Transporter GR -->
                <div class="tab-pane gr-box" id="panel-other" role="tabpanel">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="ts-label" for="booked_through">Booked Through (Broker)</label>
                            <input type="text" name="booked_through" id="booked_through" class="form-control" placeholder="Transporter/Broker name">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-label" for="other_gr_no">Their GR / LR No.</label>
                            <input type="text" name="other_gr_no" id="other_gr_no" class="form-control font-monospace" placeholder="GR-0000">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-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="ts-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 font-monospace" placeholder="0">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-label" for="commission">Commission / Brokerage (₹)</label>
                            <input type="number" step="0.01" name="commission" id="commission" class="form-control revenue-input font-monospace text-danger" placeholder="0">
                        </div>
                        <div class="col-md-3">
                            <label class="ts-label" for="net_hire">Net Hire (Auto)</label>
                            <input type="text" name="net_hire" id="net_hire" class="form-control readonly font-monospace fw-bold text-success" readonly placeholder="₹0">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. Trip Expenses -->
    <div class="ts-card">
        <div class="ts-card-header">
            <h6 class="ts-card-title">
                <i class="ri-money-dollar-circle-line"></i> Trip Expenses & Diesel
                <span id="expenseCount" class="badge bg-light text-muted border ms-1 font-monospace" style="font-size: 11px;">(1 entry)</span>
            </h6>
            <button type="button" class="btn btn-outline-primary btn-sm rounded-pill d-inline-flex align-items-center gap-1" id="addExpenseBtn">
                <i class="ri-add-line"></i> Add Expense
            </button>
        </div>
        <div class="ts-card-body">
            <div id="expenseRows">
                <div class="expense-row expense-card-row row g-2 align-items-center">
                    <div class="col-md-3">
                        <select name="expenses[0][expense_type]" class="form-select form-select-sm expense-type">
                            <option value="">-- Select Expense Type --</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 font-monospace" placeholder="Amount (₹)">
                    </div>
                    <div class="col-md-2 expense-litres-col" style="display:none;">
                        <input type="number" step="0.01" name="expenses[0][litres]" class="form-control form-control-sm expense-litres text-end font-monospace" placeholder="Litres" style="color: #ea580c; border-color: #fdba74; background-color: #fff7ed;">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="expenses[0][remarks]" class="form-control form-control-sm" placeholder="Note / fuel station / 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" title="Remove"><i class="ri-delete-bin-line fs-5"></i></button>
                    </div>
                </div>
            </div>
            <div class="text-muted small fst-italic mt-2" id="emptyState" style="display: none;">No expenses added yet. Click "+ Add Expense" to record trip costs.</div>
        </div>
    </div>

    <!-- 4. Modern Live Cockpit Trip Computer -->
    <div class="cockpit-card">
        <div class="cockpit-header">
            <h6 class="cockpit-title">
                <i class="ri-dashboard-2-line" style="color: #f97316;"></i> Trip Computer & Telemetry
            </h6>
            <span class="cockpit-badge">LIVE METRICS</span>
        </div>
        
        <!-- Primary Financial Output -->
        <div class="cockpit-main-grid">
            <div class="cockpit-tile">
                <div class="cockpit-tile-label">Total Revenue</div>
                <h4 class="cockpit-tile-val text-primary" id="outRevenue" style="color: #38bdf8 !important;">₹0</h4>
            </div>
            <div class="cockpit-tile">
                <div class="cockpit-tile-label">Total Expense</div>
                <h4 class="cockpit-tile-val" id="outExpense" style="color: #f87171 !important;">₹0</h4>
            </div>
            <div class="cockpit-tile">
                <div class="cockpit-tile-label">Net Profit / Loss</div>
                <h4 class="cockpit-tile-val" id="outNet" style="color: #34d399 !important;">₹0</h4>
            </div>
        </div>

        <!-- Telemetry & Efficiency Outputs -->
        <div class="cockpit-sub-grid">
            <div class="cockpit-sub-tile">
                <div class="cockpit-sub-label">Total KM Run</div>
                <p class="cockpit-sub-val" id="outKm">0 km</p>
            </div>
            <div class="cockpit-sub-tile">
                <div class="cockpit-sub-label">Revenue / KM</div>
                <p class="cockpit-sub-val" id="outRevKm">₹0</p>
            </div>
            <div class="cockpit-sub-tile">
                <div class="cockpit-sub-label">Net Profit / KM</div>
                <p class="cockpit-sub-val" id="outNetKm">₹0</p>
            </div>
            <div class="cockpit-sub-tile">
                <div class="cockpit-sub-label">Diesel Filled</div>
                <p class="cockpit-sub-val" id="outDieselLitres" style="color: #fbbf24;">0 L</p>
            </div>
            <div class="cockpit-sub-tile">
                <div class="cockpit-sub-label">Vehicle Mileage</div>
                <p class="cockpit-sub-val" id="outMileage" style="color: #34d399;">0 km/L</p>
            </div>
            <div class="cockpit-sub-tile">
                <div class="cockpit-sub-label">Diesel Cost / KM</div>
                <p class="cockpit-sub-val" id="outDieselCostKm">₹0</p>
            </div>
        </div>
    </div>

    <!-- 5. Schedule, Status & Action -->
    <div class="ts-card">
        <div class="ts-card-header">
            <h6 class="ts-card-title">
                <i class="ri-time-line"></i> Timing & Final Submission
            </h6>
        </div>
        <div class="ts-card-body">
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label class="ts-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="ts-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="ts-label" for="status">Trip Status</label>
                    {!! Form::select('status', ['Draft' => 'Draft', 'In Progress' => 'In Progress', 'Completed' => 'Completed'], 'Draft', ['class' => 'form-select select2', 'id' => 'status']) !!}
                </div>
            </div>

            <div class="mb-4">
                <label class="ts-label" for="remarks">Remarks / Special Instructions</label>
                <textarea name="remarks" id="remarks" rows="2" class="form-control" placeholder="Add any special notes or driver instructions..."></textarea>
            </div>

            <div class="d-flex align-items-center justify-content-end gap-2 pt-2 border-top">
                <a href="{{ route('trip-sheet.index') }}" class="btn btn-light px-4">Cancel</a>
                <button type="submit" class="btn-save-trip">
                    <i class="ri-save-line"></i> Save Trip Sheet
                </button>
            </div>
        </div>
    </div>

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

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
<script>
    $(document).ready(function() {
        let expRowIdx = 1;
        window.latestTruckEndTime = null;
        window.latestTruckEndTimeFormatted = null;

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

        // Initialize Select2 with proper contained width
        $('.select2').select2({
            width: '100%',
            dropdownAutoWidth: false
        });

        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 expense-card-row row g-2 align-items-center">
                    <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 font-monospace" 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 font-monospace" placeholder="Litres" style="color: #ea580c; border-color: #fdba74; background-color: #fff7ed;" value="${litres || ''}">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="expenses[${expRowIdx}][remarks]" class="form-control form-control-sm" placeholder="Note / fuel station / 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" title="Remove"><i class="ri-delete-bin-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;
                $('#freight_amount').val(revenue);
            }

            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.date) {
                        let formattedDate = moment(data.date, "YYYY-MM-DD").format("DD-MM-YYYY");
                        $('#date').val(formattedDate);
                        if ($('#date').data('daterangepicker')) {
                            $('#date').data('daterangepicker').setStartDate(formattedDate);
                            $('#date').data('daterangepicker').setEndDate(formattedDate);
                        }
                    }

                    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').length === 0) {
                            $('#employee_id').after('<input type="hidden" name="employee_id" id="hidden_employee_id" value="'+data.employee_id+'">');
                        } else {
                            $('#hidden_employee_id').val(data.employee_id);
                        }
                        $('#driver_name').val(data.driver_name).attr('readonly', true);
                    } else {
                        // Query assigned driver for vehicle
                        fetchAssignedDriver(data.vehicle_id, feId, data.date);
                    }
                    
                    $('#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);

                    recalc();
                }
            });
        });
        @endif

        // Load available drivers on page load
        function loadAvailableDrivers(selectedDriverId = null) {
            let feId = $('#freight_entry_id').val() || "{{ $freightEntry ? $freightEntry->id : '' }}";
            $.ajax({
                url: '/employee/available-drivers',
                type: 'GET',
                data: { ignore_freight_id: feId },
                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');
                        } else {
                            dropdown.val('').trigger('change');
                        }
                    }
                }
            });
        }

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

        // Form submit validation
        $('#tripSheetForm').on('submit', function(e) {
            // Ensure employee_id is passed if dropdown is disabled
            if ($('#employee_id').is(':disabled')) {
                let empVal = $('#employee_id').val();
                if (empVal) {
                    if ($('#hidden_employee_id').length === 0) {
                        $('#employee_id').after('<input type="hidden" name="employee_id" id="hidden_employee_id" value="'+empVal+'">');
                    } else {
                        $('#hidden_employee_id').val(empVal);
                    }
                }
            }
        });

        function fetchAssignedDriver(vehicleId, ignoreFreightId = null, tripDate = null) {
            if (!vehicleId) {
                $('#employee_id').val('').trigger('change');
                $('#driver_name').attr('readonly', false);
                $('#employee_id').prop('disabled', false);
                $('#hidden_employee_id').remove();
                return;
            }

            let requestDate = tripDate || $('#date').val();
            let feId = ignoreFreightId || $('#freight_entry_id').val() || "{{ $freightEntry ? $freightEntry->id : '' }}";

            $.ajax({
                url: '/truck-assign/get-assigned-driver/' + vehicleId,
                type: 'GET',
                data: {
                    ignore_freight_id: feId,
                    date: requestDate
                },
                success: function(res) {
                    if (res.is_truck_busy) {
                        swal("Truck has Active Trip", "Truck " + (res.vehicle_no || "") + " already has an active trip (#" + (res.active_trip_no || "") + ") with status '" + (res.active_trip_status || "In Progress") + "'. A new trip can only be created once the existing trip is marked as Completed.", "warning");
                        $('#vehicle_id').val('').trigger('change.select2');
                        $('#employee_id').val('').trigger('change');
                        $('#driver_name').val('').attr('readonly', false);
                        $('#employee_id').prop('disabled', false);
                        $('#hidden_employee_id').remove();
                        return;
                    }

                    if (res.success) {
                        if (res.is_busy) {
                            swal("Driver Notice", "Driver " + res.employee_name + " is marked busy on another entry. You may select another driver if needed.", "info");
                        }
                        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();
                    }
                }
            });
        }

        // Auto-fetch and select assigned driver based on vehicle
        $('#vehicle_id').on('change', function() {
            if (window.isFreightTrigger) return;
            let vehicleId = $(this).val();
            window.latestTruckEndTime = null;
            window.latestTruckEndTimeFormatted = null;
            fetchAssignedDriver(vehicleId);
        });
        
        // Initial Calculation
        recalc();

        @if(session('error') || session('error_msg'))
            swal("Alert", "{{ session('error') ?: session('error_msg') }}", "warning");
        @endif
    });
</script>
@endpush