@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')}}">
    <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: 2fr 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: 2fr 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(5, 1fr);
            gap: 15px;
            margin-bottom: 30px;
        }
        .summary-card {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #e5e7eb;
        }
        .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</span>
                        <span data-filter="assigned">Assigned</span>
                        <span data-filter="unassigned">Unassigned</span>
                        <span data-filter="license_expiring">License Expiring</span>
                    </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>Driver</div>
                            <div>Contact</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">
                        <option value="">-- Select Driver --</option>
                    </select>
                </div>
            </div>

            <div id="hubContent" style="display: none;">
                <div class="metrics-grid">
                    <!-- Trips -->
                    <div class="metric-card">
                        <div>
                            <div class="metric-card-header">
                                <span>Trips & 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</div>
                        </div>
                        <div class="metric-footer">
                            <span>Total Distance:</span>
                            <strong id="hubDistance">0 KM</strong>
                        </div>
                    </div>

                    <!-- Revenue -->
                    <div class="metric-card">
                        <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</div>
                        </div>
                        <div class="metric-footer">
                            <span>Monthly Avg:</span>
                            <strong id="hubMonthlyRev">₹0</strong>
                        </div>
                    </div>

                    <!-- Profit -->
                    <div class="metric-card" style="border: 1px solid #bbf7d0;">
                        <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</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 Voyage</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 Voyage</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>
        <!-- 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">
                        <h2 id="repTotalDrivers">0</h2>
                        <p>Total Drivers</p>
                    </div>
                    <div class="summary-card sc-assigned">
                        <h2 id="repAssigned">0</h2>
                        <p>Assigned</p>
                    </div>
                    <div class="summary-card sc-unassigned">
                        <h2 id="repUnassigned">0</h2>
                        <p>Unassigned</p>
                    </div>
                    <div class="summary-card sc-leave">
                        <h2 id="repLeave">0</h2>
                        <p>On Leave</p>
                    </div>
                    <div class="summary-card sc-inactive">
                        <h2 id="repInactive">0</h2>
                        <p>Inactive</p>
                    </div>
                </div>
                <table class="report-table">
                    <thead>
                        <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">Loading...</td></tr>
                    </tbody>
                </table>
            </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 Report</h4>
                    <p>Report Generated: {{ date('Y-m-d') }} &bull; Trip Performance Ledger</p>
                </div>
                <table class="report-table">
                    <thead>
                        <tr>
                            <th>Driver Name (ID)</th>
                            <th class="text-center">Completed Trips</th>
                            <th class="text-center">Distance (KM)</th>
                            <th class="text-right">Freight / Revenue</th>
                            <th class="text-right">Trip Expenses</th>
                            <th class="text-right">Net Margin Profit</th>
                        </tr>
                    </thead>
                    <tbody id="tripsTableBody">
                        <tr><td colspan="6" class="text-center py-4">Loading...</td></tr>
                    </tbody>
                </table>
                <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>
                <table class="report-table">
                    <thead>
                        <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">Loading...</td></tr>
                    </tbody>
                </table>
                <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>
        let allEmployees = [];

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

            // 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').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 = $(this).data('filter');
                
                $('.employee-item').each(function() {
                    if (filter === 'all') {
                        $(this).show();
                    } else if (filter === 'assigned') {
                        $(this).toggle($(this).data('status') === 'assigned');
                    } else if (filter === 'unassigned') {
                        $(this).toggle($(this).data('status') === 'unassigned');
                    } else if (filter === 'inactive') {
                        $(this).toggle($(this).data('status') === 'inactive');
                    } else if (filter === 'license_expiring') {
                        $(this).toggle($(this).data('expiring') === true);
                    }
                });
            });

            // 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, #tripDriverFilter, #tripTruckFilter').change(function() {
                loadTripReport();
            });
        });

        function loadSummaryReport() {
            $.ajax({
                url: '/employee/reports/summary',
                type: 'GET',
                success: function(res) {
                    if(res.success) {
                        $('#repTotalDrivers').text(res.data.total);
                        $('#repAssigned').text(res.data.assigned);
                        $('#repUnassigned').text(res.data.unassigned);
                        $('#repLeave').text(res.data.on_leave);
                        $('#repInactive').text(res.data.inactive);

                        let tbody = '';
                        res.data.table.forEach(row => {
                            tbody += `
                                <tr>
                                    <td>${row.category}</td>
                                    <td><strong>${row.count} Drivers</strong></td>
                                    <td>${row.proportion}%</td>
                                </tr>
                            `;
                        });
                        $('#summaryTableBody').html(tbody);
                    }
                }
            });
        }

        function populateTripFilters() {
            let drivers = allEmployees.filter(e => e.emp_type === 'driver');
            let driverHtml = '<option value="">All Drivers</option>';
            drivers.forEach(d => {
                driverHtml += `<option value="${d.id}">${d.employee_name} (${d.emp_code})</option>`;
            });
            $('#tripDriverFilter').html(driverHtml);
        }

        function loadTripReport() {
            let data = {
                start_date: $('#tripStartDate').val(),
                end_date: $('#tripEndDate').val(),
                driver_id: $('#tripDriverFilter').val(),
                truck_id: $('#tripTruckFilter').val()
            };

            $.ajax({
                url: '/employee/reports/trips',
                type: 'GET',
                data: data,
                success: function(res) {
                    if(res.success) {
                        let tbody = '';
                        res.data.rows.forEach(r => {
                            tbody += `
                                <tr>
                                    <td><strong>${r.driver_name}</strong></td>
                                    <td class="text-center">${r.trips}</td>
                                    <td class="text-center">${r.distance} KM</td>
                                    <td class="text-right">₹${r.revenue.toLocaleString()}</td>
                                    <td class="text-right">₹${r.expenses.toLocaleString()}</td>
                                    <td class="text-right"><strong style="color:#166534">₹${r.profit.toLocaleString()}</strong></td>
                                </tr>
                            `;
                        });
                        if(res.data.rows.length === 0) {
                            tbody = '<tr><td colspan="6" class="text-center py-4">No trips found for selected filters</td></tr>';
                        }
                        $('#tripsTableBody').html(tbody);

                        let agg = res.data.aggregates;
                        $('#tripAggregates').html(`
                            <span>Trips: ${agg.total_trips}</span>
                            <span>Distance: ${agg.total_distance.toLocaleString()} KM</span>
                            <span class="profit">Total Profit: ₹${agg.total_profit.toLocaleString()}</span>
                        `);
                    }
                }
            });
        }

        function loadLicenseReport() {
            $.ajax({
                url: '/employee/reports/licenses',
                type: 'GET',
                success: function(res) {
                    if(res.success) {
                        let tbody = '';
                        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';
                            
                            tbody += `
                                <tr>
                                    <td><strong>${r.driver_name}</strong></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>
                            `;
                        });
                        $('#licensesTableBody').html(tbody);
                    }
                }
            });
        }

        function populateDriverDropdown() {
            let drivers = allEmployees.filter(e => e.emp_type === 'driver');
            let html = '<option value="">-- Select Driver --</option>';
            drivers.forEach(d => {
                html += `<option value="${d.id}">${d.employee_name} (${d.emp_code})</option>`;
            });
            $('#hubDriverSelect').html(html);
        }

        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 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);
                }
            });
        }

        function renderList(employees) {
            let html = '';
            employees.forEach(emp => {
                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 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>
                            <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();
            if(!id) return;
            
            $.ajax({
                url: '/employee/deallocate-truck',
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    driver_id: id
                },
                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(),
                _token: '{{ csrf_token() }}'
            };
            if(!data.truck_id) { alert('Please select a truck'); 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_voyage.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_voyage.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                    $('#dd-eff-dist').text(m.avg_distance_per_voyage.toFixed(1));

                    // Trips
                    let tbody = '';
                    if(res.trip_ledger && res.trip_ledger.length > 0) {
                        res.trip_ledger.forEach(t => {
                            tbody += `<tr>
                                <td><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('.report-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