@extends('layouts.app')

@section('content')
@extends('fabricacion.menu')

<div id="contenedor_interno" class="container-fluid">
    <div class="row ">
      <div class="col-md-12">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('fabricacion.dashboard') }}">Orden de Producción</a></li>
            <li class="breadcrumb-item active" aria-current="page">Nueva</li>
          </ol>
        </nav>
        <form action="{{ route('ventas.guardar_op') }}" method="POST" id="formEnviar">
          @csrf
          <input type="submit" href="{{route('ventas.cliente')}}" class="botonColor" value="Solicitar autorización" id="botonEnviar"/>
      </div>
      <hr>
    </div>
</div>

<div id="contenedor_contenido" class="container-fluid px-lg-5">
  <div class="row">
    <div class="col-md-12">
      <h2>Orden de Produción</h2>
    </div>
    <div class="col-md-12">
     
        <div class="row">
          <div class="col-md-6">
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Es para inventario</label>
              <div class="col-sm-8">
                <input class="form-check-input" type="checkbox" id="gridCheck" name="inventario" value="1">
              </div>
            </div>
            <input type="hidden" name="id_cliente" value="999999">
            
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Producto</label>
              <div class="col-sm-8">                
                <input type="text" id="nombre_productos" class="form-control-plaintext" value="" placeholder="">
                <input type="hidden" id='id_producto' class="id_producto" name="id_producto">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Cantidades para producir</label>
              <div class="col-sm-8">
                <input type="text" id="cantidad" onchange="materialProcesar(this)" class="form-control-plaintext" name="cantidad" value="" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Unidad de medida</label>
              <div class="col-sm-8">
                <input type="text" id="unidad_medida" readonly class="form-control-plaintext" name="id_medida" value="" placeholder="">
              </div>
            </div>
           
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Lista de materiales</label>
              <div class="col-sm-8">
                <input type="text" class="form-control-plaintext" name="lista_materiales" value="" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Condiciones de entrega</label>
              <div class="col-sm-8">
                <input type="text" class="form-control-plaintext" name="condiciones_entrega" value="" placeholder="">
              </div>
            </div>
            
          </div>


          <div class="col-md-6">
            <input type="hidden" name="id_cotizacion" value="999999">
            <input type="hidden" name="id_cotizacion_producto" value="999999">
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Número de orden compra</label>
              <div class="col-sm-8">
                <input type="text" class="form-control-plaintext" name="numero_oc" value="" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">kgs por Millar</label>
              <div class="col-sm-8">
                <input id="kgs_millar" name="kgs_millar" type="text" onchange="materialProcesar(this)" class="form-control-plaintext" value="" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Kgs a Procesar</label>
              <div class="col-sm-8">
                <input type="text" id="kgProcesar" name="kgs_procesar" class="form-control-plaintext" value="0" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Micras</label>
              <div class="col-sm-8">
                <input type="text" id='micras' class="form-control-plaintext" name="micras" value="" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Caracteristicas</label>
              <div class="col-sm-8">
                <input type="text" id='caracteristicas' class="form-control-plaintext" name="caracteristicas" value="" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="" class="col-sm-4 col-form-label">Observaciones</label>
              <div class="col-sm-8">
                <input type="text"  class="form-control-plaintext" name="observaciones" value="" placeholder="">
              </div>
            </div>
          </div>
        </div>
        
      </form>

    </div>
  </div>
</div>
<link href="{{ asset('js/jquery_ui/jquery-ui.css') }}" rel="stylesheet">
<script src="{{ asset('js/jquery_ui/jquery-ui.js') }}"></script>
<script>
  var kgs_millar=document.getElementById('kgs_millar');
  materialProcesar(kgs_millar)

  function nuevaFila(){
    var row = document.getElementsByClassName("producto"); // find row to copy
    console.log(row);
    var table = document.getElementById("contenedorProductos"); // find table to append to
    var clone = row[0].cloneNode(true); // copy children too
    table.appendChild(clone); // add new row to end of table
  }
  function materialProcesar(element){
    
    var cantidad=document.getElementById('cantidad').value;
    var kgMillar=document.getElementById('kgs_millar').value;

    var total=parseFloat(kgMillar)*parseFloat(cantidad);
    if(total){
        document.getElementById('kgProcesar').value=total.toFixed(2);
    }else{
        document.getElementById('kgProcesar').value=0;
    }
    
  }
  $( function() {
    $("#nombre_productos").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "{{route('ventas.buscar_producto')}}",
            dataType: 'json',
            data: {
              term: request.term
            },
            success: function(data) {
              response(data)
            }
           })
        },
        minLength: 2,
        select: function(event, ui) {
            document.getElementById('id_producto').value=ui.item.id;
            document.getElementById('unidad_medida').value=ui.item.unidad;
            document.getElementById('kgs_millar').value=ui.item.factor_conversion_kilos;
            document.getElementById('micras').value=ui.item.micras;
            document.getElementById('caracteristicas').value=ui.item.caracteristicas;
            console.log('precioSinIva',ui);
        }
    })
  } );

  document.getElementById('botonEnviar').addEventListener('click',(btn)=>{
      btn.preventDefault();
      console.log(btn);
      // document.getElementById('botonEnviar').disabled = true;
      if(window.confirm("¿Desea generar la orden de producción?")){
        let formEnviar = document.getElementById('formEnviar');
        formEnviar.submit();
      }
    });
    
</script>
@endsection