@extends('adminlte::page')
@section('title', config('app.name') . ' - Detalle de Asistencia')
@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-user-clock"></i> 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')
    <!-- Información General -->
    <div class="card mb-3">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title mb-0">
                <i class="fas fa-info-circle mr-2"></i> Información
            </h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Empleado -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-info elevation-1">
                            <i class="fas fa-user"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Empleado</span>
                            <span class="info-box-number">{{ $asistencia->empleado->nombre }} {{ $asistencia->empleado->apellido }}</span>
                        </div>
                    </div>
                </div>

                <!-- Fecha Laboral -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-primary elevation-1">
                            <i class="fas fa-calendar-alt"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Fecha Laboral</span>
                            <span class="info-box-number">
                                {{ $asistencia->fecha_laboral ? \Carbon\Carbon::parse($asistencia->fecha_laboral)->format('d/m/Y') : 'N/A' }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Estado -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-{{ $asistencia->salida_at ? 'success' : 'warning' }} elevation-1">
                            <i class="fas fa-{{ $asistencia->salida_at ? 'check-circle' : 'clock' }}"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Estado</span>
                            <span class="info-box-number">
                                @if ($asistencia->salida_at)
                                    <span class="badge badge-success">Completado</span>
                                @elseif($asistencia->estado == 0)
                                    <span class="badge badge-danger">Ausente</span>
                                @else
                                    <span class="badge badge-warning">En trabajo</span>
                                @endif
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Tiempo Trabajado -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-success elevation-1">
                            <i class="fas fa-hourglass-half"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Tiempo Trabajado</span>
                            <span class="info-box-number">
                                @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
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Columna Izquierda -->
        <div class="col-md-8">
            <!-- Información del Empleado -->
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-user mr-2"></i> Información del Empleado
                    </h3>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th style="width: 30%;"><i class="fas fa-user mr-2"></i> Empleado</th>
                                <td><strong>{{ $asistencia->empleado->nombre }} {{ $asistencia->empleado->apellido }}</strong></td>
                            </tr>
                            <tr>
                                <th><i class="fas fa-id-card mr-2"></i> DNI</th>
                                <td>{{ $asistencia->empleado->dni ?? 'No registrado' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fas fa-barcode mr-2"></i> Código</th>
                                <td><span class="badge badge-secondary">{{ $asistencia->empleado->codigo }}</span></td>
                            </tr>
                            <tr>
                                <th><i class="fas fa-briefcase mr-2"></i> Cargo</th>
                                <td>{{ $asistencia->empleado->cargo ?? 'No especificado' }}</td>
                            </tr>
                            @if($asistencia->empleado->turnos && $asistencia->empleado->turnos->count() > 0)
                            <tr>
                                <th><i class="fas fa-clock mr-2"></i> Turnos</th>
                                <td>
                                    @foreach($asistencia->empleado->turnos as $turno)
                                        <span class="badge badge-primary">{{ $turno->descripcion }}</span>
                                    @endforeach
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Información de Asistencia -->
            <div class="card mb-3">
                <div class="card-header bg-warning text-dark">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-calendar-check mr-2"></i> Información de Asistencia
                    </h3>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th style="width: 30%;"><i class="fas fa-sign-in-alt mr-2"></i> Fecha de Entrada</th>
                                <td>
                                    @if($asistencia->entrada_at)
                                        <strong>{{ \Carbon\Carbon::parse($asistencia->entrada_at)->format('d/m/Y H:i:s') }}</strong>
                                    @else
                                        <span class="text-muted">No registrada</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th><i class="fas fa-sign-out-alt mr-2"></i> Fecha de Salida</th>
                                <td>
                                    @if($asistencia->salida_at)
                                        <strong>{{ \Carbon\Carbon::parse($asistencia->salida_at)->format('d/m/Y H:i:s') }}</strong>
                                    @else
                                        <span class="text-muted">No registrada</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th><i class="fas fa-calendar-day mr-2"></i> Fecha Laboral</th>
                                <td>
                                    <span class="badge badge-info">
                                        {{ $asistencia->fecha_laboral ? \Carbon\Carbon::parse($asistencia->fecha_laboral)->format('d/m/Y') : 'No registrada' }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th><i class="fas fa-info-circle mr-2"></i> Estado</th>
                                <td>
                                    @if ($asistencia->salida_at)
                                        <span class="badge badge-success">Completado</span>
                                    @elseif($asistencia->estado == 0)
                                        <span class="badge badge-danger">Ausente</span>
                                    @else
                                        <span class="badge badge-warning">En trabajo</span>
                                    @endif
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    @if($asistencia->foto_path_entrada || $asistencia->foto_path_salida)
                        <button class="btn btn-primary" data-toggle="modal" data-target="#fotoModal">
                            <i class="fas fa-camera"></i> Ver Fotos
                        </button>
                    @else
                        <span class="text-muted"><i class="fas fa-info-circle"></i> No hay fotos disponibles</span>
                    @endif
                </div>
            </div>

            <!-- Información de Ubicación -->
            @if($asistencia->latitud || $asistencia->longitud || $asistencia->ip_address)
            <div class="card mb-3">
                <div class="card-header bg-success text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-map-marker-alt mr-2"></i> Información de Ubicación
                    </h3>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tbody>
                            @if($asistencia->latitud)
                            <tr>
                                <th style="width: 30%;"><i class="fas fa-map-pin mr-2"></i> Latitud</th>
                                <td>{{ $asistencia->latitud }}</td>
                            </tr>
                            @endif
                            @if($asistencia->longitud)
                            <tr>
                                <th><i class="fas fa-map-pin mr-2"></i> Longitud</th>
                                <td>{{ $asistencia->longitud }}</td>
                            </tr>
                            @endif
                            @if($asistencia->ip_address)
                            <tr>
                                <th><i class="fas fa-network-wired mr-2"></i> IP Address</th>
                                <td><span class="badge badge-secondary">{{ $asistencia->ip_address }}</span></td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                    @if ($asistencia->ubicacion_descriptiva)
                        <div class="mt-3">
                            <a href="{{ $asistencia->ubicacion_descriptiva }}" target="_blank" class="btn btn-primary">
                                <i class="fas fa-external-link-alt"></i> Ver en Google Maps
                            </a>
                        </div>
                    @endif
                </div>
            </div>
            @endif
        </div>

        <!-- Columna Derecha -->
        <div class="col-md-4">
            <!-- Información Técnica -->
            <div class="card mb-3">
                <div class="card-header bg-secondary text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-cog mr-2"></i> Información Técnica
                    </h3>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <th style="width: 40%;">ID</th>
                                <td><span class="badge badge-secondary">{{ $asistencia->id }}</span></td>
                            </tr>
                            <tr>
                                <th>Creado</th>
                                <td>
                                    @if($asistencia->created_at)
                                        {{ \Carbon\Carbon::parse($asistencia->created_at)->format('d/m/Y H:i:s') }}
                                    @else
                                        <span class="text-muted">No registrado</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Actualizado</th>
                                <td>
                                    @if($asistencia->updated_at)
                                        {{ \Carbon\Carbon::parse($asistencia->updated_at)->format('d/m/Y H:i:s') }}
                                    @else
                                        <span class="text-muted">No registrado</span>
                                    @endif
                                </td>
                            </tr>
                            @if($asistencia->user_agent)
                            <tr>
                                <th>User Agent</th>
                                <td>
                                    <small class="text-muted">{{ Str::limit($asistencia->user_agent, 50) }}</small>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Información de Observación -->
            @if($asistencia->observacion)
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-comment-alt mr-2"></i> Observación
                    </h3>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ $asistencia->observacion }}</p>
                </div>
            </div>
            @endif
        </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 bg-primary text-white">
                    <h5 class="modal-title" id="fotoModalLabel">
                        <i class="fas fa-camera mr-2"></i> Fotos de la Asistencia
                    </h5>
                    <button type="button" class="close text-white" 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)
                                <div class="card">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0"><i class="fas fa-sign-in-alt mr-2"></i> Foto de Entrada</h6>
                                    </div>
                                    <div class="card-body p-2">
                                        <img src="{{ Storage::url($asistencia->foto_path_entrada) }}" alt="Foto de Entrada" class="img-fluid rounded" style="cursor: pointer;">
                                        <small class="text-muted d-block mt-2">
                                            <i class="fas fa-clock"></i> {{ $asistencia->entrada_at ? \Carbon\Carbon::parse($asistencia->entrada_at)->format('d/m/Y H:i:s') : 'No registrada' }}
                                        </small>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay foto de entrada
                                </div>
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if ($asistencia->foto_path_salida)
                                <div class="card">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0"><i class="fas fa-sign-out-alt mr-2"></i> Foto de Salida</h6>
                                    </div>
                                    <div class="card-body p-2">
                                        <img src="{{ Storage::url($asistencia->foto_path_salida) }}" alt="Foto de Salida" class="img-fluid rounded" style="cursor: pointer;">
                                        <small class="text-muted d-block mt-2">
                                            <i class="fas fa-clock"></i> {{ $asistencia->salida_at ? \Carbon\Carbon::parse($asistencia->salida_at)->format('d/m/Y H:i:s') : 'No registrada' }}
                                        </small>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay foto de salida
                                </div>
                            @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('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            // Hacer las imágenes clickeables para ver en tamaño completo
            $('#fotoModal img').click(function() {
                const imgSrc = $(this).attr('src');
                const imgAlt = $(this).attr('alt');

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