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

@section('style')
  <style media="screen">
    .loaderProduct {
      border: 5px solid #f3f3f3;
      border-radius: 50%;
      border-top: 5px solid #1e88e5;
      width: 50px;
      height: 50px;
      margin: auto;
      -webkit-animation: spin 0.7s linear infinite; /* Safari */
      animation: spin 0.7s linear infinite;
    }
    .preview { 
      overflow: hidden; 
      width: 160px;  
      height: 160px;     
      margin: 10px;     
      border: 1px solid red;     
    }     
    .modal-lg{    
      max-width: 1000px !important;    
    } 

    /* Safari */
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

  </style>
@endsection

@section('title')
{{  trans('promociones.tituloPromocionesEditar') }}
@endsection

@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('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

  <div class="row">
    <div class="col-12">
      <div class="info-box">
        <div class="box-header with-border">
          <h3 class="box-title"> {{  trans('promociones.tituloPromocionesEditar') }} </h3>
        </div>
        <div class="row">
          <div class="col">
            <div class="card">
              <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>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="text-center">
                      @php
                          $i=0;
                      @endphp
                      @if ($product->idProducto == $promociones->idProducto)
                          <td>{{ $promociones->funProduct->nombre }}</td>
                          <td>{{ $promociones->funProduct->valor }}</td>
                          <td>
                            <input type="number" name="detalle_cantidad" id="cantidad_{{ $i }}"
                              required placeholder=" {{  trans("promociones.ingreseLaCantidadDe") }}"
                              class="form-control" onchange="valorTotal({{ $i }}, {{ $promociones->funProduct->valor }})"
                              value="{{$promociones->porcentaje}}"  min="1"  required>
                          </td>
                          <td>
                              <span id="total_{{$i}}">{{App\Helpers\monedaH::getCurrentSimbol()}} {{$precioPromo}}</span>
                          </td>
                      @endif
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="info-box">
        <div class="text-center" style="width:100%;">
          <img src="{{env('Image')}}{{$promociones->imagen}}" style="width:100%;border-radius: 10px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);" alt="image">
        </div>
        <form id="formImagenP">
          <div class="form-group" style="margin-bottom: auto;margin-top: 15px;">
            <div class="input-group">
              <input type="file" name="imagen" id="imagen" class="form-control image">
              <input type="hidden" name="image" id="foto" >
              <span class="input-group-btn">
                <button type="submit" class="btn btn-info" data-toggle="tooltip" title="Subir Nueva imagen"><i class="fa fa-upload" aria-hidden="true"></i></button>
              </span>
            </div>
          </div>
        </form>
      </div>
      <div class="info-box bg-blue" style="min-height: 0;">
        <div class="container">
          <div class="row">
            <div class="col-12 text-center">
              <h2 class="font-weight-500">{{App\Helpers\monedaH::getCurrentSimbol()}} <span id="valueTitle">{{$promociones->precio}}</span></h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="info-box">
        <div class="card">
          <div class="card-header">
            <h5> {{  trans('promociones.actualizacionPromocios') }} </h5>
          </div>
          <div class="card-body">
            <form action="{{route('promociones.editPromo')}}" method="post" id="formActualizarProm">
              @csrf
              <small class="small">{{ trans('template.camposcon') }} (<span class="text-danger">*</span>) {{ trans('template.obligatorios') }}</small>
  
              <input type="hidden" name="idPromocion" value="{{$promociones->idPromociones}}">
              <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" value="{{$promociones->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" name="fechaPromo" id="fechaPromo" required value="{{date('d/m/Y', strtotime($promociones->fecha_finalizacion))}}">
                      </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="5">{{$promociones->tipoComida}}</textarea>
                              <small> {{  trans('promociones.facilFiltrado') }}	</small>
                          </div>
                      </div>
                </div>
              <div class="row pb-5">
                  <div class="col-lg-12">
                        <div class="row">
                          <div class="col-md-12">
                            <h4> {{  trans('promociones.seleccionarServicios') }}	</h4>
                                <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">
                                    </tbody>
                                </table>
                          </div>
                        </div>
                  </div>
                </div>
                <br>
                <div class="row">
                  <div class="col-md-12 text-center pt-5">
                    <a href="javascript:;" onclick="sendForm()" class="btn btn-info"> {{  trans('promociones.actualizarPromocion') }} </a>
                  </div>
                </div>
            </form>
          </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 type="text/javascript">
    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 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") {
          $("#MaxA").val("");
        }

      }
    }
    
    function validarValor(numero){
      if (!/^([0-9])*$/.test(numero)){
        document.getElementById("valorAdicio").value="";
      }
    }
    
  </script>

  {{-- Script Delete Imagenes --}}
  <script type="text/javascript">
    function deleteImagenes(idImagen) {
      var idProducto = {{$product->idProducto}};
      var formData = new FormData();
      formData.append("idProducto", idProducto);
      formData.append("idImagen", idImagen);

      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/administrator/promociones/deleteImagenes",
        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('promociones.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.state == 1) {
            $('#selectEstado').val(value);
            swal({
              title: response.title,
              text: response.message,
              type: "success",
              confirmButtonColor: "#1e88e5",
              confirmButtonText: "Ok!",
              closeOnConfirm: false
            },
            function(){
              location.reload();
            });
          }else if (response.state == 2) {
            swal({
              title: response.title,
              text: response.message,
              type: "info",
              animation: false,
              showConfirmButton: true
            });
          }else{
            swal({
              title: response.title,
              text: response.message,
              type: "warning",
              animation: false,
              showConfirmButton: true
            });
          }
        },
        error: function(xhr){
          
          swal("Ups!", " {{  trans('promociones.errorMessage') }}	", "warning");
      	}
      });
    }
  </script>

  {{-- Script Guardar Imagenes del Producto --}}
  <script type="text/javascript">
    var i = 1;
    var ids = [];
    $("#formImagenP").on("submit", function(e){
      e.preventDefault();
      var idProducto = {{$product->idProducto}};
      $('#foto').val(nombreImagen);
      var formData = new FormData(document.getElementById("formImagenP"));
      formData.append("idProducto", idProducto);

      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/administrator/promociones/updateImage",
        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('promociones.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.state == 1) {
            swal({
              title: response.title,
              text: response.message,
              type: "success",
              confirmButtonColor: "#1e88e5",
              confirmButtonText: "Ok!",
              closeOnConfirm: false
            },
            function(){
              location.reload();
            });
          }else if (response.state == 2) {
            swal({
              title: response.title,
              text: response.message,
              type: "info",
              animation: false,
              showConfirmButton: true
            });
          }else{
            swal({
              title: response.title,
              text: response.message,
              type: "warning",
              animation: false,
              showConfirmButton: true
            });
          }
        },
        error: function(xhr){
          
          swal("Ups!", " {{  trans('promociones.errorMessage') }} ", "warning");
      	}
      });
    });

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

    function consultarService() {
      var selectM = {!! json_encode($servicios) !!};
      var dataservice = {!! json_encode($dataService) !!}
        $.each(selectM, function(j, listSelect){
          //activar todos los checked
          switch (listSelect.idValorParametro){
            case 36:
            if (dataservice[0].ordenar == 1) {$("#typeService_"+listSelect.idValorParametro).attr("checked", true);}
            break;
            case 37:
            if (dataservice[0].parallevar == 1) {$("#typeService_"+listSelect.idValorParametro).attr("checked", true);}
            break;
            case 38:
            if (dataservice[0].domicilio == 1) {$("#typeService_"+listSelect.idValorParametro).attr("checked", true);}
            break;
          }

        });
    }

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

    
    function sendForm(){
      var detalles = [];
      var detalleInputsCantidad = document.getElementsByName("detalle_cantidad");
      if (detalleInputsCantidad.length == 0) {
        swal({
          title: " {{  trans('entradas.noHaSeleccionadoPro') }}",
          text: " {{  trans('entradas.porFavorAñadeProducto') }}",
          showConfirmButton: true
        });
      } else {  
          for (let index = 0; index < detalleInputsCantidad.length; index++) {
            const valueDetallePre = detalleInputsCantidad[index].value;
            const valueCANTIDAD = document.getElementById('cantidad_'+index).value;
            const valuePrecio = document.getElementById('total_'+index).innerHTML;
              if (valueDetallePre == null || valueDetallePre == "") {
                swal({
                    title: " {{  trans('entradas.camposVacios') }}",
                    text: " {{  trans('entradas.porFavorLleneLosCampos') }}",
                    showConfirmButton: true
                });
              } else {
                detalles.push({
                    precioU: valuePrecio,
                    porcentaje: valueCANTIDAD,
                });
                
              }
            
          }
        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);
        $("#checkboxService").val(toService);
        $("#detalles").val(productoDetalles);
        $("#formActualizarProm").submit();
      }
    }

    // RECORTAR IMAGEN

    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