@extends('layouts.app')

@section('title', 'SOS Emergency')

@section('content')
<div class="page-hero sos-page-hero">
    <div class="page-hero-inner">
        <span class="sos-hero-badge"><i class="fas fa-heart-pulse"></i> Emergency Network</span>
        <h1><i class="fas fa-bell"></i> SOS Emergency</h1>
        <p>Request help or respond to emergencies in seconds</p>
    </div>
</div>

<div class="container">
    <div class="sos-send-card">
        <div class="sos-send-card-inner">
            <div class="sos-send-icon"><i class="fas fa-shield-halved"></i></div>
            <h3>Need Help? Send SOS</h3>
            <p>Tap the button below. Your location will be shared with nearby verified members instantly.</p>
            <form id="sos-form" method="POST" action="{{ route('sos.store') }}">
                @csrf
                <input type="hidden" name="latitude" id="lat">
                <input type="hidden" name="longitude" id="lon">
                <button type="button" id="sos-btn" class="sos-send-btn">
                    <span class="sos-send-btn-text">SOS</span>
                    <span class="sos-send-btn-pulse"></span>
                </button>
            </form>
            <p class="sos-rate-limit"><i class="fas fa-clock"></i> Rate limit: 3 per hour</p>
        </div>
    </div>

    <div class="sos-requests-header">
        <span class="sos-requests-badge"><i class="fas fa-bolt"></i> Urgent</span>
        <h2 class="sos-requests-title">Active SOS Requests</h2>
        <p class="sos-requests-subtitle">Someone needs your help right now</p>
    </div>

    @forelse($sosRequests as $sos)
    <a href="{{ route('sos.show', $sos) }}" class="sos-request-card">
        <div class="sos-request-card-avatar">
            <img src="{{ $sos->user->profile_photo ? asset('storage/'.$sos->user->profile_photo) : 'https://ui-avatars.com/api/?name='.urlencode($sos->user->name).'&size=48&background=c41e3a&color=fff' }}" alt="">
            <span class="sos-request-card-blood"><i class="fas fa-droplet"></i> {{ $sos->user->blood_group ?? 'Blood' }}</span>
        </div>
        <div class="sos-request-card-body">
            <strong>{{ $sos->user->name }}</strong>
            <p><i class="fas fa-map-marker-alt"></i> {{ $sos->user->city ?? 'Location' }}</p>
            <span class="sos-request-card-time">{{ $sos->created_at->diffForHumans() }}</span>
        </div>
        <div class="sos-request-card-actions">
            <span class="sos-request-card-status"><i class="fas fa-exclamation-circle"></i> Active</span>
            <i class="fas fa-chevron-right"></i>
        </div>
    </a>
    @empty
    <div class="sos-empty-card">
        <div class="sos-empty-icon"><i class="fas fa-check-circle"></i></div>
        <h3>All Clear</h3>
        <p>No active SOS requests</p>
    </div>
    @endforelse

    {{ $sosRequests->links() }}
</div>

@push('styles')
<style>
.sos-page-hero{background:linear-gradient(135deg,#dc2626 0%,var(--primary) 50%,var(--primary-dark) 100%)}
.sos-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.25);padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:8px}
.sos-send-card{background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;border:1px solid #fecaca;box-shadow:0 4px 12px rgba(196,30,58,0.08)}
.sos-send-card-inner{text-align:center}
.sos-send-icon{width:48px;height:48px;background:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--primary);font-size:1.25rem;box-shadow:var(--shadow)}
.sos-send-card h3{font-size:1.15rem;margin-bottom:6px;color:var(--text)}
.sos-send-card p{font-size:0.9rem;color:var(--text-muted);margin-bottom:16px}
.sos-send-btn{position:relative;width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,#dc2626,var(--primary));color:white;font-size:1.5rem;font-weight:800;border:4px solid white;box-shadow:0 2px 20px rgba(220,38,38,0.4);cursor:pointer;transition:all 0.2s}
.sos-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 28px rgba(220,38,38,0.5)}
.sos-send-btn-pulse{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--primary);animation:sos-pulse 2s ease-out infinite;opacity:0.5}
@keyframes sos-pulse{0%{transform:scale(1);opacity:0.5}100%{transform:scale(1.15);opacity:0}}
.sos-rate-limit{font-size:0.8rem;color:var(--text-muted);margin-top:12px}
.sos-requests-header{margin-bottom:14px}
.sos-requests-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fef2f2,#fee2e2);color:var(--primary);padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:6px}
.sos-requests-title{font-size:1.2rem;font-weight:700;margin:0 0 2px;color:var(--text)}
.sos-requests-subtitle{font-size:0.875rem;color:var(--text-muted);margin:0}
.sos-request-card{display:flex;align-items:center;gap:14px;padding:14px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px;margin-bottom:10px;text-decoration:none;color:inherit;border:1px solid var(--border);transition:all 0.2s}
.sos-request-card:hover{box-shadow:0 4px 16px rgba(196,30,58,0.12);border-color:var(--primary);transform:translateX(4px)}
.sos-request-card-avatar{position:relative;flex-shrink:0}
.sos-request-card-avatar img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fee2e2}
.sos-request-card-blood{position:absolute;bottom:-4px;right:-4px;background:var(--primary);color:white;padding:2px 6px;border-radius:4px;font-size:0.7rem;font-weight:700}
.sos-request-card-body{flex:1;min-width:0}
.sos-request-card-body strong{display:block;font-size:1rem}
.sos-request-card-body p{font-size:0.85rem;color:var(--text-muted);margin:2px 0}
.sos-request-card-time{font-size:0.75rem;color:var(--text-muted)}
.sos-request-card-actions{display:flex;align-items:center;gap:8px}
.sos-request-card-status{display:inline-flex;align-items:center;gap:4px;background:#fee2e2;color:#991b1b;padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:600}
.sos-request-card-actions i{color:var(--text-muted);font-size:0.9rem}
.sos-empty-card{text-align:center;padding:32px 20px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border)}
.sos-empty-icon{width:64px;height:64px;background:#d1fae5;color:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.75rem}
.sos-empty-card h3{font-size:1.1rem;margin-bottom:4px;color:var(--text)}
.sos-empty-card p{font-size:0.9rem;color:var(--text-muted)}
</style>
@endpush

@push('scripts')
<script>
document.getElementById('sos-btn').addEventListener('click', function() {
    if (!navigator.geolocation) {
        alert('Geolocation is not supported. Please enable location services.');
        return;
    }
    navigator.geolocation.getCurrentPosition(
        function(pos) {
            document.getElementById('lat').value = pos.coords.latitude;
            document.getElementById('lon').value = pos.coords.longitude;
            document.getElementById('sos-form').submit();
        },
        function() {
            alert('Could not get location. Please enable location services and try again.');
        }
    );
});
</script>
@endpush
@endsection