@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Asistencias')
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Asistencias</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Lista de Asistencias</h5>
            <button type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#finalizarAsistenciasModal">
                <i class="fas fa-check"></i> Finalizar Asistencias
            </button>
        </div>
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha de entrada:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-1">
                    <button id="filterButton" class="btn btn-primary" style="margin-top: 2.3rem;">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered" id="asistencias-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>DNI</th>
                            <th>Empleado</th>
                            <th>Turno</th>
                            <th>Fecha y Hora de Entrada</th>
                            <th>Fecha y Hora de Salida</th>
                            <th>Ubicación de Registro</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal dinámico para mostrar 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>

    <!-- Modal para Finalizar Asistencias -->
    <div class="modal fade" id="finalizarAsistenciasModal" tabindex="-1" aria-labelledby="finalizarAsistenciasModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title text-white" id="finalizarAsistenciasModalLabel">
                        <i class="fas fa-clock mr-2"></i>
                        Finalizar Asistencias Pendientes
                    </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">
                    <!-- Filtros -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-filter mr-2"></i>Filtros de Búsqueda
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group mb-2">
                                        <label for="fechaSelect" class="form-label font-weight-bold">
                                            <i class="fas fa-calendar mr-1"></i>Fecha:
                                        </label>
                                        <input type="date" class="form-control form-control-sm" id="fechaSelect" name="fecha" value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb-2">
                                        <label for="turnoSelect" class="form-label font-weight-bold">
                                            <i class="fas fa-clock mr-1"></i>Turno:
                                        </label>
                                        <select class="form-control form-control-sm" id="turnoSelect" name="turno_id">
                                            <option value="">-- Seleccione un turno --</option>
                                            @foreach($turnos ?? [] as $turno)
                                                <option value="{{ $turno->id }}">{{ $turno->descripcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb-2">
                                        <label class="form-label font-weight-bold">
                                            <i class="fas fa-users mr-1"></i>Modo:
                                        </label>
                                        <div class="mt-1">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tipoFinalizacion" id="todosEmpleados" value="todos" checked>
                                                <label class="form-check-label" for="todosEmpleados">
                                                    <small>Todos</small>
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tipoFinalizacion" id="seleccionIndividual" value="individual">
                                                <label class="form-check-label" for="seleccionIndividual">
                                                    <small>Individual</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Resultados -->
                    <div id="empleadosSinSalida" style="display: none;">
                        <div class="card">
                            <div class="card-header bg-info text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-title mb-0">
                                        <i class="fas fa-list mr-2"></i>Empleados sin registro de salida
                                    </h6>
                                    <span id="contadorEmpleados" class="badge badge-light">0</span>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                    <table class="table table-sm table-hover mb-0">
                                        <thead class="thead-light sticky-top">
                                            <tr>
                                                <th id="columnaSeleccion" style="display: none; width: 50px;">
                                                    <div class="form-check">
                                                        <input type="checkbox" id="seleccionarTodos" class="form-check-input">
                                                        <label class="form-check-label" for="seleccionarTodos">
                                                            <small>Todos</small>
                                                        </label>
                                                    </div>
                                                </th>
                                                <th style="width: 120px;">DNI</th>
                                                <th>Empleado</th>
                                                <th style="width: 150px;">Hora Entrada</th>
                                            </tr>
                                        </thead>
                                        <tbody id="listaEmpleadosSinSalida">
                                            <!-- Se llenará dinámicamente -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sin empleados pendientes -->
                    <div id="sinEmpleadosPendientes" style="display: none;">
                        <div class="card">
                            <div class="card-body text-center py-4">
                                <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                                <h5 class="text-success">¡Excelente!</h5>
                                <p class="text-muted mb-0">Todos los empleados de este turno ya registraron su salida.</p>
                            </div>
                        </div>
                    </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> Cancelar
                    </button>
                    <button type="button" class="btn btn-warning" id="btnFinalizarAsistencias" disabled>
                        <i class="fas fa-check mr-1"></i> Finalizar Asistencias
                    </button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    /* Estilos para el modal de finalizar asistencias */
    #finalizarAsistenciasModal .modal-xl {
        max-width: 95%;
    }

    #finalizarAsistenciasModal .card-header {
        border-bottom: 1px solid #dee2e6;
    }

    #finalizarAsistenciasModal .table th {
        border-top: none;
        font-weight: 600;
        font-size: 0.875rem;
    }

    #finalizarAsistenciasModal .table td {
        vertical-align: middle;
        font-size: 0.875rem;
    }

    #finalizarAsistenciasModal .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f8f9fa;
    }

    #finalizarAsistenciasModal .form-control-sm {
        font-size: 0.875rem;
    }

    #finalizarAsistenciasModal .badge {
        font-size: 0.75rem;
    }

    /* Hover effect para las filas */
    #finalizarAsistenciasModal .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }

    /* Estilo para el contador */
    #contadorEmpleados {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
</style>
@stop

@section('js')
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // Inicializar DataTable con AJAX
        var table = $('#asistencias-table').DataTable({
            processing: true,
            serverSide: false, // Cambiar a true si tienes muchos registros
            ajax: {
                url: '{{ route("asistencias.index") }}',
                type: 'GET'
            },
            columns: [
                {data: 'id', name: 'id'},
                {data: 'dni', name: 'dni'},
                {data: 'empleado', name: 'empleado'},
                {data: 'turno', name: 'turno'},
                {data: 'fecha_hora_entrada', name: 'fecha_hora_entrada'},
                {data: 'fecha_hora_salida', name: 'fecha_hora_salida'},
                {data: 'ubicacion_descriptiva', name: 'ubicacion_descriptiva'},
                {data: 'acciones', name: 'acciones', orderable: false, searchable: false}
            ],
            language: {
                url: '/js/spanish.json'
            },
            order: [[0, 'desc']]
        });

        // 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.entrada_at + '</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.salida_at + '</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.');
                }
            });
        }

        // Funcionalidad para Finalizar Asistencias
        function cargarEmpleadosSinSalida() {
            var turnoId = $('#turnoSelect').val();
            var fecha = $('#fechaSelect').val();

            // Limpiar contenido anterior
            $('#empleadosSinSalida').hide();
            $('#sinEmpleadosPendientes').hide();
            $('#btnFinalizarAsistencias').prop('disabled', true);

            if (!turnoId || !fecha) {
                return;
            }

            // Mostrar loading
            $('#btnFinalizarAsistencias').html('<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...');
            $('#btnFinalizarAsistencias').prop('disabled', true);

            // Obtener empleados sin salida
            $.ajax({
                url: '{{ route("asistencias.empleados-sin-salida") }}',
                type: 'POST',
                data: {
                    turno_id: turnoId,
                    fecha: fecha,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#btnFinalizarAsistencias').html('<i class="fas fa-check mr-1"></i> Finalizar Asistencias');

                    if (response.success) {
                        if (response.total > 0) {
                            // Mostrar empleados sin salida
                            $('#contadorEmpleados').text(response.total);

                            var html = '';
                            var tipoFinalizacion = $('input[name="tipoFinalizacion"]:checked').val();

                            response.empleados.forEach(function(empleado) {
                                html += '<tr>';
                                if (tipoFinalizacion === 'individual') {
                                    html += '<td><div class="form-check"><input type="checkbox" class="form-check-input empleado-checkbox" value="' + empleado.id + '"></div></td>';
                                }
                                html += '<td><span class="badge badge-secondary">' + empleado.dni + '</span></td>';
                                html += '<td><strong>' + empleado.nombre + '</strong></td>';
                                html += '<td><small class="text-muted">' + empleado.entrada_at + '</small></td>';
                                html += '</tr>';
                            });

                            $('#listaEmpleadosSinSalida').html(html);
                            $('#empleadosSinSalida').show();

                            // Mostrar/ocultar columna de selección según el tipo
                            if (tipoFinalizacion === 'individual') {
                                $('#columnaSeleccion').show();
                            } else {
                                $('#columnaSeleccion').hide();
                            }

                            $('#btnFinalizarAsistencias').prop('disabled', false);
                        } else {
                            // No hay empleados sin salida
                            $('#sinEmpleadosPendientes').show();
                        }
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                            confirmButtonText: 'Aceptar',
                            confirmButtonColor: '#dc3545'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    $('#btnFinalizarAsistencias').html('<i class="fas fa-check mr-1"></i> Finalizar Asistencias');
                    console.error('Error al obtener empleados sin salida:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error al obtener empleados sin salida. Por favor, intente nuevamente.',
                        confirmButtonText: 'Aceptar',
                        confirmButtonColor: '#dc3545'
                    });
                }
            });
        }

        // Eventos para cargar empleados
        $('#turnoSelect, #fechaSelect').on('change', cargarEmpleadosSinSalida);

        // Evento para cambiar tipo de finalización
        $('input[name="tipoFinalizacion"]').on('change', function() {
            if ($('#turnoSelect').val() && $('#fechaSelect').val()) {
                cargarEmpleadosSinSalida();
            }
        });

        // Finalizar asistencias
        $('#btnFinalizarAsistencias').on('click', function() {
            var turnoId = $('#turnoSelect').val();
            var fecha = $('#fechaSelect').val();
            var tipoFinalizacion = $('input[name="tipoFinalizacion"]:checked').val();
            var asistenciasSeleccionadas = [];

            if (!turnoId) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Debe seleccionar un turno',
                    confirmButtonText: 'Aceptar'
                });
                return;
            }

            if (!fecha) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Debe seleccionar una fecha',
                    confirmButtonText: 'Aceptar'
                });
                return;
            }

            // Si es selección individual, verificar que se hayan seleccionado empleados
            if (tipoFinalizacion === 'individual') {
                $('.empleado-checkbox:checked').each(function() {
                    asistenciasSeleccionadas.push($(this).val());
                });

                if (asistenciasSeleccionadas.length === 0) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Debe seleccionar al menos un empleado para finalizar',
                        confirmButtonText: 'Aceptar'
                    });
                    return;
                }
            }

            var mensajeConfirmacion = tipoFinalizacion === 'individual'
                ? '¿Está seguro de que desea finalizar las asistencias de los empleados seleccionados? Esta acción registrará la salida con la hora actual.'
                : '¿Está seguro de que desea finalizar todas las asistencias pendientes de este turno? Esta acción registrará la salida con la hora actual para todos los empleados que no marcaron salida.';

            // Mostrar confirmación con SweetAlert2
            Swal.fire({
                title: '¿Está seguro?',
                text: mensajeConfirmacion,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#f39c12',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sí, finalizar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                // Mostrar loading
                $('#btnFinalizarAsistencias').html('<i class="fas fa-spinner fa-spin mr-1"></i> Finalizando...');
                $('#btnFinalizarAsistencias').prop('disabled', true);

                $.ajax({
                    url: '{{ route("asistencias.finalizar-masivo") }}',
                    type: 'POST',
                    data: {
                        turno_id: turnoId,
                        fecha: fecha,
                        tipo_finalizacion: tipoFinalizacion,
                        asistencias_seleccionadas: asistenciasSeleccionadas,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Éxito!',
                                text: response.message,
                                confirmButtonText: 'Aceptar',
                                confirmButtonColor: '#28a745'
                            }).then(() => {
                                // Recargar la tabla de asistencias
                                table.ajax.reload();
                                // Cerrar modal
                                $('#finalizarAsistenciasModal').modal('hide');
                                // Limpiar formulario
                                $('#turnoSelect').val('');
                                $('#fechaSelect').val('{{ date('Y-m-d') }}');
                                $('#empleadosSinSalida').hide();
                                $('#sinEmpleadosPendientes').hide();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message,
                                confirmButtonText: 'Aceptar',
                                confirmButtonColor: '#dc3545'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error al finalizar asistencias:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al finalizar asistencias. Por favor, intente nuevamente.',
                            confirmButtonText: 'Aceptar',
                            confirmButtonColor: '#dc3545'
                        });
                    },
                    complete: function() {
                        // Restaurar botón
                        $('#btnFinalizarAsistencias').html('<i class="fas fa-check mr-1"></i> Finalizar Asistencias');
                        $('#btnFinalizarAsistencias').prop('disabled', false);
                    }
                });
            });
        });

        // Funcionalidad para "Seleccionar todos"
        $(document).on('change', '#seleccionarTodos', function() {
            $('.empleado-checkbox').prop('checked', $(this).is(':checked'));
        });

        // Funcionalidad para checkboxes individuales
        $(document).on('change', '.empleado-checkbox', function() {
            var totalCheckboxes = $('.empleado-checkbox').length;
            var checkedCheckboxes = $('.empleado-checkbox:checked').length;
            $('#seleccionarTodos').prop('checked', totalCheckboxes === checkedCheckboxes);
        });

        // Limpiar modal al cerrar
        $('#finalizarAsistenciasModal').on('hidden.bs.modal', function() {
            $('#turnoSelect').val('');
            $('#fechaSelect').val('{{ date('Y-m-d') }}');
            $('#todosEmpleados').prop('checked', true);
            $('#empleadosSinSalida').hide();
            $('#sinEmpleadosPendientes').hide();
            $('#btnFinalizarAsistencias').prop('disabled', true);
            $('#columnaSeleccion').hide();
        });

        // Filtrar cuando se hace clic en el botón de búsqueda
        $('#filterButton').on('click', function() {
            const selectedDate = $('#searchDate').val();
            if (!selectedDate) {
                Swal.fire({
                    title: 'No se puede buscar sin fecha',
                    text: 'Por favor, seleccione una fecha',
                    icon: 'warning',
                    timer: 3000,
                    showConfirmButton: true
                });
                return;
            }

            // Extraer solo la fecha de la columna
            $.fn.dataTable.ext.search.push(
                function(settings, data, dataIndex) {
                    if (selectedDate === '') {
                        return true;
                    }

                    // Obtener solo la fecha de la columna (índice 4 - Fecha y Hora de Entrada)
                    var fechaHora = data[4];
                    var soloFecha = fechaHora.split(' ')[0]; // Separar por espacio y tomar la fecha

                    return soloFecha === selectedDate;
                }
            );

            table.ajax.reload();

        });
    });
</script>
@stop