@extends('fragments.fullTemplate')
@section('titulo')
Equipo de pruebas
@endsection
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
@endphp
@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Administración</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Calibración</div>
    </div>

    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('warning'))
                <div class="alert alert-warning text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('warning') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger alert-dismissible" role="alert">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    @include('Requisicion_compra.Notificacion.notificacion_requisicion_modal')
    <form action="{{url('calibracion/excel')}}" method="post" id="create">
        {{csrf_field()}}
    <!-- Cambio nombre boton -->
    <button class="btn btn-success btn-block" type="submit">
        <i class="icon file excel"></i> Exportar lista de equipos 20XX
    </button>
    </form>
    <div class="ui divider"></div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <p class="text-center" >{{ $equipos_de_pruebas->count() }}</strong> resultados en esta página</p>
            <div class="dt-responsive table-responsive">
                <table id="lang-dt" class="ui celled table unstackable structured">
                    <thead>
                        <tr>
                            <th>Clave</th>
                            <th>Descripción</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                            <th>Calibración</th>
                            <th class="collapsing">Estatus</th>
                            <th class="collapsing">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($equipos_de_pruebas->count())
                        
                        @foreach ($equipos_de_pruebas as $dato_equipo)                        
                        
                            <tr>                                
                                
                            <td>{{$dato_equipo->clave}}</td>
                            <td>{{$dato_equipo->equipo}}</td>
                            <td>{{$dato_equipo->marca}}</td>
                            <td>{{$dato_equipo->modelo}}</td>
                            <td>{{$dato_equipo->calibracion}}</td>
                            <td>
                                @if($dato_equipo->estatus == "verde")
                                    <span class="btn btn-success">Activo</span>
                                @elseif($dato_equipo->estatus == "rojo")
                                    <span class="btn btn-danger">Inactivo</span>
                                @endif
                            </td>
                                <td >
                                    <div class="ui tiny icon buttons">
                                    @if ($permisos->actualizar == 1 || $permisos->gerente == 1)
                                        <!-- Editar -->   
                                                                       
                                        <a class="ui button green edit_equipo_pruebas" 
                                        title="Modifica" 
                                        id="{{$dato_equipo->id_equipo}}"
                                        certificado="{{$dato_equipo->certificado}}"
                                        data-id_equipo="{{$dato_equipo->id_equipo}}" 
                                        data-certificado="{{$dato_equipo->certificado}}"
                                        >
                                            <i class="pencil alternate icon"></i>
                                        </a>
                                        
                                    @endif
                                    @if($permisos->verqr == 1 || $permisos->gerente == 1)
                                    <a class="ui button orange edit_modify_empresa_modal mini"
                                        title="Imagenes"
                                        id="img"
                                        data-id_equipo="{{$dato_equipo->id_equipo}}">
                                        <i class="file image icon"></i>
                                    </a>
                                        
                                    <form action="{{url('calibracion/pdf/'.$dato_equipo->id_equipo)}}" method="post" target="_blank">
                                        {{csrf_field()}}
                                        <button class="ui button red " type="submit" >
                                            <i class="file pdf icon"></i>
                                        </button>
                                    </form>
                                    @endif
                                    <div class="ui divider"></div>
                                        
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        @else
                        <tr class="text-center">
                            <td colspan="8">No se encontraron registros</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <style type="text/css">
        .stepwizard-step p {
            margin-top: 10px;
        }
    
        .stepwizard-row {
            display: table-row;
        }
    
        .stepwizard {
            display: table;
            width: 100%;
            position: relative;
        }
    
        /*.stepwizard-step button[disabled] {
            opacity: 1 !important;
            filter: alpha(opacity=100) !important;
        }**/
    
        .stepwizard-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
            z-order: 0;
    
        }
    
        .stepwizard-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }
    
        .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
        }
    </style> 
    @include('Equipo_pruebas_calibracion.modify_modal')
    @include('Equipo_pruebas_calibracion.img')
    @include('Equipo_pruebas_calibracion.delete_img')
    <script>
        var resultData = {};
        $(document).ready(function(){
            
            $('a.edit_equipo_pruebas').on('click', function(e){
                e.preventDefault(); // Evita que el enlace realice la acción predeterminada

                idEquipo = $(this).attr('id');
                id_equipo = $('#'+idEquipo).data('id_equipo');
                $('#id_equipo_edit').val(id_equipo);

                var certificado = $(this).data('certificado');                
                
                $.ajax({
                    url:"show_equipo_pruebas",
                    method:"POST",
                    data:{'id_equipo': id_equipo, 'certificado': certificado, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData = result.data;
                        console.log(resultData);

                        var certificado = resultData['certificado'];                        

                        actualizarHTML(resultData);
                        
                        readButtons("modify_equipo_pruebas_wizzard");
                        $('#modify_equipo_pruebas_modal').modal('show');
                    },
                    error: function(xhr, status, error) {
                        console.error(error); // Muestra errores en la consola                        
                    }
                });
        
            });

            // $('a.edit_equipo_pruebas').on('click', function(e){
            //     e.preventDefault(); // Evita que el enlace realice la acción predeterminada
                
            //     //var idEquipo = $(this).data('id_equipo');
            //     var idEquipo = $(this).attr('id');
            //     var id_equipo = $('#'+idEquipo).data('id_equipo');

            //     var certificado = $(this).data('certificado');
                
            //     $.ajax({
            //         url: "show_equipo_pruebas",
            //         method: "POST",
            //         data: {
            //             'id_equipo': id_equipo,
            //             'certificado': certificado,
            //             '_token': $('input[name="_token"]').val()
            //         },
                    
            //         success: function(response){
            //             var result = JSON.parse(response); 
            //             var resultData = result.data;
            //             console.log(resultData);
                        
            //              // Llama a la función de actualización del HTML
            //             actualizarHTML(resultData);
                        
            //             readButtons("modify_equipo_pruebas_wizzard");
            //             $('#modify_equipo_pruebas_modal').modal('show');
            //         },
            //         error: function(xhr, status, error) {
            //             console.error(error); // Muestra errores en la consola                        
            //         }
            //     });
            // });

            // Define la función para actualizar el HTML
            function actualizarHTML(resultData) {
                var html = "";
                var id_equipo = resultData['id_equipo'];
                var certificado = resultData['certificado'];
                // var baseUrl = "https://sistema.seatsa.com.mx/storage/equipo_certificado_archivos/";
                // var urlcompleta = baseUrl + certificado;
                // console.log("test");
                // console.log(resultData);
                //var qrCodeImage = '<img src="data:image/png;base64, {!! base64_encode(QrCode::format("png")->size(170)->generate("https://sistema.seatsa.com.mx/storage/equipo_certificado_archivos/' + certificado + '")) !!}">';

                if (certificado == null) {
                    html += "<div class='row mb-3 mt-3'>" +
                        "<label for='Informe' class='col-sm-2 col-form-label'>Certificado</label>" +
                        "<div class='col-sm-10'>" +
                        "<div class='custom-file'>" +
                        "<input type='file' id='certificado' name='certificado'>" +
                        "<label class='custom-file-label' for='certificado'>Archivo</label>" +
                        "</div>" +
                        "</div>" +
                        "</div>";
                    } else {
                                       
                    
                    html += "<div class='row mb-3 mt-3'>" +
                        "<div class='col-lg-12'>" +
                        "<table class='ui celled table unstackable'>" +
                        "<thead>" +
                        "<tr>" +
                        "<th>Archivo</th>" +
                        "<th>Nombre archivo</th>" +
                        "<th class='collapsing'>Acciones</th>" +
                        "</tr>" +
                        "</thead>" +
                        "<tbody>" +
                        "<tr>" +
                        "<td><a target='_blank' href='https://sistema.seatsa.com.mx/storage/equipo_certificado_archivos/" + certificado + "' id='informe_resultados_extra_table' class='ui button blue fluid'>Ver Archivo</a></td>" +
                        "<td>" + certificado + "</td>" +
                        "<td class='text-center'>" +
                        "<div class='ui tiny icon buttons'>" +
                        "<a title='Eliminar' class='ui button red eliminar-certificado' data-id_equipo='" + id_equipo + "'><i class='trash alternate icon'></i></a>" +
                        "</div>" +
                        "</td>" +
                        "</tr>" +
                        "</tbody>" +
                        "</table>" +
                        "</div>" +
                        "</div>";

                    var qr = resultData['qrimg'];
                    html += `<div class="ui divider"></div> 
                        <div class="form-row">
                            <div class="col-sm-12">
                            <a data-toggle="modal" data-target="#exampleModalCenter1">
                                <img src="data:image/png;base64, ${ qr }">
                            </a>
                            </div>
                        </div>`;

                   
                }

                $("#cotenido-cer").html(html);
            }

            $(document).on('click', '.eliminar-certificado', function(e) {
                e.preventDefault();

                var certificadoAEliminar = $(this).data('id_equipo');

                // Envía una solicitud AJAX para eliminar la imagen del storage y actualizar la base de datos
                $.ajax({
                    url: "eliminar_certificado",
                    method: "POST",
                    data: {
                        'id_equipo': certificadoAEliminar,
                        '_token': $('input[name="_token"]').val()
                    },
                    success: function(response) {
                        // Maneja la respuesta después de eliminar y actualizar
                        // Puedes recargar la página o actualizar la interfaz de usuario según tus necesidades
                    },
                    error: function(xhr, status, error) {
                        console.error(error); // Muestra errores en la consola
                    }
                });
            });


            $('a#img').click(function(){
                id_equipo= $(this).data('id_equipo');
                $.ajax({
                    url:"{{ url('calibracion/img/show_img') }}",
                    method:"POST",
                    data:{'id_equipo': id_equipo, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        result = JSON.parse(response); 
                        resultData = result.data;
                        $('#modalImg').modal('show');
                    }
                });
            });
        });


        $('#modalImg').on('show.bs.modal', function () {
            $("#modal-form-calibracion-img :input").each(function(){
               input = $(this).attr('id');
               console.log(input);
               if(input in resultData){
                   $('#modal-form-calibracion-img #'+input).val(resultData[input]);
               }
           });
           html = "";
           for(const imgs of resultData['imgs'] ){
                html+="<tr>"+
                    "<td>"+
                        "<div class=''>"+
                            "<img class='img-thumbnail' src='{{asset('storage/equipo_imgs')}}/"+imgs['nombre']+"'>"+
                        "</div>"+
                    "</td>"+
                    "<td>"+imgs['name_file']+"</td>"+
                    "<td>"+
                        '<div class="ui tiny icon buttons">'+                                 
                            '<a class="ui button red edit_modify_empresa_modal mini"'+
                                'title="Eliminar" '+
                                'id="delete_img"'+
                                'data-id="'+(imgs['id_img']?imgs['id_img']:"")+'">'+
                                '<i class="trash icon"></i>'+
                            '</a>'+
                        '</div>'+
                    "</td>"+
                "</tr>";
           }
           $("tbody#table-img").html(html);

            $('a#delete_img').click(function(){
                id_img= $(this).data('id');
                $('#modal-form-delete-img #id_img').val(id_img);
                $('#modalDeleteImagen').modal('show');
                
            });

       });

        readButtons = function(type_accion){
            let navListItems = $('div#'+type_accion+' div.setup-panel div a'),
            allWells = $('div#'+type_accion+' .setup-content'),
            allNextBtn = $('div#'+type_accion+' .nextBtn');
            allBackBtn = $('div#'+type_accion+' .backBtn');

            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                    $item = $(this);

                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-primary').addClass('btn-default');
                    $item.addClass('btn-primary').removeClass('disabled');
                    allWells.hide();
                    $target.show();
                    //$target.find('input:eq(0)').focus();
                }
            });

            allNextBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            allBackBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-primary').trigger('click'); 
        } 
        
        $('#modify_equipo_pruebas_modal').on('show.bs.modal', function () {
            agregarVar();
            
        });

        agregarVar = function(){
            $("#modify_equipo_pruebas_modal :input").each(function(){
                
                input = $(this).attr('id'); // This is the jquery object of the input, do what you will
                
                if(input in resultData){
                    if(input == 'calibracion'){
                        
                        $('#modify_equipo_pruebas_modal #'+input).selectpicker('val', resultData[input]);
                    }else{
                        console.log(resultData[input]);
                        $('#modify_equipo_pruebas_modal #'+input).val(resultData[input]);
                        
                    }

                    
                }
            });
        }
    </script>

    <script>
        $('form#create #calibracion').change(function(){
            var opcion = $(this).val();
            if(opcion == "Si"){
                $("#calibracion_si").load("{{ url('calibracion/fecha') }}");
            }else{
                $("#calibracion_si").html('');
            }
        });

        $('div#edit #calibracion').change(function(){
            var opcion = $(this).val();
            if(opcion == "Si"){
                $("#edit_calibracion_si").load("{{ url('calibracion/fecha') }}");
            }else{
                $("#edit_calibracion_si").html('');
            }
        });
    </script>
@endsection