@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Detalle de Asistencia')
@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Detalle de Asistencia</h1>
        <a href="{{ route('asistencias.index') }}" class="btn btn-warning">
            <i class="fas fa-list"></i> Lista de Asistencias
        </a>
    </div>
@stop

@section('content')
    <div class="row">

        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-user mr-2"></i>
                        Información del Empleado
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Información del Empleado -->
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Empleado:</strong></td>
                                    <td>{{ $asistencia->empleado->nombre }} {{ $asistencia->empleado->apellido }}</td>
                                </tr>
                                <tr>
                                    <td><strong>DNI:</strong></td>
                                    <td>{{ $asistencia->empleado->dni ?? 'No registrado' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Código:</strong></td>
                                    <td>{{ $asistencia->empleado->codigo }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Cargo:</strong></td>
                                    <td>{{ $asistencia->empleado->cargo ?? 'No especificado' }}</td>
                                </tr>
                            </table>
                        </div>
                        <!-- Información de Asistencia -->
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Fecha de Entrada:</strong></td>
                                    <td>{{ $asistencia->entrada_at ? \Carbon\Carbon::parse($asistencia->entrada_at)->format('d/m/Y H:i:s') : 'No registrada' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Fecha de Salida:</strong></td>
                                    <td>{{ $asistencia->salida_at ? \Carbon\Carbon::parse($asistencia->salida_at)->format('d/m/Y H:i:s') : 'No registrada' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Fecha Laboral:</strong></td>
                                    <td>{{ $asistencia->fecha_laboral ? \Carbon\Carbon::parse($asistencia->fecha_laboral)->format('d/m/Y') : 'No registrada' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Estado:</strong></td>
                                    <td>
                                        @if ($asistencia->salida_at)
                                            <span class="badge badge-success">Completado</span>
                                        @else
                                            <span class="badge badge-warning">En trabajo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Tiempo Trabajado:</strong></td>
                                    <td>
                                        @if ($asistencia->entrada_at && $asistencia->salida_at)
                                            @php
                                                $entrada = \Carbon\Carbon::parse($asistencia->entrada_at);
                                                $salida = \Carbon\Carbon::parse($asistencia->salida_at);
                                                $tiempo = $entrada->diff($salida);
                                                $horas = $tiempo->h + $tiempo->days * 24;
                                                $minutos = $tiempo->i;
                                            @endphp
                                            <span class="badge badge-info">{{ $horas }}h {{ $minutos }}m</span>
                                        @else
                                            <span class="text-muted">No calculable</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <!-- Información de Fotos -->
                        <button class="btn btn-primary" data-toggle="modal" data-target="#fotoModal">
                            <i class="fas fa-camera"></i> Ver Fotos
                        </button>
                    </div>
                </div>
            </div>

            <!-- Información de Ubicación -->
            <div class="card mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-map-marker-alt mr-2"></i>
                        Información de Ubicación
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Latitud:</strong></td>
                                    <td>{{ $asistencia->latitud ?? 'No registrada' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Longitud:</strong></td>
                                    <td>{{ $asistencia->longitud ?? 'No registrada' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>IP Address:</strong></td>
                                    <td>{{ $asistencia->ip_address ?? 'No registrada' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            @if ($asistencia->ubicacion_descriptiva)
                                <a href="{{ $asistencia->ubicacion_descriptiva }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-external-link-alt"></i> Ver en Google Maps
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Información Técnica -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle mr-2"></i>
                        Información Técnica
                    </h3>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td><strong>ID:</strong></td>
                            <td>{{ $asistencia->id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Creado:</strong></td>
                            <td>{{ $asistencia->created_at ? \Carbon\Carbon::parse($asistencia->created_at)->format('d/m/Y H:i:s') : 'No registrado' }}
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Actualizado:</strong></td>
                            <td>{{ $asistencia->updated_at ? \Carbon\Carbon::parse($asistencia->updated_at)->format('d/m/Y H:i:s') : 'No registrado' }}
                            </td>
                        </tr>
                        <tr>
                            <td><strong>User Agent:</strong></td>
                            <td>
                                <small class="text-muted">{{ Str::limit($asistencia->user_agent, 50) }}</small>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Información de Observación -->
            <div class="card mt-3">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle mr-2"></i>
                        Información de Observación
                    </h3>
                </div>
                <div class="card-body">
                    <p>{{ $asistencia->observacion }}</p>
                    @if($asistencia->estado == 0)
                        <span class="badge badge-danger">Ausente</span>
                    @endif
                </div>
            </div>
        </div>
    </div>


    <!-- Modal para ver fotos -->
    <div class="modal fade" id="fotoModal" tabindex="-1" role="dialog" aria-labelledby="fotoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="fotoModalLabel">Fotos de la Asistencia</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            @if ($asistencia->foto_path_entrada)
                                <img src="{{ Storage::url($asistencia->foto_path_entrada) }}" alt="Foto de Entrada" class="img-fluid">
                                <small class="text-black">
                                    <i class="fas fa-clock"></i> Fecha y Hora de Entrada: {{ $asistencia->entrada_at ? \Carbon\Carbon::parse($asistencia->entrada_at)->format('d/m/Y H:i:s') : 'No registrada' }}</small>
                            @else
                                <p>No hay foto de entrada</p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if ($asistencia->foto_path_salida)
                                <img src="{{ Storage::url($asistencia->foto_path_salida) }}" alt="Foto de Salida" class="img-fluid">
                                <small class="text-black">
                                    <i class="fas fa-clock"></i> Fecha y Hora de Salida: {{ $asistencia->salida_at ? \Carbon\Carbon::parse($asistencia->salida_at)->format('d/m/Y H:i:s') : 'No registrada' }}</small>
                            @else
                                <p>No hay foto de salida</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .table-borderless td {
            border: none;
            padding: 0.5rem 0;
        }

        .card-title {
            margin-bottom: 0;
        }

        .card-img {
            width: 50%;
            height: 50%;
            object-fit: cover;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Hacer las imágenes clickeables para ver en tamaño completo
            $('.card img').click(function() {
                const imgSrc = $(this).attr('src');
                const imgAlt = $(this).attr('alt');

                Swal.fire({
                    imageUrl: imgSrc,
                    imageAlt: imgAlt,
                    width: '80%',
                    confirmButtonText: 'Cerrar'
                });
            });
        });
    </script>
@stop