@extends('admin.layouts.admin')

@section('title','Driver Profile')
@section('page-title','Driver Profile')

@section('content')

<div class="row g-4">

    {{-- ================= LEFT: PROFILE + STATS ================= --}}
    <div class="col-xl-4 col-lg-5">

        {{-- PROFILE --}}
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">

                <div class="position-relative d-inline-block mb-3">
                    <img src="{{ $driver->profile_image
                        ? asset('storage/'.$driver->profile_image)
                        : 'https://ui-avatars.com/api/?name='.$driver->name.'&size=240' }}"
                         class="rounded-circle shadow"
                         width="120" height="120">

                    @if($driver->is_online)
                        <span class="position-absolute bottom-0 end-0 translate-middle p-2
                                     bg-success border border-white rounded-circle"></span>
                    @endif
                </div>

                <h5 class="mb-1 fw-semibold">{{ $driver->name }}</h5>
                <div class="text-muted small mb-3">{{ $driver->email }}</div>

                <div class="d-flex justify-content-center gap-2 mb-3">
                    <span class="badge {{ $driver->is_active ? 'bg-success' : 'bg-secondary' }}">
                        {{ $driver->is_active ? 'Active' : 'Inactive' }}
                    </span>
                    <span class="badge {{ $driver->is_online ? 'bg-success' : 'bg-danger' }}">
                        {{ $driver->is_online ? 'Online' : 'Offline' }}
                    </span>
                </div>

                {{-- TOGGLE --}}
                <form method="POST" action="{{ route('admin.drivers.toggle',$driver->id) }}">
                    @csrf
                    <button class="btn btn-outline-primary btn-sm w-100">
                        <i class="bi bi-toggle-on me-1"></i> Toggle Status
                    </button>
                </form>

            </div>
        </div>

        {{-- EARNINGS --}}
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-body text-center">
                <div class="text-muted small mb-1">Total Earnings</div>
                <div class="display-6 fw-bold text-success">
                    LKR {{ number_format($driver->earnings ?? 0,2) }}
                </div>
            </div>
        </div>

    </div>

    {{-- ================= RIGHT: DETAILS / ORDERS / KYC ================= --}}
    <div class="col-xl-8 col-lg-7">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-header bg-white pb-0">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#details">
                            <i class="bi bi-person-lines-fill me-1"></i> Details
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#orders">
                            <i class="bi bi-box-seam me-1"></i> Orders
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#kyc">
                            <i class="bi bi-shield-check me-1"></i> KYC
                        </a>
                    </li>
                </ul>
            </div>

            <div class="card-body tab-content pt-4">

                {{-- DETAILS --}}
                <div class="tab-pane fade show active" id="details">
                    <div class="row g-4">

                        @php
                            $fields = [
                                'Phone' => $driver->phone,
                                'Zone' => $driver->zone_id,
                                'Vehicle Type' => $driver->vehicle_type,
                                'Vehicle No' => $driver->vehicle_no,
                                'License No' => $driver->license_no,
                                'Joined' => $driver->created_at->format('d M Y'),
                            ];
                        @endphp

                        @foreach($fields as $label => $value)
                            <div class="col-md-6">
                                <div class="text-muted small">{{ $label }}</div>
                                <div class="fw-medium">{{ $value ?? '—' }}</div>
                            </div>
                        @endforeach

                    </div>
                </div>

                {{-- ORDERS --}}
                <div class="tab-pane fade" id="orders">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Status</th>
                                <th>Total</th>
                                <th>Date</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($driver->orders ?? [] as $order)
                                <tr>
                                    <td>#{{ $order->id }}</td>
                                    <td>
                                        <span class="badge bg-info">
                                            {{ ucfirst($order->status) }}
                                        </span>
                                    </td>
                                    <td>LKR {{ number_format($order->total,2) }}</td>
                                    <td>{{ $order->created_at->format('d M Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        No orders found
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- KYC --}}
                <div class="tab-pane fade" id="kyc">
                    <div class="row g-4">

                        <div class="col-md-6">
                            <div class="text-muted small">License Number</div>
                            <div class="fw-medium">{{ $driver->license_no ?? 'Pending' }}</div>
                        </div>

                        <div class="col-md-6">
                            <div class="text-muted small">Verification Status</div>
                            @if($driver->kyc_verified)
                                <span class="badge bg-success">Verified</span>
                            @else
                                <span class="badge bg-warning text-dark">Pending</span>
                            @endif
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

{{-- ================= LIVE LOCATION ================= --}}
<div class="card border-0 shadow-sm mt-4">
    <div class="card-header bg-white fw-semibold">
        <i class="bi bi-geo-alt-fill text-danger me-2"></i>
        Live Driver Location
    </div>
    <div class="card-body p-0">
        <div id="driverMap" style="height:420px;width:100%"></div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY"></script>

<script>
let map, marker;

function initMap() {
    map = new google.maps.Map(document.getElementById('driverMap'), {
        zoom: 14,
        center: { lat: 6.9271, lng: 79.8612 },
        mapTypeControl: false
    });

    marker = new google.maps.Marker({
        map: map,
        icon: "https://maps.google.com/mapfiles/ms/icons/red-dot.png"
    });

    loadLocation();
    setInterval(loadLocation, 10000);
}

function loadLocation() {
    fetch("{{ route('admin.drivers.location',$driver->id) }}")
        .then(res => res.json())
        .then(data => {
            if (!data.lat || !data.lng) return;

            const pos = {
                lat: parseFloat(data.lat),
                lng: parseFloat(data.lng)
            };

            marker.setPosition(pos);
            map.setCenter(pos);
        });
}

document.addEventListener('DOMContentLoaded', initMap);
</script>
@endpush