@extends('acceso.app')
@section('contenido')
    <section>
        <div class="page-header min-vh-100">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
                        <div class="card card-plain">
                            <div class="card-header pb-0 text-center">
                                <h1>{{ env('APP_NAME') }}</h1>
                                <h2 class="font-weight-bolder">CONTROL DE ASISTENCIA</h2>
                                <p class="mb-0">Registro de Entrada y Salida</p>
                            </div>
                            <div class="card-body">
                                <div class="text-center mb-4">
                                    <h3 id="reloj" class="font-weight-bold"></h3>
                                    <p id="fecha" class="text-sm text-secondary"></p>
                                </div>
                                <form id="asistenciaForm" method="POST">
                                    @csrf
                                    <div class="mb-3">
                                        <input type="tel" class="form-control form-control-lg" id="codigo_empleado"
                                            name="codigo_empleado" placeholder="DNI / C.E DE COLABORADOR" required
                                            inputmode="numeric" pattern="[0-9]*" maxlength="20" minlength="20">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 col-lg-12">
                                            <button type="button" class="btn btn-success btn-lg w-100" id="btn-entrada"> <i
                                                    class="fas fa-sign-in-alt"></i>
                                                Entrada</button>
                                        </div>
                                        <div class="col-md-6 col-lg-12">
                                            <button type="button" class="btn btn-danger btn-lg w-100" id="btn-salida"> <i
                                                    class="fas fa-sign-out-alt"></i> Salida</button>
                                        </div>
                                        <div class="col-md-6 col-lg-12">
                                            <button type="button" class="btn btn-warning btn-lg w-100" id="btn-recargar"> <i
                                                    class="fas fa-sync"></i> Recargar</button>
                                        </div>
                                    </div>
                                    <input type="hidden" id="latitud" name="latitud">
                                    <input type="hidden" id="longitud" name="longitud">
                                    <input type="hidden" id="foto_data" name="foto_data">
                                </form>
                                <div id="mensaje" class="alert mt-3" style="display:none"></div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
                        <div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center overflow-hidden"
                            style="background-image: url('{{ asset('argon/img/56267.jpg') }}'); background-size: cover;">
                            <span class="mask bg-gradient-primary opacity-6"></span>
                            <h4 class="mt-5 text-white font-weight-bolder position-relative">"GRUPO TUÑOQUE
                                AVICOLAS"</h4>
                            <p class="text-white position-relative">El éxito detrás de cada logro nunca es tan
                                visible como la acción misma. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal para la cámara -->
    <div class="modal fade" id="cameraModal" tabindex="-1" aria-labelledby="cameraModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cameraModalLabel">Captura de Foto - Verificación de Identidad</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Por favor, posicione su rostro en el centro de la pantalla
                    </div>
                    <div class="camera-container">
                        <video id="video" width="100%" height="400" autoplay playsinline></video>
                        <canvas id="canvas" style="display: none;"></canvas>
                        <img id="photo" style="display: none; max-width: 100%; height: 400px; object-fit: cover;">
                    </div>
                    <div class="mt-3">
                        <button type="button" class="btn btn-primary" id="captureBtn">
                            <i class="fas fa-camera"></i> Capturar Foto
                        </button>
                        <button type="button" class="btn btn-secondary" id="retakeBtn" style="display: none;">
                            <i class="fas fa-redo"></i> Volver a Tomar
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="confirmPhotoBtn" style="display: none;">
                        <i class="fas fa-check"></i> Confirmar y Registrar
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <style>
        .btn-lg.w-100 {
            white-space: nowrap;
        }

        .camera-container {
            position: relative;
            display: inline-block;
        }

        #video {
            border: 2px solid #ddd;
            border-radius: 8px;
        }

        #photo {
            border: 2px solid #28a745;
            border-radius: 8px;
        }
    </style>
@endpush
@push('js')
    <script>
        let stream = null;
        let currentTipoRegistro = null;
        let photoTaken = false;
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        console.log('token',csrfToken);





        function actualizarReloj() {
            const ahora = new Date();
            $('#reloj').html(ahora.toLocaleTimeString());
            $('#fecha').html(ahora.toLocaleDateString());
        }

        // Función para iniciar la cámara
        async function startCamera() {
            try {
                stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        facingMode: 'user',
                        width: {
                            ideal: 640
                        },
                        height: {
                            ideal: 480
                        }
                    }
                });
                const video = document.getElementById('video');
                video.srcObject = stream;
                return true;
            } catch (error) {
                console.error('Error al acceder a la cámara:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudo acceder a la cámara. Por favor, permita el acceso a la cámara y recargue la página.',
                    icon: 'error'
                });
                return false;
            }
        }

        // Función para detener la cámara
        function stopCamera() {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
            }
        }

        // Función para capturar foto
        function capturePhoto() {
            const video = document.getElementById('video');
            const canvas = document.getElementById('canvas');
            const photo = document.getElementById('photo');

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);

            const photoData = canvas.toDataURL('image/jpeg', 0.8);
            photo.src = photoData;

            // Ocultar video y mostrar foto
            video.style.display = 'none';
            photo.style.display = 'block';

            // Mostrar botones de confirmación
            $('#captureBtn').hide();
            $('#retakeBtn').show();
            $('#confirmPhotoBtn').show();

            photoTaken = true;
        }

        // Función para volver a tomar foto
        function retakePhoto() {
            const video = document.getElementById('video');
            const photo = document.getElementById('photo');

            video.style.display = 'block';
            photo.style.display = 'none';

            $('#captureBtn').show();
            $('#retakeBtn').hide();
            $('#confirmPhotoBtn').hide();

            photoTaken = false;
        }

        // Función para registrar asistencia
        function registrarAsistencia(tipoRegistro) {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const codigoEmpleado = $('#codigo_empleado').val();

            if (codigoEmpleado == '') {
                Swal.fire({
                    title: 'Error',
                    text: 'Ingrese el DNI / C.E de colaborador',
                    icon: 'error'
                }).then(() => {
                    $('#codigo_empleado').val('');
                    $('#codigo_empleado').focus();
                });
                return;
            }

            // Obtener la foto capturada
            const canvas = document.getElementById('canvas');
            const photoData = canvas.toDataURL('image/jpeg', 0.8);

            // Crear FormData para enviar la imagen
            const formData = new FormData();
            formData.append('codigo_empleado', codigoEmpleado);
            formData.append('latitud', $('#latitud').val());
            formData.append('longitud', $('#longitud').val());
            formData.append('tipo_registro', tipoRegistro);
            formData.append('foto', photoData);
            formData.append('_token', csrfToken);

            // Mostrar loading
            Swal.fire({
                title: 'Registrando asistencia...',
                text: 'Por favor espere',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ route('asistencias.asistencia-personal') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    Swal.close();
                    if (response.success) {
                        Swal.fire({
                            title: '¡Confirmación!',
                            html: response.message,
                            icon: 'success'
                        }).then(() => {
                            $('#codigo_empleado').val('');
                            $('#codigo_empleado').focus();
                            $('#cameraModal').modal('hide');
                        });
                    } else {
                        Swal.fire({
                            title: 'Información',
                            html: response.message,
                            icon: 'warning'
                        }).then(() => {
                            $('#codigo_empleado').focus();
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.close();

                    if (xhr.status === 419) {
                        Swal.fire({
                            title: 'Sesión expirada',
                            text: 'La sesión ha expirado. Recargando la página...',
                            icon: 'warning',
                            timer: 3000,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload(); // Recarga la página para regenerar sesión y token
                        });
                        return;
                    }

                    let errorMessage = 'Ocurrió un error al registrar la asistencia.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: 'Error',
                        html: 'Error al registrar la asistencia: <br>' + errorMessage,
                        icon: 'error'
                    });
                }

            });
        }



        //Eventos del formulario jquery
        $(document).ready(function() {
            $('#codigo_empleado').focus();
            actualizarReloj();
            setInterval(actualizarReloj, 1000);

            // Evento para abrir modal de cámara al hacer entrada
            $('#btn-entrada').click(function() {
                currentTipoRegistro = 'entrada';

                if ($('#codigo_empleado').val() == '') {
                    Swal.fire({
                        title: 'Error',
                        text: 'Ingrese el DNI / C.E de colaborador',
                        icon: 'error'
                    });
                } else {
                    $('#cameraModal').modal('show');
                    $('#codigo_empleado').focus();
                }

            });

            // Evento para abrir modal de cámara al hacer salida
            $('#btn-salida').click(function() {
                currentTipoRegistro = 'salida';


                if ($('#codigo_empleado').val() == '') {

                    Swal.fire({
                        title: 'Error',
                        text: 'Ingrese el DNI / C.E de colaborador',
                        icon: 'error'
                    });
                } else {
                    $('#cameraModal').modal('show');
                    $('#codigo_empleado').focus();
                }
            });

            // Evento para recargar la página
            $('#btn-recargar').click(function() {
                location.reload();
            });

            // Eventos del modal de cámara
            $('#cameraModal').on('show.bs.modal', async function() {
                const success = await startCamera();
                if (!success) {
                    $('#cameraModal').modal('hide');
                }
            });

            $('#cameraModal').on('hidden.bs.modal', function() {
                stopCamera();
                retakePhoto();
            });

            // Botón capturar foto
            $('#captureBtn').click(function() {
                capturePhoto();
            });

            // Botón volver a tomar
            $('#retakeBtn').click(function() {
                retakePhoto();
            });

            // Botón confirmar y registrar
            $('#confirmPhotoBtn').click(function() {
                if (photoTaken && currentTipoRegistro) {
                    registrarAsistencia(currentTipoRegistro);
                }
            });
        });

        // Obtener la geolocalización del usuario
        if ("geolocation" in navigator) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById('latitud').value = position.coords.latitude;
                document.getElementById('longitud').value = position.coords.longitude;
            });
        }
    </script>
@endpush