@extends('admin.layouts.app')

@section('title', 'جزئیات راننده')

@section('content')
@include('admin.partials.iran-plate', ['loadStylesOnly' => true])
<div class="row">
    <!-- Driver Profile -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-body text-center">
                <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
                    {{ mb_substr($driver->name, 0, 1) }}
                </div>
                <h4>{{ $driver->name }}</h4>
                <p class="text-muted">راننده</p>

                @if($driver->driver_status === 'online')
                    <span class="badge bg-success mb-3">
                        <i class="fas fa-circle"></i> آنلاین
                    </span>
                @elseif($driver->driver_status === 'busy')
                    <span class="badge bg-warning mb-3">
                        <i class="fas fa-circle"></i> مشغول
                    </span>
                @else
                    <span class="badge bg-secondary mb-3">
                        <i class="fas fa-circle"></i> آفلاین
                    </span>
                @endif

                <div class="text-start mt-4">
                    <div class="mb-3">
                        <i class="fas fa-phone text-muted me-2"></i>
                        <span class="font-monospace">{{ $driver->phone }}</span>
                    </div>
                    @if($driver->email)
                    <div class="mb-3">
                        <i class="fas fa-envelope text-muted me-2"></i>
                        <span>{{ $driver->email }}</span>
                    </div>
                    @endif
                    @if($driver->national_code)
                    <div class="mb-3">
                        <i class="fas fa-id-card text-muted me-2"></i>
                        <span class="font-monospace">{{ $driver->national_code }}</span>
                    </div>
                    @endif
                    @if($driver->address)
                    <div class="mb-3">
                        <i class="fas fa-map-marker-alt text-muted me-2"></i>
                        <span>{{ $driver->address }}</span>
                    </div>
                    @endif
                </div>

                <hr>

                <a href="{{ route('admin.users.edit', $driver->id) }}" class="btn btn-primary w-100">
                    <i class="fas fa-edit me-2"></i>
                    ویرایش اطلاعات
                </a>
            </div>
        </div>

        <!-- Vehicle Info -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">اطلاعات وسیله نقلیه</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="text-muted mb-1">نوع خودرو</label>
                    <p class="fw-bold">
                        @if($driver->vehicle_type === 'van')
                            <i class="fas fa-shuttle-van me-1"></i> ون
                        @elseif($driver->vehicle_type === 'truck')
                            <i class="fas fa-truck me-1"></i> کامیون
                        @elseif($driver->vehicle_type === 'trailer')
                            <i class="fas fa-truck-moving me-1"></i> تریلر
                        @else
                            نامشخص
                        @endif
                    </p>
                </div>
                <div class="mb-3">
                    <label class="text-muted mb-1">پلاک</label>
                    <div class="fw-bold">@include('admin.partials.iran-plate', ['plate' => $driver->vehicle_plate])</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted mb-1">شماره گواهینامه</label>
                    <p class="font-monospace">{{ $driver->license_number ?? '-' }}</p>
                </div>
                <div>
                    <label class="text-muted mb-1">تاریخ انقضای گواهینامه</label>
                    <p>{{ $driver->license_expiry ?? '-' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance & Activity -->
    <div class="col-lg-8">
        <!-- Stats -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body text-center">
                        <h3 class="mb-0">{{ number_format($stats['total_loads'] ?? 0) }}</h3>
                        <small>کل بارها</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body text-center">
                        <h3 class="mb-0">{{ number_format($stats['completed_loads'] ?? 0) }}</h3>
                        <small>تکمیل شده</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body text-center">
                        <h3 class="mb-0">{{ number_format($stats['in_progress_loads'] ?? 0) }}</h3>
                        <small>در حال انجام</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body text-center">
                        <h3 class="mb-0">{{ number_format($stats['total_revenue'] ?? 0) }}</h3>
                        <small>درآمد (تومان)</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rating -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">امتیاز و بازخورد</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <h2 class="text-warning">{{ number_format($driver->rating ?? 0, 1) }}</h2>
                        <div class="mb-2">
                            @php $rating = $driver->rating ?? 0; @endphp
                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= $rating)
                                    <i class="fas fa-star text-warning"></i>
                                @else
                                    <i class="far fa-star text-warning"></i>
                                @endif
                            @endfor
                        </div>
                        <small class="text-muted">از {{ $stats['total_ratings'] ?? 0 }} نظر</small>
                    </div>
                    <div class="col-md-8">
                        @for($i = 5; $i >= 1; $i--)
                        <div class="d-flex align-items-center mb-2">
                            <span class="me-2">{{ $i }} ستاره</span>
                            <div class="progress flex-grow-1 me-2" style="height: 20px;">
                                @php
                                    $percentage = isset($stats['ratings_distribution'][$i])
                                        ? ($stats['ratings_distribution'][$i] / max($stats['total_ratings'], 1) * 100)
                                        : 0;
                                @endphp
                                <div class="progress-bar bg-warning" style="width: {{ $percentage }}%"></div>
                            </div>
                            <span class="text-muted">{{ $stats['ratings_distribution'][$i] ?? 0 }}</span>
                        </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>

        <!-- Current Location Map -->
        @if($driver->location && $driver->location->latitude && $driver->location->longitude)
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">موقعیت فعلی راننده</h5>
            </div>
            <div class="card-body">
                <div id="driverMap" style="height: 350px; border-radius: 0.5rem;"></div>
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-clock me-1"></i>
                        آخرین به‌روزرسانی: {{ $driver->location && $driver->location->last_ping_at ? \Morilog\Jalali\Jalalian::fromDateTime($driver->location->last_ping_at)->format('Y/m/d H:i') : 'نامشخص' }}
                    </small>
                </div>
            </div>
        </div>
        @endif

        <!-- Location History -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">تاریخچه موقعیت</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>زمان</th>
                                <th>موقعیت</th>
                                <th>سرعت</th>
                                <th>وضعیت</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($locationHistory ?? [] as $location)
                            <tr>
                                <td>
                                    <small>{{ \Morilog\Jalali\Jalalian::fromDateTime($location->created_at)->format('Y/m/d H:i') }}</small>
                                </td>
                                <td>
                                    <small class="font-monospace">{{ number_format($location->latitude, 6) }}, {{ number_format($location->longitude, 6) }}</small>
                                </td>
                                <td>{{ $location->speed ?? 0 }} km/h</td>
                                <td>
                                    @if($location->status === 'moving')
                                        <span class="badge bg-success">در حرکت</span>
                                    @else
                                        <span class="badge bg-secondary">متوقف</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted">
                                    تاریخچه موقعیتی یافت نشد
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Recent Loads -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">آخرین بارها</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>کد</th>
                                <th>عنوان</th>
                                <th>مسیر</th>
                                <th>قیمت</th>
                                <th>وضعیت</th>
                                <th>تاریخ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentLoads ?? [] as $load)
                            <tr>
                                <td>#{{ $load->id }}</td>
                                <td>{{ $load->title }}</td>
                                <td>
                                    <small>
                                        {{ mb_substr($load->origin_address, 0, 20) }}...
                                        <i class="fas fa-arrow-left mx-1"></i>
                                        {{ mb_substr($load->destination_address, 0, 20) }}...
                                    </small>
                                </td>
                                <td>{{ number_format($load->price) }}</td>
                                <td>
                                    @if($load->status === 'completed')
                                        <span class="badge bg-success">تکمیل شده</span>
                                    @elseif($load->status === 'in_progress')
                                        <span class="badge bg-primary">در حال انجام</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $load->status }}</span>
                                    @endif
                                </td>
                                <td>
                                    <small>{{ \Morilog\Jalali\Jalalian::fromDateTime($load->created_at)->format('Y/m/d') }}</small>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-3">
                                    هیچ باری یافت نشد
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    @if($driver->location && $driver->location->latitude && $driver->location->longitude)
    // Initialize map (Neshan SDK)
    const map = new L.Map('driverMap', {
        key: '{{ config('services.neshan.map_api_key') }}',
        maptype: 'neshan',
        poi: false,
        traffic: false,
        center: [{{ $driver->location->latitude }}, {{ $driver->location->longitude }}],
        zoom: 13,
    });

    // Driver marker
    const driverIcon = L.divIcon({
        html: '<i class="fas fa-truck fa-2x text-primary"></i>',
        iconSize: [30, 30],
        className: 'custom-div-icon'
    });

    L.marker([{{ $driver->location->latitude }}, {{ $driver->location->longitude }}], { icon: driverIcon })
        .bindPopup('<strong>{{ $driver->name }}</strong><br>آخرین موقعیت')
        .addTo(map)
        .openPopup();

    // Add location history trail if available
    @if(isset($locationHistory) && count($locationHistory) > 0)
    const trail = [
        @foreach($locationHistory as $loc)
        [{{ $loc->latitude }}, {{ $loc->longitude }}],
        @endforeach
    ];

    if (trail.length > 1) {
        L.polyline(trail, {
            color: '#3b82f6',
            weight: 3,
            opacity: 0.6
        }).addTo(map);
    }
    @endif
    @endif
</script>

<style>
    .custom-div-icon {
        background: transparent;
        border: none;
    }
</style>
@endpush