@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<style>
    .input-material{
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    .mensaje-importante{
        width: 100%;
        margin-top: .25rem;
        color: #f86c6b;
    }
</style>
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                   <h3 class="texto-obscuro">Solicitud de registro de equipo</h3>
                   <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('registro_equipos') }}">Registro de Equipos</a><span class="breadcrumb-item active">Creación de registro de equipo</span></nav>
               </div>
           </div>
           <div class="row">
                {!! Form::open(['route' => 'registro_equipos.store','class' => 'formulario-principal col-12','files' => true,'id' => 'form']) !!}
                    <div class="empty-space-30"></div>
                    @include('registro_equipos.fields')
                    <div class="empty-space-30"></div>
                {!! Form::close() !!}
           </div>
           <div class="empty-space-50"></div>
           <div class="row botonera-inferior">
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('registro_equipos') }}" class="btn btn-secundario text-white width-250"><span><-</span> Cancelar</a>
                    <button type="button" id="guardar-formulario" class="btn btn-principal width-250">Guardar equipo <span>-></span></button>
                </div>
            </div>
           <div class="empty-space-50"></div>
       </div>
    </div>
@endsection

@section('modales')
<div class="modal fade" id="modalSave" tabindex="-1" role="dialog" aria-labelledby="modalSaveLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEliminarLabel">Guardar registro</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h3>¡Advertencia!</h3>
                <p>Al aceptar el registro no podra ser editable después <br /> Revisa que todos los datos sean correctos antes de continuar.</p>
            </div>
            <div class="empty-space-50"></div>
            <div class="col-12 p-0 m-0 text-right botonera-formulario">
                <a href="{{ url('registro_equipos') }}" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar <span><-</span></a>
                <button type="submit" id="guardar-cambios" class="btn btn-principal ">Aceptar <span>-></span></button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="{{ asset('js/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/validaciones/validaciones.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" integrity="sha512-rmZcZsyhe0/MAjquhTgiUcb4d9knaFc7b5xAfju483gbEXTkeJRUMIPk6s3ySZMYUHEcjKbjLjyddGWMrNEvZg==" crossorigin="anonymous"></script>
    <script>
        $('.js-example-basic-single').select2({});

        $("#btn-imagen-destacada").click(function(){
            $("#imagen_destacada").click();
        });

        $("#guardar-cambios").click(function(){
            $("#modalSave").modal('hide');
            aplicar_validaciones();
        });

        $("#guardar-formulario").click(function(){
            $("#modalSave").modal();
            $("#form-eliminar").attr('action',url);
        });

        $("input[name=check_visualizacion]").click(function(){
            var valor = $(this).val();
            var select = '';
            if(valor == "todos"){
                $("#lista-usuarios").hide();
                $("#lista-grupo-usuarios").hide();
                return true;
            }
            else if(valor == "uno")
            {
                $("#lista-usuarios").show();
                $("#lista-grupo-usuarios").hide();
                select = '#usuarios';

            }
            else if(valor == "grupo")
            {
                $("#lista-usuarios").hide();
                $("#lista-grupo-usuarios").show();
                select = '#grupos_usuarios';
            }
            $('.js-example-basic-single').select2({});
            $(select).select2("open");
        });

        function cargar_nombre(){
            $('.input-material').change(function(){
                var filename = $(this).val().split('\\').pop();
                var idname = $(this).attr('id');
                if($(this).val() == ""|| $(this).val() == null)
                {
                    $("#div_"+idname).remove();
                    return true;
                }
                $('#span-'+idname).html(filename);
                $("#div_"+idname).css('display','block');
            });
        }

        function validar_factura(){
            var letra = /[a-z]/;
            var d = $("#factura").val();
            d = d.toLowerCase();
            var s = d.slice(1,d.lenght);
            var t = (''+s).length;
            console.log(t);
            if(!letra.test(d[0])){
                console.info("No es letra");
                $("#factura").addClass('is-invalid');
                $("#factura_mensaje").text('No puede comenzar con número');
                return true;
            }else if(letra.test(s)){
                console.info("Hay almenos una letra");
                $("#factura").addClass('is-invalid');
                $("#factura_mensaje").text('No puede tener letras despúes de la primera');
                return true;
            }else if(t <= 5){
                console.info("Tiene menos de 6 digitos");
                $("#factura").addClass('is-invalid');
                $("#factura_mensaje").text('No puede tener menos de 6 digitos');
                return true;
            } else{
                console.info("Tiene el formato");
                $("#factura").removeClass('is-invalid');
                $("#factura_mensaje").text('');
                return false;
            }
        }

        function evento_eliminar(){
            $(".btn-close-materiales").click(function(){
                elemento = $(this);
                elemento.parent().remove();
            });
        }

        var validador_pdf = true;
        var texto_pdf = '';

        $('#output_pdf_file').css('background-image','');
        if (window.FileList && window.File && window.FileReader) {
            validador_pdf = false;
            document.getElementById('pdf_file').addEventListener('change', event => {
            // output.css = '';
            $(".span-file").show();
            $('#output_pdf_file').css('background-image','');
            $("#status_pdf_file").text('');
            $("#status_pdf_file").hide();
            const file = event.target.files[0];
            if (!file.type) {
                console.log(file);
                $("#status_pdf_file").text('Error: el archivo '+file.name+' no es compatible con este navegador, intente con un archivo con extensión JPG o PNG.');
                $("#status_pdf_file").show();
                texto_pdf = '.';
                return;
            }
            const reader = new FileReader();
            reader.addEventListener('load', event => {
                $(".span-file").hide();
                $('#output_pdf_file').css('background-image','url("https://cdn-icons-png.flaticon.com/512/4208/4208479.png")');
                validador_pdf = true;
                texto_pdf = '';
            });
            reader.readAsDataURL(file);
            });
        }

        $("#btn-pdf-file").click(function(){
            $("#pdf_file").click();
        });

        var validador_xml = true;
        var texto_xml = '';

        $('#output_xml_file').css('background-image','');
        if (window.FileList && window.File && window.FileReader) {
            validador_xml = false;
            document.getElementById('xml_file').addEventListener('change', event => {
            // output.css = '';
            $(".span-file").show();
            $('#output_xml_file').css('background-image','');
            $("#status_xml_file").text('');
            $("#status_xml_file").hide();
            const file = event.target.files[0];
            if (!file.type) {
                console.log(file);
                $("#status_xml_file").text('Error: el archivo '+file.name+' no es compatible con este navegador, intente con un archivo con extensión JPG o PNG.');
                $("#status_xml_file").show();
                texto_xml = '.';
                return;
            }
            const reader = new FileReader();
            reader.addEventListener('load', event => {
                $(".span-file").hide();
                $('#output_xml_file').css('background-image','url("https://cdn-icons-png.flaticon.com/512/2656/2656443.png")');
                validador_xml = true;
                texto_xml = '';
            });
            reader.readAsDataURL(file);
            });
        }

        $("#btn-xml-file").click(function(){
            $("#xml_file").click();
        });

        $('#fecha').change(function(){
            let fecha = $('#fecha').val();
            var fecha_elegida = moment(fecha);
            var year = moment(fecha).format('YYYY');
            console.log('Validación: '+moment(fecha).format('YYYY'));
            console.log('fecha elegida: '+fecha_elegida);
            const d = new Date(fecha);
            let day = d.getDay();
            console.log('dia '+day);
            if(fecha == null || fecha == ''){
                $("#fecha").addClass('is-invalid');
                $("#fecha_mensaje").text('Debes de colocar una fecha valida');
            }else if(day == 5 || day == 6){
                $("#fecha").addClass('is-invalid');
                $("#fecha_mensaje").text('No puede ser una fecha en fin de semana');
            }else if(year < 2023){
                $("#fecha").addClass('is-invalid');
                $("#fecha_mensaje").text('La fecha elegida no puede ser antes del 2023');
            }else{
                $("#fecha").removeClass('is-invalid');
                $("#fecha_mensaje").text('');
            }
        });

        function validar_fechaDiasHabiles()
        {
            let fecha = $('#fecha').val();
            var fecha_elegida = moment(fecha);
            var year = moment(fecha).format('YYYY');
            console.log('Validación: '+moment(fecha).format('YYYY'));
            console.log('fecha elegida: '+fecha_elegida);
            const d = new Date(fecha);
            let day = d.getDay();
            console.log('dia '+day);
            if(fecha == null || fecha == ''){
                $("#fecha").addClass('is-invalid');
                $("#fecha_mensaje").text('Debes de colocar una fecha valida');
                return true;
            }else if(day == 5 || day == 6){
                $("#fecha").addClass('is-invalid');
                $("#fecha_mensaje").text('No puede ser una fecha en fin de semana');
                return true;
            }else if(year < 2023){
                $("#fecha").addClass('is-invalid');
                $("#fecha_mensaje").text('La fecha elegida no puede ser antes del 2023');
                return true;
            }else{
                $("#fecha").removeClass('is-invalid');
                $("#fecha_mensaje").text('');
                return false;
            }
        }

        function validar_producto(){
            let producto = $('#producto').val();
            console.log(producto+' Producto');
            if(producto == null || producto == 0){
                $("#producto").addClass('is-invalid');
                $("#producto_mensaje").text('Debes de seleccionar un tipo de producto valido');
                $("#producto_mensaje").slideDown();
                return true;
            }else{
                $("#producto").removeClass('is-invalid');
                $("#producto_mensaje").text('');
                return false;
            }
        }

        function aplicar_validaciones()
        {
            var validacion = true;

            if(validar_factura()){
                validacion = false;
            }else{
                validacion = true;
            }

            if (validar_texto('#numero_serie', '#numero_serie_mensaje',3,400)) {
                $("#numero_serie").removeClass('is-invalid');
                $("#numero_serie_mensaje").text('');
            }else{
                $("#numero_serie").addClass('is-invalid');
                $("#numero_serie_mensaje").text('Debes de colocar un número de serie valido');
                validacion = false;
            }

            if(validar_fechaDiasHabiles()){
                validacion = false;
            }else{
                validacion = true;
            }

            if(validar_producto()){
                validacion = false;
            }else{
                validacion = true;
            }

            let valor = $('#producto').val();

            if(valor == 4 || valor == 9){
                if (validar_texto('#modelo', '#modelo_mensaje',3,400)) {
                $("#modelo").removeClass('is-invalid');
                $("#modelo_mensaje").text('');
                }else{
                    $("#modelo").addClass('is-invalid');
                    $("#modelo_mensaje").text('Debes de colocar un modelo valido');
                    validacion = false;
                }
            }else{
                $("#modelo").removeClass('is-invalid');
                $("#modelo_mensaje").text('');
            }

            if(!validador_pdf){
                $("#status_pdf_file").show();
                $("#status_pdf_file").text('Debes de subir un archivo');
            }else{
                $("#status_pdf_file").hide();
            }

            if(!validador_xml){
                $("#status_xml_file").show();
                $("#status_xml_file").text('Debes de subir un archivo');
            }else{
                $("#status_xml_file").hide();
            }

            if (validacion && validador_pdf && validador_xml) {
                $(".formulario-principal").submit();
            }
        }

    </script>
@endpush