@extends('layouts.admin')

@section('content')
    <style>
        :root {
            --med-red: #E63946;
            --med-blue: #1D3557;
            --med-slate: #457B9D;
            --med-light: #F1F4F9;
            --med-success: #2A9D8F;
        }

        .med-dashboard {
            background: var(--med-light);
            border-radius: 24px;
            padding: 25px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .glass-stat {
            background: white;
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 24px;
            padding: 28px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 40px rgba(29, 53, 87, 0.05);
        }

        .glass-stat:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(29, 53, 87, 0.12);
        }

        .icon-circle {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .pulse-glow {
            animation: active-glow 2s infinite;
        }

        @keyframes active-glow {
            0% {
                box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.2);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(230, 57, 70, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
            }
        }

        .med-card {
            background: #ffffff;
            border-radius: 24px;
            border: none;
            overflow: hidden;
        }

        .med-table thead th {
            background: #fdfdfd;
            color: var(--med-slate);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 1px;
            padding: 15px 25px;
        }

        .med-status {
            padding: 6px 16px;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 800;
        }

        .status-critical {
            background: #ffebee;
            color: var(--med-red);
            border: 1px solid #ffcdd2;
        }

        .status-active {
            background: #e0f2fe;
            color: #0284c7;
            border: 1px solid #bae6fd;
        }

        .status-ready {
            background: #e6fffa;
            color: var(--med-success);
            border: 1px solid #b2f5ea;
        }
    </style>

    <div class="med-dashboard">
        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <span class="text-danger font-weight-bold text-uppercase small">Command Hub</span>
                <h1 class="font-weight-bold m-0" style="color: var(--med-blue);">Medicare Dashboard</h1>
            </div>
            <div class="bg-white p-2 px-4 rounded-pill shadow-sm border d-flex align-items-center">
                <div class="bg-success rounded-circle mr-2" style="width: 10px; height: 10px;"></div>
                <span class="small font-weight-bold">System: Operational</span>
            </div>
        </div>

        {{-- Stats Row --}}
        <div class="row mb-5">
            <div class="col-md-3">
                <div class="glass-stat pulse-glow" style="border-left: 5px solid var(--med-red);">
                    <div class="icon-circle" style="background: rgba(230,57,70,0.1); color: var(--med-red);"><i
                            class="fas fa-heartbeat"></i></div>
                    <h6 class="small text-muted mb-1">LIVE BOOKINGS</h6>
                    <h2 class="font-weight-bold" style="color: var(--med-blue);">{{ $stats['active_bookings'] }}</h2>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-stat" style="border-left: 5px solid var(--med-blue);">
                    <div class="icon-circle" style="background: rgba(29,53,87,0.1); color: var(--med-blue);"><i
                            class="fas fa-ambulance"></i></div>
                    <h6 class="small text-muted mb-1">TOTAL FLEET</h6>
                    <h2 class="font-weight-bold" style="color: var(--med-blue);">{{ $stats['total_ambulances'] }}</h2>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-stat" style="border-left: 5px solid var(--med-success);">
                    <div class="icon-circle" style="background: rgba(42,157,143,0.1); color: var(--med-success);"><i
                            class="fas fa-user-injured"></i></div>
                    <h6 class="small text-muted mb-1">TOTAL PATIENTS</h6>
                    <h2 class="font-weight-bold" style="color: var(--med-blue);">{{ $stats['total_patients'] }}</h2>
                </div>
            </div>
            <div class="col-md-3">
                <div class="glass-stat" style="border-left: 5px solid #F4A261;">
                    <div class="icon-circle" style="background: rgba(244,162,97,0.1); color: #F4A261;"><i
                            class="fas fa-users"></i></div>
                    <h6 class="small text-muted mb-1">MOBILE USERS</h6>
                    <h2 class="font-weight-bold" style="color: var(--med-blue);">{{ $stats['mobile_users'] }}</h2>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Live Dispatch Table --}}
            <div class="col-lg-8">
                <div class="med-card shadow-sm">
                    <div class="p-4 border-bottom d-flex justify-content-between">
                        <h5 class="m-0 font-weight-bold" style="color: var(--med-blue);">Active Dispatch Feed</h5>
                        <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-light border">View All</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table med-table mb-0">
                            <thead>
                                <tr>
                                    <th>Patient & Incident</th>
                                    {{-- <th>Assigned Unit</th> --}}
                                    <th>Destination</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentBookings as $booking)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-light p-2 rounded mr-3 text-primary">
                                                    <i class="fas fa-user-injured"></i>
                                                </div>
                                                <div>
                                                    {{-- Uses patient_name column from your patients table --}}
                                                    <span class="d-block font-weight-bold text-dark">
                                                        {{ $booking->patient->patient_name ?? 'Walk-in / Unknown' }}
                                                    </span>
                                                    <small class="text-muted">
                                                        {{ $booking->patient->health_issue ?? 'Emergency' }}
                                                    </small>
                                                </div>
                                            </div>
                                        </td>
                                        {{-- <td>
                                            <span class="font-weight-bold text-blue-900">
                                                {{ $booking->ambulance->vehicle_number ?? 'PENDING' }}
                                            </span>
                                            <br>
                                            <small class="text-muted">ID: #{{ $booking->ambulance_id ?? 'N/A' }}</small>
                                        </td> --}}
                                        <td>
                                            <span class="small text-truncate d-inline-block" style="max-width: 150px;">
                                                {{ $booking->pickup_address ?? 'Not Set' }}
                                            </span>
                                            <div>
                                                <small class="text-muted">
                                                    <span class="fw-bold text-dark">long:  </span>{{ $booking->pickup_lat ?? '0.00' }} |
                                                    <span class="fw-bold text-dark">lat: </span>{{ $booking->pickup_long ?? '0.00' }}
                                                </small>
                                            </div>
                                        </td>
                                        <td>
                                            {{-- Status styling based on your booking status --}}
                                            @php
                                                $statusClass = match ($booking->status) {
                                                    'pending' => 'status-critical',
                                                    'completed' => 'status-ready',
                                                    default => 'status-active',
                                                };
                                            @endphp
                                            <span class="med-status {{ $statusClass }}">
                                                {{ strtoupper($booking->status) }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5 text-muted">
                                            No recent bookings found in the dispatch feed.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Quick Readiness List --}}
            <div class="col-lg-4">
                <div class="med-card p-4">
                    <h5 class="font-weight-bold mb-4" style="color: var(--med-blue);">Available Units</h5>
                    @foreach ($readyAmbulances as $amb)
                        <div
                            class="d-flex justify-content-between align-items-center mb-3 p-3 border rounded-lg border-dashed">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-truck-medical text-success mr-3 fa-lg"></i>
                                <div>
                                    <h6 class="m-0 font-weight-bold">{{ $amb->vehicle_number }}</h6>
                                    <small class="text-muted">{{ $amb->type->name ?? 'Standard' }}</small>
                                </div>
                            </div>
                            <span class="med-status status-ready">READY</span>
                        </div>
                    @endforeach
                    {{-- <a href="{{ route('admin.bookings.create') }}" class="btn btn-primary btn-block py-3 mt-3 shadow">
                    <i class="fas fa-plus mr-2"></i> New Dispatch
                </a> --}}
                </div>
            </div>
        </div>
    </div>
@endsection