@extends('layout.app')
@section('title','Truck Performance')
@push('header_script')
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css')}}">
<link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('theme/assets/vendor/daterange/daterange.css')}}">
<style>
:root{
  --ink:#0f172a;
  --ink-light:#1e293b;
  --amber:#f97316;
  --amber-deep:#ea580c;
  --amber-glow:rgba(249, 115, 22, 0.15);
  --green:#10b981;
  --bg:#f1f5f9;
  --surface:#ffffff;
  --surface-alt:#f8fafc;
  --text:#0f172a;
  --text-secondary:#475569;
  --text-muted:#64748b;
  --border:#cbd5e1;
  --border-light:#e2e8f0;
  --success:#16a34a;
  --success-bg:#dcfce7;
  --warning:#f59e0b;
  --warning-bg:#fef3c7;
  --danger:#ef4444;
  --danger-bg:#fee2e2;
  --info:#0284c7;
  --info-bg:#e0f2fe;
  --radius:12px;
  --radius-sm:8px;
}
.perf-container {
    background:var(--bg); 
    color:var(--text); 
    font-size:14px; 
    line-height:1.5; 
    -webkit-font-smoothing:antialiased;
    padding-bottom: 24px;
}
.perf-container button { font:inherit; }

/* Vehicle Performance Header */
.perf-header { 
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); 
    color:#fff; 
    padding:20px 24px 0; 
    border-radius:var(--radius) var(--radius) 0 0; 
    border: 1.5px solid #334155;
    border-bottom: none;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.perf-header-top { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:16px; 
}
.perf-title-row { 
    display:flex; 
    align-items:center; 
    gap:14px; 
    flex-wrap:wrap; 
}
.truck-meta-name { 
    font-size:18px; 
    font-weight:700; 
    color:#ffffff;
    margin:0; 
    letter-spacing: -0.01em;
}
.truck-meta-owner { 
    font-size:12.5px; 
    color:#94a3b8; 
    font-weight: 500;
    margin:2px 0 0; 
}
.plate-badge { 
    font-weight:800; 
    font-size:14px; 
    letter-spacing:.06em; 
    background:#fbbf24; 
    color:#0f172a; 
    border:2px solid #0f172a; 
    border-radius:6px; 
    padding:4px 10px; 
    display:inline-flex; 
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25); 
    text-transform: uppercase;
}

/* Stat Strip with modern glass chips */
.stat-strip { 
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:12px; 
    margin:18px 0 0; 
    padding-bottom:18px;
}
.stat-chip { 
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s ease;
}
.stat-chip:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}
.stat-chip.chip-clickable {
    cursor: pointer;
}
.stat-chip.chip-clickable:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}
.stat-chip-label { 
    font-size:11px; 
    text-transform:uppercase; 
    letter-spacing:.06em; 
    color:#94a3b8; 
    margin:0 0 4px; 
    font-weight: 600;
}
.stat-chip-value { 
    font-size:16px; 
    font-weight:700; 
    color:#f8fafc;
    margin:0; 
}
.stat-chip-value.alert { 
    color:#f87171; 
}

/* Modern Sticky Tab Navigation */
.tab-bar { 
    display:flex; 
    gap:4px; 
    padding:0 16px; 
    background:#0f172a; 
    border-left: 1.5px solid #334155;
    border-right: 1.5px solid #334155;
    border-bottom: 1px solid #1e293b;
    overflow-x:auto; 
    overflow-y:hidden;
    flex-shrink:0; 
    position: sticky;
    top: 55px; /* Under sticky app-header */
    z-index: 90;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar {
    display: none;
}
.tab-btn { 
    background:transparent; 
    border:none; 
    color:#94a3b8; 
    padding:13px 16px; 
    font-size:13px; 
    font-weight: 500;
    letter-spacing:.01em; 
    display:flex; 
    align-items:center; 
    gap:8px; 
    cursor:pointer; 
    border-bottom:3px solid transparent; 
    white-space:nowrap; 
    flex-shrink:0; 
    transition: all 0.15s ease;
    border-radius: 6px 6px 0 0;
}
.tab-btn i { 
    font-size:16px; 
    flex-shrink:0; 
}
.tab-btn:hover { 
    color:#ffffff; 
    background: rgba(255, 255, 255, 0.05);
}
.tab-btn.is-active { 
    color:var(--amber); 
    font-weight: 700;
    border-bottom-color:var(--amber); 
    background: rgba(249, 115, 22, 0.08);
}

/* Content Panels */
.tab-panels { 
    flex:1; 
    padding:22px 22px 36px; 
    background:var(--bg); 
    border:1.5px solid var(--border); 
    border-top:none; 
    border-radius:0 0 var(--radius) var(--radius); 
}
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }

/* Section Cards */
.section-card { 
    background:var(--surface); 
    border:1.5px solid var(--border); 
    border-radius:var(--radius); 
    margin-bottom:20px; 
    overflow:hidden; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.section-card-head { 
    padding:14px 18px; 
    border-bottom:1px solid var(--border-light); 
    background:#ffffff;
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:12px; 
    flex-wrap:wrap; 
}
.section-card-title { 
    font-size:15px; 
    font-weight:700; 
    margin:0; 
    color:var(--ink); 
}
.section-card-sub { 
    font-size:12.5px; 
    color:var(--text-muted); 
    margin:3px 0 0; 
}
.section-card-body { 
    padding:18px; 
}

/* Table Wrap & DataTable styles */
.table-wrap { 
    overflow-x:auto; 
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #ffffff;
}
.data-table, table.data-table { 
    width:100% !important; 
    border-collapse:collapse !important; 
    border:none !important; 
    margin:0 !important; 
}
.data-table th, table.data-table th { 
    text-align:left; 
    font-size:11.5px !important; 
    text-transform:uppercase !important; 
    letter-spacing:.05em !important; 
    color:#334155 !important; 
    font-weight:700 !important; 
    padding:10px 14px !important; 
    border:1px solid var(--border-light) !important; 
    border-bottom:2px solid var(--border) !important; 
    background-color:#f8fafc !important; 
    white-space:nowrap !important; 
    vertical-align:middle !important; 
}
.data-table td, table.data-table td { 
    padding:10px 14px !important; 
    border:1px solid #f1f5f9 !important; 
    font-size:13px !important; 
    white-space:nowrap !important; 
    vertical-align:middle !important; 
    color:#1e293b !important; 
}
.data-table tbody tr:hover, table.data-table tbody tr:hover { 
    background-color:#f8fafc !important; 
}
.data-table tfoot td, table.data-table tfoot td { 
    font-weight:700; 
    background:#f8fafc; 
    border:1px solid var(--border-light) !important; 
}

.num, .data-table th.num { text-align:right; }
.num.positive { color:var(--success); font-weight:700; }
.num.negative { color:var(--danger); font-weight:700; }
.code { font-weight:700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Summary Strips */
.summary-strip { 
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:12px; 
    margin-bottom:20px; 
    background:transparent;
    border:none;
}
.summary-item { 
    background:#ffffff;
    border:1.5px solid var(--border);
    border-radius:10px;
    padding:14px 16px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.summary-value { 
    font-size:19px; 
    font-weight:700; 
    color:var(--ink); 
}
.summary-value.positive { color:var(--success); }
.summary-value.negative { color:var(--danger); }
.summary-label { 
    font-size:11.5px; 
    color:var(--text-muted); 
    text-transform:uppercase; 
    letter-spacing:.05em; 
    font-weight:600;
    margin-top:4px; 
}

/* Badges & Pills */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:100px; white-space:nowrap; }
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.pill-success { background:var(--success-bg); color:var(--success); }
.pill-warning { background:var(--warning-bg); color:var(--warning); }
.pill-danger { background:var(--danger-bg); color:var(--danger); }
.pill-info { background:var(--info-bg); color:var(--info); }

/* Field Grids */
.field-grid { 
    display:grid; 
    grid-template-columns:repeat(2, 1fr); 
    gap:12px 16px; 
}
.field label { 
    display:block; 
    font-size:11px; 
    color:var(--text-muted); 
    text-transform:uppercase; 
    letter-spacing:.05em; 
    font-weight:600;
    margin-bottom:4px; 
}
.field .value { 
    font-size:13.5px; 
    color:var(--ink); 
    font-weight:600; 
    word-break: break-word;
}

/* Toolbars & Search */
.toolbar { 
    display:flex; 
    gap:10px; 
    align-items:center; 
    flex-wrap:wrap; 
    margin-bottom:16px; 
}
.search-input { 
    font-size:13px; 
    padding:8px 14px; 
    border:1.5px solid var(--border); 
    border-radius:var(--radius-sm); 
    background:var(--surface); 
    min-width:240px; 
    transition: all 0.2s ease;
}
.search-input:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-glow);
    outline: none;
}

.remark-list { list-style:none; margin:0; padding:0; }
.remark-item { padding:12px 0; border-bottom:1px solid var(--border-light); }
.remark-item:last-child { border-bottom:none; }
.remark-text { margin:0 0 4px; }
.remark-meta { font-size:11.5px; color:var(--text-muted); margin:0; }

/* Document Cards */
.doc-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); 
    gap:16px; 
}
.doc-actions { 
    padding:0 18px 16px; 
    display:flex; 
    gap:8px; 
}
.note-box { 
    background:var(--info-bg); 
    color:var(--info); 
    border-radius:var(--radius-sm); 
    padding:12px 14px; 
    font-size:12.5px; 
    line-height:1.55; 
    margin:0 0 16px; 
}
.note-box strong { color:var(--ink); }

/* Modern Action Buttons */
.perf-btn { 
    font-size:13px; 
    font-weight:600; 
    padding:7px 16px; 
    border-radius:var(--radius-sm); 
    border:1.5px solid transparent; 
    cursor:pointer; 
    display:inline-flex; 
    align-items:center; 
    gap:6px; 
    transition: all .15s ease; 
    text-decoration: none; 
}
.perf-btn-primary { 
    background:var(--amber); 
    color:#ffffff; 
    border-color:var(--amber); 
}
.perf-btn-primary:hover { 
    background:var(--amber-deep); 
    border-color:var(--amber-deep); 
    color:#ffffff; 
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.25);
}
.perf-btn-ghost { 
    background:var(--surface); 
    color:#334155; 
    border-color:var(--border); 
}
.perf-btn-ghost:hover { 
    border-color:var(--amber); 
    color:var(--amber); 
    background: #fff7ed;
}
.perf-btn-sm { padding:5px 12px; font-size:12.5px; }

.perf-btn-back {
    background: rgba(255, 255, 255, 0.1); 
    color: #ffffff; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 8px; 
    font-weight: 600; 
    padding: 6px 14px; 
    backdrop-filter: blur(4px); 
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.perf-btn-back:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* P&L Layout Grids */
.pnl-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.pnl-head-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.pnl-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

/* Responsive Breakpoints */
@media (max-width: 991.98px) {
    .pnl-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pnl-filter-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .perf-container {
        padding: 8px !important;
    }
    .perf-header {
        padding: 14px 14px 0;
        border-radius: 10px 10px 0 0;
    }
    .perf-header-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .perf-title-row {
        gap: 10px;
    }
    .truck-meta-name {
        font-size: 16px;
    }
    .plate-badge {
        font-size: 13px;
        padding: 3px 8px;
    }
    .perf-btn-back {
        padding: 5px 10px;
        font-size: 12px;
    }
    .stat-strip {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 14px 0 0;
        padding-bottom: 14px;
    }
    .stat-chip {
        padding: 8px 12px;
    }
    .stat-chip-label {
        font-size: 10px;
    }
    .stat-chip-value {
        font-size: 14px;
    }
    .tab-bar {
        padding: 0 8px;
        top: 50px;
    }
    .tab-btn {
        padding: 11px 12px;
        font-size: 12.5px;
        gap: 6px;
    }
    .tab-panels {
        padding: 14px 10px 24px;
        border-radius: 0 0 10px 10px;
    }
    .section-card {
        border-radius: 10px;
        margin-bottom: 14px;
    }
    .section-card-head {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .section-card-head > div:last-child,
    .section-card-head > a.perf-btn,
    .section-card-head > button.perf-btn {
        width: 100%;
        display: flex;
        justify-content: stretch;
    }
    .section-card-head .perf-btn {
        width: 100%;
        justify-content: center;
    }
    .section-card-body {
        padding: 12px 10px;
    }
    .doc-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .summary-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .summary-item {
        padding: 10px 12px !important;
    }
    .summary-value {
        font-size: 16px !important;
    }
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-input {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .pnl-head-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pnl-filter-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .pnl-filter-grid .field:last-child {
        grid-column: span 2;
    }
    
    .remark-form > div {
        width: 100% !important;
        min-width: 100% !important;
    }
    .remark-form button {
        width: 100% !important;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .stat-strip {
        grid-template-columns: 1fr;
    }
    .field-grid {
        grid-template-columns: 1fr;
    }
    .summary-strip {
        grid-template-columns: 1fr !important;
    }
    .pnl-summary-grid {
        grid-template-columns: 1fr !important;
    }
    .pnl-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .pnl-filter-grid .field:last-child {
        grid-column: span 1;
    }
}
</style>
@endpush
@section('content')
<div class="app-body perf-container">
    <div class="perf-header">
        <div class="perf-header-top">
            <div class="perf-title-row">
                <span class="plate-badge">{{ $vehicle->vehicle_no }}</span>
                <div>
                    <p class="truck-meta-name">{{ $vehicle->vehicle_model }}</p>
                    <p class="truck-meta-owner"><i class="ri-user-smile-line"></i> {{ $vehicle->owner_name }}</p>
                </div>
            </div>
            <div>
                 <a href="{{ route('vehicle-performance.index') }}" class="perf-btn-back"><i class="ri-arrow-left-line"></i> Back</a>
            </div>
        </div>
        <div class="stat-strip">
            <div class="stat-chip"><p class="stat-chip-label">Current Odometer</p><p class="stat-chip-value">{{ $vehicle->current_km ?? 'N/A' }} km</p></div>
            <div class="stat-chip"><p class="stat-chip-label">Active Driver</p><p class="stat-chip-value">{{ $activeDriver?->employee?->employee_name ?? 'N/A' }}</p></div>
            <div class="stat-chip chip-clickable" onclick="switchTab('tab5')">
                <p class="stat-chip-label" style="color: #f87171;">Accidental Records</p>
                <p class="stat-chip-value alert" style="color: #f87171;">{{ \App\Models\AccidentClaim::where('vehicle_id', $vehicle->id)->count() }} <span style="font-size: 11px; text-decoration: underline; font-weight: 500; margin-left: 4px;">(View)</span></p>
            </div>
        </div>
    </div>
    
    <div class="tab-bar">
      <button class="tab-btn is-active" data-tab="tab1" onclick="switchTab('tab1')"><i class="ri-article-line"></i> Freight Entry List</button>
      <button class="tab-btn" data-tab="tab2" onclick="switchTab('tab2')"><i class="ri-route-line"></i> Trip Sheet</button>
      <button class="tab-btn" data-tab="tab3" onclick="switchTab('tab3')"><i class="ri-settings-3-line"></i> Truck Setting</button>
      <button class="tab-btn" data-tab="tab4" onclick="switchTab('tab4')"><i class="ri-file-list-3-line"></i> Vehicle Documents</button>
      <button class="tab-btn" data-tab="tab5" onclick="switchTab('tab5')"><i class="ri-error-warning-line"></i> Accidental / Claim</button>
      <button class="tab-btn" data-tab="tab6" onclick="switchTab('tab6')"><i class="ri-tools-line"></i> Vehicle Tool List</button>
      <button class="tab-btn" data-tab="tab7" onclick="switchTab('tab7')"><i class="ri-user-line"></i> Driver History</button>
      <button class="tab-btn" data-tab="tab8" onclick="switchTab('tab8')"><i class="ri-bank-card-line"></i> EMI & Loan</button>
      <button class="tab-btn" data-tab="tab9" onclick="switchTab('tab9')"><i class="ri-money-dollar-circle-line"></i> P&L Account</button>
      <button class="tab-btn" data-tab="tab10" onclick="switchTab('tab10')"><i class="ri-shield-star-line"></i> Insurance</button>
    </div>
    
    <div class="tab-panels">
        @include('common.master.vehicle-performance.tabs.freight')
        @include('common.master.vehicle-performance.tabs.trip_sheet')
        @include('common.master.vehicle-performance.tabs.truck_setting')
        @include('common.master.vehicle-performance.tabs.documents')
        @include('common.master.vehicle-performance.tabs.claims')
        @include('common.master.vehicle-performance.tabs.tools')
        @include('common.master.vehicle-performance.tabs.driver')
        @include('common.master.vehicle-performance.tabs.loans')
        @include('common.master.vehicle-performance.tabs.pnl')
        @include('common.master.vehicle-performance.tabs.insurance')
    </div>
</div>

@include('common.master.vehicle-performance.tabs.manual_pnl_modal')
@include('common.master.vehicle-performance.tabs.photo')
@endsection

@push('footer_script')
<script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
<script src="{{asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js')}}"></script>
<script src="{{asset('theme/assets/vendor/daterange/daterange.js')}}"></script>
<script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>
<script>
function switchTab(id){
  document.querySelectorAll('.tab-panel').forEach(function(p){ p.classList.toggle('is-active', p.id === id); });
  var tabBar = document.querySelector('.tab-bar');
  document.querySelectorAll('.tab-btn').forEach(function(b){ 
      var isActive = (b.dataset.tab === id);
      b.classList.toggle('is-active', isActive); 
      if (isActive && tabBar) {
          var scrollLeft = b.offsetLeft - (tabBar.clientWidth / 2) + (b.clientWidth / 2);
          tabBar.scrollTo({ left: scrollLeft, behavior: 'smooth' });
      }
  });
  
  // Adjust DataTables columns on tab switch
  setTimeout(function() {
      $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
  }, 100);
}

function showPhoto(imgUrl) {
    if (!imgUrl) return;
    if (imgUrl.toLowerCase().endsWith('.pdf')) {
        window.open(imgUrl, '_blank');
    } else {
        $('#perfPhotoModalImg').attr('src', imgUrl);
        var modal = new bootstrap.Modal(document.getElementById('perfPhotoModal'));
        modal.show();
    }
}

function deleteRemark(id) {
    swal({
        title: "Are you sure?",
        text: "You want to delete this remark record?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false
    }, function() {
        $.ajax({
            url: '{{ url("vehicle-remarks") }}/' + id,
            type: 'DELETE',
            data: { _token: "{{ csrf_token() }}" },
            success: function() {
                if (window.remarkTable) {
                    window.remarkTable.ajax.reload();
                }
                swal("Deleted!", "Remark has been deleted.", "success");
            },
            error: function() {
                swal("Error!", "Could not delete this remark.", "error");
            }
        });
    });
}

$(document).ready(function() {
    const vehicleId = "{{ $vehicle->id }}";
    
    // 1. Freight Entry Table
    $('#freightTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('vehicle-performance') }}/" + vehicleId + "/freight-data",
        createdRow: function(row, data, dataIndex) {
            $(row).css('cursor', 'pointer');
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', className: 'text-center', orderable: false, searchable: false},
            {
                data: 'lr_no', 
                name: 'lr_no', 
                className: 'code',
                render: function(data, type, row) {
                    return '<a href="{{ url("freight-entry") }}/' + row.id + '/edit" style="color: #3b82f6; text-decoration: underline; font-weight: 600;">' + data + '</a>';
                }
            },
            {data: 'date', name: 'date'},
            {data: 'route', name: 'route', orderable: false, searchable: false},
            {data: 'consignor_name', name: 'consignor.party_name'},
            {data: 'consignee_name', name: 'consignee.party_name'},
            {data: 'material', name: 'material', orderable: false, searchable: false},
            {data: 'weight', name: 'weight', className: 'num', orderable: false, searchable: false},
            {data: 'freight', name: 'net_total', className: 'num'},
            {data: 'status', name: 'status', className: 'text-center', orderable: false, searchable: false}
        ],
        initComplete: function() {
            var api = this.api();
            $('#freightSearch').on('keyup', function() {
                api.search(this.value).draw();
            });
        },
        dom: 'rt<"bottom"lip><"clear">'
    });

    // Row Click for Freight Entry Table
    $('#freightTable tbody').on('click', 'tr', function(e) {
        if ($(e.target).is('a, button, input, select') || $(e.target).closest('a, button').length) {
            return;
        }
        var data = $('#freightTable').DataTable().row(this).data();
        if (data && data.id) {
            window.open("{{ url('freight-entry') }}/" + data.id + "/edit", "_blank");
        }
    });
    
    // 2. Trip Sheet Table
    $('#tripTable').DataTable({
        processing: true,
        serverSide: true,
        createdRow: function(row, data, dataIndex) {
            $(row).css('cursor', 'pointer');
        },
        ajax: {
            url: "{{ url('vehicle-performance') }}/" + vehicleId + "/trip-data",
            dataSrc: function (json) {
                if(json.summary) {
                    $('#tripCount').text(json.summary.trips);
                    $('#tripRevenue').text('₹' + json.summary.freight);
                    $('#tripExpense').text('₹' + json.summary.expense);
                    $('#tripTotalKm').text(json.summary.total_km);
                    $('#tripOverallMileage').text(json.summary.overall_mileage);
                    
                    const profitEl = $('#tripProfit');
                    profitEl.text('₹' + json.summary.profit);
                    profitEl.removeClass('positive negative');
                    if (parseFloat(json.summary.profit.replace(/,/g, '')) >= 0) {
                        profitEl.addClass('positive');
                    } else {
                        profitEl.addClass('negative');
                    }
                }
                return json.data;
            }
        },
        columns: [
            {
                data: 'trip_sheet_no', 
                name: 'trip_sheet_no', 
                className: 'code',
                render: function(data, type, row) {
                    return '<a href="{{ url("trip-sheet") }}/' + row.id + '" style="color: #3b82f6; text-decoration: underline; font-weight: 600;">' + data + '</a>';
                }
            },
            {data: 'date', name: 'date'},
            {data: 'route', name: 'route', orderable: false, searchable: false},
            {data: 'driver_name', name: 'driver_name', orderable: false, searchable: false},
            {data: 'start_km', name: 'start_km', className: 'num'},
            {data: 'end_km', name: 'end_km', className: 'num'},
            {data: 'total_km', name: 'total_km', className: 'num'},
            {data: 'freight_amount', name: 'freight_amount', className: 'num'},
            {data: 'diesel_ltr', name: 'diesel_ltr', className: 'num', defaultContent: '0'},
            {data: 'diesel_amount', name: 'diesel_amount', className: 'num', defaultContent: '0'},
            {data: 'other_expense', name: 'other_expense', className: 'num', defaultContent: '0'},
            {data: 'total_expense', name: 'total_expense', className: 'num'},
            {data: 'mileage', name: 'mileage', className: 'num', orderable: false, searchable: false},
            {data: 'profit', name: 'profit', orderable: false, searchable: false},
            {data: 'status', name: 'status', className: 'text-center', orderable: false, searchable: false}
        ]
    });

    // Row Click for Trip Sheet Table
    $('#tripTable tbody').on('click', 'tr', function(e) {
        if ($(e.target).is('a, button, input, select') || $(e.target).closest('a, button').length) {
            return;
        }
        var data = $('#tripTable').DataTable().row(this).data();
        if (data && data.id) {
            window.open("{{ url('trip-sheet') }}/" + data.id, "_blank");
        }
    });
    
    // 3. Daily KM Table
    $('#dailyKmTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('vehicle-daily-kms.getData') }}",
            data: { vehicle_id: vehicleId }
        },
        columns: [
            {data: 'date', name: 'date'},
            {data: 'time', name: 'time', defaultContent: 'N/A'},
            {data: 'place', name: 'place', defaultContent: 'N/A'},
            {data: 'gps_km', name: 'gps_km', className: 'num', defaultContent: '0'},
            {data: 'end_km', name: 'end_km', className: 'num'},
            {data: 'total_km', name: 'total_km', className: 'num'},
            {data: 'driver_name', name: 'driver_name', defaultContent: 'N/A'},
            {data: 'status_rh', name: 'status_rh', defaultContent: 'N/A'},
            {data: 'creator.name', name: 'creator.name', defaultContent: 'N/A'}
        ],
        order: [[0, 'desc']]
    });

    // 4. Service History Table
    $('#serviceTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('vehicle-performance') }}/" + vehicleId + "/service-data",
        columns: [
            {data: 'service_name', name: 'serviceType.service_name', orderable: false, searchable: false},
            {data: 'date', name: 'batch.service_date', orderable: false, searchable: false},
            {data: 'odometer', name: 'batch.service_km', className: 'num', orderable: false, searchable: false},
            {data: 'cost', name: 'amount', className: 'num'},
            {data: 'center', name: 'center', orderable: false, searchable: false},
            {data: 'remarks', name: 'remarks', orderable: false, searchable: false}
        ]
    });

    // 5. Accident Claim Table
    $('#claimTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('vehicle-performance') }}/" + vehicleId + "/claim-data",
        columns: [
            {data: 'accident_datetime', name: 'accident_datetime'},
            {data: 'location', name: 'location', defaultContent: 'N/A'},
            {data: 'driver_name', name: 'driver.name', orderable: false, searchable: false},
            {data: 'description', name: 'description', orderable: false, searchable: false},
            {data: 'claim_number', name: 'claim_number', className: 'code'},
            {data: 'insurance_company', name: 'insurance_company', defaultContent: 'N/A'},
            {data: 'claim_amount_approved', name: 'claim_amount_approved', className: 'num', defaultContent: '0'},
            {data: 'settlement_amount_received', name: 'settlement_amount_received', className: 'num', defaultContent: '0'},
            {data: 'total_repair_cost', name: 'total_repair_cost', className: 'num', defaultContent: '0'},
            {data: 'status_badge', name: 'claim_status', orderable: false, searchable: false}
        ],
        order: [[0, 'desc']]
    });

    // 6. Driver History Table
    $('#driverTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('vehicle-performance') }}/" + vehicleId + "/driver-data",
        columns: [
            {data: 'driver_name', name: 'driver.name', orderable: false, searchable: false},
            {data: 'license_no', name: 'driver.license_no', className: 'mono', orderable: false, searchable: false},
            {data: 'assign_date', name: 'assign_date'},
            {data: 'unassign_date', name: 'assigned_to'},
            {data: 'duration', name: 'duration', orderable: false, searchable: false},
            {data: 'km_driven', name: 'km_driven', className: 'num'},
            {data: 'remarks', name: 'reason', orderable: false, searchable: false},
            {data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false}
        ],
        order: [[2, 'desc']]
    });
    // 7. Loan Table
    $('#loanTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('vehicle-performance') }}/" + vehicleId + "/loan-data",
        columns: [
            {data: 'sanction_date', name: 'sanction_date'},
            {data: 'financer_name', name: 'financer.financer_name', orderable: false, searchable: false},
            {data: 'loan_account_no', name: 'loan_account_no', defaultContent: 'N/A'},
            {data: 'amount', name: 'principal_amount', className: 'num'},
            {data: 'emi_amount', name: 'emi_amount', className: 'num'},
            {data: 'interest_rate', name: 'interest_rate', className: 'num', defaultContent: '0'},
            {data: 'tenure_months', name: 'tenure_months', defaultContent: '0'},
            {data: 'status', name: 'status', orderable: false, searchable: false}
        ],
        order: [[0, 'desc']]
    });
    // 8. P&L Table
    let pnlTable = $('#pnlTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ url('vehicle-performance') }}/" + vehicleId + "/pnl-data",
            data: function (d) {
                d.from_date = $('#pnlFromDate').val();
                d.to_date = $('#pnlToDate').val();
                d.type = $('#pnlTypeFilter').val();
                d.head = $('#pnlHeadFilter').val();
            },
            dataSrc: function (json) {
                if(json.summary) {
                    $('#totalIncome').text('₹ ' + parseFloat(json.summary.totalIncome).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                    $('#totalExpense').text('₹ ' + parseFloat(json.summary.totalExpense).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                    
                    let net = parseFloat(json.summary.netBalance);
                    let netEl = $('#netPL');
                    netEl.text('₹ ' + net.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                    netEl.css('color', net >= 0 ? '#16803c' : '#d73535');
                    
                    $('#txnCount').text(json.data.length);
                    
                    renderPnlHeads('incomeHeads', json.summary.incomeHeads, '#16803c');
                    renderPnlHeads('expenseHeads', json.summary.expenseHeads, '#d73535');
                }
                return json.data;
            }
        },
        columns: [
            {
                data: null, 
                orderable: false, 
                searchable: false,
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            {data: 'date', name: 'date'},
            {
                data: 'particulars', 
                name: 'particulars',
                render: function(data, type, row) {
                    if (row.ref) {
                        return '<a href="' + row.ref + '" target="_blank" style="color:#3b82f6; text-decoration:underline; font-weight:600">' + data + '</a>';
                    }
                    return '<span style="font-weight:600">' + data + '</span>';
                }
            },
            {data: 'ref_no', name: 'ref_no'},
            {data: 'voucher_type', name: 'voucher_type'},
            {
                data: 'type',
                name: 'type',
                render: function(data) {
                    let bg = data === 'INCOME' ? '#e9f7ef' : '#fdecec';
                    let col = data === 'INCOME' ? '#16803c' : '#d73535';
                    return '<span style="font-size:10px;font-weight:800;border-radius:12px;padding:4px 8px;background:'+bg+';color:'+col+'">' + data + '</span>';
                }
            },
            {
                data: 'amount', 
                name: 'amount', 
                className: 'num',
                render: function(data, type, row) {
                    if (row.type !== 'INCOME') return '-';
                    return '<span style="color:#16803c;font-weight:800">₹ ' + parseFloat(data).toLocaleString('en-IN', {minimumFractionDigits: 2}) + '</span>';
                }
            },
            {
                data: 'amount', 
                name: 'amount', 
                className: 'num',
                render: function(data, type, row) {
                    if (row.type !== 'EXPENSE') return '-';
                    return '<span style="color:#d73535;font-weight:800">₹ ' + parseFloat(data).toLocaleString('en-IN', {minimumFractionDigits: 2}) + '</span>';
                }
            },
            {
                data: 'balance', 
                name: 'balance', 
                className: 'num',
                render: function(data, type, row) {
                    let val = parseFloat(data);
                    let cl = val >= 0 ? '#16803c' : '#d73535';
                    return '<span style="color:'+cl+';font-weight:800">₹ ' + val.toLocaleString('en-IN', {minimumFractionDigits: 2}) + '</span>';
                }
            }
        ],
        order: false,
        ordering: false
    });

    window.applyPnlFilters = function() {
        pnlTable.ajax.reload();
    };

    window.resetPnlFilters = function() {
        $('#pnlFromDate, #pnlToDate').val('');
        $('#pnlTypeFilter, #pnlHeadFilter').val('ALL');
        pnlTable.ajax.reload();
    };

    function renderPnlHeads(containerId, dataObj, color) {
        let el = document.getElementById(containerId);
        el.innerHTML = '';
        let keys = Object.keys(dataObj);
        if (keys.length === 0) {
            el.innerHTML = '<div class="text-muted" style="font-size:11px">No entries</div>';
            return;
        }
        keys.forEach(k => {
            let row = document.createElement('div');
            row.style = 'display:flex;justify-content:space-between;border-bottom:1px solid #edf1f2;padding:7px 0;font-size:12px;';
            row.innerHTML = `<span>${k}</span><span style="font-weight:700;color:${color}">₹ ${parseFloat(dataObj[k]).toLocaleString('en-IN', {minimumFractionDigits: 2})}</span>`;
            el.appendChild(row);
        });
    }

    const manualHeads = {
        Income: ["Trip Freight Income", "Scrap Sale", "Insurance Claim Recovery", "Other Income"],
        Expense: ["Driver Salary", "EMI / Finance Cost", "Service Cost", "Tyre Cost", "Insurance Premium", "Accidental Repair", "Challan / Penalty", "Road Tax", "Permit Expense", "Fitness Expense", "Parts Cost", "Repair & Maintenance", "Fuel / Lubricant", "Other Expense"]
    };

    window.updateManualHeads = function() {
        const type = $('#mType').val();
        const mHead = $('#mHead');
        mHead.empty();
        if (manualHeads[type]) {
            manualHeads[type].forEach(h => {
                mHead.append(new Option(h, h));
            });
        }
    };
    
    // Populate the global filter dropdown on load
    const filterHead = $('#pnlHeadFilter');
    [...manualHeads.Income, ...manualHeads.Expense].forEach(h => {
        filterHead.append(new Option(h, h));
    });
    
    // Init modal heads
    updateManualHeads();

    // 9. Remark Table
    window.remarkTable = $('#remarkTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('vehicle-performance') }}/" + vehicleId + "/remark-data",
        columns: [
            {
                data: 'DT_RowIndex', 
                name: 'DT_RowIndex', 
                className: 'text-center',
                orderable: false, 
                searchable: false
            },
            {data: 'date', name: 'date', className: 'text-center'},
            {data: 'remark', name: 'remark', orderable: false},
            {data: 'user_name', name: 'user_name', orderable: false, searchable: false},
            {data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false}
        ],
        order: false
    });

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

    const urlParams = new URLSearchParams(window.location.search);
    const tabParam = urlParams.get('tab') || window.location.hash.replace('#', '');
    if (tabParam && typeof switchTab === 'function') {
        switchTab(tabParam);
        setTimeout(function() {
            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
        }, 300);
    }
});
</script>
@endpush