@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 bg-primary text-white">
            <h5 class="card-title"> <i class="fas fa-calendar-alt"></i> 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-2">
                    <button id="filterButton" class="btn btn-primary mr-2" style="margin-top: 2.3rem;">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                    <button id="clearFilterButton" class="btn btn-secondary" style="margin-top: 2.3rem;">
                        <i class="fas fa-times"></i> Limpiar
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered" id="asistencias-table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>DNI</th>
                            <th>Colaborador</th>
                            <th>Turno</th>
                            <th>F:H de Entrada</th>
                            <th>F:H de Salida</th>
                            <th>Fecha Laboral</th>
                            <th>Estado</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_tipo">
                                            <option value="">-- Seleccione un turno --</option>
                                            <option value="dia">TURNO DÍA</option>
                                            <option value="noche">TURNO NOCHE</option>
                                        </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: 'fecha_laboral', name: 'fecha_laboral'},
                {data: 'estado', name: 'estado'},
                {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 turnoTipo = $('#turnoSelect').val();
            var fecha = $('#fechaSelect').val();

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

            if (!turnoTipo || !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_tipo: turnoTipo,
                    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 turnoTipo = $('#turnoSelect').val();
            var fecha = $('#fechaSelect').val();
            var tipoFinalizacion = $('input[name="tipoFinalizacion"]:checked').val();
            var asistenciasSeleccionadas = [];

            if (!turnoTipo) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Debe seleccionar un tipo de 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_tipo: turnoTipo,
                        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);
        });

        // Funcionalidad para marcar como ausente
        $(document).on('click', '.btn-ausente', function() {
            var asistenciaId = $(this).data('asistencia-id');
            console.log('Marcar como ausente:');
            console.log(asistenciaId);

            Swal.fire({
                title: '¿Marcar como ausente?',
                text: "¿Está seguro de marcar esta asistencia como ausente?",
                icon: 'warning',
                input: 'text',
                inputLabel: 'Observación',
                inputPlaceholder: 'Ingrese una observación',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, marcar como ausente',
                cancelButtonText: 'Cancelar',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Debe ingresar una observación'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route("asistencias.marcar-como-ausente") }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            asistencia_id: asistenciaId,
                            observacion: result.value
                        },
                        success: function(response) {
                            if(response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Éxito',
                                    text: response.message,
                                    timer: 1500
                                });
                                table.ajax.reload();
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Ocurrió un error al procesar la solicitud' || xhr.responseJSON.message
                            });
                        }
                    });
                }
            });
        });

        // 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();
        });

        // Limpiar filtro
        $('#clearFilterButton').on('click', function() {
            $('#searchDate').val('');
            table.ajax.reload();
        });

        //filter button en proceso


    });
</script>
@stop