@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.listaproveedores')}}">Proveedores</a></li>
    <li class="breadcrumb-item active" aria-current="page"><template>@{{ headerTitle }}</template></li>
  </ol>
</nav>
@stop

@push('head')

@endpush

@section('content')
   
    <div class="bgc-white p-20 bd">
      <!-- <div class="flex clearfix pB-15">
          <b-button-toolbar aria-label="Submenú modulo evaluación proveedores " class="pull-left">
            <b-button-group class="mx-1">
              <b-button href="{{ route('evaluacionproveedores.listaproyectos')}}" variant="primary">Proyectos</b-button>
              <b-button href="{{ route('evaluacionproveedores.listaproveedores')}}" variant="light">Proveedores</b-button>
            </b-button-group>
          </b-button-toolbar>

           <b-button-toolbar aria-label="Submenú toolbar " class="pull-right">
            <b-button-group class="mx-1">
              <a href="{{route('evaluacionproveedores.crearproyecto')}}" target="_blank" class="btn btn-primary">Agregar Proyecto</a>
            </b-button-group>
          </b-button-toolbar> 
      </div> -->

      @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

  <b-card :title="headerTitle">
  <a class="btn btn-primary" href="{{route('evaluacionproveedores.editarproveedor',["id"=>($valores["id"]?? 0 )])}}" v-if="modo == 'view'" size="sm" variant="info"><i class="fa fa-pencil">Editar</i></a>

  <b-form id="formulario"  ref="formulario" action="{{route('evaluacionproveedores.guardarproveedor')}}" method="POST" novalidate class="was-validated" >
  @csrf
  
  <div class="row d-flex">
    <b-form-group
      id="rut"
      label="RUT"
      label-for="rut"
      class="col-md-2"
    >
      <b-form-input :disabled="modo == 'view'" name="rut" id="rut" :formatter="formatRut" @blur="checkRut($event)" lazy-formatter required v-model="datos.rut" trim></b-form-input>
      <div class="invalid-feedback"></div>
    </b-form-group>

    <b-form-group
      id="nombre"
      label="Nombre o Razón Social"
      label-for="nombre"
      class="col-md-10"
    >
      <b-form-input :disabled="modo == 'view'" name="nombre" id="nombre" required v-model="datos.nombre" trim></b-form-input>
    </b-form-group>

    <b-form-group
      id="representante_legal"
      label="Representante Legal"
      label-for="representante_legal"
      class="col-md-12"
    >
      <b-form-input :disabled="modo == 'view'" name="representante_legal" id="representante_legal" required v-model="datos.representante_legal" trim></b-form-input>
    </b-form-group>

    <b-form-group
      id="direccion"
      label="Dirección"
      label-for="direccion"
      class="col-md-8"
    >
      <b-form-input :disabled="modo == 'view'" name="direccion" id="direccion" required v-model="datos.direccion" trim></b-form-input>
    </b-form-group>


    <b-form-group
        id="ciudad"
        label="Ciudad"
        label-for="ciudad"
        class="col-md-4"
        >
        <b-form-select :disabled="modo == 'view'" name="ciudad" required  id="ciudad" v-model="datos.ciudad" >
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>
          <template  v-for="region in ciudades" >
                <b-select-option-group :label="region.region">
                <template v-for="ciudad in region.comunas">
                  <option>@{{ciudad }}</b-option>
                </template>
                </b-select-option-group>
            </template>
        </b-form-select>
    </b-form-group>

    <b-form-group
      id="nombre_contacto"
      label="Nombre Contacto"
      label-for="nombre_contacto"
      class="col-md-6"
    >
      <b-form-input :disabled="modo == 'view'" name="nombre_contacto"  required id="nombre_contacto" v-model="datos.nombre_contacto" trim></b-form-input>
    </b-form-group>

    <b-form-group
      id="telefono_contacto"
      label="Teléfono Contacto"
      label-for="telefono_contacto"
      class="col-md-3"
    >
      <b-form-input :disabled="modo == 'view'" name="telefono_contacto"  required id="telefono_contacto" v-model="datos.telefono_contacto" trim></b-form-input>
    </b-form-group>

    <b-form-group
      id="email_contacto"
      label="Email Contacto"
      label-for="email_contacto"
      class="col-md-3"
    >
      <b-form-input :disabled="modo == 'view'" name="email_contacto"  required id="email_contacto" v-model="datos.email_contacto" trim></b-form-input>
    </b-form-group>


    <b-form-group
      id="observaciones"
      label="Observaciones"
      label-for="observaciones"
      class="col-md-12"
    >
      <b-form-textarea :disabled="modo == 'view'" name="observaciones"  id="observaciones" v-model="datos.observaciones" trim></b-form-textarea>
    </b-form-group>
    

  </div>
  

  <div class="row d-flex">
    <h5 class="col-12 card-title">Calificaciones</h5>
    <table class="table table-condensed ">
      <thead>
        <tr>
          <th>Usuario</th>
          <th>Proyecto</th>
          <th>Comentario</th>
          <th>Cumplimiento</th>
          <th>Calidad</th>
          <th>Post Venta</th>
          <th>Nota Final</th>
        </tr>

      </thead>
    <tbody v-for="(nota, key) in datos.calificaciones">
      <tr>
        <td>@{{nota.user.full_name}}</td>
        <td>@{{nota.proyecto.nombre_proyecto}}</td>
        <td>@{{nota.observaciones}}</td>
        <td>@{{nota.plazo}}</td>
        <td>@{{nota.calidad}}</td>
        <td>@{{nota.postventa}}</td>
        <td>@{{nota.nota}}</td>
      </tr>
      </tbody>

    </table>
  </div>

  <div class="d-flex  justify-content-end bT-15">

      <b-button :disabled="modo == 'view'" type="submit" size="lg" @click="enviarDatos" variant="primary">Aceptar</b-button>

  </div>

  
</b-form>



  </b-card>
</div>




@endsection

@push('pre-scripts')


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous"></script>
<script>


window.pageMix.push({

  data() {
    return {
      datos:@json($valores ?? [] ),
      modo:'{{$modo}}',
      rut:'',
      ciudades:[ { region: "La Araucanía", comunas: [ "Angol", "Carahue", "Cholchol", "Collipulli", "Cunco", "Curacautín", "Curarrehue", "Ercilla", "Freire", "Galvarino", "Gorbea", "Lautaro", "Loncoche", "Lonquimay", "Los Sauces", "Lumaco", "Melipeuco", "Nueva Imperial", "Padre las Casas", "Perquenco", "Pitrufquén", "Pucón", "Purén", "Renaico", "Saavedra", "Temuco", "Teodoro Schmidt", "Toltén", "Traiguén", "Victoria", "Vilcún", "Villarrica" ] }, { region: "Aisén del Gral. Carlos Ibáñez del Campo", comunas: [ "Aisén", "Chile Chico", "Cisnes", "Cochrane", "Coihaique", "Guaitecas", "Lago Verde", "O’Higgins", "Río Ibáñez", "Tortel" ] }, { region: "Antofagasta", comunas: [ "Antofagasta", "Calama", "María Elena", "Mejillones", "Ollagüe", "San Pedro de Atacama", "Sierra Gorda", "Taltal", "Tocopilla" ] }, { region: "Arica y Parinacota", comunas: ["Arica", "Camarones", "General Lagos", "Putre"] }, { region: "Atacama", comunas: [ "Alto del Carmen", "Caldera", "Chañaral", "Copiapó", "Diego de Almagro", "Freirina", "Huasco", "Tierra Amarilla", "Vallenar" ] }, { region: "Biobío", comunas: [ "Alto Biobío", "Antuco", "Arauco", "Cabrero", "Cañete", "Chiguayante", "Concepción", "Contulmo", "Coronel", "Curanilahue", "Florida", "Hualpén", "Hualqui", "Laja", "Lebu", "Los Álamos", "Los Ángeles", "Lota", "Mulchén", "Nacimiento", "Negrete", "Penco", "Quilaco", "Quilleco", "San Pedro de la Paz", "San Rosendo", "Santa Bárbara", "Santa Juana", "Talcahuano", "Tirúa", "Tomé", "Tucapel", "Yumbel" ] }, { region: "Coquimbo", comunas: [ "Andacollo", "Canela", "Combarbalá", "Coquimbo", "Illapel", "La Higuera", "La Serena", "Los Vilos", "Monte Patria", "Ovalle", "Paiguano", "Punitaqui", "Río Hurtado", "Salamanca", "Vicuña" ] },  { region: "Libertador Gral. Bernardo O’Higgins", comunas: [ "Chépica", "Chimbarongo", "Codegua", "Coinco", "Coltauco", "Doñihue", "Graneros", "La Estrella", "Las Cabras", "Litueche", "Lolol", "Machalí", "Malloa", "Marchihue", "Mostazal", "Nancagua", "Navidad", "Olivar", "Palmilla", "Paredones", "Peralillo", "Peumo", "Pichidegua", "Pichilemu", "Placilla", "Pumanque", "Quinta de Tilcoco", "Rancagua", "Rengo", "Requínoa", "San Fernando", "San Vicente", "Santa Cruz" ] }, { region: "Los Lagos", comunas: [ "Ancud", "Calbuco", "Castro", "Chaitén", "Chonchi", "Cochamó", "Curaco de Vélez", "Dalcahue", "Fresia", "Frutillar", "Futaleufú", "Hualaihué", "Llanquihue", "Los Muermos", "Maullín", "Osorno", "Palena", "Puerto Montt", "Puerto Octay", "Puerto Varas", "Puqueldón", "Purranque", "Puyehue", "Queilén", "Quellón", "Quemchi", "Quinchao", "Río Negro", "San Juan de la Costa", "San Pablo" ] }, { region: "Los Ríos", comunas: [ "Corral", "Futrono", "La Unión", "Lago Ranco", "Lanco", "Los Lagos", "Máfil", "Mariquina", "Paillaco", "Panguipulli", "Río Bueno", "Valdivia" ] }, { region: "Magallanes y de la Antártica Chilena", comunas: [ "Antártica", "Cabo de Hornos (Ex Navarino)", "Laguna Blanca", "Natales", "Porvenir", "Primavera", "Punta Arenas", "Río Verde", "San Gregorio", "Timaukel", "Torres del Paine" ] }, { region: "Maule", comunas: [ "Cauquenes", "Chanco", "Colbún", "Constitución", "Curepto", "Curicó", "Empedrado", "Hualañé", "Licantén", "Linares", "Longaví", "Maule", "Molina", "Parral", "Pelarco", "Pelluhue", "Pencahue", "Rauco", "Retiro", "Río Claro", "Romeral", "Sagrada Familia", "San Clemente", "San Javier", "San Rafael", "Talca", "Teno", "Vichuquén", "Villa Alegre", "Yerbas Buenas" ] }, { region: "Metropolitana de Santiago", comunas: [ "Alhué", "Buin", "Calera de Tango", "Cerrillos", "Cerro Navia", "Colina", "Conchalí", "Curacaví", "El Bosque", "El Monte", "Estación Central", "Huechuraba", "Independencia", "Isla de Maipo", "La Cisterna", "La Florida", "La Granja", "La Pintana", "La Reina", "Lampa", "Las Condes", "Lo Barnechea", "Lo Espejo", "Lo Prado", "Macul", "Maipú", "María Pinto", "Melipilla", "Ñuñoa", "Padre Hurtado", "Paine", "Pedro Aguirre Cerda", "Peñaflor", "Peñalolén", "Pirque", "Providencia", "Pudahuel", "Puente Alto", "Quilicura", "Quinta Normal", "Recoleta", "Renca", "San Bernardo", "San Joaquín", "San José de Maipo", "San Miguel", "San Pedro", "San Ramón", "Santiago", "Talagante", "Tiltil", "Vitacura" ] }, { region: "Ñuble", comunas: [ "Bulnes", "Chillán", "Chillán Viejo", "Cobquecura", "Coelemu", "Coihueco", "El Carmen", "Ninhue", "Ñiquén", "Pemuco", "Pinto", "Portezuelo", "Quillón", "Quirihue", "Ránquil", "San Carlos", "San Fabián", "San Ignacio", "San Nicolás", "Treguaco", "Yungay" ] }, { region: "Tarapacá", comunas: [ "Alto Hospicio", "Camiña", "Colchane", "Huara", "Iquique", "Pica", "Pozo Almonte" ] }, { region: "Valparaíso", comunas: [ "Algarrobo", "Cabildo", "Calera", "Calle Larga", "Cartagena", "Casablanca", "Catemu", "Concón", "El Quisco", "El Tabo", "Hijuelas", "Isla de Pascua", "Juan Fernández", "La Cruz", "La Ligua", "Limache", "Llaillay", "Los Andes", "Nogales", "Olmué", "Panquehue", "Papudo", "Petorca", "Puchuncaví", "Putaendo", "Quillota", "Quilpué", "Quintero", "Rinconada", "San Antonio", "San Esteban", "San Felipe", "Santa María", "Santo Domingo", "Valparaíso", "Villa Alemana", "Viña del Mar", "Zapallar" ] } ],
    }
  },
  computed: {
    headerTitle() {
        if(this.datos.id==null)
          return 'Nuevo Proveedor';
          else{
          if(this.modo=="view")
          return 'Ver Proveedor RUT º'+this.datos.rut;
          else
          return 'Editar Proveedor RUT º'+this.datos.rut;
        }
    }
  },

  mounted(){
   
  },
  methods:{
    enviarDatos:function(e){
        if(this.validateForm()){
          return true;
        } 
        else{
          e.preventDefault();
          return false;
        }
    },
    formatRut(valor){
        valor = valor.replace(/^0+|[^0-9kK]+/g,'');
        if(valor.length==0)
          return '';
        dv = valor.slice(-1).toUpperCase();
        cuerpo = valor.slice(0,-1);
        
        valor = cuerpo + '-'+ dv
        return valor;
    },
    checkRut:function(e) {
        let rut = e.target;

        valor = this.formatRut(rut.value);
        valor = valor.replace("-","");
        dv = valor.slice(-1).toUpperCase();
        cuerpo = valor.slice(0,-1);

        if(cuerpo.length < 7) {
           rut.setCustomValidity("RUT Incompleto"); 
           return false;
        }
        suma = 0;
        multiplo = 2;
        for(i=1;i<=cuerpo.length;i++) {
            index = multiplo * valor.charAt(cuerpo.length - i);
            suma = suma + index;
            if(multiplo < 7) { multiplo = multiplo + 1; } else { multiplo = 2; }
        }
        dvEsperado = 11 - (suma % 11);
        dv = (dv == 'K')?10:dv;
        dv = (dv == 0)?11:dv;
        if(dvEsperado != dv) { 
          rut.setCustomValidity("RUT Inválido");
           return false; 
        }
        rut.setCustomValidity('');
        //return valor;
    },
    validateForm () {
        var formId = 'formulario';
        var nodes = document.querySelectorAll(`#${formId} :invalid`);
        var errorObjectName = 'validationErrors';
        var vm = this; //current vue instance;
        if (nodes.length > 0) {
            return false;
        }
        else {
            return true;
        }
    }
  }

});

</script>





@endpush

@push('post-scripts')
   
@endpush