@extends('template.layoutAdmin', ['activeButton'=>'productos'])

@section('cabecera')
  <div class="row">
    <div class="col-6">
      <h1 style="margin: 15px 0 10px 0;">
      <a href="{{url()->previous()}}" class="btn btn-default btn-sm"> <i class="fa fa-arrow-left"></i> {{  trans('productos.regresar') }} </a>
      </h1>
    </div>
    <div class="col-6 text-right">
      <h1>
        <small> {{  trans('productos.tituloProductosPlato') }} </small>
      </h1>
    </div>
  </div>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>

@endsection

@section('title')
    {{  trans('productos.CrearPlato') }}
@endsection

@section('style')

  <style media="screen">    
    .preview { 
      overflow: hidden; 
      width: 160px;  
      height: 160px;     
      margin: 10px;     
      border: 1px solid red;     
    }     
    .modal-lg{    
      max-width: 1000px !important;    
    } 
  </style> 
@endsection

@section('contenido')
  @if(Session::has('message'))
    <div class="row">
      <div class="col-12">
        <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            😉 {{Session::get('message')}} 😉
        </div>
      </div>
    </div>
  @endif
  @if(Session::has('message_error'))
    <div class="row">
      <div class="col-12">
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            😓 {{Session::get('message_error')}} 😒
        </div>
      </div>
    </div>
  @endif
  @if(count($errors) > 0)
    <div class="row">
      <div class="col-12">
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <p> {{  trans('productos.corregirErrores') }}	</p>
            <ul>
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </div>
      </div>
    </div>
  @endif
  <div class="row">
    <div class="col-12">
      <div class="info-box">
        <div class="box-header with-border">
          <h3 class="box-title"> {{  trans('productos.agregarPlato') }}	</h3>
        </div>
        <div class="box-body">
            <form action="{{route('storeP')}}" method="POST" file="true" enctype="multipart/form-data" id="formCreate">
            @csrf
            <small class="small">{{ trans('template.camposcon') }} (<span class="text-danger">*</span>) {{ trans('template.obligatorios') }}</small>

            <div class="row">
                <div class="col-md-6">
                <div class="form-group {{ $errors->has('nombre') ? 'has-error' : '' }}">
                    <label for="nombre"> {{  trans('productos.nombre') }} <span class="text-danger">*</span></label>
                    <input
                        type="text"
                        name="nombre"
                        class="form-control"
                        required
                        onkeyup="slugProduct(this.value)"
                        value="{{ old('nombre') }}"
                        autocomplete="off"
                        placeholder="{{  trans('productos.nombrePlato') }}" >
                </div>
                </div>
                <div class="col-md-6">
                <div class="form-group {{ $errors->has('slug') ? 'has-error' : '' }}">
                    <label for="slug"> {{  trans('productos.alias') }} <span class="text-danger">*</span></label>
                    <input
                        type="text"
                        name="slug"
                        value="{{ old('slug') }}"
                        class="form-control"
                        id="slug"
                        required
                        autocomplete="off"
                        placeholder="{{  trans('productos.aliasPlato') }}">
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <div class="form-group {{ $errors->has('descripcion') ? 'has-error' : '' }}">
                    <label for="descripcion"> {{  trans('productos.descripcion') }} <span class="text-danger">*</span></label>
                    <textarea
                        name="descripcion"
                        class="form-control cont text"
                        id="descripcion"
                        >
                        {{ old('descripcion') }}
                    </textarea>
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group {{ $errors->has('valor') ? 'has-error' : '' }}">
                        <label for="valor"> {{  trans('productos.valor') }} <span class="text-danger">*</span></label>
                        <input type="text"
                            name="valor"
                            id="value"
                            value="{{ old('valor') }}"
                            class="form-control"
                            required
                            autocomplete="off"
                            placeholder=" {{  trans('productos.valorPlato') }} ">
                    </div>
                </div>
                <div class="col">
                  <div class="form-group">
                    <label for="caloria"> {{  trans('productos.calorias') }} </label>
                    <input type="text"
                    min="0"
                    name="caloria"
                    value="0"
                    id="caloria"
                    placeholder=" {{  trans('productos.calorias') }} "
                    autocomplete="off"
                    class="form-control">
                  </div>
                </div>
                <div class="col">
                    <div class="form-group {{ $errors->has('estado') ? 'has-error' : '' }}">
                        <label for="estado"> {{  trans('productos.estado') }} <span class="text-danger">*</span></label>
                        <select name="estado" id="estado" class="form-control">
                          <option value="1"> {{  trans('productos.activo') }}	</option>
                          <option value="0"> {{  trans('productos.inactivo') }} </option>
                        </select>
                    </div>
                </div>
                @if ($comercio->idPerfil != 68)
                  <div class="col">
                      <div class="form-group {{ $errors->has('idComanda') ? 'has-error' : '' }}">
                        <label for="idComanda"> {{  trans('productos.comanda') }} <span class="text-danger">*</span></label>
                        <select name="idComanda" id="idComanda" class="form-control">
                          @foreach($comandas as $listComanda)
                            @if (old('idComanda') == $listComanda->idComanda)
                              <option value="{{ $listComanda->idComanda }}" selected>{{ $listComanda->nombre }}</option>
                            @else
                              <option value="{{$listComanda->idComanda}}">{{$listComanda->nombre}}</option>
                            @endif
                          @endforeach
                        </select>
                      </div>
                  </div>
                @endif
                <div class="col">
                  <div class="form-check form-check-inline" style="margin-top: 30px;">
                    <input type="checkbox" name="checkbox_sin_procesar" id="checkbox_sin_procesar" class="filled-in" />
                    <label for="checkbox_sin_procesar">¿Sin Procesar?</label>
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group {{ $errors->has('categoria') ? 'has-error' : '' }}">
                        <label for="categoria"> {{  trans('productos.principalCategoria') }} <span class="text-danger">*</span></label>
                        <select name="categoria" id="categoria" class="form-control" onchange="selecCat(this.value)">
                        <option value=""> {{  trans('productos.seleccioneCategoria') }} </option>
                        @foreach ($categorias as $listCat)
                          @if (old('categoria') == $listCat->idCategoria)
                            <option value="{{ $listCat->idCategoria }}" selected>{{ $listCat->nombre }}</option>
                          @else
                           <option value="{{$listCat->idCategoria}}">{{$listCat->nombre}}</option>
                          @endif
                        @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group {{ $errors->has('subCategorias') ? 'has-error' : '' }}">
                        <label for="subCategorias"> {{  trans('productos.categorias') }}  <span class="text-danger">*</span></label>
                        <select name="subCategorias" id="subCategorias" class="form-control">

                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group {{ $errors->has('tiempo') ? 'has-error' : '' }}">
                    @if ($comercio->idPerfil != 68)
                      <label for="tiempo"> {{  trans('productos.tiempoComanda') }} <span class="text-danger">*</span></label>
                    @else
                      <label for="tiempo"> {{  trans('productos.tiempoCocina') }} <span class="text-danger">*</span></label>
                    @endif
                    <input type="text" class="form-control" name="tiempo" onkeyup="numero(this.value, 'tiempo')" id="tiempo">
                  </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                      <label for="ordenMenu"> Posición en el menu </label><span class="text-danger"> *</span>
                      <input type="number"
                      step="0.1"
                      min="0"
                      value="{{number_format($ordenMenu+1, 1, ',', '.')}}"
                      name="ordenMenu"
                      id="ordenMenu"
                      autocomplete="off"
                      class="form-control">
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-12">
                <div class="form-group {{ $errors->has('imagen') ? 'has-error' : '' }}">
                    <label for="imagen"> {{  trans('productos.imagenPrincipal') }} </label>
                    <div class="controls">
                      <div class="form-control">
                        <input type="file" name="img" class="image" required>
                        <input type="hidden" name="image" id="foto" >
                      </div>
                    </div>
                    <small> {{  trans('productos.mejorVisualizacion') }} </small>
                </div>
                </div>
            </div>
            <hr>
            <!-- INGREDIENTES OBLIGATORIOS-->
            <div class="row">
              <div class="col text-right">
                <a href="#" class="btn btn-info btn-sm" onclick="importarIngredientes()">  {{  trans('productos.importarIngredientes') }} </a>
              </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                <p>{{  trans('productos.ingredientesBase') }}	</p>
                <div class="input-group">
                    <input type="text" id="newIngreObliga" autocomplete="off" placeholder=" {{  trans('productos.ingredientesBase') }} " class="form-control">
                    <div class="input-group-prepend">
                    <div class="input-group-text">
                        <a href="javascript:;" onclick="agregarIngredienteObligatorio()" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i></a>
                    </div>
                    </div>
                </div>
                <br/>
                <div id="tableIngreObligatorio" style="display:none; max-height: 250px; overflow: scroll">
                    <table class="table table-bordered table-responsive">
                    <thead>
                        <tr >
                        <th class="text-center"> {{  trans('productos.id') }} </th>
                        <th class="text-center"> {{  trans('productos.nombre') }} </th>
                        <th class="text-center"> {{  trans('productos.opciones') }} </th>
                        </tr>
                    </thead>
                    <tbody id="tableIngreBodyObliga">
                    </tbody>
                    </table>
                </div>
                </div>
                <div class="col-md-6">
                <p> {{  trans('productos.ingredientesOpcionales') }} </p>
                <div class="input-group">
                    <input type="text" id="newAcompa" autocomplete="off" placeholder=" {{  trans('productos.ingredientesOpcionales') }} " class="form-control">
                    <div class="input-group-prepend">
                    <div class="input-group-text">
                        <a href="javascript:;" onclick="agregarAcompa()" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i></a>
                    </div>
                    </div>
                </div>
                <br/>
                <div id="tableAcompa" style="display:none; max-height: 250px; overflow: scroll">
                    <table class="table table-bordered table-responsive">
                    <thead>
                        <tr >
                        <th class="text-center"> {{  trans('productos.id') }} </th>
                        <th class="text-center"> {{  trans('productos.nombre') }} </th>
                        <th class="text-center"> {{  trans('productos.opciones') }} </th>
                        </tr>
                    </thead>
                    <tbody id="tableAcompañante">
                    </tbody>
                    </table>
                </div>
                </div>
            </div>
            <!-- INGREDIENTES -->
            <hr/>
            <div class="row">
                <div class="col-md-6">
                <p> {{  trans('productos.ingredientes') }} </p>
                <div class="input-group">
                    <input type="text" id="newIngre" autocomplete="off" placeholder=" {{  trans('productos.agregarIngredientes') }} " class="form-control">
                    <div class="input-group-prepend">
                    <div class="input-group-text">
                        <a href="javascript:;" onclick="agregarIngrediente()" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i></a>
                    </div>
                    </div>
                </div>
                <br/>
                <div id="tableIngre" style="display:none; max-height: 250px; overflow: scroll">
                    <table class="table table-bordered table-responsive">
                    <thead>
                        <tr >
                        <th class="text-center"> {{  trans('productos.id') }}</th>
                        <th class="text-center"> {{  trans('productos.nombre') }}	</th>
                        <th class="text-center"> {{  trans('productos.opciones') }}	</th>
                        </tr>
                    </thead>
                    <tbody id="tableIngreBody">
                    </tbody>
                    </table>
                </div>
                </div>
                <div class="col-md-6">
                <p> {{  trans('productos.ingredientesAdicionales') }} </p>
                <div class="input-group">
                    <input type="text" id="newAdicio" style="margin-right: 10px;" autocomplete="off" placeholder=" {{  trans('productos.ingredientesAdicionales') }} " class="form-control">
                    <input type="text"  id="valorAdicio" autocomplete="off" placeholder="valor" class="form-control">
                    <div class="input-group-prepend">
                    <div class="input-group-text">
                        <a href="javascript:;" onclick="agregarAdicionales()" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i></a>
                    </div>
                    </div>
                </div>
                <br/>
                <div id="tableAdicio" style="display:none; max-height: 250px; overflow: scroll">
                    <table class="table table-bordered table-responsive">
                    <thead>
                        <tr >
                        <th class="text-center"> {{  trans('productos.id') }}	</th>
                        <th class="text-center"> {{  trans('productos.nombre') }} </th>
                        <th class="text-center"> {{  trans('productos.valor') }} </th>
                        <th class="text-center"> {{  trans('productos.opciones') }} </th>
                        </tr>
                    </thead>
                    <tbody id="tableAdicioBody">
                    </tbody>
                    </table>
                </div>
                </div>
            </div>

            <hr>
            <div class="row">
                <div class="col-12 text-center">
                    <a href="javascript:;" onclick="enviarDatos()" class="btn btn-info margin-top-10"> {{  trans('productos.agregarPlato') }}	</a>
                </div>
            </div>
            </form>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <h5 class="modal-title" id="modalLabel">{{  trans('galeria.editarImagen') }}</h5> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">×</span>
          </button> 
        </div> 

        <div class="modal-body"> 
          <div class="img-container"> 
            <div class="row"> 
              <div class="col-md-8"> 
                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749"> 
              </div> 
              <div class="col-md-4"> 
                <div class="preview"></div> 
              </div> 
            </div> 
          </div> 
        </div> 

        <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{  trans('galeria.cancelar') }}</button> 
          <button type="button" class="btn btn-primary" id="crop">{{  trans('galeria.editar') }}</button> 
        </div> 
      </div> 
    </div> 
  </div> 

@endsection

@section('js')
  <script>
    $("#value").on({
        "focus": function (event) {
            $(event.target).select();
        },
        "keyup": function (event) {
            $(event.target).val(function (index, value ) {
              function replacer(str, p1, p2, offset, s)
              {
                return str.substring(0, str.length - 1);;
              }
                return value.replace/* (/\D/g, "") */ (/[^\d(.{1})]/g, "")
                            .replace(/^(([0-9]+([.]((([0-9]+)?([.]+)([0-9]+)?([.]+)?)|([0-9][0-9][0-9]+))))?)$/g, replacer)
                            .replace(/([0-9])([0-9]{0})$/, '$1$2')
                         .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, "");
                            // .replace(/\B(?=(\d{3})+(?!\d)\.?)([,][\d]{2})?/, ".");
                            // .replace(/(\,\d{3})?*/g, "")
            });
        }
    });

    $("#valorAdicio").on({
        "focus": function (event) {
            $(event.target).select();
        },
        "keyup": function (event) {
            $(event.target).val(function (index, value ) {
              function replacer(str, p1, p2, offset, s)
              {
                return str.substring(0, str.length - 1);;
              }
                return value.replace/* (/\D/g, "") */ (/[^\d(.{1})]/g, "")
                            .replace(/^(([0-9]+([.]((([0-9]+)?([.]+)([0-9]+)?([.]+)?)|([0-9][0-9][0-9]+))))?)$/g, replacer)
                            .replace(/([0-9])([0-9]{0})$/, '$1$2')
                            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, "");
                            // .replace(/\B(?=(\d{3})+(?!\d)\.?)([,][\d]{2})?/, ".");
                            // .replace(/(\,\d{3})?*/g, "")
            });
        }
    });

    $("#caloria").on({
        "focus": function (event) {
            $(event.target).select();
        },
        "keyup": function (event) {
            $(event.target).val(function (index, value ) {
              function replacer(str, p1, p2, offset, s)
              {
                return str.substring(0, str.length - 1);;
              }
                return value.replace/* (/\D/g, "") */ (/[^\d(.{1})]/g, "")
                            .replace(/^(([0-9]+([.]((([0-9]+)?([.]+)([0-9]+)?([.]+)?)|([0-9][0-9][0-9]+))))?)$/g, replacer)
                            .replace(/([0-9])([0-9]{0})$/, '$1$2')
                            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, " ");
                            // .replace(/\B(?=(\d{3})+(?!\d)\.?)([,][\d]{2})?/, ".");
                            // .replace(/(\,\d{3})?*/g, "")
            });
        }
    });
    function numero(valor, tipo) {
      var expresion = /^\d*[\.]?[\d]*$/;
      var resultado = expresion.test(valor);
      if(!resultado) {
        //NADA BIEN
        swal("Info!", " {{  trans('productos.campoNumerico') }} ", "info");
        if(tipo == "tiempo") {
          $("#tiempo").val("");
        }else if(tipo == "acompañante") {
          $("#tiempo").val("");
        }

      }
    }
    $( document ).ready(function() {
      var categoria = "{!! old('categoria') !!}";
      var idSub = "{!! old('subCategorias') !!}";
      //updateIngreO(ingreObli);
      selecCat(categoria);
    });
    function updateIngreO(ingreObli)
    {
    }
  </script>
  <script type="text/javascript">
    function validarValor(numero){
      if (!/^([0-9])*$/.test(numero)){
        document.getElementById("valorAdicio").value="";
      }
    }
    function selecCat(idCategoria)
    {
      var idSub = "{!! old('subCategorias') !!}";
      var data = {
        "idCategoria": idCategoria
      }
      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/administrator/productos/select/categoria",
        data: data,
      	type: 'post',
      	dataType: 'json',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      	},
        beforeSend: function () {
          swal({
            title: " {{  trans('productos.cargando') }} ",
            text: " {{  trans('productos.espereUnMomento') }}	",
            showConfirmButton: false
          });
      	},
        success: function(response){
          $('#subCategorias').empty();
          if (response.code == 200) {
            $.each(response.datos, function(j, listCat){
              if(idSub == listCat.idCategoria){
                $("#subCategorias").append("<option selected value='"+listCat.idCategoria+"'>"+listCat.nombre+"</option>");
              }else{
                $("#subCategorias").append("<option value='"+listCat.idCategoria+"'>"+listCat.nombre+"</option>");
              }

            });
          }

          swal.close();
        },
        error: function(xhr){
          swal("Error!", " {{  trans('productos.errorMessage') }}	", "error");
      	}
      });
    }
  </script>
  <script type="text/javascript">
    $('#newIngreObliga').keypress(function (e) {
      if (e.which == 13) {
        agregarIngredienteObligatorio();
      }
    });
    $('#newIngre').keypress(function (e) {
      if (e.which == 13) {
        agregarIngrediente();
      }
    });
    $('#newAdicio').keypress(function (e) {
      if (e.which == 13) {
        agregarAdicionales();
      }
    });
    $('#valorAdicio').keypress(function (e) {
      if (e.which == 13) {
        agregarAdicionales();
      }
    });
    $('#newAcompa').keypress(function (e) {
      if (e.which == 13) {
        agregarAcompa();
      }
    });
    var ingredientesObliga = [];
    var ingredientes = [];
    var adicionales = [];
    var acopañantes = [];
    function agregarIngredienteObligatorio(){

      var newIngrediente = $("#newIngreObliga").val();
      if (newIngrediente == '') {
        swal({
          title: "Error",
          text: " {{  trans('productos.nombreVacio') }}	",
          type: "info",
          animation: false,
          showConfirmButton: true
        });
        return;
      }

      ingredientesObliga.push(newIngrediente);
      $("#tableIngreBodyObliga").empty();
      var id = 1;
      for (let index = 0; index < ingredientesObliga.length; index++) {

        $("#tableIngreBodyObliga").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+ingredientesObliga[index]+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarIngreObliga('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
        id = id+1;
      }

      $("#newIngreObliga").val('');
      $("#tableIngreObligatorio").show();

    }
    function eliminarIngreObliga(item){
      ingredientesObliga.splice(item, 1);
      $("#tableIngreBodyObliga").empty();
      var id = 1;
      if (ingredientesObliga.length !== 0) {
        for (let index = 0; index < ingredientesObliga.length; index++) {

          $("#tableIngreBodyObliga").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+ingredientesObliga[index]+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarIngreObliga('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
          id = id+1;

        }
      }else{
        $("#tableIngreObligatorio").hide();
      }


    }
    function agregarIngrediente(){

      var newIngrediente = $("#newIngre").val();
      if (newIngrediente == '') {
        swal({
          title: "Error",
          text: " {{  trans('productos.nombreVacio') }}	",
          type: "info",
          animation: false,
          showConfirmButton: true
        });
        return;
      }

      ingredientes.push(newIngrediente);
      $("#tableIngreBody").empty();
      var id = 1;
      for (let index = 0; index < ingredientes.length; index++) {

          $("#tableIngreBody").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+ingredientes[index]+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarIngre('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
        id = id+1;

      }

      $("#newIngre").val('');
      $("#tableIngre").show();

    }
    function eliminarIngre(item){
      ingredientes.splice(item, 1);
      $("#tableIngreBody").empty();
      var id = 1;
      if (ingredientes.length !== 0) {
        for (let index = 0; index < ingredientes.length; index++) {

          $("#tableIngreBody").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+ingredientes[index]+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarIngre('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
          id = id+1;

        }
      }else{
        $("#tableIngre").hide();
      }


    }
    function agregarAdicionales(){

      var newAdicion = $("#newAdicio").val();
      var valorAdicional = $("#valorAdicio").val();
      if (newAdicion == '') {
        swal({
          title: "Enjoit.co",
          text: " {{  trans('productos.nombreVacio') }} ",
          type: "info",
          animation: false,
          showConfirmButton: true
        });
        return;
      }else if(valorAdicional == ''){
        swal({
          title: "Error",
          text: " {{  trans('productos.valorVacio') }} ",
          type: "info",
          animation: false,
          showConfirmButton: true
        });
        return;
      }

      adicionales.push({"nombre": newAdicion,"valor": valorAdicional});
      $("#tableAdicioBody").empty();
      var id = 1;
      for (let index = 0; index < adicionales.length; index++) {

        $("#tableAdicioBody").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+adicionales[index].nombre+'</td><td class="text-center"">'+adicionales[index].valor+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarAdicio('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
        id = id+1;

      }

      $("#newAdicio").val('');
      $("#valorAdicio").val('');
      $("#tableAdicio").show();

    }
    function eliminarAdicio(item){
      adicionales.splice(item, 1);
      $("#tableAdicioBody").empty();
      var id = 1;
      if (adicionales.length !== 0) {
        for (let index = 0; index < adicionales.length; index++) {

          $("#tableAdicioBody").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+adicionales[index].nombre+'</td><td class="text-center"">'+adicionales[index].valor+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarAdicio('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
          id = id+1;

        }
      }else{
        $("#tableAdicio").hide();
      }

    }
    function agregarAcompa(){
      var newAcompa = $("#newAcompa").val();
      if (newAcompa == '') {
        swal({
          title: "Error",
          text: " {{  trans('productos.nombreVacio') }}	",
          type: "info",
          animation: false,
          showConfirmButton: true
        });
        return;
      }

      acopañantes.push(newAcompa);
      $("#tableAcompañante").empty();
      var id = 1;
      for (let index = 0; index < acopañantes.length; index++) {

        $("#tableAcompañante").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+acopañantes[index]+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarAcompa('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
        id = id+1;

      }
      $("#newAcompa").val('');
      $("#tableAcompa").show();
    }

    function eliminarAcompa(item){
      acopañantes.splice(item, 1);
      $("#tableAcompañante").empty();
      var id = 1;
      if (acopañantes.length !== 0) {
        for (let index = 0; index < acopañantes.length; index++) {

          $("#tableAcompañante").append('<tr><td class="text-center">'+id+'</td><td class="text-center"">'+acopañantes[index]+'</td><td  class="text-center""><a href="javascript:;" onclick="eliminarAcompa('+index+')" class="btn btn-danger" ><i class="fa fa-trash"></i></a></td></tr>');
          id = id+1;

        }
      }else{
        $("#tableAcompa").hide();
      }


    }

    function enviarDatos(){
      $('#foto').val(nombreImagen);
      ingredientesObliga.forEach(element => {
        $("#formCreate").append('<input type="hidden" name="ingreObligaTotal[]" value="'+element+'">');
      });
      ingredientes.forEach(element => {
        $("#formCreate").append('<input type="hidden" name="ingreTotal[]" value="'+element+'">');
      });
      adicionales.forEach(element => {
        $("#formCreate").append('<input type="hidden" name="adicioTotal[]" value="'+element.nombre+','+element.valor+'">');
      });
      acopañantes.forEach(element => {
        $("#formCreate").append('<input type="hidden" name="acompaTotal[]" value="'+element+'">');
      });
      $("#formCreate").submit();
    }

    function importarIngredientes(){
      var ic = $('#subCategorias').val();
      if(ic == null)
      {
        swal("Error", " {{  trans('productos.ningunaCategoria') }} ", "error");
        return
      }

      swal({
        title: " {{  trans('productos.importarIngredientes') }} ",
        text: " {{  trans('productos.ingredientesCategoria') }}",
        buttons: {
          cancel: " {{  trans('productos.salir') }} ",
          confirm: {
            text: " {{  trans('productos.anularPedido') }} ",
            value: "confirm",
          },
        },
        dangerMode: true,
      },
        function(value) {
        if (value){
          var formData = new FormData();
          formData.append("idCategoria", ic);

          $.ajax({
            url: UrlHost_+"/administrator/productos/categorias/importsIngredientes",
            data: formData,
            type: 'post',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
              swal({
                title: " {{  trans('productos.cargando') }} ",
                text: '<div class="container"><div class="row"><div class="col-12"><div class="loaderProduct"></div></div></div></div>',
                html: true,
                animation: false,
                showConfirmButton: false
              });
            },
            success: function(response){
              if (response.code == 200) {
                processIngredientes(response.data)
                swal(' {{  trans('productos.muyBien') }} ', response.mensaje, "success");
              }else{
                swal('Error!', response.mensaje, "info");
              }
            },
            error: function(xhr){
              
            }
          });
        }else{
          swal.close()
        }
      });
    }

    function processIngredientes(datos)
    {
      //Ingredientes adicionales
      if(datos[0].length > 0)
      {
        var num = 1;
        datos[0].forEach(element => {
          adicionales.push({nombre: element.nombre, valor: element.valor})
          $('#tableAdicioBody').append(`
            <tr>
              <td class="text-center">${num}</td>
              <td class="text-center">${element.nombre}</td>
              <td class="text-center">${element.valor}</td>
              <td class="text-center"><a href="javascript:;" onclick="eliminarAdicio(${adicionales.length - 1})" class="btn btn-danger"><i class="fa fa-trash"></i></a></td>
            </tr>
          `);
          num++;
        });
        $('#tableAdicio').css('display', '')
      }

      //Ingredientes base
      if(datos[1].length > 0)
      {
        var num = 1;
        datos[1].forEach(element => {
          ingredientes.push(element.nombre);
            $('#tableIngreBody').append(`
              <tr>
                <td class="text-center">${num}</td>
                <td class="text-center">${element.nombre}</td>
                <td class="text-center"><a href="javascript:;" onclick="eliminarIngre(${ingredientes.length-1})" class="btn btn-danger"><i class="fa fa-trash"></i></a></td>
              </tr>
            `);
            num++;
        });
        $('#tableIngre').css('display', '')
      }

      //Ingredientes obligatorios
      if(datos[2].length > 0)
      {
        var num = 1;
        datos[2].forEach(element => {
          ingredientesObliga.push(element.nombre);
            $('#tableIngreBodyObliga').append(`
              <tr>
                <td class="text-center">${num}</td>
                <td class="text-center">${element.nombre}</td>
                <td class="text-center"><a href="javascript:;" onclick="eliminarIngreObliga(${ingredientesObliga.length-1})" class="btn btn-danger"><i class="fa fa-trash"></i></a></td>
              </tr>
            `);
            num++;
        });
        $('#tableIngreObligatorio').css('display', '')
      }

      //Ingredientes acompañantes
      if(datos[3].length > 0)
      {
        var num = 1;
        datos[3].forEach(element => {
          acopañantes.push(element.nombre);
          $('#tableAcompañante').append(`
            <tr>
              <td class="text-center">${num}</td>
              <td class="text-center">${element.nombre}</td>
              <td class="text-center"><a href="javascript:;" onclick="eliminarAcompa(${acopañantes.length-1})" class="btn btn-danger"><i class="fa fa-trash"></i></a></td>
            </tr>
          `);
          num++;
        });
        $('#tableAcompa').css('display', '')
      }
    }
  </script>



  <script type="text/javascript">
    function slugProduct(value) {
      var slugProduct = value.toLowerCase();
      var userName = "{!! Auth::user()->userName !!}";
      var slug = slugProduct.replace(/[ ]/gi,'-');
      $('#slug').val(slug+'-'+userName);
    }

    // $("#value").on({
    //   "focus": function (event) {
    //       $(event.target).select();
    //   },
    //   "keyup": function (event) {
    //       $(event.target).val(function (index, value ) {
    //           return value.replace(/\D/g, "")
    //                       .replace(/([0-9])([0-9]{0})$/, '$1$2')
    //                       .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
    //       });
    //   }
    //});

    var $modal = $('#modal'); 
    var image = document.getElementById('image'); 
    var cropper; 
    var nombreImagen;

    $("body").on("change", ".image", function(e){

      var files = e.target.files; 
      var done = function (url) { 
        image.src = url; 
        $modal.modal('show'); 
      }; 

      var reader; 
      var file; 
      var url; 

      if (files && files.length > 0) { 

        file = files[0]; 
        if (URL) { 
          done(URL.createObjectURL(file)); 
        } else if (FileReader) { 
          reader = new FileReader(); 
          reader.onload = function (e) { 
            done(reader.result); 
          }; 
          reader.readAsDataURL(file); 
        } 
      } 
    }); 

    

    $modal.on('shown.bs.modal', function () { 

      cropper = new Cropper(image, { 
        aspectRatio: 1, 
        viewMode: 3, 
        preview: '.preview'
      }); 
    }).on('hidden.bs.modal', function () { 

      cropper.destroy(); 
      cropper = null; 
    }); 

    

    $("#crop").click(function(){ 

      canvas = cropper.getCroppedCanvas({ 
        width: 160, 
        height: 160, 
      }); 

      canvas.toBlob(function(blob) { 

        url = URL.createObjectURL(blob); 
        var reader = new FileReader(); 
        reader.readAsDataURL(blob);  
        reader.onloadend = function() { 
          var base64data = reader.result;	 
          nombreImagen = base64data;
          $modal.modal('hide'); 
        } 
      }); 
    })

  </script>
@endsection