@extends('layouts.admin')

@section('content')
<div class="header">
    <div>
        <h1 style="margin:0; font-weight:800; font-size:28px">Driver Verification</h1>
        <p style="color:#555; margin:5px 0 0">Review and approve driver applications</p>
    </div>
</div>

<style>
    .driver-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px; }
    .driver-card { background: var(--card); border-radius: 25px; border: 1px solid #222; padding: 25px; transition: 0.3s; }
    .driver-card:hover { border-color: var(--primary); }
    
    .status-badge { padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .status-pending { background: rgba(255, 179, 0, 0.1); color: #ffb300; }
    .status-active { background: rgba(0, 255, 0, 0.1); color: #00ff00; }
    
    .vehicle-box { background: #1a1a1a; border-radius: 15px; padding: 15px; margin: 20px 0; border: 1px solid #222; }
    .detail-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
    .detail-label { color: #555; }
    .detail-value { font-weight: 600; color: #ccc; }
    
    .action-row { display: flex; gap: 10px; margin-top: 20px; }
</style>

<div class="driver-grid">
    @foreach($drivers as $driver)
    <div class="driver-card">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
            <div>
                <div style="font-weight: 800; font-size: 18px">{{ $driver->user->name ?? 'Unknown User' }}</div>
                <div style="font-size: 12px; color: #555">{{ $driver->user->email ?? '' }}</div>
            </div>
            <span class="status-badge status-{{ $driver->status }}">{{ $driver->status }}</span>
        </div>

        <div class="vehicle-box">
            <div style="font-size: 10px; text-transform: uppercase; color: var(--primary); font-weight: 800; margin-bottom: 12px; letter-spacing: 1px;">Vehicle Assets</div>
            <div class="detail-row">
                <span class="detail-label">Model</span>
                <span class="detail-value">{{ $driver->vehicle_model }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Color</span>
                <span class="detail-value">{{ $driver->vehicle_color }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Plate Number</span>
                <span class="detail-value" style="font-family: monospace; letter-spacing: 1px">{{ $driver->plate_number }}</span>
            </div>
        </div>

        @if(!$driver->is_verified)
        <div class="action-row">
            <form action="{{ route('admin.drivers.approve', $driver->id) }}" method="POST" style="flex: 1">
                @csrf
                <button type="submit" class="btn btn-primary" style="width: 100%">Approve Application</button>
            </form>
            <button class="btn btn-outline" style="flex: 1">Reject</button>
        </div>
        @else
        <div style="text-align: center; color: #444; font-size: 12px; font-weight: 600; padding: 10px; border: 1px dashed #222; border-radius: 10px;">
            <i class="fas fa-check-circle"></i> VERIFIED ON {{ $driver->updated_at->format('M d, Y') }}
        </div>
        @endif
    </div>
    @endforeach
</div>

@if($drivers->isEmpty())
<div style="text-align: center; padding: 100px 0; color: #444;">
    <div style="font-size: 48px; margin-bottom: 20px;">🚜</div>
    <div style="font-weight: 800; font-size: 20px">No Driver Applications Found</div>
    <p>All clear for now! New applications will appear here.</p>
</div>
@endif

<div style="margin-top: 30px">
    {{ $drivers->links() }}
</div>
@endsection