@extends('layouts.app')
@section('titulo','Fichaje como '.$usuario->nombre)

@section('contenido')
    <div class="row">
        <!-- Estado actual del usuario -->
        <div class="col-12 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="card-title mb-1">
                                @switch($estadoActual['estado'])
                                    @case('sin_fichar')
                                        <i class="fas fa-clock text-warning me-2"></i>
                                        Estado: Sin fichar
                                        @break
                                    @case('entrada')
                                        <i class="fas fa-sign-in-alt text-success me-2"></i>
                                        Estado: En el trabajo
                                        @break
                                    @case('salida')
                                        <i class="fas fa-sign-out-alt text-info me-2"></i>
                                        Estado: Fuera del trabajo
                                        @break
                                    @default
                                        <i class="fas fa-user-clock text-secondary me-2"></i>
                                        Estado: {{ ucfirst($estadoActual['estado']) }}
                                @endswitch
                            </h5>
                            <p class="card-text text-muted mb-0">{{ $estadoActual['mensaje'] }}</p>
                        </div>
                        <div class="col-md-6 text-end">
                            @if($estadoActual['estado'] !== 'sin_fichar')
                                <span class="badge bg-primary fs-6 me-2">
                                    Último: {{ $estadoActual['hora_ultimo'] }}
                                </span>
                            @endif
                            <span class="badge bg-info fs-6">
                                {{ $horasTrabajadas }}h hoy
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información de horario -->
        <div class="col-12 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-calendar-alt me-2"></i>
                        Horario de trabajo ({{ $horarioInfo['contrato_horas'] }}h)
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            @if($horarioInfo['horario_hoy'])
                                <p class="mb-1">
                                    <strong>Horario de hoy:</strong> 
                                    {{ $horarioInfo['horario_hoy']['inicio'] }} - {{ $horarioInfo['horario_hoy']['fin'] }}
                                </p>
                                <p class="mb-0">
                                    <strong>Horas del día:</strong> {{ $horarioInfo['horario_hoy']['horas'] }}h
                                </p>
                            @else
                                <p class="mb-0 text-muted">
                                    <i class="fas fa-calendar-times me-1"></i>
                                    No es día laboral
                                </p>
                            @endif
                        </div>
                        <div class="col-md-6 text-end">
                            @if($horarioInfo['valido'])
                                <span class="badge bg-success fs-6">
                                    <i class="fas fa-check me-1"></i>
                                    En horario
                                </span>
                            @else
                                <span class="badge bg-warning fs-6">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    {{ $horarioInfo['motivo'] }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Historial de fichajes del día -->
        @if($fichajesHoy->isNotEmpty())
        <div class="col-12 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-history me-2"></i>
                        Fichajes de hoy
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Hora</th>
                                    <th>Tipo</th>
                                    <th>Movimiento</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($fichajesHoy as $fichaje)
                                <tr>
                                    <td>{{ $fichaje->fecha_hora->format('H:i:s') }}</td>
                                    <td>
                                        @switch($fichaje->tipoFichaje->tipo_fichaje)
                                            @case(1)
                                                <i class="fas fa-keyboard text-info me-1"></i>Código
                                                @break
                                            @case(2)
                                                <i class="fas fa-map-marker-alt text-primary me-1"></i>Ubicación
                                                @break
                                            @case(3)
                                                <i class="fas fa-qrcode text-warning me-1"></i>QR
                                                @break
                                            @case(4)
                                                <i class="fas fa-id-card text-success me-1"></i>NFC
                                                @break
                                            @case(5)
                                                <i class="fas fa-mobile-alt text-danger me-1"></i>Aplicación
                                                @break
                                        @endswitch
                                    </td>
                                    <td>
                                        @if($fichaje->tipo_movimiento === 'entrada')
                                            <span class="badge bg-success">Entrada</span>
                                        @else
                                            <span class="badge bg-info">Salida</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($fichaje->status === 'correcto')
                                            <span class="badge bg-success">Correcto</span>
                                        @else
                                            <span class="badge bg-danger">Incorrecto</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if ($tiposFichaje->isNotEmpty())
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">
                        <i class="fas fa-fingerprint me-2"></i>
                        Métodos de fichaje disponibles:
                    </h6>
                    <a href="{{ route('fichajes.reportes.personal') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-chart-bar me-1"></i>
                        Ver Reportes
                    </a>
                </div>

            @php
                $tiposLector = $tiposFichaje->filter(function ($f) {
                    return in_array(normalizarTipoFichajeAId($f->tipo_fichaje), [1, 3, 4], true);
                })->values();
                $tiposApp = $tiposFichaje->filter(function ($f) {
                    return in_array(normalizarTipoFichajeAId($f->tipo_fichaje), [2, 5], true);
                })->values();
            @endphp

            @if ($tiposLector->isNotEmpty())
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">
                            <i class="fas fa-terminal me-2"></i>
                            Fichar en Lector de Fichajes
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="accordionFichajesLector">
                            @foreach ($tiposLector as $index => $fichaje)
                    @php
                        $tipoFichNum = normalizarTipoFichajeAId($fichaje->tipo_fichaje);
                        $tipoLabels = array_flip(getTiposFichaje());
                        $tipoEtiqueta = $tipoLabels[$tipoFichNum] ?? 'Fichaje';
                    @endphp
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading-lector-{{$index}}">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-lector-{{$index}}" aria-expanded="true" aria-controls="collapse-lector-{{$index}}">
                                @switch($tipoFichNum)
                                    @case(1)
                                        <i class="fa fa-keyboard me-2 text-info"></i>
                                        @break
                                    @case(2)
                                        <i class="fa fa-map-marker-alt me-2 text-primary"></i>
                                        @break
                                    @case(3)
                                        <i class="fa fa-qrcode me-2 text-warning"></i>
                                        @break
                                    @case(4)
                                        <i class="fa fa-id-card me-2 text-success"></i>
                                        @break
                                    @case(5)
                                        <i class="fa fa-mobile-alt me-2 text-danger"></i>
                                        @break
                                @endswitch
                                {{ $tipoEtiqueta }}
                            </button>
                        </h2>

                        <div id="collapse-lector-{{$index}}" class="accordion-collapse collapse" aria-labelledby="heading-lector-{{$index}}" data-bs-parent="#accordionFichajesLector">
                            <div class="accordion-body">
                                <div class="card p-3 text-center shadow-sm">
                                    @switch($tipoFichNum)
                                        @case(1)
                                            <div>
                                                <p>Ingresa el siguiente código en el lector de fichaje:</p>
                                            </div>
                                            <h1 class="display-4 text-primary mb-0">{{$fichaje->codigo}}</h1>
                                            @break

                                        @case(3)
                                            <div>
                                                <p>Muestra el siguiente código QR en el lector de fichaje donde vayas a trabajar.</p>
                                            </div>
                                            <div class="text-center">
                                                <div class="bg-white d-inline-block" style="width: fit-content;">
                                                    <img src="{{route('qr', ["texto"=>base64_encode($usuario->nombre)])}}" class="qr-image p-3" width="250">
                                                </div>
                                            </div>
                                            <form action="{{ route('trabajo.fichaje.update') }}" method="POST" class="mt-3">
                                                @csrf
                                                <input type="hidden" name="tipo_fichaje_id" value="{{ $fichaje->id }}">
                                                <input type="hidden" name="qr_validado" value="true">
                                                <button type="submit" class="btn btn-warning">
                                                    <i class="fas fa-qrcode me-2"></i>
                                                    Confirmar Fichaje QR
                                                </button>
                                            </form>
                                            @break

                                        @case(4)
                                            <div>
                                                <p>Utiliza tu tarjeta NFC o tu dispositivo móvil y acércalo al lector de fichaje.</p>
                                            </div>
                                            <form action="{{ route('trabajo.fichaje.update') }}" method="POST" class="mt-3">
                                                @csrf
                                                <input type="hidden" name="tipo_fichaje_id" value="{{ $fichaje->id }}">
                                                <button type="submit" class="btn btn-success btn-fichaje">
                                                    <i class="fas fa-id-card me-2"></i>
                                                    Fichar con NFC
                                                </button>
                                            </form>
                                            @break

                                    @endswitch
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                        </div>
                    </div>
                </div>
            @endif

            @if ($tiposApp->isNotEmpty())
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">
                            <i class="fas fa-mobile-alt me-2"></i>
                            Fichar desde Aplicación
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="accordionFichajesApp">
                            @foreach ($tiposApp as $index => $fichaje)
                                @php
                                    $tipoFichNum = normalizarTipoFichajeAId($fichaje->tipo_fichaje);
                                    $tipoLabels = array_flip(getTiposFichaje());
                                    $tipoEtiqueta = $tipoLabels[$tipoFichNum] ?? 'Fichaje';
                                @endphp
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading-app-{{$index}}">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-app-{{$index}}" aria-expanded="true" aria-controls="collapse-app-{{$index}}">
                                            @switch($tipoFichNum)
                                                @case(2)
                                                    <i class="fa fa-map-marker-alt me-2 text-primary"></i>
                                                    @break
                                                @case(5)
                                                    <i class="fa fa-mobile-alt me-2 text-danger"></i>
                                                    @break
                                            @endswitch
                                            {{ $tipoEtiqueta }}
                                        </button>
                                    </h2>

                                    <div id="collapse-app-{{$index}}" class="accordion-collapse collapse" aria-labelledby="heading-app-{{$index}}" data-bs-parent="#accordionFichajesApp">
                                        <div class="accordion-body">
                                            <div class="card p-3 text-center shadow-sm">
                                                @switch($tipoFichNum)
                                                    @case(2)
                                                        <div data-fichaje-ubic-iniciar="{{ $fichaje->id }}" class="js-fichaje-ubicacion-bloque text-start">
                                                            <p class="text-center mb-2">Activa el GPS y permite la ubicación. Detectamos automáticamente el lugar de trabajo más cercano a ti (radio {{ $fichajeRadioLugarKm }} km).</p>
                                                            <div id="fichaje-ubicacion-estado-{{ $fichaje->id }}" class="alert alert-secondary small mb-2">
                                                                Obteniendo ubicación…
                                                            </div>
                                                            <div id="fichaje-ubicacion-lugar-{{ $fichaje->id }}" class="alert alert-success small py-2 mb-3" style="display: none;"></div>
                                                            <form action="{{ route('trabajo.fichaje.update') }}" method="POST" class="text-center mt-2" id="form-fichaje-ubic-{{ $fichaje->id }}">
                                                                @csrf
                                                                <input type="hidden" name="tipo_fichaje_id" value="{{ $fichaje->id }}">
                                                                <input type="hidden" name="latitud" id="latitud_{{ $fichaje->id }}" value="">
                                                                <input type="hidden" name="longitud" id="longitud_{{ $fichaje->id }}" value="">
                                                                <button type="submit" class="btn btn-success" id="btn-fichaje-ubic-{{ $fichaje->id }}" disabled>
                                                                    <i class="fas fa-map-marker-alt me-2"></i>
                                                                    <span class="js-fichaje-ubic-boton-texto">Fichar con ubicación</span>
                                                                </button>
                                                            </form>
                                                        </div>
                                                        @break

                                                    @case(5)
                                                        <div>
                                                            <p>Pulsa el siguiente botón para fichar mediante tu aplicación.</p>
                                                        </div>
                                                        <form action="{{ route('trabajo.fichaje.update') }}" method="POST" class="mt-3">
                                                            @csrf
                                                            <input type="hidden" name="tipo_fichaje_id" value="{{ $fichaje->id }}">
                                                            <button type="submit" class="btn btn-success btn-fichaje">
                                                                <i class="fas fa-mobile-alt me-2"></i>
                                                                Fichar con Dispositivo
                                                            </button>
                                                        </form>
                                                        @break
                                                @endswitch
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        @else
            <p>No tienes asignado ningún tipo de fichaje.</p>
        @endif
    </div>
@endsection

@push('scripts')
    <style>
        /* Estilo de borde y animación para la imagen QR */
        .qr-image {
            border: 5px solid #fff;
            padding: 10px;
            transition: transform 0.3s ease-in-out;
        }
        .qr-image:hover {
            transform: scale(1.05);
        }
    </style>

    <script>
        window.FICHAJE_LUGARES = @json($lugaresParaFichaje);
        window.FICHAJE_RADIO_KM = {{ $fichajeRadioLugarKm }};

        function fichajeDistanciaKm(lat1, lng1, lat2, lng2) {
            const R = 6371;
            const dLat = (lat2 - lat1) * Math.PI / 180;
            const dLng = (lng2 - lng1) * Math.PI / 180;
            const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                Math.sin(dLng / 2) * Math.sin(dLng / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            return R * c;
        }

        function fichajeResetBotonUbicacion(btn) {
            const span = btn.querySelector('.js-fichaje-ubic-boton-texto');
            if (span) {
                span.textContent = 'Fichar con ubicación';
            }
            btn.disabled = true;
        }

        function fichajeSetBotonUbicacionEnLugar(btn, nombreLugar) {
            const span = btn.querySelector('.js-fichaje-ubic-boton-texto');
            if (span) {
                span.textContent = 'Fichar en ' + nombreLugar;
            }
            btn.disabled = false;
        }

        function fichajeLugarMasCercano(lat, lng) {
            const lugares = window.FICHAJE_LUGARES || [];
            const radio = window.FICHAJE_RADIO_KM || 2;
            let mejor = null;
            let mejorDist = Infinity;
            lugares.forEach(function (l) {
                const la = parseFloat(l.latitud);
                const ln = parseFloat(l.longitud);
                if (isNaN(la) || isNaN(ln)) return;
                const d = fichajeDistanciaKm(la, ln, lat, lng);
                if (d <= radio && d < mejorDist) {
                    mejorDist = d;
                    mejor = { lugar: l, distanciaKm: d };
                }
            });
            return mejor;
        }

        function fichajeActualizarUbicacion(tipoFichajeId) {
            const estadoEl = document.getElementById('fichaje-ubicacion-estado-' + tipoFichajeId);
            const lugarEl = document.getElementById('fichaje-ubicacion-lugar-' + tipoFichajeId);
            const latEl = document.getElementById('latitud_' + tipoFichajeId);
            const lngEl = document.getElementById('longitud_' + tipoFichajeId);
            const btn = document.getElementById('btn-fichaje-ubic-' + tipoFichajeId);
            if (!estadoEl || !latEl || !lngEl || !btn) return;

            if (!(window.FICHAJE_LUGARES && window.FICHAJE_LUGARES.length)) {
                estadoEl.className = 'alert alert-warning small mb-2';
                estadoEl.textContent = 'No hay lugares de trabajo con coordenadas registradas. Contacta con administración.';
                fichajeResetBotonUbicacion(btn);
                return;
            }

            if (!navigator.geolocation) {
                estadoEl.className = 'alert alert-danger small mb-2';
                estadoEl.textContent = 'Tu navegador no permite geolocalización.';
                fichajeResetBotonUbicacion(btn);
                return;
            }

            navigator.geolocation.getCurrentPosition(
                function (position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    latEl.value = lat;
                    lngEl.value = lng;

                    const res = fichajeLugarMasCercano(lat, lng);
                    lugarEl.style.display = 'none';

                    if (res) {
                        estadoEl.className = 'alert alert-success small mb-2';
                        estadoEl.textContent = 'Ubicación recibida. Estás dentro del radio permitido.';
                        lugarEl.className = 'alert alert-success small py-2 mb-3';
                        lugarEl.style.display = 'block';
                        lugarEl.textContent = 'Lugar detectado: ' + res.lugar.nombre + ' (~' + res.distanciaKm.toFixed(2) + ' km).';
                        fichajeSetBotonUbicacionEnLugar(btn, res.lugar.nombre);
                    } else {
                        estadoEl.className = 'alert alert-warning small mb-2';
                        estadoEl.textContent = 'Aún no estás cerca de ningún lugar de trabajo registrado.';
                        fichajeResetBotonUbicacion(btn);
                    }
                },
                function () {
                    estadoEl.className = 'alert alert-danger small mb-2';
                    estadoEl.textContent = 'No se pudo obtener la ubicación. Activa el GPS y permite el acceso.';
                    lugarEl.style.display = 'none';
                    fichajeResetBotonUbicacion(btn);
                },
                { enableHighAccuracy: true, timeout: 15000, maximumAge: 30000 }
            );
        }

        const fichajeUbicacionTimers = {};

        function fichajeIniciarSeguimientoUbicacion(tipoFichajeId) {
            fichajeActualizarUbicacion(tipoFichajeId);
            if (fichajeUbicacionTimers[tipoFichajeId]) {
                clearInterval(fichajeUbicacionTimers[tipoFichajeId]);
            }
            fichajeUbicacionTimers[tipoFichajeId] = setInterval(function () {
                fichajeActualizarUbicacion(tipoFichajeId);
            }, 30000);
        }

        function fichajeDetenerSeguimientoUbicacion(tipoFichajeId) {
            if (fichajeUbicacionTimers[tipoFichajeId]) {
                clearInterval(fichajeUbicacionTimers[tipoFichajeId]);
                fichajeUbicacionTimers[tipoFichajeId] = null;
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('[data-fichaje-ubic-iniciar]').forEach(function (wrap) {
                const id = wrap.getAttribute('data-fichaje-ubic-iniciar');
                const collapse = wrap.closest('.accordion-collapse');
                if (!collapse) return;
                collapse.addEventListener('shown.bs.collapse', function () {
                    fichajeIniciarSeguimientoUbicacion(id);
                });
                collapse.addEventListener('hidden.bs.collapse', function () {
                    fichajeDetenerSeguimientoUbicacion(id);
                });
            });
        });

        @if(session('status'))
            alert(@json(session('status')));
        @endif

        @if(session('error'))
            alert(@json(session('error')));
        @endif
    </script>
@endpush