@extends('freight.layouts.app')
@section('title', 'Dashboard')

@section('content')
    <h1 style="font-size:1.5rem;font-weight:800;margin:0 0 20px;">Welcome, {{ $driver->first_name }} 👋</h1>

    <div class="stat-grid" style="margin-bottom:24px;">
        <div class="stat">
            <div class="label">Account Status</div>
            <div class="value">
                @if($driver->is_active)
                    <span class="badge badge-on">Active</span>
                @else
                    <span class="badge badge-off">Inactive</span>
                @endif
            </div>
        </div>
        <div class="stat">
            <div class="label">Registered Trucks</div>
            <div class="value">{{ $driver->vehicles->count() }}</div>
        </div>
        <div class="stat">
            <div class="label">CDL Number</div>
            <div class="value" style="font-size:1.1rem;">{{ $driver->cdl_number ?: '—' }}</div>
        </div>
        <div class="stat">
            <div class="label">CDL Expiry</div>
            <div class="value" style="font-size:1.1rem;">{{ $driver->cdl_expiry ? \Carbon\Carbon::parse($driver->cdl_expiry)->format('d M Y') : '—' }}</div>
        </div>
    </div>

    <div class="card" id="availabilityCard">
        <h2><i class="fas fa-satellite-dish"></i> Availability &amp; Location</h2>
        <p style="color:#64748b;margin:0 0 14px;">
            Go online and share your location so freight clients can find you on their map.
            Current status:
            @if($driver->is_available)
                <span class="badge badge-on">Online</span>
            @else
                <span class="badge badge-off">Offline</span>
            @endif
            @if($driver->current_location)
                <span style="margin-left:8px;color:#475569;"><i class="fas fa-location-dot"></i> {{ $driver->current_location }}</span>
            @endif
        </p>
        <div style="display:flex;gap:12px;flex-wrap:wrap;">
            @if($driver->is_available)
                <button type="button" id="btnRefresh" class="btn btn-primary"><i class="fas fa-location-crosshairs"></i> Update My Location</button>
                <button type="button" id="btnOffline" class="btn btn-light"><i class="fas fa-power-off"></i> Go Offline</button>
            @else
                <button type="button" id="btnOnline" class="btn btn-primary"><i class="fas fa-power-off"></i> Go Online &amp; Share Location</button>
            @endif
        </div>
        <p id="geoMsg" style="font-size:.82rem;color:#64748b;margin:12px 0 0;"></p>
    </div>

    <div class="card">
        <h2><i class="fas fa-id-card"></i> Profile Summary</h2>
        <div class="grid">
            <div><strong>Name:</strong> {{ $driver->full_name }}</div>
            <div><strong>Email:</strong> {{ $driver->email }}</div>
            <div><strong>Phone:</strong> {{ $driver->phone ?: '—' }}</div>
            <div><strong>City/State:</strong> {{ trim(($driver->city ?: '') . ' ' . ($driver->state ?: '')) ?: '—' }}</div>
        </div>
        <div style="margin-top:16px;">
            <a href="{{ route('freight.profile') }}" class="btn btn-primary"><i class="fas fa-edit"></i> Update My Profile &amp; Truck Info</a>
        </div>
    </div>

    <div class="card">
        <h2><i class="fas fa-truck"></i> My Trucks</h2>
        @if($driver->vehicles->count())
            <table>
                <thead><tr><th>Type</th><th>Make / Model</th><th>Year</th><th>Plate</th><th>Capacity</th><th>Status</th></tr></thead>
                <tbody>
                    @foreach($driver->vehicles as $v)
                        <tr>
                            <td>{{ $v->truck_type }}</td>
                            <td>{{ trim($v->make . ' ' . $v->model) ?: '—' }}</td>
                            <td>{{ $v->year ?: '—' }}</td>
                            <td>{{ $v->plate_number ?: '—' }}</td>
                            <td>{{ $v->capacity_weight ? $v->capacity_weight . ' lbs' : '—' }}</td>
                            <td>@if($v->is_active)<span class="badge badge-on">Active</span>@else<span class="badge badge-off">Inactive</span>@endif</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p style="color:#64748b;margin:0;">No trucks added yet. <a href="{{ route('freight.profile') }}">Add your truck information →</a></p>
        @endif
    </div>

    <script>
        var locationUrl = '{{ route('freight.location.update') }}';
        var csrf = '{{ csrf_token() }}';

        function postStatus(payload, msg) {
            var geoMsg = document.getElementById('geoMsg');
            if (geoMsg && msg) geoMsg.textContent = msg;
            fetch(locationUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify(payload),
            }).then(function () { window.location.reload(); });
        }

        function shareLocation() {
            var geoMsg = document.getElementById('geoMsg');
            if (!navigator.geolocation) {
                postStatus({ is_available: 1 }, 'Geolocation not supported — you are online without a pin.');
                return;
            }
            if (geoMsg) geoMsg.textContent = 'Getting your location…';
            navigator.geolocation.getCurrentPosition(function (pos) {
                postStatus({
                    is_available: 1,
                    latitude: pos.coords.latitude,
                    longitude: pos.coords.longitude,
                }, 'Location shared. You are now visible to clients.');
            }, function () {
                postStatus({ is_available: 1 }, 'Could not read GPS — you are online without a precise pin.');
            }, { enableHighAccuracy: true, timeout: 10000 });
        }

        document.addEventListener('click', function (e) {
            if (e.target.closest('#btnOnline') || e.target.closest('#btnRefresh')) shareLocation();
            if (e.target.closest('#btnOffline')) postStatus({ is_available: 0 }, 'Going offline…');
        });
    </script>
@endsection