@extends('adminlte::page')
@section('title', 'Reporte de Asistencia de Personal')
@section('plugins.Select2', true)
@section('plugins.DateRangePicker', true)

@section('content_header')
    <h4>Reporte de Asistencia de Personal</h4>
@stop

@section('content')
    <div class="card">
        <div class="card-body">
            <!-- Filtros -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light">
                            <h3 class="card-title"><i class="fas fa-filter mr-2"></i>Filtros de búsqueda</h3>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('reportes.asistencias.search') }}" method="GET" class="mb-0">
                                <div class="row">
                                    <!-- Empleado -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="empleado_id">Empleado</label>
                                            <select name="empleado_id" id="empleado_id" class="form-control select2" style="width: 100%">
                                                <option value="">Todos los colaboradores</option>
                                                @foreach ($empleados as $empleado)
                                                    <option value="{{ $empleado->id }}" {{ request('empleado_id') == $empleado->id ? 'selected' : '' }}>
                                                        {{ $empleado->nombre }} {{ $empleado->apellido }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Rango de fechas -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="fecha_desde">Fecha Desde</label>
                                            <input type="date" name="fecha_desde" id="fecha_desde" class="form-control" value="{{ request('fecha_desde') }}">
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="fecha_hasta">Fecha Hasta</label>
                                            <input type="date" name="fecha_hasta" id="fecha_hasta" class="form-control" value="{{ request('fecha_hasta') }}">
                                        </div>
                                    </div>

                                    <!-- Mes y Año -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="mes">Mes</label>
                                            <select name="mes" id="mes" class="form-control">
                                                <option value="">Todos los meses</option>
                                                @for($i = 1; $i <= 12; $i++)
                                                    <option value="{{ $i }}" {{ request('mes') == $i ? 'selected' : '' }}>
                                                        {{ date('F', mktime(0, 0, 0, $i, 1)) }}
                                                    </option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Año -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="anio">Año</label>
                                            <select name="anio" id="anio" class="form-control">
                                                <option value="">Todos los años</option>
                                                @for($i = date('Y'); $i >= date('Y')-5; $i--)
                                                    <option value="{{ $i }}" {{ request('anio') == $i ? 'selected' : '' }}>
                                                        {{ $i }}
                                                    </option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Tipo de registro -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tipo_registro">Tipo de Registro</label>
                                            <select name="tipo_registro" id="tipo_registro" class="form-control">
                                                <option value="">Todos</option>
                                                <option value="completa" {{ request('tipo_registro') == 'completa' ? 'selected' : '' }}>Completa (Entrada + Salida)</option>
                                                <option value="solo_entrada" {{ request('tipo_registro') == 'solo_entrada' ? 'selected' : '' }}>Solo Entrada</option>
                                                <option value="solo_salida" {{ request('tipo_registro') == 'solo_salida' ? 'selected' : '' }}>Solo Salida</option>
                                                <option value="incompleta" {{ request('tipo_registro') == 'incompleta' ? 'selected' : '' }}>Incompleta</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Turnos -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="turnos">Turnos</label>
                                            <select name="turnos" id="turnos" class="form-control">
                                                <option value="">Todos</option>
                                                @foreach ($turnos as $turno)
                                                    <option value="{{ $turno->id }}" {{ request('turnos') == $turno->id ? 'selected' : '' }}>
                                                        {{ $turno->descripcion }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Tardanzas -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tardanzas">Tardanzas</label>
                                            <select name="tardanzas" id="tardanzas" class="form-control">
                                                <option value="">Todos</option>
                                                <option value="1" {{ request('tardanzas') == '1' ? 'selected' : '' }}>Solo Tardanzas (>10:30 PM)</option>
                                                <option value="2" {{ request('tardanzas') == '2' ? 'selected' : '' }}>Solo Tardanzas (>9:30 AM)</option>
                                                <option value="3" {{ request('tardanzas') == '3' ? 'selected' : '' }}>Solo Tardanzas (>3:30 PM)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Opciones adicionales -->
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="incluir_ausentes" id="incluir_ausentes" value="1" {{ request('incluir_ausentes') == '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="incluir_ausentes">
                                                <i class="fas fa-user-times mr-1"></i>
                                                <strong>Incluir empleados ausentes</strong>
                                                <small class="text-muted d-block">Mostrar empleados que no registraron entrada en las fechas seleccionadas</small>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Botones -->
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="btn-group float-right">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-search mr-1"></i>
                                                Buscar
                                            </button>

                                            <a href="{{ route('reportes.asistencias.index') }}" class="btn btn-secondary">
                                                <i class="fas fa-broom mr-1"></i>
                                                Limpiar
                                            </a>

                                            @if(isset($asistencias) && $asistencias->count() > 0)
                                                <a href="{{ route('reportes.asistencias.export', ['format' => 'excel']) }}?{{ http_build_query(request()->all()) }}"
                                                    class="btn btn-success" target="_blank">
                                                    <i class="fas fa-file-excel mr-1"></i>
                                                    Excel
                                                </a>

                                                <a href="{{ route('reportes.asistencias.export', ['format' => 'pdf']) }}?{{ http_build_query(request()->all()) }}"
                                                    class="btn btn-danger" target="_blank">
                                                    <i class="fas fa-file-pdf mr-1"></i>
                                                    PDF
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabla de resultados -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fas fa-table mr-2"></i>
                                    Resultados {{ isset($asistencias) ? '(' . $asistencias->count() . ' registros)' : '' }}
                                </h3>
                            </div>
                            <div class="card-body">
                                @if(isset($asistencias))
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>N°</th>
                                                <th>Empleado</th>
                                                <th>Fecha Entrada</th>
                                                <th>Hora Entrada</th>
                                                <th>Fecha Salida</th>
                                                <th>Hora Salida</th>
                                                <th>Estado</th>
                                                <th>Observación</th>
                                                <th>Fotos</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $i = 1;
                                            @endphp
                                            @forelse($asistencias as $asistencia)
                                                <tr class="{{ isset($asistencia->es_ausente) && $asistencia->es_ausente ? 'table-danger' : '' }}">
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="text-muted">AUSENTE</span>
                                                        @else
                                                            {{ $i++ }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ $asistencia->empleado->nombre }} {{ $asistencia->empleado->apellido }}
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-danger ml-1">AUSENTE</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-light">{{ \Carbon\Carbon::parse($asistencia->fecha_ausencia)->format('d/m/Y') }}</span>
                                                        @elseif($asistencia->entrada_at)
                                                            <span class="badge badge-light">{{ \Carbon\Carbon::parse($asistencia->entrada_at)->format('d/m/Y') }}</span>
                                                        @else
                                                            <span class="badge badge-danger">Sin registro</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-danger">No llegó</span>
                                                        @elseif($asistencia->entrada_at)
                                                            <span class="badge badge-success">{{ \Carbon\Carbon::parse($asistencia->entrada_at)->format('H:i:s') }}</span>
                                                        @else
                                                            <span class="badge badge-danger">Sin registro</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-danger">No llegó</span>
                                                        @elseif($asistencia->salida_at)
                                                            <span class="badge badge-light">{{ \Carbon\Carbon::parse($asistencia->salida_at)->format('d/m/Y') }}</span>
                                                        @else
                                                            <span class="badge badge-danger">Sin registro</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-danger">No llegó</span>
                                                        @elseif($asistencia->salida_at)
                                                            <span class="badge badge-info">{{ \Carbon\Carbon::parse($asistencia->salida_at)->format('H:i:s') }}</span>
                                                        @else
                                                            <span class="badge badge-warning">Sin registro</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-danger">Ausente</span>
                                                        @elseif($asistencia->entrada_at && $asistencia->salida_at)
                                                            <span class="badge badge-success">Completa</span>
                                                        @elseif($asistencia->entrada_at)
                                                            <span class="badge badge-warning">Solo Entrada</span>
                                                        @elseif($asistencia->salida_at)
                                                            <span class="badge badge-danger">Solo Salida</span>
                                                        @else
                                                            <span class="badge badge-secondary">Sin datos</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <small class="text-danger">{{ $asistencia->observacion }}</small>
                                                        @elseif($asistencia->observacion)
                                                            <small>{{ Str::limit($asistencia->observacion, 30) }}</small>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(isset($asistencia->es_ausente) && $asistencia->es_ausente)
                                                            <span class="badge badge-secondary">Sin foto</span>
                                                        @elseif($asistencia->foto_path_entrada || $asistencia->foto_path_salida)
                                                            <button type="button" class="btn btn-sm btn-info ver-fotos" data-asistencia-id="{{ $asistencia->id }}">
                                                                <i class="fas fa-camera"></i> Ver
                                                            </button>
                                                        @else
                                                            <span class="badge badge-secondary">Sin foto</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="9" class="text-center text-muted">
                                                        <i class="fas fa-info-circle mr-2"></i>
                                                        No se encontraron registros con los filtros aplicados
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                @else
                                <div class="text-center py-5">
                                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">Use los filtros para buscar asistencias</h5>
                                    <p class="text-muted">Seleccione los criterios de búsqueda y haga clic en "Buscar"</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para fotos -->
    <div class="modal fade" id="fotoModal" tabindex="-1" aria-labelledby="fotoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="fotoModalLabel">
                        <i class="fas fa-camera mr-2"></i>
                        Fotos de Verificación - <span id="empleado-nombre" class="font-weight-bold"></span>
                    </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 id="fotos-container">
                        <!-- Las fotos se cargarán aquí dinámicamente -->
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .select2-selection {
            height: 40px !important;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Iniciar Select2
            $('.select2').select2();

            // Evento para abrir modal de fotos
            $(document).on('click', '.ver-fotos', function() {
                var asistenciaId = $(this).data('asistencia-id');
                cargarFotos(asistenciaId);
            });

            // Función para cargar fotos via AJAX
            function cargarFotos(asistenciaId) {
                $.ajax({
                    url: '{{ route("asistencias.fotos", ":id") }}'.replace(':id', asistenciaId),
                    type: 'GET',
                    success: function(response) {
                        var html = '<div class="row">';

                        // Contenedor para entrada
                        if (response.foto_entrada) {
                            html += '<div class="col-md-6">';
                            html += '<div class="card">';
                            html += '<div class="card-header">';
                            html += '<h6 class="card-title"><i class="fas fa-sign-in-alt mr-2"></i>Imagen de Entrada</h6>';
                            html += '</div>';
                            html += '<div class="card-body text-center">';
                            html += '<img src="' + response.foto_entrada + '" alt="Foto de entrada" class="img-fluid" style="max-height: 300px;">';
                            html += '<br><br><p class="mt-2 text-black"><i class="fas fa-clock"></i> Fecha y Hora de Entrada: ' + response.fecha_entrada + '</p>';
                            html += '</div>';
                            html += '</div>';
                            html += '</div>';
                        }

                        // Contenedor para salida
                        if (response.foto_salida) {
                            html += '<div class="col-md-6">';
                            html += '<div class="card">';
                            html += '<div class="card-header">';
                            html += '<h6 class="card-title"><i class="fas fa-sign-out-alt mr-2"></i>Imagen de Salida</h6>';
                            html += '</div>';
                            html += '<div class="card-body text-center">';
                            html += '<img src="' + response.foto_salida + '" alt="Foto de salida" class="img-fluid" style="max-height: 300px;">';
                            html += '<br><br><p class="mt-2 text-black"><i class="fas fa-clock"></i> Fecha y Hora de Salida: ' + response.fecha_salida + '</p>';
                            html += '</div>';
                            html += '</div>';
                            html += '</div>';
                        }

                        // Si no hay fotos
                        if (!response.foto_entrada && !response.foto_salida) {
                            html = '<div class="col-12">';
                            html += '<div class="alert alert-info text-center">';
                            html += '<i class="fas fa-info-circle mr-2"></i>';
                            html += 'No hay fotos disponibles para esta asistencia.';
                            html += '</div>';
                            html += '</div>';
                        }

                        html += '</div>';

                        $('#empleado-nombre').text(response.empleado);
                        $('#fotos-container').html(html);
                        $('#fotoModal').modal('show');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error al cargar fotos:', error);
                        alert('Error al cargar las fotos. Por favor, intente nuevamente.');
                    }
                });
            }
        });
    </script>
@stop