@extends('layout.app')
@section('title', 'Driver Profile')
@push('header_script')
    <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-freights')">FREIGHT 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">
            <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>

            <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> Voyage 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 Voyage</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 Voyage</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;">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;">
                    Total Distance: <span id="dd-trips-tot-km">...</span> KM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    Total Profit: <span class="text-success" style="color: #10b981;">₹<span id="dd-trips-tot-profit">...</span></span>
                </div>
            </div>
        </div>

        <!-- TAB: FREIGHTS -->
        <div id="tab-freights" class="driver-tab-pane">
            <h4 class="card-title"><i class="ri-truck-line"></i> Unassigned Freight 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;">DATE</th>
                            <th class="text-muted" style="font-size: 11px; font-weight: 700; padding: 15px; border-bottom: 1px solid #e5e7eb; text-align: left;">LR NO</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;">CONSIGNOR</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: right;">FREIGHT AMT</th>
                        </tr>
                    </thead>
                    <tbody id="dd-freights-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 Pending Freight: <span class="text-primary" style="color: #4f46e5;">₹<span id="dd-freights-tot">...</span></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>
@endsection

@push('footer_script')
<script>
    function switchDriverTab(e, tabId) {
        $('.driver-tab').removeClass('active');
        $(e.currentTarget).addClass('active');
        $('.driver-tab-pane').removeClass('active');
        $('#' + tabId).addClass('active');
    }

    $(document).ready(function() {
        let driverId = {{ $driver->id }};
        
        // Fetch data
        $.ajax({
            url: `/employee/driver-details/${driverId}`,
            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_voyage.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#dd-perf-ratio').text(m.net_profit_margin.toFixed(1));

                $('#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_voyage.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                $('#dd-eff-dist').text(m.avg_distance_per_voyage.toFixed(1));

                // Trips
                let tbody = '';
                if(res.trip_ledger && res.trip_ledger.length > 0) {
                    res.trip_ledger.forEach(t => {
                        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.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="8" 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());

                // 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);
                
                // Populate Freights
                if(res.pending_freights && res.pending_freights.length > 0) {
                    let freightHtml = '';
                    let totFreightAmt = 0;
                    res.pending_freights.forEach(f => {
                        let date = f.date ? new Date(f.date).toISOString().split('T')[0] : 'N/A';
                        let amt = parseFloat(f.grand_total) || 0;
                        totFreightAmt += amt;
                        let consignor = f.consignor ? f.consignor.party_name : 'N/A';
                        let vehicle = f.vehicle ? f.vehicle.vehicle_no : 'N/A';
                        
                        freightHtml += `
                            <tr>
                                <td style="padding: 15px; border-bottom: 1px solid #e5e7eb; font-weight: 600;">${date}</td>
                                <td style="padding: 15px; border-bottom: 1px solid #e5e7eb; font-family: monospace; color: #4f46e5; font-weight: 700;">${f.lr_no || '-'}</td>
                                <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">
                                    <div style="font-weight: 600; color: #111827;">${f.from_location || '-'} <i class="ri-arrow-right-line text-muted"></i> ${f.to_location || '-'}</div>
                                </td>
                                <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${consignor}</td>
                                <td style="padding: 15px; border-bottom: 1px solid #e5e7eb;">${vehicle}</td>
                                <td style="padding: 15px; border-bottom: 1px solid #e5e7eb; font-weight: 700; color: #10b981; text-align: right;">₹${amt.toLocaleString('en-IN')}</td>
                            </tr>
                        `;
                    });
                    $('#dd-freights-body').html(freightHtml);
                    $('#dd-freights-tot').text(totFreightAmt.toLocaleString('en-IN'));
                } else {
                    $('#dd-freights-body').html(`<tr><td colspan="6" class="text-center text-muted" style="padding: 30px;">No pending freights recorded.</td></tr>`);
                    $('#dd-freights-tot').text('0');
                }
            }
        });
    });
</script>
@endpush