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

@section('cabecera')
  <div class="row">
    <div class="col-6">
      <h1 style="margin: 15px 0 10px 0;">
      <a href="{{route('promociones.porcentual')}}" class="btn btn-default btn-sm"> <i class="fa fa-arrow-left"></i>  {{  trans('promociones.regresar') }} </a>
      </h1>
    </div>
    <div class="col-6 text-right">
      <h1>
        <small> {{  trans('promociones.platoPromocion') }} </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('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('title')
  {{  trans('promociones.platoPromocionCrear') }}
@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('promociones.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('promociones.agregarPlatoPromocion') }} </h3>
        </div>
        <br>
        <div class="row">
          <div class="col">
              <div class="card">
                  <div >
                      <h3 class="card-title"> {{  trans('promociones.seleccionarPlato') }}
                        <button class="btn btn-success btn-sm float-right" data-toggle="modal" data-target="#agregarPlato" id="buscarPlato"><i class="fa fa-plus"></i></button>
                      </h3>
                  </div>
                  <div class="card-body">
                      <table class="table table-striped" id="tbProduct">
                          <thead>
                              <tr>
                              <th class="text-center"><strong>  {{  trans('promociones.nombre') }}</strong></th>
                              <th class="text-center"> <strong>  {{  trans('promociones.precio') }}</strong></th>
                              <th class="text-center"> <strong>  {{  trans('promociones.descuento') }}</strong></th>
                              <th class="text-center"><strong>  {{  trans('promociones.valorTotal') }}</strong></th>
                              <th class="text-center"> <strong>  {{  trans('promociones.opciones') }}</strong></th>
                          </tr>
                          </thead>
                          <tbody>
  
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
  
      </div>
        <div class="box-body">
          <form action="{{route('promociones.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('numPersonas') ? 'has-error' : '' }}">
                      <label for="numPersonas"> {{  trans('promociones.numeroPersonas') }} <span class="text-danger">*</span></label>
                      <input type="number" min="0" class="form-control" name="numPersonas" onkeyup="numero(this.value, 'numPersonas')" id="numPersonas">
                  </div>
              </div>
              <div class="col-md-6">
                <div class="form-group {{ $errors->has('fechaPromo') ? 'has-error' : '' }}">
                      <label for="fechaPromo"> {{  trans('promociones.fechaFinalizacion') }} <span class="text-danger">*</span></label>
                      <input type="text" class="form-control" autocomplete="off" name="fechaPromo" id="fechaPromo" required>
                  </div>
              </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group {{ $errors->has('tipoComida') ? 'has-error' : '' }}">
                          <label for="tipoComida"> {{  trans('promociones.tipoComida') }} <span class="text-danger">*</span></label>
                          <textarea class="form-control" name="tipoComida" id="tipoComida" cols="30" rows="10"></textarea>
                          {{-- <input type="text"  name="tipoComida" id="tipoComida"> --}}
                          <small> {{  trans('promociones.facilFiltrado') }}	</small>
                      </div>
                  </div>
            </div>
            <hr>
            <div class="row pb-5">
                <div class="col-lg-12">
                  {{-- <div class="info-box">
                    <div class="box-body"> --}}
                      <div class="row">
                        <div class="col-md-12">
                          <h4> {{  trans('promociones.seleccionarServicios') }} </h4>
                          {{-- <div class="col-md-12"> --}}
                              <table class="col-md-12">
                                  <thead>
                                      <tr class="text-left col-md-12">
                                        @if ( App::getLocale() != 'es')
                                          @foreach($servicios as $servicio)
                                              <th class="col-md-3" style="width:30% !important;">{{$servicio->nombre_ingles}}</th>
                                          @endforeach
                                        @else
                                          @foreach($servicios as $servicio)
                                              <th class="col-md-3" style="width:30% !important;">{{$servicio->nombre}}</th>
                                          @endforeach
                                        @endif
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr class="col-md-12 text-left">
                                          @foreach($servicios as $servicio)
                                                  <td class="col-md-3" style="width:30% !important;">
                                                      <label class="switch">
                                                          <input type="checkbox" name="typeService" onclick="changeService({{$servicio->idValorParametro}})" id="typeService_{{$servicio->idValorParametro}}" value="{{$servicio->idValorParametro}}" class="success service_{{$servicio->idValorParametro}}">
                                                          <span class="slider round"></span>
                                                      </label>
                                                  </td>
                                          @endforeach
                                      </tr>
                                      <input type="hidden" name="checkboxService" id="checkboxService">
                                      <input type="hidden" name="detalles" id="detalles">
                                      <input type="hidden" name="tipo_promo" id="tipo_promo">
                                  </tbody>
                              </table>
                          {{-- </div> --}}
                        </div>
                      </div>
                    {{-- </div>
                  </div> --}}
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-md-12">
                <div class="form-group {{ $errors->has('slider') ? 'has-error' : '' }}">
                    <label for="slider"> {{  trans('promociones.imagenSlider') }}	</label>
                    <div class="controls">
                    <input type="file" name="slider" id="slider" class="image" required>
                    <input type="hidden" name="image" id="foto" >
                    </div>
                    <small> {{  trans('promociones.imagenProducto') }} </small>
                </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('promociones.agregarPlato') }}</a>
                </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  {{-- modal agregar plato --}}
  <div class="modal fade" id="agregarPlato" tabindex="-1" role="dialog" aria-labelledby="agregarPlatoLabel"aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="AgregarPlatoLabel"> {{  trans('promociones.seleccionarPlato') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col">
              <div class="form-group">     
                <span id="respuesta"></span>
                <div class="row">
                  <div class="col-md-12">
                    <input name="filtro" 
                      id="filtro" 
                      class="form-control"
                      placeholder="{{  trans('promociones.nombrePlatoFiltro') }}" 
                      onchange="filtrar()"
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <table class="table table-bordered table-responsive" id="tbActualizar">
            <thead>
              <th class="text-center"> {{  trans('promociones.platos') }}</th>
            </thead>
            <tbody>
            </tbody>
          </table>
          <div class="modal-footer text-center">
            <button type="button" class="btn btn-danger" data-dismiss="modal"> {{  trans('entradas.cerrar') }}</button>
          </div>
        </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>
    function numero(valor, tipo) {
      var expresion = /^\d*[\.]?[\d]*$/;
      var resultado = expresion.test(valor);
      if(!resultado) {
        //NADA BIEN
        swal("Info!", " {{  trans('promociones.campoNumerico') }}", "info");
        if(tipo == "tiempo") {
          $("#tiempo").val("");
        }else if(tipo == "acompañante") {
          $("#tiempo").val("");
        }

      }
    }
  </script>
  <script type="text/javascript">
      var i = 1;
      var ids = [];
 
    $("#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, "")
            });
        }
    });

    function changeService(idService) {
      if($('.service_'+idService).is(':checked') ) {
        $("#typeService_"+idService).attr("disabled", false);
      }else{
        $("#typeService_"+idService).attr("checked", true);
      }
    }

    $( document ).ready(function() {

      $( "#fechaPromo" ).datepicker({
          format: 'dd/mm/yyyy'
        });
    });

    function filtrar(){
        var validad = document.getElementById('filtro').value;
        var data = {
        buscar: validad,
        }
        
        $.ajax({
            url: UrlHost_ + "/administrator/promociones/filtro",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                // document.getElementById('respuesta').innerHTML=" <div class='alert alert-info'>Cargando...</div>";
            },
            success: function(response) {
                if (response.code == 200) {
                    document.getElementById('respuesta').innerHTML=" <div class='alert alert-success'>Encontrado!! </div>";
                    
                    var nFilas = $("#tbActualizar tr").length;
                    for (let index = 0; index < nFilas; index++) {
                        $('#rowEditar'+index+ '').remove(); //borra la filac
                    }

                    var array=response.data;
                    for (let index2 = 0; index2 < array.length; index2++) {
                        const element = array[index2];
                        const idEd=element.idProducto;
                        var agregar='<tr id="rowEditar'+index2+'" >'+
                                    '<td>'+
                                    '<div class="card">'+
                                        '<div class="card-body"><div>'+
                                            'Nombre: <b>'+element.nombre+'</b>&nbsp&nbsp&nbsp&nbsp'+
                                            'Precio: <b>'+element.valor+
                                            ' <button class="btn btn-info float-right"'+
                                            ' onclick="añadirByID('+idEd+')">Añadir</button></div>'+
                                            '</div>'+
                                            '</div>'+
                                            ' </td>'+
                                            '</tr>';
                                            $('#tbActualizar tr:first').after(agregar)

                    }
                }else{
                  document.getElementById('respuesta').innerHTML=" <div class='alert alert-danger'>No existe!! </div>";
                }
            }
        });
        if (document.getElementById('filtro').value.length==null) {
        document.getElementById('respuesta').innerHTML="";
        }
    }

    function añadirByID(id) {
        var item;
        var data = {
            buscar: null,
            ids: id  ,
        }
        var host = "{{ $_SERVER['HTTP_HOST'] }}";
        $.ajax({
            url: UrlHost_ + "/administrator/promociones/filtro",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                swal({
                title: " {{  trans('aforo.cargando') }}	",
                text: " {{  trans('aforo.espereUnMomento') }}",
                showConfirmButton: false
            });
            },
            success: function(response) {
                item = response;
                ids = item.idProducto;
                var nFilas = $("#tbProduct tr").length;
                i = nFilas-1;
                var fila = '<tr id="row' + i + '">' +
                '<td class="text-center">' + item.nombre + '</td>' +
                '<td class="text-center" name="valorProducto" id="precio_' + i + '">' + item.valor + '</td>' +
                '<td class="text-center"> <input type="text" onkeyup="numero(this.value)" autocomplete="off" name="detalle_cantidad" id="cantidad_' +
                i + '" min="1" required placeholder=" {{  trans("promociones.ingreseLaCantidadDe") }}'+
                '" class="form-control" onchange="valorTotal(' + i +"," +item.valor+')"></td>' +

                '<td class="text-center"> <span id="total_' + i + '"></span> </td>' +
                '<td class="text-center"> <button class="btn btn-danger   " onclick="eliminar(' + i +
                ')" ><i class="fa fa-trash" aria-hidden="true"></i></button> </td>' +
                '</tr>';

                i = i + 1;
                $('#tbProduct tr:first').after(fila);
                $("#agregarPlato").modal('hide'); //ocultamos el modal
                $('body').removeClass('modal-open'); //eliminamos la clase del body para poder hacer scroll
                $('.modal-backdrop').remove(); //eliminamos el backdrop del modal
                $("#buscarPlato").fadeOut();
                swal.close();
            }

        });
    }

    function eliminar(i) {
        $('#row' + i + '').remove(); //borra la fila
        $("#buscarPlato").fadeIn();

    }

    function numero(valor) {
        var expresion = /^\d*[\.]?[\d]*$/;
        var resultado = expresion.test(valor);
        if(!resultado) {
            //NADA BIEN
            swal("Info!", " {{  trans('monedas.campoNumerico') }} ", "info");
        }
    }

    function valorTotal(i, valor){
        var valorPrecio = valor;
        var valorCantidad = document.getElementById('cantidad_'+i).value;
        var porcentaje = valorPrecio*valorCantidad;
        var porcentaje2 = porcentaje/100;
        var total=valorPrecio-porcentaje2;
        document.getElementById('total_'+i).innerHTML="{{App\Helpers\monedaH::getCurrentSimbol()}} "+total ;
    }
      
    function enviarDatos(){
      var detalles = [];
      var detalleInputs = document.getElementsByName("valorProducto");
      var detalleInputsCantidad = document.getElementsByName("detalle_cantidad");
      if (detalleInputs.length == 0) {
        swal({
          title: " {{  trans('entradas.noHaSeleccionadoPro') }}",
          text: " {{  trans('entradas.porFavorAñadeProducto') }}",
          showConfirmButton: true
        });
      } else {  
        for (let index = 0; index < detalleInputs.length; index++) {
          const valueCANTIDAD = document.getElementById(detalleInputsCantidad[index].id).value;
          const valuePrecio = document.getElementById('total_'+index).innerHTML;
          const id = ids;
          if (id == null) {
              swal({
                  title: " {{  trans('entradas.noHaSeleccionadoPro') }}",
                  text: " {{  trans('entradas.porFavorAñadeProducto') }}",
                  showConfirmButton: true
              });
          } else {
              if (valueCANTIDAD == null || valueCANTIDAD == "") {
                  swal({
                      title: " {{  trans('entradas.camposVacios') }}",
                      text: " {{  trans('entradas.porFavorLleneLosCampos') }}",
                      showConfirmButton: true
                  });
              } else {
                  detalles.push({
                      precioU: valuePrecio,
                      porcentaje: valueCANTIDAD,
                      idProducto: id,
                  });
                  
              }
          }
        }
        var arrayService = new Array();
        $('input[name="typeService"]').each(function(element) {
          var item = {};
          item.id = this.value;
          item.status = this.checked;
          arrayService.push(item);
        });
        var toService = JSON.stringify(arrayService);
        var productoDetalles = JSON.stringify(detalles);
        var tipoPromo = 1;
        $("#checkboxService").val(toService);
        $("#detalles").val(productoDetalles);
        $("#tipo_promo").val(tipoPromo);
        $('#foto').val(nombreImagen);
        $("#formCreate").submit();
      } 
    }


    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