@extends('fragments.fullTemplate')
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
@endphp
@section('contenido')
    <style>
        div.normas_estandar {
            background: #f2f2f2;
        }
        .table-responsive{height:400px;overflow:scroll;} 
        thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}
    </style>
    <div class="ui big breadcrumb">
        <div class="section">SEATSA Internacional</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Correlación normas</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Correlación incisos</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">
                    <strong>{{ session()->get('success') }}</strong>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    <div class="sticky col-lg-12 normas_estandar">
        <br>
        <h4><strong>NORMA:</strong> {{$datos_norma_estandar->norma}}</h4>
        <h4><strong>ESTÁNDAR INTERNACIONAL:</strong> {{$estandar}}</h4>
        <br>
    </div>
    
    <form action="{{route('update_norma_inciso_x_estandar')}}" method="post" role="form" enctype="multipart/form-data">       
        {{csrf_field()}}        
        <div class="sx-autorender">
            <div class="sx-scroll-x table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr class="text-left sticky">
                            <th style="width: 150px;">{{$datos_norma_estandar->norma}}<br>CLAUSE</th>
                            <th style="width: 300px;">TEST</th>
                            @foreach ($datos_estandar as $dato)
                                <th style="width: 200px;">{{$dato->estandar}}<br>CLAUSE</th>
                                <th  style="width: 500px;">{{$dato->estandar}}<br>DESCRIPTION</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        
                        @foreach ($datos_incisos_arr as $dato_inciso)
                            <tr>
                                <td>{{$dato_inciso['inciso_completo']}}</td>
                                <td>
                                    @if ($dato_inciso['inciso'] != null)
                                        {{--traductor_espanol_ingles($dato_inciso['inciso'],$translate)--}}
                                        {{$dato_inciso['inciso']}}
                                    @endif
                                </td>
                                
                                @foreach ($datos_estandar as $dato)
                                    @php
                                        $datos_inciso_estandar = datos_inciso_estandar($dato->id_estandar_internacional,$dato_inciso['id_inciso']);
                                       
                                    @endphp
                                    @foreach ($datos_inciso_estandar as $item)
                                   
                                        <td>
                                            <input type="text"  class="form-control" value="{{$item->inciso_estandar_internacional}}" id="{{$item->id_norma_inciso_x_estandar_internacional}}_norma_inciso_x_estandar" name="{{$item->id_norma_inciso_x_estandar_internacional}}_norma_inciso_x_estandar">
                                            <div class="ui tiny icon buttons">
                                                <a class="btn btn-sm btn-success mt-1 text-white add_var" data-id_norma_x_estandar="{{$item->id_norma_inciso_x_estandar_internacional}}"><i class="plus icon"></i> Variable</a>
                                            </div>
                                        </td> 
                                       
                                        <td>
                                                @foreach ($item->variables_estandar as $var)
                                                    <div class="row">
                                                        <div class="col-md-10">
                                                            <textarea class="form-control mb-2" name="{{$var->id_nor_inc_x_est_int_variable}}_descripcion" id="{{$var->id_nor_inc_x_est_int_variable}}_descripcion" cols="10" rows="5">{{$var->descripcion}}</textarea>
                                                            
                                                        </div>
                                                        <div class="col-md-2">
                                                            <a class="btn btn-sm btn-danger mt-1 text-white del_var" data-id_variable="{{$var->id_nor_inc_x_est_int_variable}}"><i class="trash icon"></i></a>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            {{--<textarea class="form-control mb-2" name="{{$item->id_norma_inciso_x_estandar_internacional}}_description_est_int" id="{{$item->id_norma_inciso_x_estandar_internacional}}_description_est_int" cols="10" rows="5">{{$item->descripcion_est_int}}</textarea>--}}
                                            <div id="{{$item->id_norma_inciso_x_estandar_internacional}}_add_var_area"></div>
                                        </td> 
                                        
                                    @endforeach
                                @endforeach
                            </tr> 
                            
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-lg-12">
                <button type="submit" class="ui button fluid blue"><i class="save icon"></i> Guardar</button>
            </div>
        </div>
    </form>
    <div class="ui divider"></div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <a href="{{ route('correlacion_normas_internacional.index') }}" class="ui button gray">Atrás</a>
        </div>
    </div>
    @php
        use App\Normas_Incisos_x_Estandar_Internacional;

        function datos_inciso_estandar($id_estandar_internacional,$id_inciso){
            $datos = Normas_Incisos_x_Estandar_Internacional::select(
                'id_norma_inciso_x_estandar_internacional',
                'inciso_estandar_internacional',
                'descripcion_est_int'

            )
            ->with('variables_estandar')
            ->where('id_estandar_internacional',$id_estandar_internacional)
            ->where('id_inciso',$id_inciso)
            ->get();

            return $datos;
        }


        function traductor_espanol_ingles($texto,$translate){

            $result = $translate->translate($texto, [
                'target' => 'en'
            ]);

            $traduccion = $result['text'];

            return $traduccion;
        }
    @endphp
    <script>
        $(document).ready(function () {
            $(document).on('click','.del_var',function(){
                //alert("Borrando");
                id_variable = $(this).data("id_variable");
                $(this).remove();
                //$(this).closest("tr").find("#descripcion").remove();
                $.ajax({
                    url:"{{route('correlacion.del_variable')}}",
                    method:"POST",
                    data:{'id_variable': id_variable, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        $("#"+id_variable+"_descripcion").remove();
                    }
                });

            });
            $(document).on('click','.add_var',function(){
                id_norma_inciso_x_estandar_internacional = $(this).data("id_norma_x_estandar");

                $.ajax({
                    url:"{{route('correlacion.add_variable')}}",
                    method:"POST",
                    data:{'id_norma_inciso_x_estandar_internacional': id_norma_inciso_x_estandar_internacional, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        
                        result = JSON.parse(response); 
                        console.log(result);
                        
                        resultData = result.data;
                        html_var = `<div class="row">
                            <div class="col-md-10">
                                <textarea class="form-control mb-2" name="${result.id}_descripcion" id="${result.id}_descripcion" cols="10" rows="5"></textarea>
                                
                            </div>
                            <div class="col-md-2">
                                <a class="btn btn-sm btn-danger mt-1 text-white del_var" data-id_variable="${result.id}"><i class="trash icon"></i></a>
                            </div>
                        </div>`;
                        $("#"+id_norma_inciso_x_estandar_internacional+"_add_var_area").append(html_var);
                        
                    }
                });

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