@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">
                                    <!-- Fila 1: Filtros Esenciales -->
                                    <!-- 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>

                                    <!-- Fecha Desde -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="fecha_desde">Fecha Desde <span class="text-danger">*</span></label>
                                            <input type="date" name="fecha_desde" id="fecha_desde" class="form-control" value="{{ request('fecha_desde') }}" required>
                                            <small class="text-muted">Se valida con fecha laboral</small>
                                        </div>
                                    </div>

                                    <!-- Fecha Hasta -->
                                    <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') }}">
                                            <small class="text-muted">Opcional - Para rango de fechas</small>
                                        </div>
                                    </div>

                                    <!-- Tipo Colaborador -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tipo_colaborador">Tipo Colaborador</label>
                                            <select name="tipo_colaborador" id="tipo_colaborador" class="form-control">
                                                <option value="">Todos</option>
                                                <option value="Oficina" {{ request('tipo_colaborador') == 'Oficina' ? 'selected' : '' }}>Oficina</option>
                                                <option value="Operaciones" {{ request('tipo_colaborador') == 'Operaciones' ? 'selected' : '' }}>Operaciones</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Fila 2: Filtros Complementarios -->
                                    <!-- Tipo de Registro -->
                                    <div class="col-md-4">
                                        <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>

                                    <!-- Tipo de Turno -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="turno_tipo">Tipo de Turno</label>
                                            <select name="turno_tipo" id="turno_tipo" class="form-control">
                                                <option value="">Todos los turnos</option>
                                                <option value="dia" {{ request('turno_tipo') == 'dia' ? 'selected' : '' }}>TURNO DÍA</option>
                                                <option value="noche" {{ request('turno_tipo') == 'noche' ? 'selected' : '' }}>TURNO NOCHE</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Tardanzas -->
                                    <div class="col-md-4">
                                        <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>Fecha Laboral</th>
                                                <th>Estado</th>
                                                <th>Observación</th>
                                                <th>Fotos</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $i = 1;
                                            @endphp
                                            @forelse($asistencias as $asistencia)
                                                @php
                                                    $esDescanso = isset($asistencia->es_descanso) && $asistencia->es_descanso;
                                                    $esAusente = isset($asistencia->es_ausente) && $asistencia->es_ausente;
                                                @endphp
                                                <tr class="{{ $esAusente ? 'table-danger' : ($esDescanso ? 'table-info' : '') }}">
                                                    <td>
                                                        @if($esAusente || $esDescanso)
                                                            <span class="text-muted">{{ $esDescanso ? 'DESCANSO' : 'AUSENTE' }}</span>
                                                        @else
                                                            {{ $i++ }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ $asistencia->empleado->nombre }} {{ $asistencia->empleado->apellido }}
                                                        @if($esDescanso)
                                                            <span class="badge badge-info ml-1">DESCANSO</span>
                                                        @elseif($esAusente)
                                                            <span class="badge badge-danger ml-1">AUSENTE</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($esDescanso || $esAusente)
                                                            <span class="badge badge-light">{{ \Carbon\Carbon::parse($asistencia->fecha_ausencia ?? $asistencia->fecha_laboral)->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($esDescanso)
                                                            <span class="badge badge-info">Descanso</span>
                                                        @elseif($esAusente)
                                                            <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($esDescanso || $esAusente)
                                                            <span class="badge badge-secondary">-</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($esDescanso || $esAusente)
                                                            <span class="badge badge-secondary">-</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->fecha_laboral) && $asistencia->fecha_laboral)
                                                            {{ \Carbon\Carbon::parse($asistencia->fecha_laboral)->format('d/m/Y') }}
                                                        @else
                                                            <span class="text-muted">No registrada</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($esDescanso)
                                                            <span class="badge badge-info">Descanso</span>
                                                        @elseif($esAusente)
                                                            <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($esDescanso || $esAusente)
                                                            <small class="{{ $esDescanso ? 'text-info' : '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($esDescanso || $esAusente)
                                                            <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>


             <!-- Tabla de Descansos -->
             @if(isset($descansosLista) && $descansosLista->count() > 0)
             <div class="row mt-4">
                 <div class="col-md-12">
                     <div class="card card-outline card-info">
                         <div class="card-header">
                             <h3 class="card-title">
                                 <i class="fas fa-calendar-check mr-2"></i>
                                 Colaboradores con Descanso Programado ({{ $descansosLista->count() }})
                             </h3>
                         </div>
                         <div class="card-body">
                             <div class="table-responsive">
                                 <table class="table table-bordered table-striped">
                                     <thead>
                                         <tr>
                                             <th>N°</th>
                                             <th>Colaborador</th>
                                             <th>Fecha Descanso</th>
                                             <th>Fecha Laboral</th>
                                             <th>Observación</th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         @foreach($descansosLista as $index => $descanso)
                                             <tr class="table-info">
                                                 <td>{{ $index + 1 }}</td>
                                                 <td>
                                                     <strong>{{ $descanso->empleado->nombre }} {{ $descanso->empleado->apellido }}</strong>
                                                     <span class="badge badge-info ml-1">DESCANSO</span>
                                                 </td>
                                                 <td>
                                                     <span class="badge badge-light">
                                                         {{ \Carbon\Carbon::parse($descanso->fecha_ausencia ?? $descanso->fecha_laboral)->format('d/m/Y') }}
                                                     </span>
                                                 </td>
                                                 <td>
                                                     @if(isset($descanso->fecha_laboral) && $descanso->fecha_laboral)
                                                         {{ \Carbon\Carbon::parse($descanso->fecha_laboral)->format('d/m/Y') }}
                                                     @else
                                                         <span class="text-muted">-</span>
                                                     @endif
                                                 </td>
                                                 <td>
                                                     <small class="text-info">{{ $descanso->observacion ?? 'Descanso programado' }}</small>
                                                 </td>
                                             </tr>
                                         @endforeach
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         @endif
        </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')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-selection {
        height: 40px !important;
    }

    .select2-selection__choice__display {
        color: #000 !important;
    }

</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Iniciar Select2 para empleados
            $('#empleado_id').select2({
                placeholder: 'Seleccionar empleado...',
                allowClear: true,
                width: '100%'
            });

            // Iniciar Select2 para turnos múltiple
            $('#turnos').select2({
                placeholder: 'Seleccione los turnos',
                allowClear: true,
                width: '100%'
            });

            // 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