@isset($valores)
@php($titulo_pagina="Editar Proyecto Nº ".$valores["id"])
@else
@php( $valores=null)
@php( $modo='new')
@endisset

@if ($modo=='new')
@php( $titulo_pagina='Nuevo Proyecto')
@elseif($modo=='view')
@php( $titulo_pagina="Ver Proyecto Nº ".$valores["id"])
@else
@php( $titulo_pagina="Editar Proyecto Nº ".$valores["id"])
@endif

@extends('layouts.app')

@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ route('evaluacionproveedores.listaproyectos') }}">Evaluación de Proveedores</a></li>
    <li class="breadcrumb-item"><a href="{{ route('evaluacionproveedores.listaproyectos') }}">Proyectos</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ $titulo_pagina}}</li>
  </ol>
</nav>
@stop

@section('comandos')
<nav class="navbar navbar-controls nav-right">
    <div class="form-inline"> 
        @can('edit-calificaciones')
        @if($modo!='view')
        <a href="javascript:$('#formulario').submit()" class="btn btn-primary"><i class="ti ti-save"></i></a></a>&nbsp;
        @else
        <a href="{{route('evaluacionproveedores.editarproyecto',['id'=>$valores['id'] ]) }}" class="btn btn-primary"><i class="ti ti-pencil"></i></a></a>&nbsp;
        @endif
        @endcan
        <a href="javascript:window.print()" class="btn btn-outline-secondary"><i class="ti ti-printer"></i></a>&nbsp;

    </div>
</nav>
@endsection

@section('content')

<div class="p-20 bd" id="contenedor-formulario" style="@if($modo=='edit')background1:#fff8ed;@endif">





<form id="formulario" class="py-3" action="{{route('evaluacionproveedores.guardarproyecto')}}" method="post">
@csrf
@if($modo=='edit')
{{ Form::hidden('id',$valores["id"] ) }}
@endif

<div class="row">
    <div class="form-group col-md-2">
            @include('evaluacionproveedores::form.text',['id'=>'id_licitacion','nombre'=>'ID Licitación','valor'=>(isset($valores["id_licitacion"])?$valores["id_licitacion"]:''),'placeholder'=>'','required'=>'false','lineas'=>1,'clase'=>'form-control'])
    </div>

    <div class="form-group col-md-10">
            @include('evaluacionproveedores::form.textarea',['id'=>'nombre_proyecto','nombre'=>'Nombre de  Proyecto','valor'=>(isset($valores["nombre_proyecto"])?$valores["nombre_proyecto"]:''),'placeholder'=>'','required'=>'false','lineas'=>1,'clase'=>'form-control'])
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
            @include('evaluacionproveedores::form.text',['id'=>'n_aprueba_contrato','nombre'=>'DA Aprueba Contrato','valor'=>(isset($valores["params"]["n_aprueba_contrato"])?$valores["params"]["n_aprueba_contrato"]:''),'placeholder'=>'','required'=>'false','clase'=>'form-control'])
    </div>
    <div class="form-group col-md-2">
            <label for="fecha_aprueba_contrato">Fecha</label>
            <input name="fecha_aprueba_contrato" :value="fecha_aprueba_contratoHidden" type="hidden">
            <datetime-picker id="fecha_aprueba_contrato" v-model="fecha_aprueba_contrato"
                                :first-day-of-week="1" :clearable="false"
                                lang="es" 
                                :format="timeFormat" style="display: initial;" :disabled="readonly">
            </datetime-picker>


          
          
  
    </div>

    <div class="form-group col-md-2 offset-md-1">
            @include('evaluacionproveedores::form.text',['id'=>'n_oc','nombre'=>'OC','valor'=>(isset($valores["n_oc"])?$valores["n_oc"]:''),'placeholder'=>'','required'=>'false','clase'=>'form-control'])
    </div>
    <div class="form-group col-md-2">
            @include('evaluacionproveedores::form.text',['id'=>'monto_oc','nombre'=>'Monto','valor'=>(isset($valores["monto_oc"])?$valores["monto_oc"]:''),'placeholder'=>'','required'=>'false','clase'=>'form-control'])
    </div>
    <div class="form-group col-md-3">
            @include('evaluacionproveedores::form.select',['id'=>'tipo_oc','nombre'=>'Tipo','valor'=>(isset($valores["tipo_oc"])?$valores["tipo_oc"]:''),'lista'=>["Servicios","Bienes","Otros"],'placeholder'=>'','required'=>'false','clase'=>'form-control'])
    </div> 
</div>
<div class="row">

    <div class="form-group col-md-2">
            @include('evaluacionproveedores::form.text',['id'=>'plazo_ejecucion','nombre'=>'Plazo Ejecución','valor'=>(isset($valores["plazo_ejecucion"])?$valores["plazo_ejecucion"]:''),'placeholder'=>'','required'=>'false','clase'=>'form-control'])
    </div>
    <div class="form-group col-md-2">
            <label>Fecha Inicio</label>
            <input name="fecha_inicio" :value="fecha_inicioHidden" type="hidden">
            <datetime-picker v-model="fecha_inicio"
                                :first-day-of-week="1" :clearable="false"
                                lang="es" 
                                :format="timeFormat" style="display: initial;" :disabled="readonly">
            </datetime-picker>
     </div>
    <div class="form-group col-md-2">
            <label>Fecha Término</label>
            <input name="fecha_termino" :value="fecha_terminoHidden" type="hidden">
            <datetime-picker v-model="fecha_termino"
                                :first-day-of-week="1" :clearable="false"
                                lang="es" 
                                :format="timeFormat" style="display: initial;" :disabled="readonly">
            </datetime-picker>
    </div>

</div>
<div class="row">
    <div class="form-group col-md-4">
            @include('evaluacionproveedores::form.select',['id'=>'id_proveedor','nombre'=>'Proveedor','valor'=>(isset($valores["id_proveedor"])?$valores["id_proveedor"]:''),'placeholder'=>'','required'=>'true','clase'=>'form-control'])
    </div> 
    <div class="form-group col-md-4">
            @include('evaluacionproveedores::form.select',['id'=>'unidad_tecnica','nombre'=>'Unidad Técnica','valor'=>(isset($valores["unidad_tecnica"])?$valores["unidad_tecnica"]:''),'placeholder'=>'','required'=>'true','clase'=>'form-control'])
    </div>
    <div class="form-group col-md-4">
            @include('evaluacionproveedores::form.select',['id'=>'supervisor','nombre'=>'Supervisor / Ito','valor'=>(isset($valores["supervisor"])?$valores["supervisor"]:''),'placeholder'=>'','required'=>'true','clase'=>'form-control'])
    </div>

</div>
<div class="card row mb-5">

<div class="card-body" id="lista-calificaciones"><h4>Calificaciones</h4>
<table id="tabla_referencias" class="table table-stripped">
<thead>
    <tr>
        <th style="width:15%">Fecha</th>
        <th style="width:20%">Autor</th>
        <th style="width:20%">Proveedor</th>
        <th style="width:auto">Observaciones</th>
        <th style="width:auto">Calidad</th>
        <th style="width:auto">Cumplimiento</th>
        <th style="width:auto">Post Venta</th>
        <th style="width:5%">Nota</th>
        <th style="width:5%">Opciones</th>
    </tr>
</thead>
<tbody>

</tbody>
</table>
<h3 class="text-right">Promedio :<strong id="promedio_notas">0</strong></h3>
</div>


</div>

<div class="controles text-right">
        <button type="submit" class="btn btn-primary">Guardar</button>
        <a href="#" id="print" class="btn btn-secondary">Imprimir</a>
</div>

</form>

</div>


@include('evaluacionproveedores::modalEvaluaciones')

@parent
@endsection

@push('pre-scripts')
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous"></script>
<!-- <script src="{{ URL::asset('fondoext/tinymce/tinymce.js')}}"></script> -->
<script src="https://github.com/makeusabrew/bootbox/releases/download/v5.3.2/bootbox.all.min.js"></script>


<link src="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.css" type="stylesheet">
  <link src="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.min.css" type="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.css"/>

  <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

  <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.js"></script>

<script> 
    window.pageMix.push({
        data: () => ({
            fecha_aprueba_contrato: '{{ old('fecha_aprueba_contrato',($valores["fecha_aprueba_contrato"] ?? '') ) }}',
            fecha_inicio: '{{ old('fecha_inicio',($valores["fecha_inicio"] ?? '')) }}',
            fecha_termino: '{{ old('fecha_termino',($valores["fecha_termino"] ?? '')) }}',
            readonly:{{ ($modo=='view')?'true':'false' }},
            
        }),
        computed: {
            timeFormat() {
                let timeFormat = "DD/MM/YYYY";
                return timeFormat;
            },
            fecha_aprueba_contratoHidden() {
                return this.$moment(this.fecha_aprueba_contrato).format('YYYY-MM-DD')
            },
            fecha_inicioHidden() {
                return this.$moment(this.fecha_inicio).format('YYYY-MM-DD')
            },
            fecha_terminoHidden() {
                return this.$moment(this.fecha_termino).format('YYYY-MM-DD')
            },
        }
    });
</script>


<script>

document.addEventListener('keydown', function (event) {
  if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
    var form = event.target.form;
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    event.preventDefault();
  }
});


$().ready(function() {
    
            @if($modo == 'edit' || $modo == 'new')
            // $('.datepicker').each(function() {
            //     $(this).datepicker({
            //         uiLibrary: 'bootstrap4',
            //         format: "dd/mm/yyyy",
            //         todayBtn: "linked",
            //         clearBtn: true,
            //         locale: 'es-es',
            //         modal: true,
            //         showOnFocus: true,
            //         weekStartDay:1,
            //         rightIcon: '<i class="oi oi-calendar"></i>',
            //     });
            //     $(this).keypress(function(e) {
            //         e.preventDefault();
            //     });
            //     // $(this).on('input',function(e){ return  e.preventDefault();});
            // });
            

            @can('evaluacionproveeedores.edit')
            //parche para agregar un boton de agregar proveedor
            $("label[for='id_proveedor']").append("&nbsp;<a href='{{ route('evaluacionproveedores.crearproveedor') }}' target='_blank' class=''>[+ proveedor]</a>&nbsp;<a href='javascript:void(0)' onclick='cargar_proveedores()'>[recargar lista]</a>");
            @endcan

            @endif
            $("#print").click(function() {
                window.print();
            });


            $("#formulario").validate({
                submitHandler: function(form) {
                    console.log("submit");
                    return true;
                },
                errorElement: "em",
                errorPlacement: function(error, element) {
                    error.addClass("invalid-feedback");
                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.next("label"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass("is-invalid").removeClass("is-valid");
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).addClass("is-valid").removeClass("is-invalid");
                }
            });
          
           cargar_proveedores();

            $.get({
                "dataType": 'json',
                "type": "GET",
                "url": "{{route ('evaluacionproveedores.jsonunidadtecnica')}}",
                "success": function(data) {
                    $.each(data.data, function(i, o) {
                        // console.log(o);
                        $('#unidad_tecnica').append("<option value='" + o.id + "'>" + o.nombre + "</option>");
                    });
                    @isset($valores['unidad_tecnica'])
                    $("#unidad_tecnica option[value='{{$valores['unidad_tecnica']}}']").prop('selected','selected');
                    $("#unidad_tecnica").trigger('change');
                    @endisset
                }
            });

            $("#unidad_tecnica").on('change',function(){
                $("#supervisor").html("<option value=''>Seleccione</option>");
                $.get({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "{{route ('evaluacionproveedores.jsonsupervisores')}}",
                    "data":{"id":this.value},
                    "success": function(data) {
                        $.each(data.data, function(i, o) {
                            $('#supervisor').append("<option value='" + o.id + "'>" + o.name + " "+o.last_name+"</option>");
                        });
                        @isset($valores['supervisor'])
                        $("#supervisor option[value='{{$valores['supervisor']}}']").prop('selected','selected');
                        @endisset
                    }
                });


            });



            @if($modo != 'new')
            $("#tabla_referencias").dataTable({
                    dom: 'rtip',
                    responsive:{
                        breakpoints: [
                            { name: 'desktop', width: Infinity },
                            { name: 'tablet',  width: 900 },
                            { name: 'fablet',  width: 650 },
                            { name: 'phone',   width: 480 }
                        ]
                    },
                    "pageLength": 50,
                    language: { url: '//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json' },
                    "ajax": {
                        "url": "{{ route ('evaluacionproveedores.jsonlistaevaluacionesxproyecto',['id'=>$valores['id']]) }}",
                        "dataSrc":  function ( data ) {
                            let json=[];

                            for ( var i=0, ien=data["data"].length ; i<ien ; i++ ) {
                                json[i]=[];
                                json[i][0] = data.data[i]['created_at'];
                                json[i][1] = data["data"][i]['user']["name"]+" "+data["data"][i]['user']["last_name"];
                                json[i][2] = data["data"][i]['proveedor']["nombre"];
                                json[i][3] = data["data"][i]['observaciones'];
                                json[i][4] = Number.parseFloat(data["data"][i]['calidad']).toFixed(1);
                                json[i][5] = Number.parseFloat(data["data"][i]['plazo']).toFixed(1);
                                json[i][6] = Number.parseFloat(data["data"][i]['postventa']).toFixed(1);
                                json[i][7] = Number.parseFloat(data["data"][i]['nota']).toFixed(2);
                                @if($modo == 'edit')  
                                json[i][8] = "<a href='javascript:void(0)' onclick='editar_calificacion("+i+")' class='btn btn-sm'><i class='ti ti-pencil' title='Editar'></i></a>";
                                @else
                                json[i][8] = "";
                                @endif
                                
                                json[i][9] = data["data"][i]["id"];
                            }
                           
                            return json;
                        }
                    },
                   
                    "footerCallback": function( tfoot, data, start, end, display ) {
                       // var api = this.api();
                      // console.log(data);
                    //    if(data[0]!=null)
                    //     $("#promedio_notas").html(data[0][7]);
                        let tot=0;
                        $.each(data,function(i,o){
                            tot=parseFloat(tot)+parseFloat(o[7]);
                        });
                       
                        tot= Number.parseFloat(tot/data.length).toFixed(2);
                        $("#promedio_notas").html(tot);
                    }
            });
            @endif








            // tinymce.init({
            //     selector: "textarea.editor",
            //     theme: "modern",
            //     height: 200,
            //     menubar: false,
            //     language: 'es_MX',
            //     plugins: [
            //         'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            //         'searchreplace wordcount visualblocks visualchars code fullscreen',
            //         'insertdatetime media nonbreaking save table contextmenu directionality',
            //         'emoticons template paste textcolor colorpicker textpattern imagetools'
            //     ],
            //     toolbar1: 'insertfile undo redo  | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons',
            //     // toolbar2: '',
            //     image_advtab: true,
            //     setup : function(ed){
            //         ed.on('init', function() 
            //         {
            //             this.getDoc().body.style.fontSize = '14px';
            //             this.getDoc().body.style.fontFamily = 'Arial';
            //         });
            //     },
            // });
            // tinymce.suffix = ".min";

            $(".numero input").on("keyup",function(input){
                let num = this.value.replace(/\./g,"");
                if(!isNaN(num)){
                num = num.toString().split("").reverse().join("").replace(/(?=\d*\.?)(\d{3})/g,'$1.');
                num = num.split("").reverse().join("").replace(/^[\.]/, "");
                this.value = num;
                }

                else{ //alert("Solo se permiten numeros");
                this.value = this.value.replace(/[^\d\.]*/g,"");
                }
            });

            @isset($errores)
            @foreach($errores as $key => $error) {
            ) {
                @if($error != "")
                $("<em class='invalid-feedback '>{{$error}}</em>").insertAfter($("#{{$key}}"));
                $("#{{$key}}").addClass("is-invalid");
                @endif
                @endforeach
                @endisset



                @if($modo == 'view')
                $('input').each(function(i, o) {
                    $(this).attr('disabled', 'disabled');
                });
                $('select').each(function(i, o) {
                    $(this).attr('disabled', 'disabled');
                });
                $('textarea').each(function(i, o) {
                    $(this).attr('disabled', 'disabled');
                });
                //$("textarea").editor().destroy();
               // tinymce.activeEditor.setMode('readonly');


                $('button[type=submit]').attr('disabled', 'disabled').addClass('d-none');
                @endif

               

            });
            function cargar_proveedores(){
                $("#id_proveedor").html("<option value=''>Seleccione</option>");
                    $.get({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "{{route ('evaluacionproveedores.jsonlistaproveedores')}}",
                            "success": function(data) {
                                $.each(data.data, function(i, o) {
                                    // console.log(o);
                                    @isset($valores['id_proveedor'])
                                    if (o.id == {{ $valores['id_proveedor'] }} ) {
                                        $('#id_proveedor').append("<option selected value='" + o.id + "'>" + o
                                            .nombre + "</option>");
                                    } else {
                                        $('#id_proveedor').append("<option value='" + o.id + "'>" + o.nombre +
                                            "</option>");
                                    }
                                    @else
                                    $('#id_proveedor').append("<option value='" + o.id + "'>" + o.nombre +
                                        "</option>");
                                    @endisset

                                });
                            }
                        });

            }
        function borrar_evaluacion(id) {

            Swal({
                title: '',
                text: "¿Desea eliminar esta evaluación?",
                type: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Eliminar'
            }).then((result) => {
                if (result.value) {
                    $.get({
                        "dataType": 'json',
                        "type": "DELETE",
                        "url": "{{route ('evaluacionproveedores.listaevaluaciones')}}/"+id+"/borrar",
                        "success": function(data) {
                           if(data.estado=="OK")
                                Swal.fire(data.mensaje);
                        },
                        "error": function(data) {
                            Swal.fire("Error al procesar el comando");
                        },
                    });
                }
            });
        }
function editar_calificacion(item){
    console.log( $("#tabla_referencias").DataTable().rows().data()[item]);
    let datos=$("#tabla_referencias").DataTable().rows().data()[item];

    $("#formulario_calificaciones input[name=id]").val(datos[9]);
    $("#formulario_calificaciones select#calidad").val(datos[4]);
    $("#formulario_calificaciones select#plazo").val(datos[5]);
    $("#formulario_calificaciones select#postventa").val(datos[6]);
    $("#formulario_calificaciones textarea#observaciones_referencia").val(datos[3]);

    $("#modal_referencia").modal();

}
        function agregar_referencia(){
            //variables
            let params = $("#modal_referencia form").serialize();
            console.log(params);
            $.post( "{{ route('evaluacionproveedores.guardarevaluacion') }}",params )
                .done(function( data ) {
                    if(data.estado=="OK"){
                        $("#tabla_referencias").DataTable().ajax.reload();
                        $('#modal_referencia .modal-header button').trigger('click');
                        $('#modal_referencia form').reset();
                        $('.modal-backdrop').remove();
                        Swal(data.mensaje);
                    }else{
                        Swal(data.estado,data.mensaje,"danger");   
                    }
                });
        }
</script>
@endpush