@extends('layouts.dashboard')



@section('content')

<h2>📝 Detalle de Alerta</h2>



<div class="card mb-4">

    <div class="card-body">

        <p><strong>Usuario:</strong> {{ $alerta->usuario->name }}</p>

        <p><strong>Estado:</strong> 

            <span class="badge 

                @if($alerta->estado === 'pendiente') bg-warning text-dark

                @elseif($alerta->estado === 'atendida') bg-info

                @else bg-success @endif">

                {{ ucfirst($alerta->estado) }}

            </span>

        </p>

        <p><strong>Fecha y hora:</strong> {{ $alerta->created_at->timezone('America/Santiago')->format('d/m/Y H:i') }}</p>



        @if($alerta->mensaje)

            <p><strong>Mensaje:</strong> {{ $alerta->mensaje }}</p>

        @endif



        @if($alerta->latitud && $alerta->longitud)

            <div class="mb-3">

                <strong>Ubicación:</strong><br>

                <a href="https://www.google.com/maps?q={{ $alerta->latitud }},{{ $alerta->longitud }}"

                   target="_blank" class="btn btn-outline-primary btn-sm">

                   Ver en Google Maps

                </a>

            </div>

            <iframe

                width="100%"

                height="300"

                frameborder="0" style="border:0"

                src="https://maps.google.com/maps?q={{ $alerta->latitud }},{{ $alerta->longitud }}&z=16&output=embed"

                allowfullscreen>

            </iframe>

        @endif

    </div>

</div>



<a href="{{ route('empresa.alertas.index') }}" class="btn btn-secondary">← Volver al listado</a>

@endsection

