@extends('layout.app')
@section('title', 'Driver Dashboard')
@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.cs')}}s">
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css')}}">
    <style>
        .driver-header {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .driver-photo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #f0f0f0;
        }
        .driver-info h3 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }
        .driver-meta {
            display: flex;
            gap: 15px;
            margin-top: 10px;
            color: #666;
            font-size: 14px;
        }
        .driver-meta div {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .nav-tabs-custom {
            border-bottom: 2px solid #eee;
            margin-bottom: 20px;
        }
        .nav-tabs-custom .nav-link {
            border: none;
            color: #666;
            padding: 12px 20px;
            font-weight: 500;
        }
        .nav-tabs-custom .nav-link.active {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
            background: transparent;
        }
        .stat-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            text-align: center;
            height: 100%;
        }
        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }
        .stat-card .label {
            color: #666;
            font-size: 14px;
        }
        .timeline {
            position: relative;
            padding: 20px 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 20px;
            height: 100%;
            width: 2px;
            background: #e9ecef;
        }
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
            padding-left: 50px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #0d6efd;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #0d6efd;
        }
        .timeline-date {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }
        .timeline-content {
            background: #fff;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #eee;
        }
        @media (max-width: 768px) {
            .driver-header { flex-direction: column; text-align: center; }
            .driver-meta { flex-direction: column; gap: 8px; }
            .driver-header .ms-auto { margin-top: 15px; text-align: center; width: 100%; display: flex; flex-direction: column; }
            .nav-tabs-custom { display: flex; flex-direction: column; }
            .nav-tabs-custom .nav-link { text-align: left; }
            .card-body table tr, .card-body table th, .card-body table td { display: block; width: 100%; }
        }
    </style>
@endpush
@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('employee.index') }}">Employee List</a></li>
            <li class="breadcrumb-item active" aria-current="page">Driver Dashboard</li>
        </ol>
    </div>

    <div class="app-body">
        <!-- Header -->
        <div class="driver-header">
            @if($driver->emp_img)
                <img src="{{ Storage::disk('public')->url($driver->emp_img) }}" class="driver-photo" alt="Photo">
            @else
                <img src="{{ asset('theme/assets/images/user.png') }}" class="driver-photo" alt="Photo">
            @endif
            <div class="driver-info">
                <h3>{{ $driver->employee_name }} <span class="badge bg-{{ $driver->driver_status == 'Assigned' ? 'success' : ($driver->driver_status == 'On Leave' ? 'warning' : 'secondary') }} fs-6">{{ $driver->driver_status ?? 'Unassigned' }}</span></h3>
                <div class="driver-meta">
                    <div><i class="ri-phone-line"></i> {{ $driver->mobile_no }}</div>
                    <div><i class="ri-steering-2-line"></i> License: {{ $driver->driving_licence_no ?? 'N/A' }}</div>
                    <div><i class="ri-map-pin-line"></i> {{ $driver->city }}, {{ $driver->country }}</div>
                    <div><i class="ri-calendar-line"></i> Joined: {{ date('d M Y', strtotime($driver->joining_date)) }}</div>
                </div>
            </div>
            <div class="ms-auto text-end">
                <a href="{{ route('employee.edit', $driver->id) }}" class="btn btn-outline-primary"><i class="ri-edit-line"></i> Edit Profile</a>
            </div>
        </div>

        <!-- Tabs -->
        <ul class="nav nav-tabs nav-tabs-custom" id="driverTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">Overview</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab">Timeline</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="assignments-tab" data-bs-toggle="tab" data-bs-target="#assignments" type="button" role="tab">Truck Assignments</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="leaves-tab" data-bs-toggle="tab" data-bs-target="#leaves" type="button" role="tab">Leaves</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="performance-tab" data-bs-toggle="tab" data-bs-target="#performance" type="button" role="tab">Performance</button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="driverTabsContent">
            
            <!-- OVERVIEW -->
            <div class="tab-pane fade show active" id="overview" role="tabpanel">
                <div class="row g-3 mb-4">
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="label">Experience</div>
                            <div class="value">{{ $driver->experience_years ?? 0 }} yrs</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="label">Total Leaves</div>
                            <div class="value">{{ count($leaves) }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="label">Total Truck Assignments</div>
                            <div class="value">{{ count($assignments) }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="label">Average Rating</div>
                            <div class="value">
                                @if(count($behaviors) > 0)
                                    {{ number_format($behaviors->avg('overall_rating'), 1) }} <i class="ri-star-fill text-warning"></i>
                                @else
                                    N/A
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Personal Details</h5>
                            </div>
                            <div class="card-body">
                                <table class="table table-borderless table-sm">
                                    <tr><th width="30%">Father Name:</th><td>{{ $driver->father_name }}</td></tr>
                                    <tr><th>DOB:</th><td>{{ $driver->dob ? date('d M Y', strtotime($driver->dob)) : 'N/A' }}</td></tr>
                                    <tr><th>Blood Group:</th><td>{{ $driver->blood_group ?? 'N/A' }}</td></tr>
                                    <tr><th>Emergency Contact:</th><td>{{ $driver->emergency_contact ?? 'N/A' }}</td></tr>
                                    <tr><th>Aadhaar:</th><td>{{ $driver->aadhaar_card_no ?? 'N/A' }}</td></tr>
                                    <tr><th>PAN:</th><td>{{ $driver->pan_card_no ?? 'N/A' }}</td></tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Driving Information</h5>
                            </div>
                            <div class="card-body">
                                <table class="table table-borderless table-sm">
                                    <tr><th width="30%">License No:</th><td>{{ $driver->driving_licence_no }}</td></tr>
                                    <tr><th>Issue Date:</th><td>{{ $driver->license_issue_date ? date('d M Y', strtotime($driver->license_issue_date)) : 'N/A' }}</td></tr>
                                    <tr><th>Valid Upto:</th><td>{{ $driver->driving_licence_valid_upto ? date('d M Y', strtotime($driver->driving_licence_valid_upto)) : 'N/A' }}</td></tr>
                                    <tr><th>License Class:</th>
                                        <td>
                                            @php
                                                $classes = is_array(json_decode($driver->license_class, true)) ? json_decode($driver->license_class, true) : [$driver->license_class];
                                            @endphp
                                            {{ implode(', ', array_filter($classes)) }}
                                        </td>
                                    </tr>
                                    <tr><th>Prev. Employer:</th><td>{{ $driver->previous_employer ?? 'N/A' }}</td></tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TIMELINE -->
            <div class="tab-pane fade" id="timeline" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        @if(count($timelineEvents) > 0)
                            <div class="timeline">
                                @foreach($timelineEvents as $event)
                                    <div class="timeline-item">
                                        <div class="timeline-date">{{ date('d M Y', strtotime($event->event_date)) }} at {{ date('h:i A', strtotime($event->event_time)) }}</div>
                                        <div class="timeline-content">
                                            <strong>{{ $event->event_type }}</strong>
                                            @if($event->truck_no)
                                                <span class="badge bg-secondary ms-2">{{ $event->truck_no }}</span>
                                            @endif
                                            <p class="mb-0 mt-1 text-muted">{{ $event->remarks }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-center text-muted my-5">No timeline events recorded.</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- ASSIGNMENTS -->
            <div class="tab-pane fade" id="assignments" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <table class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Truck No</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Mileage (Kmpl)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($assignments as $assignment)
                                    <tr>
                                        <td>{{ $assignment->truck_no }}</td>
                                        <td>{{ date('d M Y', strtotime($assignment->start_date)) }}</td>
                                        <td>{{ $assignment->end_date ? date('d M Y', strtotime($assignment->end_date)) : 'Present' }}</td>
                                        <td>{{ $assignment->mileage_kmpl ?? '-' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">No truck assignments found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- LEAVES -->
            <div class="tab-pane fade" id="leaves" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <table class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Type</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($leaves as $leave)
                                    <tr>
                                        <td>{{ $leave->leave_type }}</td>
                                        <td>{{ date('d M Y', strtotime($leave->start_date)) }}</td>
                                        <td>{{ date('d M Y', strtotime($leave->end_date)) }}</td>
                                        <td>{{ $leave->reason }}</td>
                                        <td>
                                            <span class="badge bg-{{ $leave->status == 'Approved' ? 'success' : ($leave->status == 'Cancelled' ? 'danger' : 'warning') }}">
                                                {{ $leave->status }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No leave records found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- PERFORMANCE -->
            <div class="tab-pane fade" id="performance" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        @forelse($behaviors as $behavior)
                            <div class="mb-4 pb-3 border-bottom">
                                <h5>Review Date: {{ date('d M Y', strtotime($behavior->date)) }} <span class="badge bg-primary float-end">Overall: {{ $behavior->overall_rating }}/5</span></h5>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <ul class="list-unstyled">
                                            <li>Driving Quality: <strong>{{ $behavior->driving_quality }}/5</strong></li>
                                            <li>Vehicle Care: <strong>{{ $behavior->vehicle_care }}/5</strong></li>
                                        </ul>
                                    </div>
                                    <div class="col-md-4">
                                        <ul class="list-unstyled">
                                            <li>Fuel Saving: <strong>{{ $behavior->fuel_saving_habits }}/5</strong></li>
                                            <li>Punctuality: <strong>{{ $behavior->punctuality }}/5</strong></li>
                                        </ul>
                                    </div>
                                    <div class="col-md-4">
                                        <ul class="list-unstyled">
                                            <li>Discipline: <strong>{{ $behavior->discipline }}/5</strong></li>
                                            <li>Customer Behaviour: <strong>{{ $behavior->customer_behaviour }}/5</strong></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="mt-2 text-muted">
                                    <small><strong>Remarks:</strong> {{ $behavior->remarks }}</small>
                                </div>
                            </div>
                        @empty
                            <p class="text-center text-muted my-5">No performance records found.</p>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@push('footer_script')
@endpush