@extends('layouts.app')
@section('title', 'Riders')

@section('content')
<div class="px-4 py-4 lg:px-8">

    <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('corporate.referrals.dashboard') }}" class="btn-secondary text-xs">← Dashboard</a>
            <h1 class="text-lg font-semibold text-gray-800">Riders</h1>
        </div>
        <a href="{{ route('corporate.referrals.riders.create') }}" class="btn-primary text-xs">+ Register Rider</a>
    </div>

    @if(session('status'))
        <div class="mb-3 px-4 py-2 bg-green-50 border border-green-200 text-green-800 text-sm rounded">{{ session('status') }}</div>
    @endif

    {{-- Filters --}}
    <form method="GET" class="bg-white rounded-lg border border-gray-200 p-3 mb-3 flex flex-wrap gap-2 items-end">
        <div>
            <label class="text-xs text-gray-500 block mb-0.5">Scheme</label>
            <select name="scheme" class="form-input text-sm">
                <option value="">All</option>
                @foreach($schemes as $s)
                    <option value="{{ $s->id }}" @selected(request('scheme') == $s->id)>{{ $s->code }} — {{ $s->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500 block mb-0.5">Status</label>
            <select name="status" class="form-input text-sm">
                <option value="">All</option>
                @foreach(['Active','Suspended','Closed'] as $s)
                    <option value="{{ $s }}" @selected(request('status') === $s)>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex-1 min-w-[200px]">
            <label class="text-xs text-gray-500 block mb-0.5">Search</label>
            <input type="text" name="q" value="{{ request('q') }}" placeholder="Name, code, phone, M-Pesa…" class="form-input text-sm w-full">
        </div>
        <button type="submit" class="btn-secondary text-xs">Apply</button>
    </form>

    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
        @if($riders->isEmpty())
            <div class="text-center py-12 text-gray-400 text-sm">No riders match these filters.</div>
        @else
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-xs text-gray-500 uppercase">
                    <tr>
                        <th class="text-left px-4 py-2">Rider Code</th>
                        <th class="text-left px-4 py-2">Name</th>
                        <th class="text-left px-4 py-2">Scheme</th>
                        <th class="text-left px-4 py-2">Phone</th>
                        <th class="text-left px-4 py-2">M-Pesa</th>
                        <th class="text-left px-4 py-2">Bike</th>
                        <th class="text-left px-4 py-2">Status</th>
                        <th class="text-right px-4 py-2"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($riders as $r)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-2 font-mono text-xs">{{ $r->rider_code }}</td>
                            <td class="px-4 py-2">
                                <a href="{{ route('corporate.referrals.riders.statement', $r->id) }}" class="font-medium text-cr-700 hover:underline">
                                    {{ $r->full_name }}
                                </a>
                            </td>
                            <td class="px-4 py-2 text-xs">{{ $r->scheme?->code }}</td>
                            <td class="px-4 py-2 text-xs font-mono">{{ $r->phone }}</td>
                            <td class="px-4 py-2 text-xs font-mono">{{ $r->mpesa_number }}</td>
                            <td class="px-4 py-2 text-xs">{{ $r->bike_registration ?? '—' }}</td>
                            <td class="px-4 py-2">
                                <span class="text-xs px-2 py-0.5 rounded
                                    {{ $r->status === 'Active' ? 'bg-green-100 text-green-700' :
                                       ($r->status === 'Suspended' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-600') }}">
                                    {{ $r->status }}
                                </span>
                            </td>
                            <td class="px-4 py-2 text-right">
                                <a href="{{ route('corporate.referrals.riders.edit', $r) }}" class="text-xs text-cr-700 hover:underline">Edit</a>
                                <a href="{{ route('corporate.referrals.riders.statement', $r->id) }}" class="text-xs text-cr-700 hover:underline ml-2">Statement</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="px-4 py-3 border-t border-gray-100">{{ $riders->links() }}</div>
        @endif
    </div>
</div>
@endsection