@extends('layout.app')
@section('title', 'Driver Profile')
@push('header_script')
    <!-- Data Tables -->
    <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')}}" />
    <!-- Date Range CSS -->
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}" />
    <style>
        /* Shared Styles from the modal */
        .driver-profile-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 120px);
        }
        .driver-details-header {
            padding: 30px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
        }
        .header-content {
            display: flex;
            gap: 20px;
        }
        .driver-avatar {
            width: 80px;
            height: 80px;
            background: #6366f1;
            color: #fff;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 700;
        }
        .driver-info-main {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .driver-title-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .driver-title-row h3 {
            margin: 0;
            font-size: 24px;
            font-weight: 800;
            color: #111827;
        }
        .driver-meta {
            margin: 0;
            font-size: 14px;
            color: #6b7280;
            font-family: monospace;
        }
        .driver-tags {
            display: flex;
            gap: 15px;
            margin-top: 5px;
            font-size: 13px;
        }
        .tag-vehicle {
            color: #4f46e5;
            background: #eef2ff;
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: 600;
        }
        .tag-rating {
            color: #374151;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
        }
        .driver-tabs {
            display: flex;
            gap: 30px;
            padding: 0 30px;
            border-bottom: 1px solid #e5e7eb;
            background: #fff;
        }
        .driver-tab {
            padding: 15px 0;
            font-size: 13px;
            font-weight: 700;
            color: #6b7280;
            cursor: pointer;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.2s;
        }
        .driver-tab:hover {
            color: #111827;
        }
        .driver-tab.active {
            color: #4f46e5;
        }
        .driver-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: #4f46e5;
            border-radius: 3px 3px 0 0;
        }
        .driver-details-body {
            padding: 30px;
            background: #f9fafb;
            flex: 1;
        }
        .driver-tab-pane {
            display: none;
        }
        .driver-tab-pane.active {
            display: block;
        }
        .details-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }
        .card-title {
            margin: 0 0 20px 0;
            font-size: 16px;
            font-weight: 700;
            color: #111827;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .card-title i {
            color: #6366f1;
            font-size: 20px;
        }
        .data-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .data-item label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
        }
        .data-item .value {
            font-size: 15px;
            color: #111827;
            font-weight: 600;
        }
        .data-item .value-large {
            font-size: 20px;
            font-weight: 800;
        }
        .badge-blood {
            background: #fee2e2;
            color: #ef4444;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
        }
        .font-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }
        .value-box {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: #f9fafb;
            border: 1px solid #f3f4f6;
            border-radius: 8px;
            font-size: 14px;
            color: #374151;
            font-weight: 500;
        }
        .flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .row-flex {
            display: flex;
            gap: 20px;
        }
        .flex-1 {
            flex: 1;
        }
        .badge-tag {
            background: #e5e7eb;
            color: #4b5563;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 800;
        }
        .badge-class {
            background: #eef2ff;
            color: #4f46e5;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            border: 1px solid #c7d2fe;
        }
        .badge-warning {
            background: #fef2f2;
            color: #ef4444;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 800;
            border: 1px solid #fca5a5;
        }
        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .status-Assigned { background: #dcfce3; color: #166534; }
        .status-Unassigned { background: #fee2e2; color: #991b1b; }
        .status-On-Leave { background: #fef3c7; color: #92400e; }
        .status-Maintenance { background: #e0e7ff; color: #3730a3; }
        
        /* ID Card styles */
        .id-card {
            width: 360px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid #e5e7eb;
            transition: transform 0.2s;
        }
        .id-card:hover {
            transform: translateY(-5px);
        }
        .id-header {
            background: #111827;
            color: #fff;
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
        }
        .id-header-dark {
            background: #1f2937;
        }
        .id-header .id-title {
            color: #6366f1;
            font-weight: 800;
            letter-spacing: 1px;
        }
        .id-body {
            padding: 20px 15px;
        }
        .id-avatar {
            width: 80px;
            height: 80px;
            background: #6366f1;
            color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 700;
            margin-right: 15px;
        }
        .id-details label {
            font-size: 9px;
            color: #6b7280;
            font-weight: 800;
            margin-bottom: 2px;
            display: block;
        }
        .id-name {
            font-size: 18px;
            font-weight: 800;
            color: #111827;
        }
        .id-value {
            font-size: 13px;
            font-weight: 700;
            color: #111827;
        }
        .id-footer {
            background: #f9fafb;
            padding: 10px 15px;
            font-size: 11px;
            font-weight: 600;
            border-top: 1px solid #e5e7eb;
        }
        .id-footer-back {
            padding: 15px;
            background: #f9fafb;
            border-top: 1px solid #e5e7eb;
        }
        
        /* Metrics */
        .metric-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .metric-value {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 5px;
        }
        .metric-label {
            font-size: 12px;
            font-weight: 800;
            color: #6b7280;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .metric-sub {
            font-size: 12px;
            font-weight: 600;
            font-family: monospace;
        }
        
        /* Timeline */
        .audit-timeline {
            border-left: 3px solid #e5e7eb;
            margin-left: 20px;
            padding-left: 25px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .audit-item {
            position: relative;
            background: #fff;
            border-radius: 12px;
            padding: 16px 18px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border-left: 4px solid #4f46e5;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .audit-item:hover {
            transform: translateX(3px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .audit-item::before {
            content: '';
            position: absolute;
            left: -34px;
            top: 18px;
            width: 14px;
            height: 14px;
            background: #fff;
            border: 3px solid #4f46e5;
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
        }
        /* Per-type colors */
        .audit-item.color-green  { border-left-color: #10b981; }
        .audit-item.color-green::before  { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
        .audit-item.color-blue   { border-left-color: #3b82f6; }
        .audit-item.color-blue::before   { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
        .audit-item.color-amber  { border-left-color: #f59e0b; }
        .audit-item.color-amber::before  { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
        .audit-item.color-rose   { border-left-color: #f43f5e; }
        .audit-item.color-rose::before   { border-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,0.15); }
        .audit-item.color-teal   { border-left-color: #14b8a6; }
        .audit-item.color-teal::before   { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,0.15); }
        .audit-item.color-purple { border-left-color: #8b5cf6; }
        .audit-item.color-purple::before { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
        .audit-item.color-orange { border-left-color: #f97316; }
        .audit-item.color-orange::before { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.15); }
        .audit-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
            gap: 10px;
        }
        .audit-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .audit-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
        }
        .audit-title {
            font-weight: 800;
            font-size: 14px;
            color: #111827;
        }
        .audit-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .audit-date {
            font-size: 11px;
            color: #6b7280;
            font-family: monospace;
            font-weight: 600;
            white-space: nowrap;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .audit-desc {
            font-size: 13px;
            color: #4b5563;
            font-weight: 500;
            margin-top: 4px;
        }
        
        .mt-20 { margin-top: 20px; }
        .mb-20 { margin-bottom: 20px; }
        .mt-10 { margin-top: 10px; }
        .mb-15 { margin-bottom: 15px; }
        .mt-5 { margin-top: 5px; }
        .mb-5 { margin-bottom: 5px; }
        .p-10 { padding: 10px; }
        .p-15 { padding: 15px; }
        .text-center { text-align: center; }
        .text-right { text-align: right; }
        .text-muted { color: #6b7280; }
        .text-primary { color: #4f46e5; }
        .text-success { color: #10b981; }
        .text-danger { color: #ef4444; }
        .text-warning { color: #f59e0b; }
        .text-dark { color: #111827; }
        .bg-primary { background: #4f46e5; }
        .bg-success { background: #10b981; }
        .font-weight-600 { font-weight: 600; }
        
        .btn-submit {
            padding: 8px 16px;
            background: #4f46e5;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            transition: background 0.2s;
        }
        .btn-submit:hover {
            background: #4338ca;
        }
        @media (max-width: 768px) {
            .driver-details-header { flex-direction: column; gap: 20px; align-items: center; text-align: center; }
            .header-content { flex-direction: column; align-items: center; }
            .driver-tabs { flex-direction: row; gap: 15px; padding: 15px; overflow-x: auto; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
            .driver-tabs::-webkit-scrollbar { display: none; }
            .driver-tab { flex-shrink: 0; white-space: nowrap; }
            .row-flex { flex-direction: column; }
            .id-card-container { flex-direction: column; align-items: center; }
            .id-card { width: 100%; max-width: 360px; }
            .header-actions { align-items: center; width: 100%; }
            .header-actions .btn-submit { width: 100%; }
            .table-responsive { overflow-x: auto; }
            table { min-width: 600px; }
        }
    </style>
@endpush

@section('content')
<div class="driver-profile-container">
    <div class="driver-details-header">
        <div class="header-content">
            <div class="driver-avatar" id="dd-avatar">...</div>
            <div class="driver-info-main">
                <div class="driver-title-row">
                    <h3 id="dd-name">Loading...</h3>
                    <span class="status-badge status-unassigned" id="dd-status">Loading</span>
                </div>
                <!-- <p class="driver-meta">Driver UID: <span id="dd-uid">...</span> &bull; Joined <span id="dd-joined">...</span></p> -->
                <div class="driver-tags">
                    <span class="tag-vehicle"><i class="ri-truck-line"></i> Assigned Vehicle: <strong id="dd-vehicle">...</strong></span>
                </div>
            </div>
        </div>
        <div class="header-actions">
            <!-- Buttons removed as per request -->
            <button class="btn-submit" onclick="window.history.back()"><i class="ri-arrow-left-line"></i> Back to Directory</button>
        </div>
    </div>

    <div class="driver-tabs">
        <div class="driver-tab active" onclick="switchDriverTab(event, 'tab-bio')">BIO & CREDENTIALS</div>
        <div class="driver-tab" onclick="switchDriverTab(event, 'tab-idcard')">ID CARD</div>
        <div class="driver-tab" onclick="switchDriverTab(event, 'tab-performance')">PERFORMANCE METRICS</div>
        <div class="driver-tab" onclick="switchDriverTab(event, 'tab-trips')">TRIP LEDGER</div>
        <div class="driver-tab" onclick="switchDriverTab(event, 'tab-driver-ledger')">DRIVER LEDGER</div>
        <div class="driver-tab" onclick="switchDriverTab(event, 'tab-audit')">AUDIT HISTORY</div>
    </div>

    <div class="driver-details-body">
        <!-- TAB: BIO -->
        <div id="tab-bio" class="driver-tab-pane active">
            <div class="row-flex" style="align-items: stretch;">
                <div class="details-card flex-1">
                    <h4 class="card-title"><i class="ri-user-line"></i> Personal Particulars & Records</h4>
                    <div class="data-grid">
                        <div class="data-item">
                            <label>FATHER'S NAME</label>
                            <div class="value" id="dd-father-name">...</div>
                        </div>
                        <div class="data-item">
                            <label>DATE OF BIRTH</label>
                            <div class="value" id="dd-dob">...</div>
                        </div>
                        <div class="data-item">
                            <label>BLOOD GROUP</label>
                            <div class="value"><span class="badge-blood" id="dd-blood">...</span></div>
                        </div>
                        <div class="data-item" style="grid-column: span 2;"></div>
                        <div class="data-item">
                            <label>AADHAAR (ID)</label>
                            <div class="value font-mono" id="dd-aadhaar">...</div>
                        </div>
                        <div class="data-item">
                            <label>PAN CARD</label>
                            <div class="value font-mono" id="dd-pan">...</div>
                        </div>
                        <div class="data-item">
                            <label>MOBILE NUMBER</label>
                            <div class="value"><i class="ri-phone-line text-muted"></i> <span id="dd-mobile">...</span></div>
                        </div>
                        <div class="data-item" style="grid-column: span 2;">
                            <label>EMERGENCY CONTACT</label>
                            <div class="value-box">
                                <span id="dd-emergency">...</span>
                                <span class="badge-tag">PRIMARY KIN</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="details-card flex-1">
                    <h4 class="card-title"><i class="ri-award-line"></i> License & Professional Credentials</h4>
                    <div class="data-grid">
                        <div class="data-item">
                            <label>LICENSE NUMBER</label>
                            <div class="value font-mono" id="dd-license">...</div>
                        </div>
                        <div class="data-item">
                            <label>DRIVING EXPERIENCE</label>
                            <div class="value" id="dd-experience">...</div>
                        </div>
                        <div class="data-item" style="grid-column: span 2;">
                            <label>CLASSES AUTHORIZED TO DRIVE</label>
                            <div class="value" id="dd-classes">
                                <!-- Populated by JS -->
                            </div>
                        </div>
                        <div class="data-item" style="grid-column: span 2;">
                            <label>LICENSE VALIDITY DATE</label>
                            <div class="value-box flex-between">
                                <span id="dd-license-validity" class="font-mono">...</span>
                                <span class="badge-warning" id="dd-license-status">STATUS</span>
                            </div>
                        </div>
                        <div class="data-item">
                            <label>BASE MONTHLY SALARY</label>
                            <div class="value value-large">₹<span id="dd-salary">...</span></div>
                        </div>
                        <!-- <div class="data-item">
                            <label class="text-right">CONTRACT TENURE</label>
                            <div class="value text-right" style="margin-top: 4px;">Active (<span id="dd-tenure-days">...</span> days enrolled)</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: ID CARD -->
        <div id="tab-idcard" class="driver-tab-pane">
            <div class="flex-between mb-20">
                <h4 class="card-title m-0"><i class="ri-profile-line"></i> Official Driver Identification Card</h4>
            </div>
            
            <div class="id-card-container row-flex" style="justify-content: center; gap: 40px; margin-top: 40px;">
                <!-- Front Card -->
                <div class="id-card id-front">
                    <div class="id-header">
                        <div><i class="ri-truck-line"></i> LogiTrack Fleet Services</div>
                        <div class="id-title">DRIVER ID</div>
                    </div>
                    <div class="id-body row-flex">
                        <div class="id-avatar" id="dd-id-avatar">...</div>
                        <div class="id-details flex-1">
                            <label>FULL NAME</label>
                            <div class="id-name" id="dd-id-name">...</div>
                            <div class="row-flex" style="gap: 10px; margin-top: 10px;">
                                <div class="flex-1">
                                    <label>DRIVER ID</label>
                                    <div class="id-value text-primary font-mono" id="dd-id-uid">...</div>
                                </div>
                                <div class="flex-1">
                                    <label>BLOOD GROUP</label>
                                    <div class="id-value text-danger font-mono" id="dd-id-blood">...</div>
                                </div>
                            </div>
                            <div class="row-flex" style="gap: 10px; margin-top: 10px;">
                                <div class="flex-1">
                                    <label>LICENSE NO.</label>
                                    <div class="id-value font-mono" id="dd-id-license">...</div>
                                </div>
                                <div class="flex-1">
                                    <label>VALID THRU</label>
                                    <div class="id-value font-mono" id="dd-id-validity">...</div>
                                </div>
                            </div>
                            <div class="id-classes mt-10" id="dd-id-classes">
                                <!-- Populated by JS -->
                            </div>
                        </div>
                    </div>
                    <div class="id-footer flex-between">
                        <span class="text-muted">Issued <span id="dd-id-issued">...</span></span>
                        <span><i class="ri-phone-line"></i> <span id="dd-id-mobile">...</span></span>
                    </div>
                </div>

                <!-- Back Card -->
                <div class="id-card id-back">
                    <div class="id-header id-header-dark">
                        <div>Emergency & Address Details</div>
                        <div><i class="ri-qr-code-line"></i></div>
                    </div>
                    <div class="id-body" style="padding: 15px;">
                        <label>RESIDENTIAL ADDRESS</label>
                        <div class="id-value mb-15"><i class="ri-map-pin-line text-muted"></i> <span id="dd-id-address">...</span></div>
                        
                        <div class="row-flex mb-15">
                            <div class="flex-1">
                                <label>EMERGENCY CONTACT</label>
                                <div class="id-value" id="dd-id-emergency">...</div>
                            </div>
                            <div class="flex-1">
                                <label>AADHAAR (ID)</label>
                                <div class="id-value font-mono" id="dd-id-aadhaar">...</div>
                            </div>
                        </div>

                        <p class="id-disclaimer text-muted" style="font-size: 8px;">This card is the property of LogiTrack Fleet Services. If found, please return to the nearest depot or contact HR at the number above.</p>
                    </div>
                    <div class="id-footer-back flex-between">
                        <div class="barcode" style="font-family: 'Libre Barcode 39', monospace; font-size: 24px; line-height: 1; letter-spacing: 2px;">|||| | | ||| || ||| || ||</div>
                        <div class="text-right font-mono text-muted" id="dd-id-uid-back">...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: PERFORMANCE -->
        <div id="tab-performance" class="driver-tab-pane">

            <!-- Filters -->
            <div class="row mb-4 align-items-end" style="background: #f9fafb; padding: 15px; border-radius: 8px; border: 1px solid #e5e7eb;">
                <div class="col-sm-2">
                    <label class="form-label" style="font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Period</label>
                    <select id="perf-period-filter" class="form-select" onchange="setDateRange(this.value)">
                        <option value="all">All</option>
                        <option value="today">Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="last_7">Last 7 Days</option>
                        <option value="last_30">Last 30 Days</option>
                        <option value="this_month">This Month</option>
                        <option value="last_month">Last Month</option>
                        <option value="custom">Custom Range</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <label class="form-label" style="font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase;">From Date</label>
                    <input type="text" id="perf-from-date" class="form-control datepicker" value="01-04-{{ date('Y') }}">
                </div>
                <div class="col-sm-2">
                    <label class="form-label" style="font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase;">To Date</label>
                    <input type="text" id="perf-to-date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
                </div>
                <div class="col-sm-3">
                    <label class="form-label" style="font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Filter by Vehicle No.</label>
                    {!! Form::select('vehicle_id', ['' => '--Select--'] + $vehicles, null, [
                        'class' => 'form-select select2',
                        'id' => 'perf-truck-filter'
                    ]) !!}
                </div>
                <div class="col-sm-3">
                    <label class="form-label" style="font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Trip Number</label>
                    <input type="text" id="perf-trip-filter" class="form-control" placeholder="Enter Trip No">
                </div>
            </div>

            <div class="row-flex mb-20" style="gap: 20px;">
                <div class="metric-card flex-1 text-center">
                    <div class="metric-value text-dark" id="dd-perf-trips">...</div>
                    <div class="metric-label">COMPLETED TRIPS</div>
                    <div class="metric-sub text-muted">Total <span id="dd-perf-km">...</span> KM</div>
                </div>
                <div class="metric-card flex-1 text-center">
                    <div class="metric-value text-primary">₹<span id="dd-perf-revenue">...</span></div>
                    <div class="metric-label text-primary">GROSS REVENUE</div>
                    <div class="metric-sub text-primary">Avg/Mo: ₹<span id="dd-perf-avg-rev">...</span></div>
                </div>
                <div class="metric-card flex-1 text-center" style="border-color: #a7f3d0; background: #f0fdf4;">
                    <div class="metric-value text-success">₹<span id="dd-perf-profit">...</span></div>
                    <div class="metric-label text-success">NET PROFIT MARGIN</div>
                    <div class="metric-sub text-success">Ratio: <span id="dd-perf-ratio">...</span>%</div>
                </div>
                <div class="metric-card flex-1 text-center" style="border-color: #fca5a5; background: #fef2f2; cursor: pointer;" onclick="openAccidentModal()">
                    <div class="metric-value text-danger" id="dd-perf-accidents">...</div>
                    <div class="metric-label text-danger">ACCIDENTAL RECORDS</div>
                    <div class="metric-sub text-danger">Click for details</div>
                </div>
            </div>

            <div class="row-flex" style="gap: 20px; align-items: stretch;">
                <div class="details-card flex-1">
                    <h4 class="card-title"><i class="ri-calendar-line"></i> Tenure & Attendance Log</h4>
                    <div class="row-flex text-center mb-20" style="gap: 10px;">
                        <div class="metric-card flex-1 p-10" style="border-color: #a7f3d0; padding: 15px;">
                            <div class="metric-value text-success" id="dd-att-worked" style="font-size: 24px;">...</div>
                            <div class="metric-label text-success">DAYS WORKED</div>
                        </div>
                        <div class="metric-card flex-1 p-10" style="border-color: #c7d2fe; padding: 15px;">
                            <div class="metric-value text-primary" id="dd-att-leave" style="font-size: 24px;">...</div>
                            <div class="metric-label text-primary">DAYS LEAVE</div>
                        </div>
                        <div class="metric-card flex-1 p-10" style="border-color: #fde68a; padding: 15px;">
                            <div class="metric-value text-warning" id="dd-att-unassigned" style="font-size: 24px;">...</div>
                            <div class="metric-label text-warning">UNASSIGNED</div>
                        </div>
                    </div>
                    <p class="text-center text-muted font-mono" style="font-size: 12px;">Total Lifetime Tenure: <span id="dd-att-total">...</span> days in system.</p>
                </div>

                <div class="details-card flex-1">
                    <h4 class="card-title"><i class="ri-timer-line"></i> Trip Efficiency & Averages</h4>
                    
                    <div class="mb-15 mt-20">
                        <div class="flex-between mb-5">
                            <div>
                                <div class="font-weight-600 text-dark" style="font-size: 14px;">Average Profit Per Trip</div>
                                <div class="text-muted" style="font-size: 12px;">Net Profit / Completed Shipments</div>
                            </div>
                            <div class="font-weight-600 text-dark" style="font-size: 16px;">₹<span id="dd-eff-profit">...</span></div>
                        </div>
                        <div class="progress-bar-container" style="background: #e5e7eb; height: 8px; border-radius: 4px; overflow: hidden;">
                            <div class="progress-bar bg-primary" style="width: 80%; background: #4f46e5; height: 100%;"></div>
                        </div>
                    </div>

                    <div class="mt-20">
                        <div class="flex-between mb-5">
                            <div>
                                <div class="font-weight-600 text-dark" style="font-size: 14px;">Average Distance Per Trip</div>
                                <div class="text-muted" style="font-size: 12px;">Total Mileage / Completed Shipments</div>
                            </div>
                            <div class="font-weight-600 text-dark" style="font-size: 16px;"><span id="dd-eff-dist">...</span> KM</div>
                        </div>
                        <div class="progress-bar-container" style="background: #e5e7eb; height: 8px; border-radius: 4px; overflow: hidden;">
                            <div class="progress-bar bg-success" style="width: 60%; background: #10b981; height: 100%;"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- TAB: TRIPS -->
        <div id="tab-trips" class="driver-tab-pane">
            <h4 class="card-title"><i class="ri-file-list-line"></i> Individual Shipment & Trip Ledger</h4>
            <div class="table-responsive" style="border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden;">
                <table class="table mb-0" style="font-size: 13px; width: 100%; border-collapse: collapse;">
                    <thead style="background: #f9fafb;">
                        <tr>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">TRIP ID / TYPE</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">ROUTE INFO</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">VEHICLE NO</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">DISTANCE</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">DIESEL LTR</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">MILEAGE</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">FREIGHT</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">EXPENSES</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">NET MARGIN</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">DISPATCH DATE</th>
                        </tr>
                    </thead>
                    <tbody id="dd-trips-body">
                        <!-- Populated via JS -->
                    </tbody>
                </table>
            </div>
            <div class="summary-aggregates mt-20 p-15 flex-between" style="background: #f0fdf4; border: 1px solid #dcfce3; border-radius: 8px; padding: 20px; margin-top: 20px;">
                <div class="font-weight-600 text-muted" style="font-weight: 600;">Summary Aggregates</div>
                <div class="font-weight-600 text-dark font-mono" style="font-weight: 700; font-size: 16px;">
                    Distance: <span id="dd-trips-tot-km">...</span> KM &nbsp;|&nbsp;
                    Total Diesel: <span id="dd-trips-tot-diesel">...</span> Ltr &nbsp;|&nbsp;
                    Avg Mileage: <span id="dd-trips-avg-mileage">...</span> &nbsp;|&nbsp;
                    Profit: <span class="text-success" style="color: #10b981;">₹<span id="dd-trips-tot-profit">...</span></span>
                </div>
            </div>
        </div>

        <!-- TAB: DRIVER LEDGER -->
        <div id="tab-driver-ledger" class="driver-tab-pane">
            <div class="flex-between mb-20" style="margin-bottom: 25px;">
                <h4 class="card-title m-0"><i class="ri-wallet-3-line"></i> Driver Ledger</h4>
            </div>

            <!-- Add Ledger Entry Form -->
            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 20px;">
                <h5 style="margin-top: 0; margin-bottom: 15px; font-size: 14px; font-weight: 700; color: #374151;">Add Ledger Entry</h5>
                <form id="add-ledger-form" class="row-flex" style="gap: 15px; align-items: flex-end;" onsubmit="saveDriverLedger(event)">
                    <div class="flex-1">
                        <label style="font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 5px; display: block;">Date *</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                            <input type="text" id="ledger_date" class="form-control datepicker" required value="{{ date('d-m-Y') }}" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 0 4px 4px 0; width: calc(100% - 40px);">
                        </div>
                    </div>
                    <div class="flex-1">
                        <label style="font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 5px; display: block;">Particulars *</label>
                        <select id="ledger_particulars" class="form-control" required style="padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; width: 100%;">
                            <option value="">-- Select --</option>
                            <option value="Driver Salary">Driver Salary</option>
                            <option value="Advance">Advance</option>
                            <option value="Trip Expenses">Trip Expenses</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="flex-1">
                        <label style="font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 5px; display: block;">Amount Paid (Dr)</label>
                        <input type="number" step="0.01" id="ledger_amount_paid" class="form-control" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; width: 100%;" value="0">
                    </div>
                    <div class="flex-1">
                        <label style="font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 5px; display: block;">Amount Received (Cr)</label>
                        <input type="number" step="0.01" id="ledger_amount_received" class="form-control" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; width: 100%;" value="0">
                    </div>
                    <div class="flex-1">
                        <label style="font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 5px; display: block;">Remark</label>
                        <input type="text" id="ledger_remark" class="form-control" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; width: 100%;">
                    </div>
                    <div>
                        <button type="submit" class="btn-submit" id="ledger_save_btn"><i class="ri-save-line"></i> Save Entry</button>
                    </div>
                </form>
            </div>

            <div class="table-responsive" style="border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden;">
                <table class="table mb-0" style="font-size: 13px; width: 100%; border-collapse: collapse;">
                    <thead style="background: #f9fafb;">
                        <tr>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">S. NO</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">DATE</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">PARTICULARS</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: right;">AMOUNT PAID</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: right;">AMOUNT RECEIVED</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">REMARK</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: center;">ACTION</th>
                        </tr>
                    </thead>
                    <tbody id="dd-ledger-body">
                        <!-- Populated via JS -->
                    </tbody>
                </table>
            </div>
            <div class="summary-aggregates mt-20 p-15 flex-between" style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 20px; margin-top: 20px;">
                <div class="font-weight-600 text-muted" style="font-weight: 600;">Summary Aggregates</div>
                <div class="font-weight-600 text-dark font-mono" style="font-weight: 700; font-size: 16px;">
                    Total Paid: <span class="text-primary" style="color: #4f46e5;">₹<span id="dd-ledger-tot-paid">...</span></span> &nbsp;|&nbsp;
                    Total Received: <span class="text-success" style="color: #10b981;">₹<span id="dd-ledger-tot-received">...</span></span> &nbsp;|&nbsp;
                    Net Balance: <span id="dd-ledger-net-balance">...</span>
                </div>
            </div>
        </div>

        <!-- TAB: AUDIT -->
        <div id="tab-audit" class="driver-tab-pane">
            <div class="flex-between mb-20" style="margin-bottom: 25px;">
                <div>
                    <h4 class="card-title m-0" style="margin: 0;">Activity History & Audit Trail</h4>
                    <p class="text-muted m-0 mt-5" style="font-size: 13px; margin: 5px 0 0 0;">Every change made to this driver is permanently logged here.</p>
                </div>
                <div class="badge-pill" style="background: #f3f4f6; color: #4b5563; font-size: 12px; padding: 6px 12px; border-radius: 16px; font-weight: 600;"><span id="dd-audit-count">...</span> records</div>
            </div>

            <div class="audit-timeline" id="dd-audit-body">
                <!-- Populated via JS -->
            </div>
        </div>

    </div>
</div>

<!-- Accident Records Modal -->
<div class="custom-modal-overlay" id="accidentModalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div class="custom-modal" style="background: #fff; width: 800px; max-width: 90%; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);">
        <div class="custom-modal-header" style="background: #f9fafb; padding: 20px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <h3 style="margin: 0; color: #111827; font-size: 18px;">Accidental Records</h3>
                <p style="margin: 5px 0 0 0; color: #6b7280; font-size: 13px;">History of accidents involving this driver</p>
            </div>
            <i class="ri-close-line" style="font-size: 24px; cursor: pointer; color: #6b7280;" onclick="$('#accidentModalOverlay').hide()"></i>
        </div>
        <div class="custom-modal-body" style="padding: 20px;">
            <div class="table-responsive">
                <table class="table" style="width: 100%; text-align: left; border-collapse: collapse; font-size: 13px;">
                    <thead style="background: #f3f4f6;">
                        <tr>
                            <th style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Date & Time</th>
                            <th style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Vehicle</th>
                            <th style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Location</th>
                            <th style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Type</th>
                            <th style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Status</th>
                        </tr>
                    </thead>
                    <tbody id="accident-tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@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>
    function switchDriverTab(e, tabId) {
        $('.driver-tab').removeClass('active');
        $(e.currentTarget).addClass('active');
        $('.driver-tab-pane').removeClass('active');
        $('#' + tabId).addClass('active');
    }

    function fetchDriverData() {
        let driverId = {{ $driver->id }};
        let df = $('#perf-from-date').val() + ' - ' + $('#perf-to-date').val();
        let tf = $('#perf-truck-filter').val() || '';
        let trf = $('#perf-trip-filter').val() || '';
        let qs = `?date_filter=${encodeURIComponent(df)}&truck_number=${encodeURIComponent(tf)}&trip_number=${encodeURIComponent(trf)}`;
        
        // Fetch data
        $.ajax({
            url: `/employee/driver-details/${driverId}${qs}`,
            type: 'GET',
            success: function(res) {
                if(!res.driver) return;
                let d = res.driver;
                let m = res.metrics;
                let a = res.attendance;
                let v = res.vehicle;

                // Populate Bio & Header
                let initials = d.employee_name ? d.employee_name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase() : 'DR';
                $('#dd-avatar, #dd-id-avatar').text(initials);
                $('#dd-name, #dd-id-name').text(d.employee_name || 'N/A');
                $('#dd-uid, #dd-id-uid, #dd-id-uid-back').text(d.emp_code || 'DRV001');
                $('#dd-joined, #dd-id-issued').text(d.joining_date ? new Date(d.joining_date).toISOString().split('T')[0] : 'N/A');
                
                let status = d.driver_status || 'Unassigned';
                $('#dd-status').text(status).attr('class', 'status-badge status-' + status.replace(/\s+/g, '-'));
                $('#dd-vehicle').text(v ? v.vehicle_no : 'None');
                
                $('#dd-father-name').text(d.father_name || 'N/A');
                $('#dd-dob').text(d.dob ? new Date(d.dob).toISOString().split('T')[0] : 'N/A');
                $('#dd-blood, #dd-id-blood').html(`<i class="ri-drop-fill"></i> ${d.blood_group || 'Unknown'}`);
                $('#dd-aadhaar, #dd-id-aadhaar').text(d.aadhaar_card_no || 'N/A');
                $('#dd-pan').text(d.pan_card_no || 'N/A');
                $('#dd-mobile, #dd-id-mobile').text(d.mobile_no || 'N/A');
                $('#dd-emergency, #dd-id-emergency').text(d.emergency_contact || 'N/A');
                $('#dd-id-address').text(d.address || 'N/A');

                $('#dd-license, #dd-id-license').text(d.driving_licence_no || 'N/A');
                $('#dd-experience').text((d.experience_years || 0) + ' Years');
                $('#dd-license-validity, #dd-id-validity').text(d.driving_licence_valid_upto ? new Date(d.driving_licence_valid_upto).toISOString().split('T')[0] : 'N/A');
                $('#dd-salary').text((d.salary || 0).toLocaleString());
                
                let classesHtml = '';
                if(d.license_class) {
                    d.license_class.split(',').forEach(c => {
                        classesHtml += `<span class="badge-class">${c.trim()}</span> `;
                    });
                } else {
                    classesHtml = '<span class="badge-class">LMV</span>';
                }
                $('#dd-classes, #dd-id-classes').html(classesHtml);

                $('#dd-perf-trips').text(m.completed_trips);
                $('#dd-perf-km').text(m.total_km.toLocaleString());
                $('#dd-perf-revenue').text(m.gross_revenue.toLocaleString());
                $('#dd-perf-profit').text(m.net_profit.toLocaleString());
                $('#dd-perf-avg-rev').text(m.avg_profit_per_trip.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#dd-perf-ratio').text(m.net_profit_margin.toFixed(1));
                $('#dd-perf-accidents').text(m.accident_count || 0);

                // Store accidents globally for modal
                window.driverAccidents = res.accidents || [];

                $('#dd-att-worked').text(a.days_worked);
                $('#dd-att-leave').text(a.days_leave);
                $('#dd-att-unassigned').text(a.days_unassigned);
                $('#dd-att-total, #dd-tenure-days').text(a.total_tenure);
                
                $('#dd-eff-profit').text(m.avg_profit_per_trip.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#dd-eff-dist').text(m.avg_distance_per_trip.toFixed(1));

                // Trips
                let tbody = '';
                let totDiesel = 0;
                if(res.trip_ledger && res.trip_ledger.length > 0) {
                    res.trip_ledger.forEach(t => {
                        let diesel = parseFloat(t.diesel_ltr) || 0;
                        totDiesel += diesel;
                        tbody += `<tr>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;"><strong>${t.trip_sheet_no || 'N/A'}</strong><br><span class="text-muted" style="font-size:10px;">${t.gr_type || 'TRIP'}</span></td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${t.from_location || '-'} &rarr; ${t.to_location || '-'}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;"><strong>${t.vehicle_no || (v ? v.vehicle_no : '-')}</strong></td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${t.total_km || 0} KM</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${t.diesel_ltr || 0} Ltr</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${t.mileage || 0}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">₹${(t.freight_amount || 0).toLocaleString()}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">₹${(t.total_expense || 0).toLocaleString()}</td>
                            <td class="text-success font-weight-600" style="padding: 15px; border-bottom: 1px solid #e5e7eb;">₹${(t.profit_loss || 0).toLocaleString()}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${t.date ? new Date(t.date).toISOString().split('T')[0] : '-'}</td>
                        </tr>`;
                    });
                } else {
                    tbody = '<tr><td colspan="10" class="text-center text-muted" style="padding: 20px;">No trips recorded.</td></tr>';
                }
                $('#dd-trips-body').html(tbody);
                $('#dd-trips-tot-km').text(m.total_km.toLocaleString());
                $('#dd-trips-tot-profit').text(m.net_profit.toLocaleString());
                $('#dd-trips-tot-diesel').text(totDiesel.toLocaleString());
                let avgMileage = (totDiesel > 0 && m.total_km > 0) ? (m.total_km / totDiesel).toFixed(2) : 0;
                $('#dd-trips-avg-mileage').text(avgMileage);

                // Audit History
                let ahBody = '';

                // Color/icon mapping per event type keyword
                function getAuditStyle(eventType) {
                    let t = (eventType || '').toLowerCase();
                    if (t.includes('join') || t.includes('creat') || t.includes('add'))    return { color: 'color-green',  icon: '&#xe958;',  bg: 'rgba(16,185,129,0.1)',  text: '#065f46',  label: 'Created',  labelBg: 'rgba(16,185,129,0.12)' };
                    if (t.includes('assign') || t.includes('vehicle'))                      return { color: 'color-blue',   icon: '&#xef0a;',  bg: 'rgba(59,130,246,0.1)',  text: '#1d4ed8',  label: 'Assigned', labelBg: 'rgba(59,130,246,0.12)' };
                    if (t.includes('unassign') || t.includes('remove'))                    return { color: 'color-amber',  icon: '&#xed3c;',  bg: 'rgba(245,158,11,0.1)',  text: '#92400e',  label: 'Unassigned', labelBg: 'rgba(245,158,11,0.12)' };
                    if (t.includes('leave') || t.includes('absent'))                       return { color: 'color-rose',   icon: '&#xec75;',  bg: 'rgba(244,63,94,0.1)',   text: '#9f1239',  label: 'Leave',    labelBg: 'rgba(244,63,94,0.12)'  };
                    if (t.includes('update') || t.includes('edit') || t.includes('modif')) return { color: 'color-teal',   icon: '&#xee30;',  bg: 'rgba(20,184,166,0.1)',  text: '#0f766e',  label: 'Updated',  labelBg: 'rgba(20,184,166,0.12)' };
                    if (t.includes('trip') || t.includes('voyage'))                        return { color: 'color-purple', icon: '&#xf130;',  bg: 'rgba(139,92,246,0.1)',  text: '#5b21b6',  label: 'Trip',     labelBg: 'rgba(139,92,246,0.12)' };
                    if (t.includes('salary') || t.includes('pay'))                         return { color: 'color-orange', icon: '&#xed28;',  bg: 'rgba(249,115,22,0.1)',  text: '#9a3412',  label: 'Salary',   labelBg: 'rgba(249,115,22,0.12)' };
                    return { color: '',             icon: '&#xef3f;',  bg: 'rgba(99,102,241,0.1)', text: '#3730a3',  label: 'Event',    labelBg: 'rgba(99,102,241,0.12)' };
                }

                if(res.audit_history && res.audit_history.length > 0) {
                    res.audit_history.forEach(h => {
                        let s = getAuditStyle(h.event_type);
                        ahBody += `
                        <div class="audit-item ${s.color}">
                            <div class="audit-header">
                                <div class="audit-title-wrap">
                                    <div class="audit-icon" style="background:${s.bg}; color:${s.text};">${s.icon}</div>
                                    <div>
                                        <div class="audit-title">${h.event_type} <span class="audit-badge" style="background:${s.labelBg}; color:${s.text};">${s.label}</span></div>
                                    </div>
                                </div>
                                <div class="audit-date">
                                    <span><i class="ri-calendar-line"></i> ${h.event_date}</span>
                                    <span style="background:#f3f4f6; padding:2px 7px; border-radius:6px;"><i class="ri-time-line"></i> ${h.event_time}</span>
                                </div>
                            </div>
                            <div class="audit-desc">${h.remarks || ''}</div>
                            ${h.truck_no ? `<div class="audit-desc" style="margin-top:5px;"><i class="ri-truck-line" style="color:#9ca3af;"></i> <strong>${h.truck_no}</strong></div>` : ''}
                        </div>`;
                    });
                    $('#dd-audit-count').text(res.audit_history.length);
                } else {
                    ahBody = '<div class="text-muted text-center p-20">No audit history found.</div>';
                    $('#dd-audit-count').text('0');
                }
                $('#dd-audit-body').html(ahBody);
                
                // Driver Ledger
                let ledgerBody = '';
                let totPaid = 0;
                let totReceived = 0;
                if(res.driver_ledger && res.driver_ledger.length > 0) {
                    res.driver_ledger.forEach((l, idx) => {
                        let paid = parseFloat(l.amount_paid) || 0;
                        let rec = parseFloat(l.amount_received) || 0;
                        totPaid += paid;
                        totReceived += rec;
                        ledgerBody += `<tr>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${idx + 1}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${l.date ? new Date(l.date).toISOString().split('T')[0] : '-'}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;"><strong>${l.particulars || '-'}</strong></td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: right; color: #ef4444;">₹${paid.toLocaleString()}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: right; color: #10b981;">₹${rec.toLocaleString()}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${l.remark || '-'}</td>
                            <td style="padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: center;">-</td>
                        </tr>`;
                    });
                } else {
                    ledgerBody = '<tr><td colspan="7" class="text-center text-muted" style="padding: 30px;">No driver ledger records found.</td></tr>';
                }
                $('#dd-ledger-body').html(ledgerBody);
                $('#dd-ledger-tot-paid').text(totPaid.toLocaleString());
                $('#dd-ledger-tot-received').text(totReceived.toLocaleString());
                
                let netBal = totReceived - totPaid;
                let balText = (netBal >= 0) ? `<span class="text-success">₹${netBal.toLocaleString()} (Cr)</span>` : `<span class="text-danger">₹${Math.abs(netBal).toLocaleString()} (Dr)</span>`;
                $('#dd-ledger-net-balance').html(balText);

            }
        });
    }

    function saveDriverLedger(e) {
        e.preventDefault();
        let btn = $('#ledger_save_btn');
        btn.prop('disabled', true).html('<i class="ri-loader-line"></i> Saving...');
        
        $.ajax({
            url: '/employee/driver-ledger',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                employee_id: {{ $driver->id }},
                date: moment($('#ledger_date').val(), 'DD-MM-YYYY').format('YYYY-MM-DD'),
                particulars: $('#ledger_particulars').val(),
                amount_paid: $('#ledger_amount_paid').val() || 0,
                amount_received: $('#ledger_amount_received').val() || 0,
                remark: $('#ledger_remark').val()
            },
            success: function(res) {
                if (res.success) {
                    $('#add-ledger-form')[0].reset();
                    fetchDriverData(); // Refresh the tab
                    alert('Ledger entry added successfully!');
                }
            },
            error: function(err) {
                alert('Error saving ledger entry. Please try again.');
                console.error(err);
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ri-save-line"></i> Save Entry');
            }
        });
    }

    function openAccidentModal() {
        let tbody = '';
        if (window.driverAccidents && window.driverAccidents.length > 0) {
            window.driverAccidents.forEach(a => {
                let dt = a.accident_datetime ? new Date(a.accident_datetime).toLocaleString() : '-';
                tbody += `<tr>
                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">${dt}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">${a.vehicle_id || '-'}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">${a.location || '-'}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">${a.accident_type || '-'}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">${a.claim_status || '-'}</td>
                </tr>`;
            });
        } else {
            tbody = '<tr><td colspan="5" style="padding: 20px; text-align: center; color: #6b7280;">No accidents recorded.</td></tr>';
        }
        $('#accident-tbody').html(tbody);
        $('#accidentModalOverlay').css('display', 'flex');
    }

    $(document).ready(function() {
        $('#accidentModalOverlay').hide();
        fetchDriverData();

        // Initialize datepicker for ledger and performance filters
        if ($('.datepicker').length) {
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                locale: { format: 'DD-MM-YYYY' }
            });
        }

        // Auto apply filters on datepicker change
        $('#perf-from-date, #perf-to-date').on('apply.daterangepicker change', function() {
            fetchDriverData();
        });

        // Auto apply filter on vehicle select change
        $('#perf-truck-filter').on('change', function() {
            fetchDriverData();
        });

        // Auto apply filter on trip number typing
        let tripSearchTimer;
        $('#perf-trip-filter').on('keyup change', function() {
            clearTimeout(tripSearchTimer);
            tripSearchTimer = setTimeout(function() {
                fetchDriverData();
            }, 300);
        });
    });

    function setDateRange(period) {
        let fromDate = '';
        let toDate = moment().format('DD-MM-YYYY');
        
        switch(period) {
            case 'today':
                fromDate = moment().format('DD-MM-YYYY');
                break;
            case 'yesterday':
                fromDate = moment().subtract(1, 'days').format('DD-MM-YYYY');
                toDate = moment().subtract(1, 'days').format('DD-MM-YYYY');
                break;
            case 'last_7':
                fromDate = moment().subtract(6, 'days').format('DD-MM-YYYY');
                break;
            case 'last_30':
                fromDate = moment().subtract(29, 'days').format('DD-MM-YYYY');
                break;
            case 'this_month':
                fromDate = moment().startOf('month').format('DD-MM-YYYY');
                break;
            case 'last_month':
                fromDate = moment().subtract(1, 'month').startOf('month').format('DD-MM-YYYY');
                toDate = moment().subtract(1, 'month').endOf('month').format('DD-MM-YYYY');
                break;
            case 'all':
                fromDate = '01-04-{{ date("Y") }}'; // Default financial year start or similar
                break;
            default:
                // custom range, do nothing
                return;
        }

        if (period !== 'custom') {
            if ($('#perf-from-date').data('daterangepicker')) {
                $('#perf-from-date').data('daterangepicker').setStartDate(fromDate);
                $('#perf-from-date').data('daterangepicker').setEndDate(fromDate);
            }
            if ($('#perf-to-date').data('daterangepicker')) {
                $('#perf-to-date').data('daterangepicker').setStartDate(toDate);
                $('#perf-to-date').data('daterangepicker').setEndDate(toDate);
            }
            
            $('#perf-from-date').val(fromDate);
            $('#perf-to-date').val(toDate);
            fetchDriverData();
        }
    }
</script>
@endpush