@extends('admin.layout')
@section('title', 'Riders')

@section('content')

{{-- -- PAGE HEADER -- --}}
<div class="page-header" style="display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;">
    <div style="display:flex;align-items:center;gap:.75rem;">
        <div style="width:2.5rem;height:2.5rem;border-radius:.75rem;background:rgba(245,158,11,.12);display:flex;align-items:center;justify-content:center;">
            <i data-lucide="bike" style="width:1.2rem;height:1.2rem;color:#f59e0b;stroke-width:2;"></i>
        </div>
        <div>
            <h1 style="margin:0 0 .15rem;">Riders</h1>
            <p style="margin:0;">Manage delivery riders and monitor their activity.</p>
        </div>
    </div>
    <button onclick="openModal('addRiderModal')" class="btn-primary" style="display:inline-flex;align-items:center;gap:.4rem;">
        <i data-lucide="plus" style="width:.9rem;height:.9rem;stroke-width:2.5;"></i>
        Add Rider
    </button>
</div>

{{-- -- STAT CARDS -- --}}
@php
// Calculate real stats from database
$totalRiders = $riders->count();
$onlineRiders = $riders->filter(fn($r) => $r->is_available && !$r->activeOrder())->count();
$onDeliveryRiders = $riders->filter(fn($r) => $r->activeOrder() && in_array($r->activeOrder()->status, ['rider_assigned', 'out_for_delivery']))->count();
$offlineRiders = $totalRiders - $onlineRiders - $onDeliveryRiders;
$deliveriesToday = \App\Models\Order::where('status', 'delivered')->whereDate('delivered_at', today())->count();

$riderStats = [
    ['label'=>'Total Riders',    'value'=>$totalRiders,      'sub'=>'Registered riders',   'icon'=>'users',        'color'=>'#f59e0b','bg'=>'rgba(245,158,11,.10)'],
    ['label'=>'Online Now',      'value'=>$onlineRiders,     'sub'=>'Available for orders','icon'=>'circle-check', 'color'=>'#10b981','bg'=>'rgba(16,185,129,.10)'],
    ['label'=>'On Delivery',     'value'=>$onDeliveryRiders, 'sub'=>'Currently delivering','icon'=>'bike',         'color'=>'#8b5cf6','bg'=>'rgba(139,92,246,.10)'],
    ['label'=>'Offline',         'value'=>$offlineRiders,    'sub'=>'Not available',       'icon'=>'circle-x',     'color'=>'#6b7280','bg'=>'rgba(107,114,128,.10)'],
    ['label'=>'Deliveries Today','value'=>$deliveriesToday,  'sub'=>'Completed orders',    'icon'=>'package-check','color'=>'#3b82f6','bg'=>'rgba(59,130,246,.10)'],
];
@endphp
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem;">
    @foreach($riderStats as $s)
    <div class="stat-card" style="position:relative;overflow:hidden;border-color:{{ $s['color'] }}22;">
        <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.875rem;">
            <div style="width:3rem;height:3rem;border-radius:.875rem;background:{{ $s['bg'] }};display:flex;align-items:center;justify-content:center;">
                <i data-lucide="{{ $s['icon'] }}" style="width:1.4rem;height:1.4rem;color:{{ $s['color'] }};stroke-width:2;"></i>
            </div>
            <span style="font-size:2.5rem;font-weight:900;color:{{ $s['color'] }};line-height:1;">{{ $s['value'] }}</span>
        </div>
        <h3 style="font-size:.9375rem;font-weight:700;color:var(--text-strong);margin:0 0 .25rem;">{{ $s['label'] }}</h3>
        <p style="font-size:.72rem;color:var(--text-muted);margin:0;">{{ $s['sub'] }}</p>
        <div style="position:absolute;bottom:-1.5rem;right:-1.5rem;width:5.5rem;height:5.5rem;border-radius:50%;background:{{ $s['bg'] }};filter:blur(18px);pointer-events:none;"></div>
    </div>
    @endforeach
</div>

{{-- -- LIVE RIDERS MAP -- --}}
<div class="section-card" style="margin-bottom:1.5rem;overflow:hidden;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border-section);">
        <div style="display:flex;align-items:center;gap:.5rem;">
            <i data-lucide="map-pin" style="width:1rem;height:1rem;color:#f59e0b;stroke-width:2;"></i>
            <h2 style="font-size:.875rem;font-weight:600;color:var(--text-strong);margin:0;">Live Rider Map</h2>
        </div>
        <span style="display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;color:#10b981;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);padding:.25rem .6rem;border-radius:99px;">
            <span style="width:6px;height:6px;background:#10b981;border-radius:50%;animation:blink 1.2s infinite;"></span>
            {{ $onlineRiders + $onDeliveryRiders }} riders active
        </span>
    </div>
    <div id="adminRidersMap" style="width:100%;height:320px;position:relative;z-index:0;"></div>
    <div style="padding:.75rem 1.25rem;display:flex;gap:1.25rem;flex-wrap:wrap;">
        <span style="font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem;">
            <span style="width:10px;height:10px;background:#8b5cf6;border-radius:50%;display:inline-block;"></span> On Delivery
        </span>
        <span style="font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem;">
            <span style="width:10px;height:10px;background:#10b981;border-radius:50%;display:inline-block;"></span> Online / Available
        </span>
        <span style="font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem;">
            <span style="width:10px;height:10px;background:#facc15;border-radius:50%;display:inline-block;"></span> E.U.T Snack House
        </span>
    </div>
</div>

{{-- -- FILTER BAR -- --}}
<div class="section-card">
    <div class="filter-bar" style="justify-content:space-between;">
        <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:.5rem;">
                <i data-lucide="search" style="width:.875rem;height:.875rem;color:var(--text-muted);stroke-width:2;"></i>
                <input type="search" class="admin-input" placeholder="Search riders..." style="max-width:220px;" oninput="filterRiders(this.value)" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')">
            </div>
            <select class="admin-input" style="max-width:160px;" onchange="filterByStatus(this.value)">
                <option value="">All Statuses</option>
                <option value="online">Online</option>
                <option value="on_delivery">On Delivery</option>
                <option value="offline">Offline</option>
            </select>
        </div>
        <span style="font-size:.72rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:.35rem;">
            <i data-lucide="info" style="width:.8rem;height:.8rem;stroke-width:2;"></i>
            Sample data — connect riders table to go live
        </span>
    </div>

    {{-- -- RIDERS TABLE -- --}}
    <table class="admin-table" id="ridersTable">
        <thead>
            <tr>
                <th>Rider</th>
                <th>Phone</th>
                <th>Vehicle</th>
                <th>Status</th>
                <th>Current Order</th>
                <th>Today's Deliveries</th>
                <th>Rating</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="ridersTbody">

@php
$statusMap = [
    'online'      => ['label'=>'Online',      'color'=>'#10b981','bg'=>'rgba(16,185,129,.12)','icon'=>'circle-check'],
    'on_delivery' => ['label'=>'On Delivery', 'color'=>'#8b5cf6','bg'=>'rgba(139,92,246,.12)','icon'=>'bike'],
    'offline'     => ['label'=>'Offline',     'color'=>'#6b7280','bg'=>'rgba(107,114,128,.12)','icon'=>'circle-x'],
];
@endphp
@foreach($riders as $rider)
@php
    // Determine status based on is_available and active order
    $activeOrder = $rider->activeOrder();
    if ($activeOrder && in_array($activeOrder->status, ['rider_assigned', 'out_for_delivery'])) {
        $currentStatus = 'on_delivery';
    } else if ($rider->is_available) {
        $currentStatus = 'online';
    } else {
        $currentStatus = 'offline';
    }
    $st = $statusMap[$currentStatus];
    // Skip riders with no linked user account
    if (!$rider->user) continue;
    // Get initials from name
    $nameParts = explode(' ', $rider->user->name);
    $initials = '';
    foreach ($nameParts as $part) {
        $initials .= strtoupper(substr($part, 0, 1));
    }
    $initials = substr($initials, 0, 2);
    // Get today's deliveries count
    $todayDeliveries = \App\Models\Order::where('rider_id', $rider->id)
        ->where('status', 'delivered')
        ->whereDate('delivered_at', today())
        ->count();
@endphp
<tr data-name="{{ strtolower($rider->user->name) }}" data-status="{{ $currentStatus }}">
    <td>
        <div style="display:flex;align-items:center;gap:.6rem;">
            <div style="width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(245,158,11,.18);display:flex;align-items:center;justify-content:center;color:#f59e0b;font-weight:800;font-size:.75rem;flex-shrink:0;border:2px solid rgba(245,158,11,.25);">
                {{ $initials }}
            </div>
            <div>
                <p style="font-weight:600;color:var(--text-strong);font-size:.875rem;margin:0 0 .15rem;">{{ $rider->user->name }}</p>
                <p style="font-size:.7rem;color:var(--text-muted);margin:0;">Joined {{ $rider->created_at->format('M d, Y') }}</p>
            </div>
        </div>
    </td>
    <td style="font-size:.8rem;color:var(--text-body);">{{ $rider->phone }}</td>
    <td>
        <span style="display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--text-subtle);">
            <i data-lucide="{{ $rider->vehicle_type==='motorcycle' ? 'bike' : 'bicycle' }}" style="width:.8rem;height:.8rem;stroke-width:2;"></i>
            {{ ucfirst($rider->vehicle_type) }}
        </span>
    </td>
    <td>
        <span style="display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:9999px;font-size:.7rem;font-weight:700;background:{{ $st['bg'] }};color:{{ $st['color'] }};">
            <i data-lucide="{{ $st['icon'] }}" style="width:.65rem;height:.65rem;stroke-width:2.5;"></i>
            {{ $st['label'] }}
        </span>
    </td>
    <td style="font-size:.8rem;">
        @if($activeOrder)
            <a href="{{ route('admin.orders') }}" style="color:var(--accent);font-weight:600;font-family:monospace;">#{{ $activeOrder->order_number }}</a>
        @else
            <span style="color:var(--text-muted);">—</span>
        @endif
    </td>
    <td>
        <span style="font-size:.875rem;font-weight:700;color:var(--text-strong);">{{ $todayDeliveries }}</span>
        <span style="font-size:.72rem;color:var(--text-muted);margin-left:.25rem;">orders</span>
    </td>
    <td>
        <span style="font-size:.875rem;font-weight:700;color:#facc15;">? {{ number_format($rider->rating,1) }}</span>
    </td>
    <td>
        <div style="display:flex;gap:.4rem;align-items:center;">
            <button class="btn-icon-edit" onclick="openRiderDetail({{ $rider->id }})" title="View Details">
                <i data-lucide="eye" style="width:.8rem;height:.8rem;stroke-width:2;"></i>
            </button>
            <button class="btn-icon-archive" onclick="openEditRider({{ $rider->id }}, '{{ addslashes($rider->user->name) }}', '{{ $rider->phone }}', '{{ $rider->vehicle_type }}', '{{ $rider->plate_number }}')" title="Edit">
                <i data-lucide="pencil" style="width:.8rem;height:.8rem;stroke-width:2;"></i>
            </button>
            <form method="POST" action="{{ route('admin.riders.destroy', $rider) }}" onsubmit="return confirm('Remove {{ $rider->user->name }} from riders? This action cannot be undone.');" style="display:inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn-icon-delete" title="Remove">
                    <i data-lucide="user-x" style="width:.8rem;height:.8rem;stroke-width:2;"></i>
                </button>
            </form>
        </div>
    </td>
</tr>
@endforeach
        </tbody>
    </table>
</div>

{{-- -- ADD RIDER MODAL -- --}}
<div id="addRiderModal" class="modal-backdrop" onclick="closeModalBackdrop(event,'addRiderModal')">
    <div class="modal-box">
        <div class="modal-header">
            <h3 class="modal-title" style="display:flex;align-items:center;gap:.5rem;">
                <i data-lucide="user-plus" style="width:1rem;height:1rem;color:var(--accent);stroke-width:2;"></i>
                Add New Rider
            </h3>
            <button class="modal-close" onclick="closeModal('addRiderModal')">
                <i data-lucide="x" style="width:1rem;height:1rem;stroke-width:2;"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('admin.riders.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="field-label">Full Name <span style="color:#dc2626;">*</span></label>
                        <input type="text" name="name" class="admin-input" placeholder="e.g. Juan dela Cruz" required>
                    </div>
                    <div class="form-group">
                        <label class="field-label">Phone Number <span style="color:#dc2626;">*</span></label>
                        <input type="text" name="phone" class="admin-input" placeholder="e.g. 09171234567" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="field-label">Email Address <span style="color:#dc2626;">*</span></label>
                        <input type="email" name="email" class="admin-input" placeholder="rider@email.com" required>
                    </div>
                    <div class="form-group">
                        <label class="field-label">Vehicle Type <span style="color:#dc2626;">*</span></label>
                        <select name="vehicle_type" class="admin-input" required>
                            <option value="motorcycle">Motorcycle</option>
                            <option value="bicycle">Bicycle</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="field-label">Plate / ID Number</label>
                        <input type="text" name="plate_number" class="admin-input" placeholder="e.g. ABC-1234 or RIDER-001">
                    </div>
                    <div class="form-group">
                        <label class="field-label">Password <span style="color:#dc2626;">*</span></label>
                        <input type="password" name="password" class="admin-input" placeholder="Min. 8 characters" required minlength="8">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-ghost" onclick="closeModal('addRiderModal')">Cancel</button>
                <button type="submit" class="btn-success" style="display:inline-flex;align-items:center;gap:.4rem;">
                    <i data-lucide="user-plus" style="width:.85rem;height:.85rem;stroke-width:2.5;"></i>
                    Add Rider
                </button>
            </div>
        </form>
    </div>
</div>

{{-- -- RIDER DETAIL MODAL -- --}}
<div id="riderDetailModal" class="modal-backdrop" onclick="closeModalBackdrop(event,'riderDetailModal')">
    <div class="modal-box modal-lg">
        <div class="modal-header">
            <h3 class="modal-title" style="display:flex;align-items:center;gap:.5rem;">
                <i data-lucide="bike" style="width:1rem;height:1rem;color:#f59e0b;stroke-width:2;"></i>
                <span id="detailRiderName">Rider Details</span>
            </h3>
            <button class="modal-close" onclick="closeModal('riderDetailModal')">
                <i data-lucide="x" style="width:1rem;height:1rem;stroke-width:2;"></i>
            </button>
        </div>
        <div class="modal-body">
            {{-- Profile row --}}
            <div style="display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--accent-soft);border-radius:.75rem;border:1px solid var(--accent-border);">
                <div style="width:3.5rem;height:3.5rem;border-radius:50%;background:rgba(245,158,11,.2);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;color:#f59e0b;border:2px solid rgba(245,158,11,.3);">
                    <span id="detailInitials">JD</span>
                </div>
                <div style="flex:1;">
                    <p style="font-weight:700;color:var(--text-strong);font-size:1rem;margin:0 0 .2rem;" id="detailNameFull">Juan dela Cruz</p>
                    <p style="font-size:.78rem;color:var(--text-muted);margin:0;" id="detailPhone">09171234567 · Motorcycle</p>
                </div>
                <span id="detailStatusBadge" style="display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .8rem;border-radius:9999px;font-size:.75rem;font-weight:700;"></span>
            </div>
            {{-- Stats row --}}
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;">
                <div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:.75rem;padding:1rem;text-align:center;">
                    <p style="font-size:1.75rem;font-weight:900;color:#facc15;margin:0 0 .2rem;" id="detailDeliveries">7</p>
                    <p style="font-size:.72rem;color:var(--text-muted);margin:0;">Today's Deliveries</p>
                </div>
                <div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:.75rem;padding:1rem;text-align:center;">
                    <p style="font-size:1.75rem;font-weight:900;color:#facc15;margin:0 0 .2rem;" id="detailRating">4.9</p>
                    <p style="font-size:.72rem;color:var(--text-muted);margin:0;">Avg. Rating</p>
                </div>
                <div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:.75rem;padding:1rem;text-align:center;">
                    <p style="font-size:1.75rem;font-weight:900;color:#10b981;margin:0 0 .2rem;">98%</p>
                    <p style="font-size:.72rem;color:var(--text-muted);margin:0;">On-Time Rate</p>
                </div>
            </div>
            {{-- Recent deliveries --}}
            <div>
                <p style="font-size:.78rem;font-weight:700;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .625rem;">Recent Deliveries</p>
                @php
                $recentDeliveries = [
                    ['order'=>'#EUT-00512','customer'=>'Andrea M.','total'=>'?520','time'=>'5 min ago','status'=>'on_delivery'],
                    ['order'=>'#EUT-00498','customer'=>'Bong S.',   'total'=>'?350','time'=>'1 hr ago', 'status'=>'delivered'],
                    ['order'=>'#EUT-00481','customer'=>'Celia R.',  'total'=>'?680','time'=>'3 hrs ago','status'=>'delivered'],
                    ['order'=>'#EUT-00465','customer'=>'Danny T.',  'total'=>'?290','time'=> 'Yesterday','status'=>'delivered'],
                ];
                @endphp
                @foreach($recentDeliveries as $d)
                <div style="display:flex;align-items:center;justify-content:space-between;padding:.625rem .75rem;border-radius:.5rem;margin-bottom:.375rem;background:var(--bg-card);border:1px solid var(--border-card);">
                    <div style="display:flex;align-items:center;gap:.6rem;">
                        <i data-lucide="{{ $d['status']==='delivered' ? 'circle-check' : 'bike' }}" style="width:.875rem;height:.875rem;color:{{ $d['status']==='delivered' ? '#10b981' : '#8b5cf6' }};stroke-width:2;"></i>
                        <div>
                            <p style="font-size:.8rem;font-weight:600;color:var(--text-strong);margin:0;font-family:monospace;">{{ $d['order'] }}</p>
                            <p style="font-size:.7rem;color:var(--text-muted);margin:0;">{{ $d['customer'] }}</p>
                        </div>
                    </div>
                    <div style="text-align:right;">
                        <p style="font-size:.8rem;font-weight:700;color:#facc15;margin:0;">{{ $d['total'] }}</p>
                        <p style="font-size:.7rem;color:var(--text-muted);margin:0;">{{ $d['time'] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <div class="modal-footer" style="justify-content:space-between;">
            <button class="btn-danger" onclick="closeModal('riderDetailModal')">
                <i data-lucide="user-x" style="width:.85rem;height:.85rem;stroke-width:2;"></i>
                Suspend Rider
            </button>
            <div style="display:flex;gap:.5rem;">
                <button class="btn-ghost" onclick="closeModal('riderDetailModal')">Close</button>
                <button class="btn-primary" onclick="alert('Assign to order — connect to DB.')">
                    <i data-lucide="send" style="width:.85rem;height:.85rem;stroke-width:2.5;"></i>
                    Assign to Order
                </button>
            </div>
        </div>
    </div>
</div>

{{-- -- EDIT RIDER MODAL -- --}}
<div id="editRiderModal" class="modal-backdrop" onclick="closeModalBackdrop(event,'editRiderModal')">
    <div class="modal-box">
        <div class="modal-header">
            <h3 class="modal-title" style="display:flex;align-items:center;gap:.5rem;">
                <i data-lucide="pencil" style="width:1rem;height:1rem;color:#d97706;stroke-width:2;"></i>
                Edit Rider: <span id="editRiderName" style="color:var(--text-muted);font-weight:400;font-size:.9rem;margin-left:.25rem;"></span>
            </h3>
            <button class="modal-close" onclick="closeModal('editRiderModal')">
                <i data-lucide="x" style="width:1rem;height:1rem;stroke-width:2;"></i>
            </button>
        </div>
        <form id="editRiderForm" method="POST" action="">
            @csrf
            @method('PATCH')
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="field-label">Phone Number</label>
                        <input type="text" name="phone" id="editRiderPhone" class="admin-input" placeholder="09171234567">
                    </div>
                    <div class="form-group">
                        <label class="field-label">Vehicle Type <span style="color:#dc2626;">*</span></label>
                        <select name="vehicle_type" id="editRiderVehicle" class="admin-input" required>
                            <option value="motorcycle">Motorcycle</option>
                            <option value="bicycle">Bicycle</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="field-label">Plate / ID Number</label>
                    <input type="text" name="plate_number" id="editRiderPlate" class="admin-input" placeholder="e.g. ABC-1234">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-ghost" onclick="closeModal('editRiderModal')">Cancel</button>
                <button type="submit" class="btn-warning" style="display:inline-flex;align-items:center;gap:.4rem;">
                    <i data-lucide="save" style="width:.85rem;height:.85rem;stroke-width:2.5;"></i>
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<script>
@php
$ridersJson = $riders->map(function($rider) {
    $activeOrder = $rider->activeOrder();
    if ($activeOrder && in_array($activeOrder->status, ['rider_assigned', 'out_for_delivery'])) {
        $currentStatus = 'on_delivery';
    } else if ($rider->is_available) {
        $currentStatus = 'online';
    } else {
        $currentStatus = 'offline';
    }
    // Get initials from name
    $nameParts = explode(' ', $rider->user->name);
    $initials = '';
    foreach ($nameParts as $part) {
        $initials .= strtoupper(substr($part, 0, 1));
    }
    $initials = substr($initials, 0, 2);
    // Get today's deliveries count
    $todayDeliveries = \App\Models\Order::where('rider_id', $rider->id)
        ->where('status', 'delivered')
        ->whereDate('delivered_at', today())
        ->count();
    return [
        'id' => $rider->id,
        'name' => $rider->user->name,
        'initials' => $initials,
        'phone' => $rider->phone,
        'vehicle' => ucfirst($rider->vehicle_type),
        'status' => $currentStatus,
        'order' => $activeOrder ? '#' . $activeOrder->order_number : null,
        'deliveries' => $todayDeliveries,
        'rating' => $rider->rating,
        'joined' => $rider->created_at->format('M d, Y'),
    ];
})->values();
$statusMapJson = json_encode($statusMap);
@endphp
const RIDERS = {!! $ridersJson !!};
const STATUS_MAP = {!! $statusMapJson !!};

function openEditRider(id, name, phone, vehicleType, plateNumber) {
    document.getElementById('editRiderName').textContent = name;
    document.getElementById('editRiderPhone').value = phone || '';
    document.getElementById('editRiderPlate').value = plateNumber || '';
    const vehicleSel = document.getElementById('editRiderVehicle');
    if (vehicleSel) vehicleSel.value = vehicleType || 'motorcycle';
    // Set form action to the correct route
    document.getElementById('editRiderForm').action = '/admin/riders/' + id;
    openModal('editRiderModal');
}

function openRiderDetail(id) {
    const r = RIDERS.find(x => x.id === id);
    if (!r) return;
    const st = STATUS_MAP[r.status];
    document.getElementById('detailRiderName').textContent = r.name;
    document.getElementById('detailInitials').textContent  = r.initials;
    document.getElementById('detailNameFull').textContent  = r.name;
    document.getElementById('detailPhone').textContent     = r.phone + ' · ' + r.vehicle;
    document.getElementById('detailDeliveries').textContent = r.deliveries;
    document.getElementById('detailRating').textContent    = r.rating.toFixed(1);
    const badge = document.getElementById('detailStatusBadge');
    badge.textContent = st.label;
    badge.style.background = st.bg;
    badge.style.color = st.color;
    openModal('riderDetailModal');
}

function filterRiders(q) {
    document.querySelectorAll('#ridersTbody tr').forEach(row => {
        row.style.display = row.dataset.name.includes(q.toLowerCase()) ? '' : 'none';
    });
}

function filterByStatus(val) {
    document.querySelectorAll('#ridersTbody tr').forEach(row => {
        row.style.display = (!val || row.dataset.status === val) ? '' : 'none';
    });
}

function confirmRemoveRider(name, formEl) {
    if (confirm('Remove ' + name + ' from riders? This action cannot be undone.')) {
        formEl.submit();
    }
}
</script>

<script>
// -- LEAFLET + OSRM ADMIN RIDERS MAP — with real-time polling --
</script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const RESTAURANT_ADMIN = [13.321512, 121.302098];
@php
$adminRidersJson = $riders->map(function($rider) {
    $activeOrders = $rider->orders->filter(fn($o) =>
        in_array($o->status, ['rider_assigned', 'out_for_delivery'])
    )->values();

    $isOnDelivery = $activeOrders->isNotEmpty();
    $currentStatus = $isOnDelivery ? 'on_delivery' : ($rider->is_available ? 'online' : 'offline');
    $color = $currentStatus === 'on_delivery' ? '#8b5cf6' : ($currentStatus === 'online' ? '#10b981' : '#6b7280');

    $pos = [$rider->current_lat ?? 13.321512, $rider->current_lng ?? 121.302098];

    $destinations = $activeOrders->map(fn($o) => [
        'order_number' => $o->order_number,
        'customer'     => $o->user?->name,
        'address'      => $o->delivery_address,
        'dest_lat'     => $o->delivery_lat,
        'dest_lng'     => $o->delivery_lng,
        'status'       => $o->status,
    ])->values()->all();

    return [
        'id'          => $rider->id,
        'name'        => $rider->user->name,
        'pos'         => $pos,
        'status'      => $currentStatus,
        'order_count' => $activeOrders->count(),
        'orders'      => $destinations,
        // Legacy single fields for backwards compat
        'order'       => $activeOrders->first() ? '#' . $activeOrders->first()->order_number : null,
        'dest'        => ($isOnDelivery && $activeOrders->first()?->delivery_lat)
                         ? [$activeOrders->first()->delivery_lat, $activeOrders->first()->delivery_lng] : null,
        'customer'    => $activeOrders->first()?->user?->name,
        'address'     => $activeOrders->first()?->delivery_address,
        'color'       => $color,
    ];
})->values();
@endphp
const ADMIN_RIDERS_INIT = {!! $adminRidersJson !!};

// Map state — built once, updated by polling
let adminMapInst   = null;
const adminMarkers = {};   // riderId ? { marker, routeLine }

async function fetchOSRMAdmin(from, to) {
    const url = `https://router.project-osrm.org/route/v1/driving/${from[1]},${from[0]};${to[1]},${to[0]}?overview=full&geometries=geojson`;
    try {
        const res  = await fetch(url);
        const data = await res.json();
        if (data.code === 'Ok' && data.routes.length)
            return data.routes[0].geometry.coordinates.map(c => [c[1], c[0]]);
    } catch(e) {}
    return null;
}

async function initAdminMap() {
    const el = document.getElementById('adminRidersMap');
    if (!el || adminMapInst) return;

    adminMapInst = L.map('adminRidersMap', { zoomControl: true });

    L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { attribution: '&copy; Google Maps', maxZoom: 20 }).addTo(adminMapInst);
    L.tileLayer('https://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}', { attribution: '', maxZoom: 20, opacity: 0.85 }).addTo(adminMapInst);

    // Restaurant marker (permanent)
    L.marker(RESTAURANT_ADMIN, { icon: L.divIcon({
        html: `<div style="background:#facc15;width:42px;height:42px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #d97706;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3);"><span style="transform:rotate(45deg);font-size:18px;line-height:1;">&#x1F354;</span></div>`,
        className: '', iconSize: [42, 42], iconAnchor: [21, 42],
    }) }).addTo(adminMapInst).bindPopup('<b>E.U.T Snack House</b><br>Metro Naujan, Oriental Mindoro');

    const allPoints = [RESTAURANT_ADMIN];

    for (const r of ADMIN_RIDERS_INIT) {
        allPoints.push(r.pos);
        await addOrUpdateAdminRider(r);
    }

    adminMapInst.fitBounds(allPoints.length > 1 ? allPoints : [RESTAURANT_ADMIN, [RESTAURANT_ADMIN[0]+0.01, RESTAURANT_ADMIN[1]+0.01]], { padding: [40, 40] });
}

function riderPopupHtml(r) {
    const statusBadge = r.status === 'on_delivery'
        ? `<span style="background:#8b5cf620;color:#a78bfa;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;border:1px solid #8b5cf640;">On Delivery</span>`
        : `<span style="background:#10b98120;color:#34d399;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;border:1px solid #10b98140;">Online</span>`;

    const ordersList = (r.orders && r.orders.length)
        ? r.orders.map(o => `<div style="margin-top:3px;font-size:11px;">
            ?? <b>${o.order_number}</b>${o.customer ? ' — ' + o.customer : ''}
            <div style="font-size:10px;color:#9ca3af;max-width:200px;">${o.address || ''}</div>
          </div>`).join('')
        : '<div style="margin-top:4px;color:#10b981;font-size:11px;">?? Available</div>';

    return `<div style="font-family:sans-serif;min-width:180px;">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;">
            <b style="font-size:13px;">${r.name}</b>${statusBadge}
        </div>
        ${r.orders && r.orders.length > 1 ? `<div style="font-size:10px;color:#f59e0b;font-weight:700;margin-bottom:2px;">?? ${r.orders.length} active orders</div>` : ''}
        ${ordersList}
    </div>`;
}

function destPopupHtml(o) {
    return `<div style="font-family:sans-serif;">
        <b style="font-size:12px;">?? Delivery Point</b>
        ${o.order_number ? `<div style="margin-top:3px;font-size:11px;color:#f87171;">${o.order_number}</div>` : ''}
        ${o.customer ? `<div style="font-size:11px;color:#9ca3af;">${o.customer}</div>` : ''}
        ${o.address ? `<div style="font-size:10px;color:#6b7280;margin-top:2px;max-width:200px;">${o.address}</div>` : ''}
    </div>`;
}

// -- Route fetch throttle — key: riderId_orderNum ? timestamp --
const _adminRouteLastFetch = {};
const ADMIN_ROUTE_THROTTLE_MS = 20000; // re-fetch OSRM at most every 20s per route

async function addOrUpdateAdminRider(r) {
    if (!adminMapInst) return;

    // -- Normalise: build a `destinations` array ----------
    // Support both old format (r.dest) and new multi-order format (r.orders[])
    const destinations = (r.orders && r.orders.length)
        ? r.orders.filter(o => o.dest_lat && o.dest_lng)
        : (r.dest ? [{ order_number: r.order, customer: r.customer, address: r.address, dest_lat: r.dest[0], dest_lng: r.dest[1] }] : []);

    if (!adminMarkers[r.id]) {
        // -- New rider — add marker --------------------------
        const marker = L.marker(r.pos, { icon: L.divIcon({
            html: `<div style="background:${r.color};width:42px;height:42px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 10px ${r.color}88;">&#x1F6F5;</div>`,
            className: '', iconSize: [42, 42], iconAnchor: [21, 21],
        }) }).addTo(adminMapInst);
        marker.bindPopup(riderPopupHtml(r));
        adminMarkers[r.id] = { marker, routes: {}, destMarkers: {} };
    } else {
        // -- Existing rider — update position + popup + icon --
        adminMarkers[r.id].marker.setLatLng(r.pos);
        adminMarkers[r.id].marker.getPopup().setContent(riderPopupHtml(r));
        adminMarkers[r.id].marker.setIcon(L.divIcon({
            html: `<div style="background:${r.color};width:42px;height:42px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 10px ${r.color}88;">&#x1F6F5;</div>`,
            className: '', iconSize: [42, 42], iconAnchor: [21, 21],
        }));
    }

    // -- Track which order keys are still active -----------
    const activeKeys = new Set(destinations.map(o => o.order_number));

    // Remove stale routes/pins for orders no longer active
    for (const key of Object.keys(adminMarkers[r.id].routes)) {
        if (!activeKeys.has(key)) {
            if (adminMarkers[r.id].routes[key])      { adminMarkers[r.id].routes[key].remove();      delete adminMarkers[r.id].routes[key]; }
            if (adminMarkers[r.id].destMarkers[key]) { adminMarkers[r.id].destMarkers[key].remove(); delete adminMarkers[r.id].destMarkers[key]; }
        }
    }

    // Add/update route + dest pin for each active order
    for (const o of destinations) {
        const key      = o.order_number;
        const dest     = [parseFloat(o.dest_lat), parseFloat(o.dest_lng)];
        const lineColor = r.color;
        const throttleKey = r.id + '_' + key;
        const now = Date.now();

        // Only re-fetch OSRM if rider moved significantly or throttle expired
        let latLngs;
        if (!adminMarkers[r.id].routes[key] || (now - (_adminRouteLastFetch[throttleKey] || 0)) > ADMIN_ROUTE_THROTTLE_MS) {
            _adminRouteLastFetch[throttleKey] = now;
            const route = await fetchOSRMAdmin(r.pos, dest);
            latLngs = route || [r.pos, dest];

            if (adminMarkers[r.id].routes[key]) {
                adminMarkers[r.id].routes[key].setLatLngs(latLngs);
            } else {
                adminMarkers[r.id].routes[key] = L.polyline(latLngs, {
                    color: lineColor, weight: latLngs.length > 2 ? 5 : 3,
                    opacity: latLngs.length > 2 ? 1 : 0.6,
                    dashArray: latLngs.length > 2 ? null : '6 4',
                }).addTo(adminMapInst);
            }
        } else {
            // Throttled — just move the start of the existing polyline to rider's new pos
            if (adminMarkers[r.id].routes[key]) {
                const lls = adminMarkers[r.id].routes[key].getLatLngs();
                if (lls && lls.length > 0) {
                    lls[0] = L.latLng(r.pos[0], r.pos[1]);
                    adminMarkers[r.id].routes[key].setLatLngs(lls);
                }
            }
        }

        if (adminMarkers[r.id].destMarkers[key]) {
            adminMarkers[r.id].destMarkers[key].setLatLng(dest);
            adminMarkers[r.id].destMarkers[key].getPopup().setContent(destPopupHtml(o));
        } else {
            adminMarkers[r.id].destMarkers[key] = L.circleMarker(dest, {
                radius: 10, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 0.9, weight: 2,
            }).addTo(adminMapInst).bindPopup(destPopupHtml(o));
        }
    }
}

async function pollAdminMap() {
    try {
        const res  = await fetch('{{ route("admin.riders.locations") }}', {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        });
        if (!res.ok) return;
        const riders = await res.json();
        for (const r of riders) {
            const rd = {
                id:       r.id,
                name:     r.name,
                pos:      [parseFloat(r.lat), parseFloat(r.lng)],
                status:   r.status === 'On Delivery' ? 'on_delivery' : 'online',
                orders:   r.orders || [],
                order:    r.order ? '#' + r.order : null,
                dest:     r.dest_lat && r.dest_lng ? [parseFloat(r.dest_lat), parseFloat(r.dest_lng)] : null,
                customer: r.customer || null,
                address:  r.address  || null,
                color:    r.status === 'On Delivery' ? '#8b5cf6' : '#10b981',
            };
            await addOrUpdateAdminRider(rd);
        }
    } catch(e) { /* silent */ }
}

document.addEventListener('DOMContentLoaded', async () => {
    await initAdminMap();

    // Echo: real-time rider location updates
    if (window.Echo) {
        window.Echo.private('admin.riders')
            .listen('.rider.location', async (data) => {
                if (!data.lat || !data.lng) return;
                const rd = {
                    id:     data.id,
                    name:   data.name,
                    pos:    [parseFloat(data.lat), parseFloat(data.lng)],
                    status: data.status === 'on_delivery' ? 'on_delivery' : 'online',
                    color:  data.status === 'on_delivery' ? '#8b5cf6' : '#10b981',
                };
                await addOrUpdateAdminRider(rd);
            });
    } else {
        // Fallback: poll every 8 seconds
        setInterval(pollAdminMap, 8000);
    }
});
</script>

<style>
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes rider-pulse {
    0%   { transform: scale(1);   opacity: .6; }
    100% { transform: scale(2.2); opacity: 0;  }
}
#adminRidersMap { z-index: 0 !important; }
#adminRidersMap .leaflet-pane,
#adminRidersMap .leaflet-top,
#adminRidersMap .leaflet-bottom { z-index: 0 !important; }
#adminRidersMap .leaflet-control { z-index: 1 !important; }
</style>

@endsection