@extends('layouts.dashboard')



@section('content')

<div class="container">

    <h2 class="mb-4">👷 Panel del Empleado</h2>



    {{-- Activación de botón de pánico --}}

    <form method="POST" action="{{ route('alerta.activar') }}"

      @if($alertaActiva) onsubmit="return false;" @else onsubmit="cambiarImagen();" @endif>

        @csrf

        <input type="hidden" name="latitud" id="latitud">

        <input type="hidden" name="longitud" id="longitud">



        <button type="submit" class="border-0 bg-transparent p-0" id="btnPanico"

                @if($alertaActiva) disabled @endif>

            <img id="imagenPanico"

                src="{{ $alertaActiva ? asset('img/botonPanicoVerde.png') : asset('img/botonPanicoRojo.png') }}"

                alt="Botón de Pánico"

                style="max-width: 220px;">

        </button>

    </form>



    @if($alertaActiva && in_array($alertaActiva->estado, ['pendiente', 'atendida']))

    <form action="{{ route('alerta.falsa', $alertaActiva) }}" method="POST" onsubmit="return confirm('¿Confirmas que fue una falsa alarma?')">

        @csrf

        <button type="submit" class="btn btn-outline-secondary mt-3">

            🚫 Marcar como Falsa Alarma

        </button>

    </form>

    @endif



    @if($alertaActiva)

        <div class="alert alert-warning mt-3">

            🚨 Alerta activa desde {{ $alertaActiva->created_at->format('d/m/Y H:i') }} – Estado: {{ ucfirst($alertaActiva->estado) }}

        </div>

    @endif



    {{-- Últimas alertas enviadas --}}

    <h5>Mis últimas alertas</h5>

    <table class="table table-bordered bg-white">

        <thead class="table-light">

            <tr>

                <th>Fecha</th>

                <th>Ubicación</th>

                <th>Estado</th>

            </tr>

        </thead>

        <tbody>

            @forelse($alertas as $alerta)

                <tr>

                    <td>{{ $alerta->created_at->timezone('America/Santiago')->format('d/m/Y H:i') }}</td>

                    <td>

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

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

                                Ver mapa

                            </a>

                        @else

                            —

                        @endif

                    </td>

                    <td>

                        @if($alerta->estado === 'pendiente')

                            <span class="badge bg-warning text-dark">Pendiente</span>

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

                            <span class="badge bg-info">Atendida</span>

                        @else

                            <span class="badge bg-success">Resuelta</span>

                        @endif

                    </td>

                </tr>

            @empty

                <tr><td colspan="3" class="text-center text-muted">Sin alertas aún</td></tr>

            @endforelse

        </tbody>

    </table>

</div>



<script>

navigator.geolocation.getCurrentPosition(function(pos) {

    document.getElementById('latitud').value = pos.coords.latitude;

    document.getElementById('longitud').value = pos.coords.longitude;

});

</script>



<script>

    navigator.geolocation.getCurrentPosition(function(pos) {

        document.getElementById('latitud').value = pos.coords.latitude;

        document.getElementById('longitud').value = pos.coords.longitude;

    });

    

    function cambiarImagen() {

        const img = document.getElementById('imagenPanico');

        img.src = "{{ asset('img/botonPanicoVerde.png') }}";

        document.getElementById('btnPanico').disabled = true;

    }

    </script>

@endsection