@extends('layouts.app')

@section('title', 'Ambulance Services')

@section('content')
<div class="page-hero">
    <div class="page-hero-inner">
        <h1><i class="fas fa-ambulance"></i> Ambulance Services</h1>
        <p>Nearby emergency providers</p>
    </div>
</div>

<div class="container">
    @forelse($ambulances as $ambulance)
    <div class="card" style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px">
        <div style="width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0">
            <i class="fas fa-ambulance" style="font-size:1.5rem"></i>
        </div>
        <div style="flex:1;min-width:0">
            <strong style="font-size:1.1rem">{{ $ambulance->name }}</strong>
            <p class="text-muted" style="font-size:0.9rem;margin-top:4px">{{ $ambulance->city }}{{ $ambulance->service_area ? ' • ' . $ambulance->service_area : '' }}</p>
            @if(isset($ambulance->distance))
                <p style="font-size:0.85rem;color:var(--primary);margin-top:4px"><i class="fas fa-route"></i> {{ number_format($ambulance->distance, 1) }} km away</p>
            @endif
        </div>
        <a href="tel:{{ $ambulance->contact_number }}" class="btn btn-primary"><i class="fas fa-phone"></i> Call</a>
    </div>
    @empty
    <div class="card" style="text-align:center;padding:48px">
        <i class="fas fa-ambulance" style="font-size:3rem;color:var(--text-muted);margin-bottom:16px"></i>
        <h3 style="margin-bottom:8px">No ambulance services found</h3>
        <p class="text-muted">No providers in your area. Try updating your location.</p>
    </div>
    @endforelse

    {{ $ambulances->links() }}
</div>
@endsection