@extends('layout.app')
@section('title', 'Employee Directory')
@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/daterange/daterange.css')}}">
    <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')}}">
    <style>
        /* Custom UI mimicking the React template */
        body, .app-container {
            background-color: #f9fafb !important;
        }
        .top-nav-tabs {
            display: flex;
            gap: 30px;
            border-bottom: 1px solid #e5e7eb;
            padding: 0 20px;
            background: #fff;
            margin: -20px -20px 20px -20px;
        }
        .top-nav-tabs .nav-item {
            padding: 15px 0;
            color: #6b7280;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .top-nav-tabs .nav-item:hover {
            color: #111827;
        }
        .top-nav-tabs .nav-item.active {
            color: #4f46e5;
        }
        .top-nav-tabs .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #4f46e5;
        }

        .split-layout {
            display: flex;
            gap: 20px;
            height: calc(100vh - 210px);
        }
        
        /* Left Pane: List */
        .left-pane {
            flex: 1;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }
        .left-pane-header {
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;
        }
        .search-add-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        .search-box {
            flex: 1;
            position: relative;
        }
        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }
        .search-box input {
            width: 100%;
            padding: 10px 10px 10px 35px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #f9fafb;
            outline: none;
        }
        .search-box input:focus {
            border-color: #4f46e5;
            background: #fff;
        }
        .btn-add {
            background: #4f46e5;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-add:hover {
            background: #4338ca;
            color: #fff;
        }
        .filter-tabs {
            display: flex;
            gap: 15px;
            background: #f3f4f6;
            padding: 5px;
            border-radius: 8px;
            width: fit-content;
        }
        .filter-tabs span {
            padding: 6px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #4b5563;
        }
        .filter-tabs span.active {
            background: #fff;
            color: #111827;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        .list-container {
            overflow-y: auto;
            flex: 1;
        }
        .list-header {
            display: grid;
            grid-template-columns: 0.5fr 2fr 1.5fr 1.5fr 1.5fr 1fr 1.5fr 1fr;
            padding: 15px 20px;
            background: #f9fafb;
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            border-bottom: 1px solid #e5e7eb;
        }
        .employee-item {
            display: grid;
            grid-template-columns: 0.5fr 2fr 1.5fr 1.5fr 1.5fr 1fr 1.5fr 1fr;
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .employee-item:hover {
            background: #f9fafb;
        }
        .employee-item.active {
            background: #eef2ff;
            border-left: 3px solid #4f46e5;
        }
        .emp-avatar {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #4f46e5;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 12px;
        }
        .emp-name-col {
            display: flex;
            align-items: center;
        }
        .emp-name {
            font-weight: 600;
            color: #111827;
            margin-bottom: 2px;
        }
        .emp-id {
            font-size: 12px;
            color: #6b7280;
        }
        .badge-status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            text-transform: capitalize;
        }
        .status-Assigned { background: #dcfce7; color: #166534; }
        .status-Unassigned { background: #fef3c7; color: #92400e; }
        .status-On-Leave { background: #e0e7ff; color: #3730a3; }
        .status-Inactive { background: #f3f4f6; color: #4b5563; }
        
        .action-icons {
            display: flex;
            gap: 10px;
            color: #6b7280;
        }
        .action-icons i {
            cursor: pointer;
            font-size: 16px;
        }
        .action-icons i:hover {
            color: #4f46e5;
        }

        /* Right Pane: Details */
        .right-pane {
            width: 380px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            border: 1px solid #e5e7eb;
        }
        .details-header {
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .details-header .emp-avatar {
            width: 60px;
            height: 60px;
            font-size: 20px;
            border-radius: 12px;
        }
        .details-section {
            padding: 20px;
            border-bottom: 1px solid #f3f4f6;
        }
        .section-title {
            font-size: 12px;
            font-weight: 600;
            color: #4f46e5;
            text-transform: uppercase;
            margin-bottom: 15px;
            letter-spacing: 0.5px;
        }
        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .detail-item label {
            display: block;
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 4px;
        }
        .detail-item span {
            font-size: 13px;
            font-weight: 500;
            color: #111827;
        }
        .emergency-box {
            background: #f9fafb;
            padding: 12px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 12px;
            color: #374151;
            border: 1px solid #e5e7eb;
        }
        
        .no-selection {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9ca3af;
            text-align: center;
            padding: 20px;
        }
        .no-selection i {
            font-size: 48px;
            margin-bottom: 10px;
            color: #d1d5db;
        }

        /* Performance Hub CSS */
        .performance-hub {
            display: none;
            padding: 20px;
            background: #f9fafb;
            flex: 1;
            overflow-y: auto;
        }
        .hub-header {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .hub-title h4 {
            margin: 0;
            font-weight: 600;
            color: #111827;
        }
        .hub-title p {
            margin: 5px 0 0 0;
            color: #6b7280;
            font-size: 13px;
        }
        .driver-select {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .driver-select select {
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            outline: none;
            min-width: 200px;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .metric-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .metric-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            font-size: 11px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .metric-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .metric-value {
            font-size: 28px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 5px;
        }
        .metric-sub {
            font-size: 13px;
            color: #6b7280;
        }
        .metric-footer {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #f3f4f6;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #6b7280;
        }
        .metric-footer strong {
            color: #111827;
        }

        .bottom-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .log-box {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .log-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 20px;
        }
        .log-header i {
            color: #4f46e5;
            font-size: 18px;
        }
        .log-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .log-stat-item {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }
        .log-stat-item h3 {
            margin: 0 0 5px 0;
            font-size: 24px;
            font-weight: 700;
        }
        .log-stat-item p {
            margin: 0;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: #6b7280;
        }
        .stat-worked { background: #f0fdf4; border-color: #dcfce7; color: #166534; }
        .stat-leave { background: #eff6ff; border-color: #dbeafe; color: #1e40af; }
        .stat-unassigned { background: #fffbeb; border-color: #fef3c7; color: #92400e; }
        
        .efficiency-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .efficiency-title {
            font-size: 13px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }
        .efficiency-sub {
            font-size: 11px;
            color: #9ca3af;
        }
        .efficiency-val {
            font-size: 14px;
            font-weight: 600;
        }
        .progress-bar-custom {
            height: 6px;
            background: #f3f4f6;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 25px;
        }
        .progress-fill {
            height: 100%;
            border-radius: 4px;
        }

        /* Reports & Ledgers CSS */
        .reports-hub {
            display: none;
            flex-direction: column;
            background: #f9fafb;
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        .reports-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            padding: 15px 20px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .sub-nav-tabs {
            display: flex;
            gap: 10px;
            background: #f3f4f6;
            padding: 5px;
            border-radius: 8px;
        }
        .sub-nav-tabs span {
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            transition: all 0.2s;
        }
        .sub-nav-tabs span.active {
            background: #fff;
            color: #111827;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        .reports-actions {
            display: flex;
            gap: 10px;
        }
        .btn-outline {
            padding: 8px 16px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: #fff;
            color: #374151;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .btn-outline:hover {
            background: #f9fafb;
        }
        .btn-primary-action {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            background: #4f46e5;
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .btn-primary-action:hover {
            background: #4338ca;
        }
        .report-container {
            background: #fff;
            border-radius: 12px;
            padding: 25px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        .report-header-title {
            margin-bottom: 25px;
        }
        .report-header-title h4 {
            font-weight: 700;
            color: #111827;
            margin: 0 0 5px 0;
            font-size: 20px;
        }
        .report-header-title p {
            color: #6b7280;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            margin: 0;
        }
        
        /* Summary Report Specific */
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 30px;
        }
        .summary-card {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #e5e7eb;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
            position: relative;
        }
        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .summary-card.active-card {
            outline: 2px solid #4f46e5;
            outline-offset: 2px;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
        }
        .summary-card .click-hint {
            font-size: 10px;
            color: #6b7280;
            margin-top: 5px;
            display: block;
            font-weight: 500;
        }
        .summary-card h2 {
            margin: 0 0 5px 0;
            font-size: 28px;
            font-weight: 700;
            color: #111827;
        }
        .summary-card p {
            margin: 0;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }
        .sc-total { background: #f9fafb; }
        .sc-total p { color: #6b7280; }
        .sc-assigned { background: #f0fdf4; border-color: #dcfce7; }
        .sc-assigned h2 { color: #166534; }
        .sc-assigned p { color: #166534; }
        .sc-unassigned { background: #fffbeb; border-color: #fef3c7; }
        .sc-unassigned h2 { color: #92400e; }
        .sc-unassigned p { color: #92400e; }
        .sc-leave { background: #eff6ff; border-color: #dbeafe; }
        .sc-leave h2 { color: #1e40af; }
        .sc-leave p { color: #1e40af; }
        .sc-inactive { background: #f3f4f6; }
        .sc-inactive h2 { color: #4b5563; }
        .sc-inactive p { color: #4b5563; }

        /* General Table styling for reports */
        .report-table {
            width: 100%;
            border-collapse: collapse;
        }
        .report-table th {
            text-align: left;
            padding: 12px 15px;
            font-size: 11px;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
            border-bottom: 2px solid #f3f4f6;
            background: #f9fafb;
        }
        .report-table td {
            padding: 15px;
            font-size: 13px;
            color: #111827;
            font-weight: 500;
            border-bottom: 1px solid #f3f4f6;
        }
        .report-table tr:last-child td {
            border-bottom: none;
        }
        .report-aggregate {
            display: flex;
            justify-content: flex-end;
            gap: 30px;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px dashed #d1d5db;
            font-size: 13px;
            font-weight: 600;
            color: #4b5563;
        }
        .report-aggregate span { color: #111827; }
        .report-aggregate .profit { color: #166534; }

        /* Trip Report Filters */
        .trip-filters {
            display: grid;
            grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
            gap: 15px;
            margin-bottom: 25px;
            background: #f9fafb;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .filter-group label {
            font-size: 11px;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
        }
        .filter-group input, .filter-group select {
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 13px;
            outline: none;
        }
          /* Modals  */
  
        .custom-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(17, 24, 39, 0.4);
            z-index: 99999 !important;
            align-items: center;
            justify-content: center;
        }
        .daterangepicker {
            z-index: 100000 !important;
        }
        .custom-modal {
            background: #fff;
            width: 450px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .custom-modal-header {
            padding: 20px;
            border-bottom: 1px solid #f3f4f6;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .custom-modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #111827;
        }
        .custom-modal-header p {
            margin: 5px 0 0 0;
            font-size: 13px;
            color: #6b7280;
            font-family: monospace;
        }
        .custom-modal-close {
            cursor: pointer;
            color: #9ca3af;
            font-size: 20px;
        }
        .custom-modal-close:hover {
            color: #4b5563;
        }
        .custom-modal-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .modal-info-box {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            font-size: 12px;
            color: #4b5563;
            font-style: italic;
        }
        .form-group-custom label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #4b5563;
            margin-bottom: 6px;
        }
        .form-group-custom input, .form-group-custom select, .form-group-custom textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s;
            font-family: inherit;
        }
        .form-group-custom input:focus, .form-group-custom select:focus, .form-group-custom textarea:focus {
            border-color: #4f46e5;
        }
        .custom-modal-footer {
            padding: 15px 20px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            border-top: 1px solid #f3f4f6;
        }
        .btn-cancel {
            padding: 8px 16px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
        }
        .btn-submit {
            padding: 8px 16px;
            background: #4f46e5;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #fff;
        }
        .row-flex {
            display: flex;
            gap: 15px;
        }
        .row-flex .form-group-custom {
            flex: 1;
        }
        /* Driver Details Modal CSS */
        .custom-modal-large {
            width: 850px;
            max-width: 95vw;
            max-height: 95vh;
        }
        .driver-details-header {
            padding: 25px 30px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .header-content {
            display: flex;
            gap: 20px;
        }
        .driver-avatar {
            width: 70px;
            height: 70px;
            background: #6366f1;
            color: #fff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 600;
        }
        .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: 22px;
            font-weight: 700;
            color: #111827;
        }
        .driver-meta {
            margin: 0;
            font-size: 13px;
            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: 500;
        }
        .tag-rating {
            color: #374151;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .header-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 15px;
        }
        .btn-outline {
            padding: 6px 12px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            color: #374151;
        }
        .btn-outline-danger {
            padding: 6px 12px;
            background: #fef2f2;
            border: 1px solid #fca5a5;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            color: #ef4444;
        }
        .driver-tabs {
            display: flex;
            gap: 30px;
            padding: 0 30px;
            border-bottom: 1px solid #e5e7eb;
            background: #fff;
        }
        .driver-tab {
            padding: 15px 0;
            font-size: 12px;
            font-weight: 700;
            color: #6b7280;
            cursor: pointer;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .driver-tab:hover {
            color: #111827;
        }
        .driver-tab.active {
            color: #4f46e5;
        }
        .driver-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #4f46e5;
            border-radius: 2px 2px 0 0;
        }
        .driver-details-body {
            padding: 30px;
            background: #f9fafb;
            flex: 1;
            overflow-y: auto;
        }
        .driver-tab-pane {
            display: none;
        }
        .driver-tab-pane.active {
            display: block;
        }
        .details-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 20px;
        }
        .card-title {
            margin: 0 0 20px 0;
            font-size: 15px;
            font-weight: 700;
            color: #111827;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .card-title i {
            color: #6366f1;
            font-size: 18px;
        }
        .data-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .data-item label {
            display: block;
            font-size: 10px;
            font-weight: 600;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
        }
        .data-item .value {
            font-size: 14px;
            color: #111827;
            font-weight: 500;
        }
        .data-item .value-large {
            font-size: 18px;
            font-weight: 700;
        }
        .badge-blood {
            background: #fee2e2;
            color: #ef4444;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }
        .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: 8px 12px;
            background: #f9fafb;
            border: 1px solid #f3f4f6;
            border-radius: 6px;
            font-size: 13px;
            color: #374151;
        }
        .flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .badge-tag {
            background: #e5e7eb;
            color: #4b5563;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
        }
        .badge-class {
            background: #eef2ff;
            color: #4f46e5;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            border: 1px solid #c7d2fe;
        }
        .badge-warning {
            background: #fef2f2;
            color: #ef4444;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            border: 1px solid #fca5a5;
        }

        /* ID Card styles */
        .id-card {
            width: 360px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }
        .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 .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: 700;
            margin-bottom: 2px;
            display: block;
        }
        .id-name {
            font-size: 18px;
            font-weight: 800;
            color: #111827;
        }
        .id-value {
            font-size: 13px;
            font-weight: 600;
            color: #111827;
        }
        .id-footer {
            background: #f9fafb;
            padding: 10px 15px;
            font-size: 11px;
            font-weight: 500;
            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: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .metric-value {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 5px;
        }
        .metric-label {
            font-size: 11px;
            font-weight: 700;
            color: #6b7280;
            margin-bottom: 8px;
        }
        .metric-sub {
            font-size: 11px;
            font-weight: 500;
            font-family: monospace;
        }
        
        /* Timeline */
        .audit-timeline {
            border-left: 2px solid #e5e7eb;
            margin-left: 15px;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .audit-item {
            position: relative;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 15px;
        }
        .audit-item::before {
            content: '';
            position: absolute;
            left: -27px;
            top: 15px;
            width: 12px;
            height: 12px;
            background: #fff;
            border: 2px solid #4f46e5;
            border-radius: 50%;
        }
        .audit-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .audit-title {
            font-weight: 700;
            font-size: 14px;
            color: #111827;
        }
        .audit-date {
            font-size: 12px;
            color: #6b7280;
            font-family: monospace;
        }
        .audit-desc {
            font-size: 13px;
            color: #4b5563;
        }

        @media (max-width: 768px) {
            .split-layout { flex-direction: column; height: auto; }
            .left-pane, .right-pane, .performance-hub, .reports-hub { width: 100%; height: auto; margin-bottom: 20px;}
            .top-nav-tabs { flex-direction: row; gap: 15px; padding: 10px; overflow-x: auto; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
            .top-nav-tabs::-webkit-scrollbar { display: none; }
            .top-nav-tabs .nav-item { padding: 10px 5px; border-bottom: none; flex-shrink: 0; white-space: nowrap; }
            .search-add-row { flex-direction: column; align-items: stretch; }
            .filter-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
            .filter-tabs::-webkit-scrollbar { display: none; }
            .filter-tabs span { flex-shrink: 0; white-space: nowrap; }
            .metrics-grid, .bottom-grid, .summary-cards { grid-template-columns: 1fr; }
            .trip-filters { grid-template-columns: 1fr; }
            .list-header, .employee-item { min-width: 800px; }
            .hub-header { flex-direction: column; align-items: stretch; gap: 15px; }
            .driver-select select { width: 100%; }
            .reports-top-bar { flex-direction: column; align-items: stretch; gap: 15px; }
            .sub-nav-tabs { flex-wrap: wrap; }
            .report-aggregate { flex-direction: column; align-items: flex-end; gap: 10px; }
        }
    </style>
@endpush
@section('content')
    <div class="app-hero-header" style="padding: 0; background: #fff; border-bottom: 1px solid #e5e7eb; margin-bottom: 0;">
        <div class="top-nav-tabs" style="margin: 0; border: none;">
            <div class="nav-item active"><i class="ri-user-2-line"></i> Employee Directory</div>
            <div class="nav-item"><i class="ri-bar-chart-box-line"></i> Performance Hub</div>
            <div class="nav-item"><i class="ri-file-chart-line"></i> Reports & Ledgers</div>
        </div>
    </div>

    <div class="app-body">
        <!-- Directory Layout -->
        <div class="split-layout" id="directoryTab">
            <!-- Left Pane -->
            <div class="left-pane">
                <div class="left-pane-header">
                    <div class="search-add-row">
                        <div class="search-box">
                            <i class="ri-search-line"></i>
                            <input type="text" id="searchInput" placeholder="Search by name, ID, or phone...">
                        </div>
                        <a href="{{ route('employee.create') }}" class="btn-add">
                            <i class="ri-add-line"></i> Add Employee
                        </a>
                    </div>
                    <div class="filter-tabs">
                        <span class="active" data-filter="all">All Employee</span>
                        <span data-filter="driver">Drivers</span>
                        @if(isset($employeeTypes))
                            @foreach($employeeTypes as $id => $name)
                                @if(strtolower($name) !== 'driver' && strtolower($name) !== 'drivers')
                                    <span data-filter="{{ strtolower($name) }}">{{ ucwords($name) }}</span>
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="table-responsive" style="overflow-x: auto; flex: 1; display: flex; flex-direction: column;">
                    <div style="min-width: 800px; display: flex; flex-direction: column; flex: 1;">
                        <div class="list-header">
                            <div>S. No.</div>
                            <div>Name</div>
                            <div>Employee Type</div>
                            <div>Contact No</div>
                            <div>Truck</div>
                            <div>Status</div>
                            <div>License Expiry</div>
                            <div>Actions</div>
                        </div>
                        <div class="list-container" id="employeeList">
                            <div class="text-center py-4 text-muted">Loading...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Pane -->
            <div class="right-pane" id="detailsPane">
                <div class="no-selection">
                    <i class="ri-user-smile-line"></i>
                    <h4>Select an Employee</h4>
                    <p>Click on any employee from the list to view their full details here.</p>
                </div>
            </div>
        </div>

        <!-- Performance Hub Layout -->
        <div class="performance-hub" id="performanceTab">
            <div class="hub-header">
                <div class="hub-title">
                    <h4>Performance & Profitability Hub</h4>
                    <p>Real-time financial tracking and duty logs computed directly from completed shipments.</p>
                </div>
                <div class="driver-select">
                    <label style="font-size: 13px; color: #4b5563; font-weight: 500;">Select Driver:</label>
                    <select id="hubDriverSelect" class="form-control select2" style="width: 260px;">
                        <option value="">-- Select Driver --</option>
                    </select>
                </div>
            </div>

            <div id="hubContent" style="display: none;">
                <div class="metrics-grid">
                    <!-- Trips -->
                    <div class="metric-card" onclick="openDriverTripModal()" style="cursor:pointer;" title="Click to view trip list">
                        <div>
                            <div class="metric-card-header">
                                <span>Trips &amp; Mileage</span>
                                <div class="metric-icon" style="background: #eef2ff; color: #4f46e5;"><i class="ri-route-line"></i></div>
                            </div>
                            <div class="metric-value" id="hubTrips">0</div>
                            <div class="metric-sub">Completed Shipments &mdash; <span style="font-size:11px; color:#4f46e5; font-weight:600;"><i class="ri-eye-line"></i> Click to view list</span></div>
                        </div>
                        <div class="metric-footer">
                            <span>Total Distance:</span>
                            <strong id="hubDistance">0 KM</strong>
                        </div>
                    </div>

                    <!-- Revenue -->
                    <div class="metric-card" onclick="openDriverTripModal()" style="cursor:pointer;" title="Click to view trip list">
                        <div>
                            <div class="metric-card-header">
                                <span>Gross Revenue</span>
                                <div class="metric-icon" style="background: #f3e8ff; color: #9333ea;"><i class="ri-wallet-3-line"></i></div>
                            </div>
                            <div class="metric-value" id="hubRevenue">₹0</div>
                            <div class="metric-sub">Freight Value Earned &mdash; <span style="font-size:11px; color:#9333ea; font-weight:600;"><i class="ri-eye-line"></i> Click to view list</span></div>
                        </div>
                        <div class="metric-footer">
                            <span>Monthly Avg:</span>
                            <strong id="hubMonthlyRev">₹0</strong>
                        </div>
                    </div>

                    <!-- Profit -->
                    <div class="metric-card" onclick="openDriverTripModal()" style="cursor:pointer; border: 1px solid #bbf7d0;" title="Click to view trip list">
                        <div>
                            <div class="metric-card-header">
                                <span style="color: #166534;">Net Profit</span>
                                <div class="metric-icon" style="background: #dcfce7; color: #166534;"><i class="ri-line-chart-line"></i></div>
                            </div>
                            <div class="metric-value" style="color: #166534;" id="hubProfit">₹0</div>
                            <div class="metric-sub">After Trip Expenses &mdash; <span style="font-size:11px; color:#166534; font-weight:600;"><i class="ri-eye-line"></i> Click to view list</span></div>
                        </div>
                        <div class="metric-footer">
                            <span>Margin Ratio:</span>
                            <strong style="color: #166534;" id="hubMargin">0%</strong>
                        </div>
                    </div>

                </div>

                <div class="bottom-grid">
                    <!-- Logs -->
                    <div class="log-box">
                        <div class="log-header">
                            <i class="ri-calendar-check-line"></i> Duty Logs & Attendance Tracking
                        </div>
                        <div class="log-stats">
                            <div class="log-stat-item stat-worked">
                                <h3 id="hubWorked">0</h3>
                                <p>Days Worked</p>
                            </div>
                            <div class="log-stat-item stat-leave">
                                <h3 id="hubLeave">0</h3>
                                <p>Days On Leave</p>
                            </div>
                            <div class="log-stat-item stat-unassigned">
                                <h3 id="hubUnassigned">0</h3>
                                <p>Unassigned</p>
                            </div>
                        </div>
                        <div style="text-align: center; margin-top: 20px; font-size: 11px; color: #9ca3af; font-weight: 500;" id="hubTenure">
                            Total Tenure in System: 0 days
                        </div>
                    </div>

                    <!-- Efficiency -->
                    <div class="log-box">
                        <div class="log-header">
                            <i class="ri-hourglass-2-line" style="color: #4f46e5;"></i> Operational Efficiency & Averages
                        </div>
                        
                        <div class="efficiency-row">
                            <div>
                                <div class="efficiency-title">Average Profit Per Trip</div>
                                <div class="efficiency-sub">Net Margins / Trips Done</div>
                            </div>
                            <div class="efficiency-val" id="hubAvgProfit">₹0</div>
                        </div>
                        <div class="progress-bar-custom">
                            <div class="progress-fill" style="width: 85%; background: #4f46e5;"></div>
                        </div>

                        <div class="efficiency-row">
                            <div>
                                <div class="efficiency-title">Average Distance Per Trip</div>
                                <div class="efficiency-sub">Total Mileage / Trips Done</div>
                            </div>
                            <div class="efficiency-val" id="hubAvgDist">0 KM</div>
                        </div>
                        <div class="progress-bar-custom">
                            <div class="progress-fill" style="width: 65%; background: #10b981;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="hubPlaceholder" class="no-selection" style="background:#fff; border-radius:12px; border:1px solid #e5e7eb;">
                <i class="ri-bar-chart-2-line"></i>
                <h4>Select a driver to view performance</h4>
                <p>Choose a driver from the dropdown above to load their profitability and duty logs.</p>
            </div>
        </div>

        <!-- Driver Trip List Modal -->
        <div id="driverTripListModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(17,24,39,0.5); z-index:99999; align-items:center; justify-content:center; overflow:auto;">
            <div style="background:#fff; width:92%; max-width:1100px; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.2); display:flex; flex-direction:column; max-height:90vh;">
                <!-- Modal Header -->
                <div style="padding:20px 24px; border-bottom:1px solid #f3f4f6; display:flex; justify-content:space-between; align-items:center; background: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); border-radius:14px 14px 0 0;">
                    <div>
                        <h3 style="margin:0; font-size:18px; font-weight:700; color:#fff;"><i class="ri-route-line"></i> Driver Trip Ledger</h3>
                        <p id="driverTripModalSubtitle" style="margin:4px 0 0 0; font-size:13px; color:rgba(255,255,255,0.8);">Loading...</p>
                    </div>
                    <div style="cursor:pointer; color:#fff; font-size:22px; font-weight:300;" onclick="document.getElementById('driverTripListModal').style.display='none';">&times;</div>
                </div>
                <!-- Modal Body -->
                <div style="overflow:auto; padding:20px;">
                    <div id="driverTripModalLoading" style="text-align:center; padding:40px; color:#6b7280;"><i class="ri-loader-4-line" style="font-size:28px;"></i><p style="margin-top:10px;">Loading trips...</p></div>
                    <div id="driverTripTableWrap" style="display:none;">
                        <table style="width:100%; border-collapse:collapse; font-size:13px;">
                            <thead>
                                <tr style="background:#f9fafb; border-bottom:2px solid #e5e7eb;">
                                    <th style="padding:10px 12px; text-align:left; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">S.No.</th>
                                    <th style="padding:10px 12px; text-align:left; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Trip Sheet No.</th>
                                    <th style="padding:10px 12px; text-align:left; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Date</th>
                                    <th style="padding:10px 12px; text-align:left; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Trip Status</th>
                                    <th style="padding:10px 12px; text-align:left; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Truck No.</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Distance KM</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Freight / Rev</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Trip Expenses</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Diesel Ltrs</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Mileage KM</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase;">Net Margin</th>
                                </tr>
                            </thead>
                            <tbody id="driverTripListBody"></tbody>
                        </table>
                        <div id="driverTripModalEmpty" style="display:none; text-align:center; padding:40px; color:#9ca3af; font-size:14px;"><i class="ri-inbox-line" style="font-size:32px; display:block; margin-bottom:8px;"></i> No trip records found for this driver.</div>
                    </div>
                </div>
                <!-- Modal Footer -->
                <div style="padding:15px 24px; border-top:1px solid #f3f4f6; display:flex; justify-content:flex-end;">
                    <button onclick="document.getElementById('driverTripListModal').style.display='none';" style="padding:8px 20px; background:#f3f4f6; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; color:#374151;">Close</button>
                </div>
            </div>
        </div>
        <!-- Reports & Ledgers Layout -->
        <div class="reports-hub" id="reportsTab">
            <div class="reports-top-bar">
                <div class="sub-nav-tabs">
                    <span class="active" data-report="summary">Driver Summary</span>
                    <span data-report="trips">Trip Report</span>
                    <span data-report="licenses">License Expiry Report</span>
                </div>
                <div class="reports-actions">
                    <button class="btn-outline" id="exportReportBtn"><i class="ri-download-2-line"></i> Export CSV</button>
                </div>
            </div>

            <!-- Driver Summary Report -->
            <div class="report-container" id="reportSummary">
                <div class="report-header-title">
                    <h4>Driver Fleet Operations Report</h4>
                    <p>Report Generated: {{ date('Y-m-d') }} &bull; Summary Headcount</p>
                </div>
                <div class="summary-cards">
                    <div class="summary-card sc-total active-card" onclick="filterSummaryDriverList('all', this)" title="Click to view all drivers">
                        <h2 id="repTotalDrivers">0</h2>
                        <p>Total Drivers</p>
                        <span class="click-hint"><i class="ri-cursor-line"></i> View List</span>
                    </div>
                    <div class="summary-card sc-assigned" onclick="filterSummaryDriverList('assigned', this)" title="Click to view assigned drivers">
                        <h2 id="repAssigned">0</h2>
                        <p>Assigned</p>
                        <span class="click-hint"><i class="ri-cursor-line"></i> View List</span>
                    </div>
                    <div class="summary-card sc-unassigned" onclick="filterSummaryDriverList('unassigned', this)" title="Click to view unassigned drivers">
                        <h2 id="repUnassigned">0</h2>
                        <p>Unassigned</p>
                        <span class="click-hint"><i class="ri-cursor-line"></i> View List</span>
                    </div>

                    <div class="summary-card sc-inactive" onclick="filterSummaryDriverList('inactive', this)" title="Click to view inactive drivers">
                        <h2 id="repInactive">0</h2>
                        <p>Inactive</p>
                        <span class="click-hint"><i class="ri-cursor-line"></i> View List</span>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="summaryTable" class="table truncate m-0 align-middle w-100 table-striped table-hover border">
                        <thead class="bg-light">
                            <tr>
                                <th>Employment Status Category</th>
                                <th>Compliance Count</th>
                                <th>Proportion %</th>
                            </tr>
                        </thead>
                        <tbody id="summaryTableBody">
                            <tr><td colspan="3" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No summary data available.</td></tr>
                        </tbody>
                    </table>
                </div>

                <!-- Driver List by Selected Category -->
                <div id="summaryDriverListCard" class="mt-4 pt-4 border-top">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h5 class="m-0 font-weight-700" style="color: #111827; font-size: 16px;">
                                <i class="ri-user-shared-line me-1 text-primary"></i> <span id="summaryDriverFilterName">All Drivers</span> (<span id="summaryDriverCount">0</span>)
                            </h5>
                            <p class="text-muted small m-0">Click any summary card above to filter, or search below.</p>
                        </div>
                        <div style="min-width: 250px;">
                            <input type="text" id="summaryDriverSearchInput" class="form-control form-control-sm" placeholder="Search driver, truck, license..." onkeyup="filterSummaryDriverTable()">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="summaryDriversTable" class="table truncate m-0 align-middle w-100 table-striped table-hover border">
                            <thead class="bg-light">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>Driver Name (ID)</th>
                                    <th>Mobile No.</th>
                                    <th>Assigned Truck</th>
                                    <th>Status</th>
                                    <th>License No.</th>
                                    <th>License Expiry</th>
                                    <th class="text-center" style="width: 100px;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="summaryDriversTableBody">
                                <tr><td colspan="8" class="text-center py-4 text-muted"><i class="ri-loader-4-line"></i> Loading driver list...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Trip Report -->
            <div class="report-container" id="reportTrips" style="display: none;">
                <div class="trip-filters">
                    <div class="filter-group">
                        <label>Start Date</label>
                        <input type="text" id="tripStartDate" class="datepicker" value="{{ date('d-m-Y', strtotime(date('Y-m-01'))) }}">
                    </div>
                    <div class="filter-group">
                        <label>End Date</label>
                        <input type="text" id="tripEndDate" class="datepicker" value="{{ date('d-m-Y') }}">
                    </div>
                    <div class="filter-group">
                        <label>Driver Filter</label>
                        <select id="tripDriverFilter">
                            <option value="">All Drivers</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Truck Filter</label>
                        <select id="tripTruckFilter">
                            <option value="">All Trucks</option>
                        </select>
                    </div>
                </div>
                <div class="report-header-title">
                    <h4>Driver Fleet Operations — Trip Performance Ledger</h4>
                    <p>Report Generated: {{ date('Y-m-d') }} &bull; Individual Trip Records</p>
                </div>
                <div class="table-responsive">
                    <table id="tripReportTable" class="table truncate m-0 align-middle w-100 table-striped table-hover border">
                        <thead class="bg-light">
                            <tr>
                                <th>S.no.</th>
                                <th>Driver Name (ID)</th>
                                <th>Trip Status</th>
                                <th>Trip Start Date</th>
                                <th>Trip Completion Date</th>
                                <th>Truck Number</th>
                                <th class="text-end">Distance KM</th>
                                <th class="text-end">Freight / Revenue</th>
                                <th class="text-end">Trip Expenses</th>
                                <th class="text-end">Diesel Ltr</th>
                                <th class="text-end">Mileage KM</th>
                                <th class="text-end">Net Margin Profit</th>
                            </tr>
                        </thead>
                        <tbody id="tripsTableBody">
                        </tbody>
                    </table>
                </div>
                <div class="report-aggregate" id="tripAggregates">
                    <!-- Populated via JS -->
                </div>
            </div>

            <!-- License Expiry Report -->
            <div class="report-container" id="reportLicenses" style="display: none;">
                <div class="report-header-title">
                    <h4>Driver Fleet Operations Report</h4>
                    <p>Report Generated: {{ date('Y-m-d') }} &bull; Driver License Expiry Ledger</p>
                </div>
                <div class="table-responsive">
                    <table id="licensesTable" class="table truncate m-0 align-middle w-100 table-striped table-hover border">
                        <thead class="bg-light">
                            <tr>
                                <th>Driver Name (ID)</th>
                                <th>License No.</th>
                                <th>Classes Approved</th>
                                <th>Expiry Date</th>
                                <th>Status & Action Needed</th>
                            </tr>
                        </thead>
                        <tbody id="licensesTableBody">
                            <tr><td colspan="5" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No drivers with recorded license expiry dates found.</td></tr>
                        </tbody>
                    </table>
                </div>
                <p style="margin-top: 30px; font-size: 11px; color: #9ca3af; text-transform: uppercase; font-weight: 600; display: flex; justify-content: space-between;">
                    <span>End of Ledger</span>
                    <span>System Audit Log ID: {{ date('d-m-Y') }}-ADM</span>
                </p>
            </div>
        </div>
    </div>

   
    <!-- Modals -->
    @include('common.master.employee.modals.truck_assign')
    @include('common.master.employee.modals.record_leave')

@endsection
@push('footer_script')
    <script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>
    <script src="{{asset('theme/assets/vendor/daterange/daterange.js')}}"></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>
        let allEmployees = [];
        let tripReportDataTable = null;
        let summaryDriversData = [];
        let currentSummaryFilter = 'all';

        $(document).ready(function() {
            loadEmployees();
            
            if ($.fn.daterangepicker) {
                $('.datepicker').daterangepicker({
                    singleDatePicker: true,
                    autoUpdateInput: true,
                    locale: {
                        format: 'DD-MM-YYYY'
                    }
                });
            }

            if ($.fn.select2) {
                $('#hubDriverSelect').select2({
                    placeholder: '-- Select Driver --',
                    allowClear: true,
                    width: '260px'
                });
            }

            // Tab toggling
            $('.top-nav-tabs .nav-item').click(function() {
                $('.top-nav-tabs .nav-item').removeClass('active');
                $(this).addClass('active');

                let text = $(this).text().trim();
                $('#directoryTab, #performanceTab, #reportsTab').hide();

                if (text === 'Performance Hub') {
                    $('#performanceTab').css('display', 'flex').css('flex-direction', 'column');
                    populateDriverDropdown();
                } else if (text === 'Employee Directory') {
                    $('#directoryTab').show();
                } else if (text === 'Reports & Ledgers') {
                    $('#reportsTab').css('display', 'flex');
                    loadSummaryReport();
                }
            });

            // Driver Dropdown change
            $('#hubDriverSelect').on('change', function() {
                let id = $(this).val();
                if (id) {
                    $('#hubPlaceholder').hide();
                    $('#hubContent').show();
                    fetchPerformanceData(id);
                } else {
                    $('#hubPlaceholder').show();
                    $('#hubContent').hide();
                }
            });

            // Search functionality
            $('#searchInput').on('keyup', function() {
                let val = $(this).val().toLowerCase();
                $('.employee-item').each(function() {
                    let text = $(this).text().toLowerCase();
                    $(this).toggle(text.indexOf(val) > -1);
                });
            });

            // Filter tabs
            $('.filter-tabs span').click(function() {
                $('.filter-tabs span').removeClass('active');
                $(this).addClass('active');
                let filter = String($(this).data('filter') || '').toLowerCase();
                
                $('.employee-item').each(function() {
                    if (filter === 'all') {
                        $(this).show();
                    } else {
                        let empType = String($(this).data('type') || '').toLowerCase();
                        $(this).toggle(empType === filter);
                    }
                });
            });

            // Reports Sub-tab toggling
            $('.sub-nav-tabs span').click(function() {
                $('.sub-nav-tabs span').removeClass('active');
                $(this).addClass('active');

                let report = $(this).data('report');
                $('.report-container').hide();
                
                if (report === 'summary') {
                    $('#reportSummary').show();
                    loadSummaryReport();
                } else if (report === 'trips') {
                    $('#reportTrips').show();
                    populateTripFilters();
                    loadTripReport();
                } else if (report === 'licenses') {
                    $('#reportLicenses').show();
                    loadLicenseReport();
                }
            });

            // Trip report filter change
            $('#tripStartDate, #tripEndDate, #tripTruckFilter, #tripDriverFilter').on('change apply.daterangepicker', function() {
                if ($.fn.DataTable.isDataTable('#tripReportTable')) {
                    $('#tripReportTable').DataTable().draw(false);
                } else {
                    loadTripReport();
                }
            });

            // When driver filter changes, reload trucks then draw
            $('#tripDriverFilter').on('change', function() {
                let driverId = $(this).val();
                loadTripTrucks(driverId, function() {
                    if ($.fn.DataTable.isDataTable('#tripReportTable')) {
                        $('#tripReportTable').DataTable().draw(false);
                    }
                });
            });
        });

        function loadSummaryReport() {
            $('#summaryTableBody').html('<tr><td colspan="3" class="text-center py-4 text-muted"><i class="ri-loader-4-line"></i> Loading summary...</td></tr>');
            $('#summaryDriversTableBody').html('<tr><td colspan="8" class="text-center py-4 text-muted"><i class="ri-loader-4-line"></i> Loading driver list...</td></tr>');
            $.ajax({
                url: '/employee/reports/summary',
                type: 'GET',
                success: function(res) {
                    if(res.success && res.data) {
                        $('#repTotalDrivers').text(res.data.total || 0);
                        $('#repAssigned').text(res.data.assigned || 0);
                        $('#repUnassigned').text(res.data.unassigned || 0);
                        $('#repInactive').text(res.data.inactive || 0);

                        let tbody = '';
                        if (res.data.table && res.data.table.length > 0) {
                            res.data.table.forEach(row => {
                                tbody += `
                                    <tr>
                                        <td>${row.category}</td>
                                        <td><strong>${row.count} Drivers</strong></td>
                                        <td>${row.proportion}%</td>
                                    </tr>
                                `;
                            });
                        } else {
                            tbody = '<tr><td colspan="3" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No summary data available.</td></tr>';
                        }
                        $('#summaryTableBody').html(tbody);

                        summaryDriversData = res.data.driverList || [];
                        renderSummaryDriverList(currentSummaryFilter);
                    } else {
                        $('#summaryTableBody').html('<tr><td colspan="3" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No summary data available.</td></tr>');
                        $('#summaryDriversTableBody').html('<tr><td colspan="8" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No summary data available.</td></tr>');
                    }
                },
                error: function() {
                    $('#summaryTableBody').html('<tr><td colspan="3" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No summary data available.</td></tr>');
                    $('#summaryDriversTableBody').html('<tr><td colspan="8" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No summary data available.</td></tr>');
                }
            });
        }

        function filterSummaryDriverList(filterKey, element) {
            currentSummaryFilter = filterKey;
            $('.summary-card').removeClass('active-card');
            if (element) {
                $(element).addClass('active-card');
            }
            renderSummaryDriverList(filterKey);
        }

        function filterSummaryDriverTable() {
            renderSummaryDriverList(currentSummaryFilter);
        }

        function renderSummaryDriverList(filterKey) {
            let filterLabels = {
                'all': 'All Drivers',
                'assigned': 'Assigned Drivers',
                'unassigned': 'Unassigned Drivers',
                'inactive': 'Inactive Drivers'
            };
            $('#summaryDriverFilterName').text(filterLabels[filterKey] || 'Drivers');

            let list = summaryDriversData;
            if (filterKey !== 'all') {
                list = summaryDriversData.filter(d => d.status === filterKey);
            }
            $('#summaryDriverCount').text(list.length);

            let searchVal = ($('#summaryDriverSearchInput').val() || '').toLowerCase().trim();
            if (searchVal) {
                list = list.filter(d => {
                    let str = ((d.name || '') + ' ' + (d.emp_code || '') + ' ' + (d.mobile_no || '') + ' ' + (d.truck_no || '') + ' ' + (d.driving_licence_no || '')).toLowerCase();
                    return str.includes(searchVal);
                });
            }

            if (list.length === 0) {
                $('#summaryDriversTableBody').html('<tr><td colspan="8" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No drivers found for this selection.</td></tr>');
                return;
            }

            let tbody = '';
            list.forEach((d, idx) => {
                let badgeStyle = '';
                if (d.status === 'assigned') badgeStyle = 'background:#dcfce7; color:#166534; border:1px solid #bbf7d0;';
                else if (d.status === 'unassigned') badgeStyle = 'background:#fef3c7; color:#92400e; border:1px solid #fde68a;';
                else if (d.status === 'leave') badgeStyle = 'background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe;';
                else badgeStyle = 'background:#f3f4f6; color:#4b5563; border:1px solid #e5e7eb;';

                let truckBadge = d.truck_no && d.truck_no !== 'Not Assigned'
                    ? `<span style="background:#f8fafc; color:#334155; padding:3px 8px; border-radius:4px; font-size:12px; font-family:monospace; border:1px solid #e2e8f0;">${d.truck_no}</span>`
                    : `<span class="text-muted small" style="font-style:italic;">Not Assigned</span>`;

                let expiryDisplay = d.driving_licence_valid_upto && d.driving_licence_valid_upto !== '-'
                    ? d.driving_licence_valid_upto
                    : `<span class="text-muted small">Not Recorded</span>`;

                tbody += `<tr>
                    <td class="text-muted font-weight-600">${idx + 1}</td>
                    <td>
                        <a href="/employee/driver-profile/${d.id}" style="color: inherit; font-weight: 700; text-decoration: none;" onmouseover="this.style.color='#4f46e5'" onmouseout="this.style.color='inherit'">
                            ${d.name}
                        </a>
                        <div class="text-muted font-monospace small">${d.emp_code || ''}</div>
                    </td>
                    <td>${d.mobile_no}</td>
                    <td>${truckBadge}</td>
                    <td><span style="${badgeStyle} padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block;">${d.status_label}</span></td>
                    <td>${d.driving_licence_no}</td>
                    <td>${expiryDisplay}</td>
                    <td class="text-center">
                        <a href="/employee/driver-profile/${d.id}" class="btn btn-xs btn-outline-primary" style="padding:3px 8px; font-size:11px; border-radius:4px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;" title="View Driver Profile">
                            <i class="ri-eye-line"></i> View
                        </a>
                    </td>
                </tr>`;
            });
            $('#summaryDriversTableBody').html(tbody);
        }

        function populateTripFilters() {
            let drivers = allEmployees.filter(e => {
                let t = String(e.emp_type || (e.employee_type ? e.employee_type.name : '')).toLowerCase();
                return t.includes('driver');
            });
            if (drivers.length === 0 && allEmployees.length > 0) {
                drivers = allEmployees;
            }
            let driverHtml = '<option value="">All Drivers</option>';
            drivers.forEach(d => {
                driverHtml += `<option value="${d.id}">${d.employee_name} (${d.emp_code || 'N/A'})</option>`;
            });
            $('#tripDriverFilter').html(driverHtml);
            loadTripTrucks($('#tripDriverFilter').val());
        }

        function loadTripTrucks(driverId, callback) {
            $.ajax({
                url: '/employee/reports/trucks',
                type: 'GET',
                data: { driver_id: driverId },
                success: function(res) {
                    let html = '<option value="">All Trucks</option>';
                    if (res.success && res.data) {
                        res.data.forEach(t => {
                            html += `<option value="${t.id}">${t.truck_no}</option>`;
                        });
                    }
                    $('#tripTruckFilter').html(html);
                    if (res.current_assigned_truck_id) {
                        $('#tripTruckFilter').val(res.current_assigned_truck_id);
                    }
                    if (callback) callback();
                }
            });
        }

        function loadTripReport() {
            if ($.fn.DataTable.isDataTable('#tripReportTable')) {
                $('#tripReportTable').DataTable().draw(false);
                return;
            }

            tripReportDataTable = $('#tripReportTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                ajax: {
                    url: '{{ route("employee.reports.trips") }}',
                    data: function (d) {
                        d.start_date = $('#tripStartDate').val();
                        d.end_date   = $('#tripEndDate').val();
                        d.driver_id  = $('#tripDriverFilter').val();
                        d.truck_id   = $('#tripTruckFilter').val();
                    },
                    dataSrc: function (json) {
                        if (json.aggregates) {
                            let agg = json.aggregates;
                            $('#tripAggregates').html(`
                                <span>Total Trips: <strong>${agg.total_trips}</strong></span>
                                <span>Distance: <strong>${Number(agg.total_distance).toLocaleString()} KM</strong></span>
                                <span>Revenue: <strong>₹${Number(agg.total_revenue).toLocaleString()}</strong></span>
                                <span>Expenses: <strong style="color:#dc2626;">₹${Number(agg.total_expenses).toLocaleString()}</strong></span>
                                <span class="profit">Net Profit: ₹${Number(agg.total_profit).toLocaleString()}</span>
                            `);
                        }
                        return json.data;
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'driver_name', name: 'driver.employee_name' },
                    { data: 'trip_status', name: 'status', orderable: false },
                    { data: 'start_date', name: 'start_time' },
                    { data: 'completion_date', name: 'date' },
                    { data: 'truck_no', name: 'vehicle.vehicle_no' },
                    { data: 'distance_km', name: 'total_km', className: 'text-end' },
                    { data: 'freight_rev', name: 'freight_amount', className: 'text-end' },
                    { data: 'trip_expenses', name: 'total_expense', className: 'text-end' },
                    { data: 'diesel_ltrs', name: 'diesel_ltrs', className: 'text-end', orderable: false },
                    { data: 'mileage_km', name: 'mileage_km', className: 'text-end', orderable: false },
                    { data: 'net_margin', name: 'profit_loss', className: 'text-end' },
                ],
                language: {
                    emptyTable: '<div class="py-3 text-muted"><i class="ri-inbox-line me-1"></i> No trip records found for the selected filters.</div>',
                    zeroRecords: '<div class="py-3 text-muted"><i class="ri-inbox-line me-1"></i> No matching trip records found.</div>'
                }
            });
        }

        function loadLicenseReport() {
            $('#licensesTableBody').html('<tr><td colspan="5" class="text-center py-4 text-muted"><i class="ri-loader-4-line"></i> Loading license records...</td></tr>');
            $.ajax({
                url: '/employee/reports/licenses',
                type: 'GET',
                success: function(res) {
                    if(res.success && res.data) {
                        let tbody = '';
                        if (res.data.rows && res.data.rows.length > 0) {
                            res.data.rows.forEach(r => {
                                let badgeStyle = '';
                                if(r.status_code === 'valid') badgeStyle = 'background:#dcfce7; color:#166534; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:500; border:1px solid #bbf7d0';
                                else if(r.status_code === 'expiring') badgeStyle = 'background:#fee2e2; color:#b91c1c; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:500; border:1px solid #fecaca';
                                else if(r.status_code === 'expired') badgeStyle = 'background:#fff; color:#dc2626; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid #fecaca';
                                else if(r.status_code === 'missing') badgeStyle = 'background:#fef3c7; color:#92400e; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:500; border:1px solid #fde68a';
                                
                                tbody += `
                                    <tr>
                                        <td>
                                            <strong>${r.driver_name}</strong>
                                            <div class="text-muted font-monospace small">${r.emp_code || ''}</div>
                                        </td>
                                        <td>${r.license_no}</td>
                                        <td>${r.classes}</td>
                                        <td>${r.expiry_date}</td>
                                        <td><span style="${badgeStyle}">${r.status_text}</span></td>
                                    </tr>
                                `;
                            });
                        } else {
                            tbody = '<tr><td colspan="5" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No drivers found.</td></tr>';
                        }
                        $('#licensesTableBody').html(tbody);
                    } else {
                        $('#licensesTableBody').html('<tr><td colspan="5" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No drivers found.</td></tr>');
                    }
                },
                error: function() {
                    $('#licensesTableBody').html('<tr><td colspan="5" class="text-center py-4 text-muted"><i class="ri-information-line me-1"></i> No drivers found.</td></tr>');
                }
            });
        }

        function populateDriverDropdown() {
            let drivers = allEmployees.filter(e => {
                let t = String(e.emp_type || (e.employee_type ? e.employee_type.name : '')).toLowerCase();
                return t.includes('driver');
            });
            if (drivers.length === 0 && allEmployees.length > 0) {
                drivers = allEmployees;
            }
            let currentVal = $('#hubDriverSelect').val();
            let html = '<option value="">-- Select Driver --</option>';
            drivers.forEach(d => {
                let selected = (currentVal && currentVal == d.id) ? 'selected' : '';
                html += `<option value="${d.id}" ${selected}>${d.employee_name} (${d.emp_code || 'N/A'})</option>`;
            });
            $('#hubDriverSelect').html(html);
            if ($.fn.select2) {
                $('#hubDriverSelect').select2({
                    placeholder: '-- Select Driver --',
                    allowClear: true,
                    width: '260px'
                });
            }
        }

        function fetchPerformanceData(id) {
            $.ajax({
                url: '/employee/performance/' + id,
                type: 'GET',
                success: function(res) {
                    if(res.success) {
                        let data = res.data;
                        $('#hubTrips').text(data.trips);
                        $('#hubDistance').text(data.distance + ' KM');
                        
                        $('#hubRevenue').text('₹' + data.revenue.toLocaleString());
                        $('#hubMonthlyRev').text('₹' + data.monthly_avg.toLocaleString());
                        
                        $('#hubProfit').text('₹' + data.profit.toLocaleString());
                        $('#hubMargin').text(data.margin + '%');
                        
                        $('#hubScore').html(`<i class="ri-star-fill" style="font-size:20px; color:#111827;"></i> ${data.safety_score}`);
                        $('#hubVehicles').text(data.vehicles_logged);
                        
                        $('#hubWorked').text(data.days_worked);
                        $('#hubLeave').text(data.days_leave);
                        $('#hubUnassigned').text(data.days_unassigned);
                        
                        $('#hubTenure').text(`Total Tenure in System: ${data.tenure_days} days (Enrolled ${data.join_date})`);
                        
                        $('#hubAvgProfit').text('₹' + data.avg_profit.toLocaleString());
                        $('#hubAvgDist').text(data.avg_distance + ' KM');
                    }
                }
            });
        }

        function openDriverTripModal() {
            let driverId = $('#hubDriverSelect').val();
            if (!driverId) {
                alert('Please select a driver first.');
                return;
            }
            let driverName = $('#hubDriverSelect option:selected').text();
            $('#driverTripModalSubtitle').text('Trip Ledger for: ' + driverName);
            $('#driverTripListBody').html('');
            $('#driverTripModalLoading').show();
            $('#driverTripTableWrap').hide();
            $('#driverTripModalEmpty').hide();
            $('#driverTripListModal').css('display', 'flex');

            $.ajax({
                url: '/employee/driver-trips/' + driverId,
                type: 'GET',
                success: function(res) {
                    $('#driverTripModalLoading').hide();
                    $('#driverTripTableWrap').show();
                    if (res.success && res.data && res.data.length > 0) {
                        let tbody = '';
                        res.data.forEach(function(r) {
                            let statusColor = '#6b7280';
                            let statusBg   = '#f3f4f6';
                            if (r.status === 'Completed')   { statusColor = '#166534'; statusBg = '#dcfce7'; }
                            else if (r.status === 'In Progress') { statusColor = '#92400e'; statusBg = '#fef3c7'; }
                            let netColor = r.net_margin >= 0 ? '#166534' : '#dc2626';
                            tbody += `<tr style="border-bottom:1px solid #f3f4f6;">
                                <td style="padding:10px 12px; font-weight:600; color:#4b5563;">${r.sno}</td>
                                <td style="padding:10px 12px; font-family:monospace; font-size:12px; font-weight:600;">${r.trip_sheet_no}</td>
                                <td style="padding:10px 12px; color:#6b7280; font-size:12px;">${r.trip_date}</td>
                                <td style="padding:10px 12px;"><span style="background:${statusBg}; color:${statusColor}; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600;">${r.status}</span></td>
                                <td style="padding:10px 12px; font-family:monospace; font-size:12px;">${r.truck_no}</td>
                                <td style="padding:10px 12px; text-align:right;">${r.distance_km} KM</td>
                                <td style="padding:10px 12px; text-align:right; font-weight:600;">₹${Number(r.freight_rev).toLocaleString()}</td>
                                <td style="padding:10px 12px; text-align:right; color:#dc2626;">₹${Number(r.trip_expenses).toLocaleString()}</td>
                                <td style="padding:10px 12px; text-align:right;">${r.diesel_ltrs} L</td>
                                <td style="padding:10px 12px; text-align:right;">${r.mileage_km} Kmpl</td>
                                <td style="padding:10px 12px; text-align:right; font-weight:700; color:${netColor};">₹${Number(r.net_margin).toLocaleString()}</td>
                            </tr>`;
                        });
                        $('#driverTripListBody').html(tbody);
                    } else {
                        $('#driverTripModalEmpty').show();
                    }
                },
                error: function() {
                    $('#driverTripModalLoading').hide();
                    $('#driverTripTableWrap').show();
                    $('#driverTripModalEmpty').show();
                }
            });
        }

        // Close trip modal on outside click
        $('#driverTripListModal').on('click', function(e) {
            if ($(e.target).is('#driverTripListModal')) {
                $(this).css('display', 'none');
            }
        });

        function loadEmployees() {
            // We fetch the raw list from a new API endpoint we will create
            $.ajax({
                url: '{{ route('employee.getList') }}', 
                type: 'GET',
                success: function(response) {
                    allEmployees = response.data;
                    renderList(allEmployees);
                    populateDriverDropdown();
                }
            });
        }

        function renderList(employees) {
            let html = '';
            employees.forEach((emp, index) => {
                let initials = emp.employee_name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
                let status = emp.driver_status || 'Unassigned';
                let statusClass = 'status-' + status.replace(/\s+/g, '-');
                
                let empNameSafe = emp.employee_name ? emp.employee_name.replace(/'/g, "\\'") : '';
                let empCodeSafe = emp.emp_code ? emp.emp_code.replace(/'/g, "\\'") : '';

                let isExpiring = false;
                let licenseBadgeHtml = `<span style="font-size:12px; color:#9ca3af">-</span>`;
                let truckHtml = `<span style="font-size:12px; color:#9ca3af">-</span>`;
                
                if (emp.emp_type === 'driver') {
                    if (emp.driving_licence_valid_upto) {
                        let today = new Date();
                        let licenseDate = new Date(emp.driving_licence_valid_upto);
                        let diffDays = Math.ceil((licenseDate - today) / (1000 * 60 * 60 * 24));
                        
                        if (diffDays <= 30 && diffDays >= 0) isExpiring = true;
                        else if (diffDays < 0) isExpiring = true;
                        
                        if (diffDays < 0) {
                            licenseBadgeHtml = `<div style="color: #dc2626; font-size: 12px; display: flex; align-items: center; gap: 5px; font-weight:600;"><i class="ri-error-warning-line"></i> <span>Expired<br>(${Math.abs(diffDays)}d ago)</span></div>`;
                        } else if (diffDays <= 30) {
                            licenseBadgeHtml = `<div style="color: #ef4444; font-size: 12px; display: flex; align-items: center; gap: 5px;"><i class="ri-error-warning-line"></i> <span>Expiring<br>soon (${diffDays}d)</span></div>`;
                        } else {
                            licenseBadgeHtml = `<div style="color: #10b981; font-size: 12px;"><i class="ri-check-line"></i> Valid</div>`;
                        }
                    }

                    if (emp.truck_no && emp.truck_no !== 'Not Assigned') {
                        truckHtml = `<span style="background: #f8fafc; color: #334155; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: monospace; border: 1px solid #e2e8f0;">${emp.truck_no}</span>`;
                    } else {
                        truckHtml = `<span style="font-size:13px; color:#9ca3af; font-style:italic;">Not Assigned</span>`;
                    }
                }

                html += `
                    <div class="employee-item" data-id="${emp.id}" data-type="${emp.emp_type}" data-status="${status.toLowerCase()}" data-expiring="${isExpiring}" onclick="loadDetails(${emp.id}, this)" ondblclick="${emp.emp_type === 'driver' ? `window.location.href='/employee/driver-profile/${emp.id}'` : ''}">
                        <div>
                            <span style="font-weight: 600; color: #4b5563;">${index + 1}</span>
                        </div>
                        <div class="emp-name-col">
                            <div class="emp-avatar">${initials}</div>
                            <div>
                                <div class="emp-name" style="font-weight: 600; color: #1f2937;">${emp.employee_name}</div>
                                <div style="font-size: 11px; color: #9ca3af; font-family: monospace; margin-top: 2px;">${emp.emp_code || ''}</div>
                                <div class="emp-id" style="margin-top: 2px;">Joined: ${emp.joining_date ? new Date(emp.joining_date).toISOString().split('T')[0] : 'N/A'}</div>
                            </div>
                        </div>
                        <div>
                            <span style="text-transform: capitalize; color: #374151; font-size: 13px; font-weight: 500;">${emp.emp_type}</span>
                        </div>
                        <div>
                            <div style="font-size: 13px; color: #4b5563;"><i class="ri-phone-line"></i> ${emp.mobile_no}</div>
                        </div>
                        <div>
                            ${truckHtml}
                        </div>
                        <div>
                            ${emp.emp_type === 'driver' ? `<span class="badge-status ${statusClass}">${status === 'Assigned' ? '<i class="ri-checkbox-circle-line"></i> ' : ''}${status}</span>` : `<span style="font-size:12px; color:#9ca3af">-</span>`}
                        </div>
                        <div>
                            ${licenseBadgeHtml}
                        </div>
                        <div class="action-icons">
                            ${emp.emp_type === 'driver' ? `<i class="ri-arrow-left-right-line" style="color: #4f46e5; cursor: pointer;" onclick="openTruckAssignModal(event, ${emp.id}, '${empNameSafe}', '${empCodeSafe}')" title="Assign Truck"></i>` : ''}
                            ${emp.emp_type === 'driver' ? `<i class="ri-calendar-event-line" style="color: #ea580c; cursor: pointer;" onclick="openLeaveModal(event, ${emp.id}, '${empNameSafe}', '${empCodeSafe}')" title="Record Leave"></i>` : ''}
                            <a href="/employee/${emp.id}/edit" title="Edit" style="color:inherit" onclick="event.stopPropagation()"><i class="ri-edit-line"></i></a>
                            <i class="ri-delete-bin-line" onclick="deleteIt(event, ${emp.id})" title="Delete"></i>
                        </div>
                    </div>
                `;
            });
            if(employees.length === 0) {
                html = '<div class="text-center py-4 text-muted">No employees found.</div>';
            }
            $('#employeeList').html(html);
        }

        function loadDetails(id, elem) {
            $('.employee-item').removeClass('active-emp');
            $(elem).addClass('active-emp');

            $('#noSelection').hide();
            $('#detailsContent').show();

            let emp = allEmployees.find(e => e.id === id);
            
            let initials = emp.employee_name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
            
            let status = emp.driver_status || 'Unassigned';
            let statusClass = 'status-' + status.replace(/\s+/g, '-');

            let detailsHtml = `
                <div class="details-header" style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div style="display: flex; gap: 15px; align-items: center;">
                        <div class="emp-avatar" style="width: 60px; height: 60px; font-size: 24px; display:flex; align-items:center; justify-content:center; background:#4f46e5; color:#fff; border-radius:12px;">${initials}</div>
                        <div>
                            <h4 style="margin:0; font-weight:600; color:#111827;">${emp.employee_name}</h4>
                            ${emp.emp_type === 'driver' ? `<span class="badge-status ${statusClass} mt-1 d-inline-block">${status}</span>` : `<span class="badge bg-secondary mt-1">Staff</span>`}
                        </div>
                    </div>
                    ${emp.emp_type === 'driver' ? `<button class="btn-submit" onclick="window.location.href='/employee/driver-profile/${emp.id}'" style="padding: 6px 12px; font-size: 12px;"><i class="ri-eye-line"></i> View Profile</button>` : ''}
                </div>
                
                <div class="details-section">
                    <div style="font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                        <i class="ri-user-line" style="color: #4f46e5; font-size: 18px;"></i> Personal Particulars & Records
                    </div>
                    <div class="detail-grid" style="margin-bottom: 15px; row-gap: 20px;">
                        <div class="detail-item">
                            <label style="text-transform: uppercase;">Father's Name</label>
                            <span>${emp.father_name || 'N/A'}</span>
                        </div>
                        <div class="detail-item">
                            <label style="text-transform: uppercase;">Date of Birth</label>
                            <span>${emp.dob ? new Date(emp.dob).toISOString().split('T')[0] : 'N/A'}</span>
                        </div>
                        <div class="detail-item">
                            <label style="text-transform: uppercase;">Blood Group</label>
                            ${emp.blood_group ? `<span style="background: #fdf2f8; color: #db2777; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; display: inline-block;">${emp.blood_group} Group</span>` : '<span>N/A</span>'}
                        </div>
                        <div class="detail-item"></div>
                        <div class="detail-item">
                            <label style="text-transform: uppercase;">Aadhaar (ID)</label>
                            <span style="font-family: monospace; font-size: 14px;">${emp.aadhaar_card_no || 'N/A'}</span>
                        </div>
                        <div class="detail-item">
                            <label style="text-transform: uppercase;">PAN Card</label>
                            <span style="font-family: monospace; font-size: 14px;">${emp.pan_card_no || 'N/A'}</span>
                        </div>
                        <div class="detail-item">
                            <label style="text-transform: uppercase;">Mobile Number</label>
                            <span style="display: flex; align-items: center; gap: 5px;"><i class="ri-phone-line" style="color: #9ca3af; font-size: 16px;"></i> ${emp.mobile_no || 'N/A'}</span>
                        </div>
                    </div>
                    
                    <div class="detail-item" style="margin-bottom: 8px;">
                        <label style="text-transform: uppercase;">Emergency Contact</label>
                    </div>
                    <div style="background: #fff; padding: 12px 15px; border-radius: 8px; font-size: 13px; color: #374151; border: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;">
                        <span style="font-family: monospace; font-size: 13px;">${emp.emergency_contact || 'N/A'}</span>
                        <span style="background: #f1f5f9; color: #475569; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;">PRIMARY KIN</span>
                    </div>
                </div>
            `;

            if(emp.emp_type === 'driver') {
                detailsHtml += `
                    <div class="details-section">
                        <div class="section-title">License & Qualifications</div>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <label>License Number</label>
                                <span>${emp.driving_licence_no || 'N/A'}</span>
                            </div>
                            <div class="detail-item">
                                <label>Experience</label>
                                <span>${emp.experience_years || '0'} Years</span>
                            </div>
                            <div class="detail-item">
                                <label>License Classes</label>
                                <span>${emp.license_class ? JSON.parse(emp.license_class).join(', ') : 'N/A'}</span>
                            </div>
                            <div class="detail-item">
                                <label>Expiry Date</label>
                                <span style="color: #dc2626;">${emp.driving_licence_valid_upto ? new Date(emp.driving_licence_valid_upto).toLocaleDateString() : 'N/A'}</span>
                            </div>
                        </div>
                    </div>
                `;
            }

            $('#detailsPane').html(detailsHtml);
        }

        function deleteIt(e, id) {
            e.stopPropagation(); // prevent row click
            swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this data!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes, I am sure!',
                    cancelButtonText: "No, cancel it!",
                    closeOnConfirm: false,
                    closeOnCancel: false
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: '/employee/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function () {
                                swal("Deleted!", "Data has been deleted!", "success");
                                loadEmployees();
                                $('#detailsPane').html(`
                                    <div class="no-selection">
                                        <i class="ri-user-smile-line"></i>
                                        <h4>Select an Employee</h4>
                                        <p>Click on any employee from the list to view their full details here.</p>
                                    </div>
                                `);
                            }
                        });
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }
                });
        }
        function fetchTimeline(id) {
            $.ajax({
                url: '/employee/timeline/' + id,
                type: 'GET',
                success: function(res) {
                    if(res.success) {
                        let html = '';
                        res.data.forEach(item => {
                            html += `
                                <div class="timeline-item">
                                    <div class="timeline-icon"><i class="${item.icon}"></i></div>
                                    <div class="timeline-content">
                                        <div class="tl-title">${item.title} <span class="tl-date"><i class="ri-calendar-line"></i> ${item.date}</span></div>
                                        <div class="tl-desc">${item.description}</div>
                                    </div>
                                </div>
                            `;
                        });
                        if(html === '') html = '<div class="timeline-item"><div class="timeline-content"><div class="tl-desc">No recent activity.</div></div></div>';
                        $('#timelineList').html(html);
                        $('#timelineCount').text(res.data.length + ' records');
                    }
                }
            });
        }

        function closeModal(id) {
            $('#' + id).css('display', 'none');
        }

        function openTruckAssignModal(e, id, name, code) {
            e.stopPropagation();
            $('#truckModalDriverName').text(`Driver: ${name} (${code})`);
            $('#assignDriverId').val(id);
            
            // fetch current truck
            $.ajax({
                url: '/employee/current-truck/' + id,
                type: 'GET',
                success: function(res) {
                    if(res.success && res.truck_no) {
                        $('#currentTruckNo').text(res.truck_no);
                        $('#currentTruckContainer').show();
                        $('#truckModalStatusInfo').hide();
                    } else {
                        $('#currentTruckContainer').hide();
                        $('#truckModalStatusInfo').show();
                    }
                    
                    // fetch available trucks
                    $.ajax({
                        url: '/employee/available-trucks',
                        type: 'GET',
                        success: function(res) {
                            let html = '<option value="">-- Choose an active truck --</option>';
                            res.data.forEach(t => {
                                let status = t.current_driver ? `Replaces: ${t.current_driver}` : '[AVAILABLE]';
                                html += `<option value="${t.id}">${t.truck_no} - ${status}</option>`;
                            });
                            $('#assignTruckSelect').html(html);
                            $('#truckModal').css('display', 'flex');
                        }
                    });
                }
            });
        }

        function deallocateCurrentTruck() {
            let id = $('#assignDriverId').val();
            let deallocateDate = $('#deallocateDate').val();
            if(!id) return;
            if(!deallocateDate) { alert('De-allocation date is required'); return; }
            
            $.ajax({
                url: '/employee/deallocate-truck',
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    driver_id: id,
                    deallocate_date: deallocateDate
                },
                success: function(res) {
                    if(res.success) {
                        closeModal('truckModal');
                        swal("De-allocated!", "The truck has been removed from this driver.", "success");
                        loadEmployees();
                        fetchTimeline(id);
                    }
                }
            });
        }

        function submitTruckAssignment() {
            let data = {
                driver_id: $('#assignDriverId').val(),
                truck_id: $('#assignTruckSelect').val(),
                assign_date: $('#assignTruckDate').val(),
                remarks: $('#assignTruckRemarks').val(),
                _token: '{{ csrf_token() }}'
            };
            if(!data.truck_id) { alert('Please select a truck'); return; }
            if(!data.assign_date) { alert('Assignment date is required'); return; }

            $.ajax({
                url: '/employee/assign-truck',
                type: 'POST',
                data: data,
                success: function(res) {
                    if(res.success) {
                        closeModal('truckModal');
                        swal("Success", "Truck assigned successfully!", "success");
                        loadEmployees();
                        // Refresh timeline if the right pane is currently showing this driver
                        if($('#detailsContent').is(':visible') && $('#detId').text() === $('#truckModalDriverName').text().split('(')[1].replace(')','')) {
                            fetchTimeline(data.driver_id);
                        }
                    } else {
                        swal("Error", res.message || "An error occurred.", "error");
                    }
                }
            });
        }

        function openLeaveModal(e, id, name, code) {
            e.stopPropagation();
            $('#leaveModalDriverName').text(`Driver: ${name} (${code})`);
            $('#leaveDriverId').val(id);
            $('#leaveStartDate').val('{{ date('d-m-Y') }}');
            $('#leaveEndDate').val('');
            $('#leaveReason').val('');
            $('#leaveRemarks').val('');
            $('#leaveModal').css('display', 'flex');
        }

        function submitRecordLeave() {
            let data = {
                driver_id: $('#leaveDriverId').val(),
                start_date: $('#leaveStartDate').val(),
                end_date: $('#leaveEndDate').val(),
                leave_type: $('#leaveType').val(),
                reason: $('#leaveReason').val(),
                remarks: $('#leaveRemarks').val(),
                _token: '{{ csrf_token() }}'
            };
            if(!data.start_date || !data.end_date) { alert('Dates are required'); return; }

            $.ajax({
                url: '/employee/record-leave',
                type: 'POST',
                data: data,
                success: function(res) {
                    if(res.success) {
                        closeModal('leaveModal');
                        swal("Success", "Leave recorded successfully!", "success");
                        loadEmployees();
                        if($('#detailsContent').is(':visible') && $('#detId').text() === $('#leaveModalDriverName').text().split('(')[1].replace(')','')) {
                            fetchTimeline(data.driver_id);
                        }
                    }
                }
            });
        }
        // Driver Details Modal JS
        function openDriverDetailsModal(id) {
            // Show loading state if needed, here we just fetch
            $.ajax({
                url: `/employee/driver-details/${id}`,
                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);

                    // Performance & Attendance
                    $('#dd-rating').text(m.safety_rating + ' / 5.0');
                    $('#dd-audits').text(`(${m.audits_logged} audits)`);
                    $('#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-rating').text(m.safety_rating);
                    $('#dd-perf-audits').text(m.audits_logged);

                    $('#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 = '';
                    if(res.trip_ledger && res.trip_ledger.length > 0) {
                        res.trip_ledger.forEach(t => {
                            tbody += `<tr>
                                <td><strong>${t.trip_sheet_no || 'N/A'}</strong><br><span class="text-muted" style="font-size:9px;">${t.gr_type || 'TRIP'}</span></td>
                                <td>${t.from_location || '-'} &rarr; ${t.to_location || '-'}</td>
                                <td><strong>${t.vehicle_no || (v ? v.vehicle_no : '-')}</strong></td>
                                <td>${t.total_km || 0} KM</td>
                                <td>₹${(t.freight_amount || 0).toLocaleString()}</td>
                                <td>₹${(t.total_expense || 0).toLocaleString()}</td>
                                <td class="text-success font-weight-600">₹${(t.profit_loss || 0).toLocaleString()}</td>
                                <td>${t.date ? new Date(t.date).toISOString().split('T')[0] : '-'}</td>
                            </tr>`;
                        });
                    } else {
                        tbody = '<tr><td colspan="8" class="text-center text-muted">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 = '';
                    if(res.audit_history && res.audit_history.length > 0) {
                        res.audit_history.forEach(h => {
                            ahBody += `
                            <div class="audit-item">
                                <div class="audit-header">
                                    <div class="audit-title">${h.event_type}</div>
                                    <div class="audit-date"><i class="ri-calendar-line"></i> ${h.event_date} <i class="ri-time-line"></i> ${h.event_time}</div>
                                </div>
                                <div class="audit-desc">${h.remarks || ''}</div>
                                ${h.truck_no ? `<div class="audit-desc mt-5"><i class="ri-truck-line text-muted"></i> ${h.truck_no}</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);

                    // Show
                    $('#driverDetailsModal').css('display', 'flex');
                }
            });
        }

        function closeDriverDetailsModal() {
            $('#driverDetailsModal').css('display', 'none');
        }

        function switchDriverTab(e, tabId) {
            $('.driver-tab').removeClass('active');
            $(e.currentTarget).addClass('active');
            $('.driver-tab-pane').removeClass('active');
            $('#' + tabId).addClass('active');
        }

        $('#exportReportBtn').on('click', function() {
            let activeContainer = $('.report-container:visible');
            if(activeContainer.length === 0) return;

            let table = activeContainer.find('table:visible');
            if(table.length === 0) {
                table = activeContainer.find('table');
            }
            if(table.length === 0) return;

            let csv = [];
            let rows = table.find('tr');

            for (let i = 0; i < rows.length; i++) {
                let row = [], cols = rows.eq(i).find('td, th');
                for (let j = 0; j < cols.length; j++) {
                    let text = cols.eq(j).text().replace(/"/g, '""').trim();
                    row.push('"' + text + '"');
                }
                csv.push(row.join(','));
            }

            let csvString = csv.join('\n');
            let a = document.createElement('a');
            a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
            a.target = '_blank';
            a.download = 'Report_Export_' + new Date().toISOString().slice(0,10) + '.csv';
            a.click();
        });
    </script>
@endpush