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

@section('style')
<style media="screen">
  .disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  .modal-xl {
    width: 90%;
    max-width: 1200px;
  }

  /* Los modales no pueden estar encima de uno del otro */
  /* Esto arregla ese problema.  */
  .modal {
    overflow-y: auto;
  }

  .preview {
    overflow: hidden;
    width: 160px;
    height: 160px;
    margin: 10px;
    border: 1px solid red;
  }

  .modal-lg {
    max-width: 1000px !important;
  }
</style>
@endsection

@section('title')
Promociones NxM
@endsection

@section('cabecera')
	@include('system.promociones.cabecera')
	<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')
<div class="row">

  <div class="col-12">

  </div>
  <div class="box">
    <div class="box-header with-border">
      <div class="row">
        <div class="col-md-6">
          <h3 class="box-title"> Lista de Promociones NxM<i data-toggle="collapse" href="#collapseExample"
              class="fa fa-filter" aria-hidden="true"></i></h3>
        </div>
        <div class="col-md-6 text-right">
          <a class="btn btn-sm btn-info" data-toggle="modal" data-target="#createPromocionNxMModal" onclick="resetCreatePromotionForm()"><i
              class="fa fa-plus"></i></a>
        </div>

      </div>
    </div>
    <div class="box-body">
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          <form action="" method="get">
            <div class="row">
              <div class="col-2"></div>
              <div class="col-4">
                <div class="form-group">
                  <label for="nombre"> {{ trans('promociones.nombre') }} </label>
                  <input type="text" name="nombre" id="nombre" class="form-control" autocomplete="off"
                    placeholder="{{  trans('promociones.nombre') }}">
                </div>
              </div>
              <div class="col-4">
                <div class="form-group">
                  <label for="valorProducto"> {{ trans('promociones.valorPromo') }} </label>
                  <input type="text" name="valorProducto" class="form-control" id="valorProducto" autocomplete="off"
                    placeholder=" {{  trans('promociones.valorPromoPlace') }} ">
                </div>
              </div>
              <div class="col-2"></div>
            </div>
            <div class="row">
              <div class="col-2"></div>
              <div class="col-3">
                <div class="form-group">
                  <label for="estado"> {{ trans('promociones.estado') }} </label>
                  <select id="estado" name="estado" class="form-control">
                    <option value=""> {{ trans('promociones.seleccionEstado') }} </option>
                    <option value="1"> {{ trans('promociones.activo') }} </option>
                    <option value="0"> {{ trans('promociones.inactivo') }} </option>
                  </select>
                </div>
              </div>
              <div class="col-2"></div>
            </div>
            <div class="row">
              <div class="col-12 text-center">
                <input type="submit" class="btn btn-info btn-sm" value="{{trans('promociones.buscar')}}">
                <a href="{{route("promociones.nxm")}}" class="btn btn-info btn-sm">{{trans('promociones.borrarFiltros')}}</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <table class="table table-bordered table-responsive" id="tbPromocionesNxM">
      <thead>
        <tr>
          <th class="text-center"> {{ trans('promociones.imagen') }} </th>
          <th class="text-center"> {{ trans('promociones.nombre') }} </th>
          <th class="text-center"> {{ trans('promociones.valor') }} </th>
          <th class="text-center"> {{ trans('promociones.categoria') }} </th>
          <th class="text-center"> {{ trans('promociones.comanda') }} </th>
          <th class="text-center"> {{ trans('promociones.estado') }} </th>
          <th class="text-center"> {{ trans('promociones.opciones') }} </th>
        </tr>
      </thead>
      <tbody>
        @foreach ($promociones as $listproduct)
        @if ($listproduct->funProduct != null)
        <tr>
          <td style="vertical-align: middle;" class="text-center">
            @if($listproduct->imagen == null)
            <img
              src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/sinImagen/fotoSinImagen/sinImagen.jpg'}}"
              style="border-radius: 5px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.15)" width="50">
            @else
            <img class="img-responsive" style="border-radius: 5px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.15)"
              src="{{env('Image')}}{{$listproduct->imagen}}" width="50">
            @endif
          </td>
          <td style="vertical-align: middle;" class="text-center">
            {{$listproduct->nombre}}...
            <a href="{{route('calificacion')}}">
              @switch($listproduct->funProduct->valoracion)
              @case(1)
              <i style="color:yellow" class="fa fa-star fa-2x"></i>
              @break
              @case(2)
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              @break
              @case(3)
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              @break
              @case(4)
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              @break
              @case(5)
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              <i style="color:yellow" class="fa fa-star"></i>
              @break
              @default
              @endswitch
            </a>
          </td>
          <td style="vertical-align: middle;" class="text-center">{{App\Helpers\monedaH::getCurrentSimbol() ." ".
            number_format($listproduct->precio, 2, ',', '.')}}</td>
          <td style="vertical-align: middle;" class="text-center">{{$listproduct->funProduct->funsubCategoria->nombre}}
          </td>
          @if($listproduct->funProduct->funComanda)
          <td style="vertical-align: middle;" class="text-center">{{$listproduct->funProduct->funComanda->nombre}}</td>
          @else
          <td style="vertical-align: middle;" class="text-center"> {{ trans('promociones.sinComanda') }} </td>
          @endif
          <td style="vertical-align: middle;" class="text-center">
            @if ($listproduct->state == 1)
            <a href="javaScript:;" onclick="cambiarEstado({{$listproduct->idPromociones}},0)">
              <span class="badge" id="selectEstado" style="background:rgb(1, 151, 1)"> {{ trans('promociones.activo')
                }}</span>
            </a>
            @elseif($listproduct->state == 0)
            <a href="javaScript:;" onclick="cambiarEstado({{$listproduct->idPromociones}},1)">
              <span class="badge" id="selectEstado" style="background:rgb(212, 10, 10)"> {{
                trans('promociones.inactivo') }}</span>
            </a>
            @endif
          </td>
          <td style="vertical-align: middle;" class="text-center">
            <button class="btn btn-info" id="editCodeBtn" data-toggle="modal" data-target="#editPromocionNxMModal"
              onclick="prepareEditPromocionNxMModal({{$listproduct->idPromociones}})"><i
                class="fa fa-pencil-square-o"></i></button>
            <button class="btn btn-warning" id="viewCodeBtn" data-toggle="modal" data-target="#viewPromocionNxMModal"
              onclick="prepareViewPromocionNxMModal({{$listproduct->idPromociones}})"><i
                class="fa fa-eye"></i></button>
            <button class="btn btn-danger" id="deleteCodeBtn" data-toggle="modal"
              data-target="#deletePromocionNxMModal"
              onclick="prepareDeletePromocionNxMModal({{$listproduct->idPromociones}})"><i
                class='fa fa-trash'></i></button>
          </td>
        </tr>
        @endif
        @endforeach
      </tbody>
    </table>
  </div>
</div>


<!-- Modal para crear promoción nxm -->
<x-promociones.nx-m.modal-crear--promocion-nxm :errors="$errors" :servicios="$servicios"></x-promociones.nx-m.modal-crear--promocion-nxm>

<!-- Modal para editar promoción nxm -->
<x-promociones.nx-m.modal-editar--promocion-nxm :errors="$errors" :servicios="$servicios"></x-promociones.nx-m.modal-editar--promocion-nxm>

<!-- Modal para ver promoción nxm -->
<x-promociones.nx-m.modal-eliminar--promocion-nxm></x-promociones.nx-m.modal-eliminar--promocion-nxm>

<!-- Modal para eliminar promoción nxm -->
<x-promociones.nx-m.modal-ver--promocion-nxm :errors="$errors" :servicios="$servicios"></x-promociones.nx-m.modal-ver--promocion-nxm>


<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">
  // Prepare
    function resetCreatePromotionForm() {
        let createPromotionForm = document.getElementById('formCreate');
        createPromotionForm.reset();
        $('#tbProductAgregarPromocion thead').empty();
        for (var w = i; w > i; w--) {
          eliminar(w);
        }
        let fila = "<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.opciones') }}</strong></th>"+
                    "</tr>";
        $('#tbProductAgregarPromocion thead').append(fila);
        $("#buscarPlato").fadeIn();
    }

  function populateEditProductoTable(productos) {
    //$('#tbProductVerPromocion tbody > tr').remove();
    $('#tbProductEditarPromocion tbody').empty();
    productos.forEach(function (value, index, array) {
      $('#tbProductEditarPromocion tbody').append(
        '<tr class="text-center" data-productValue="' + value["valor"] + '" data-productId="' + value["idProducto"] + '" id="row_id_producto_' + value["idProducto"] + '" name="editCurrentPromocionProduct">' +
        '<td>' + value["nombre"] + '</td>' +
        '<td>' + value["valor"] + '</td>' +
        '<td>' +
        '<button class="btn btn-danger" onclick=deleteElementEditTable(' + value["idProducto"] + ')><i class="fa fa-trash" aria-hidden="true"></i></button> ' +
        '</td>' +
        '</tr>'
      );
    });
  }

  function deleteElementEditTable(id) {
    $("#buscarEditarPlato").fadeIn();
    let row = document.getElementById("row_id_producto_" + id);
    row.remove();
  }

  function prepareEditPromocionNxMModal(id) {
    editPromocionNxMModal = document.getElementById('editPromocionNxMModal');
    editPromocionNxMModal.setAttribute("data-idPromocionNxM", id);
    var host = "{{$_SERVER["HTTP_HOST"]}}";
    var data = {
      id: id
    };
    $.ajax({
      url: "{{route("promociones.nxm.show")}}",
      data: data,
      type: 'get',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function () {
        swal({
          title: "Cargando datos de la promoción",
          text: "Espere un momento...",
          showConfirmButton: false,
        });
      },
      success: function (response) {
        if (response.code == 200) {
          /*
            id="editNombrePromo"
            id="editValorPromo"
            id="editFechaPromo"
            id="editNumPersonas"
            id="editTypeService_
            id="checkboxService"
            id="detalles"
            id="tipo_promo"
            id="slider"
            id="foto"
          */
          let form = document.getElementById('formEdit');
          form.elements["pagueN"].value = response.data.n_producto;
          form.elements["lleveM"].value = response.data.m_producto;

          editNombrePromo.value = response.data.nombre;
          editFechaPromo.value = response.data.fecha_finalizacion;
          editNumPersonas.value = response.data.numPersonas;
          editTipoComida.value = response.data.tipoComida;

            response.data.productos.forEach(function (value, index, array) {
              form.elements["precioPromoMostradoAlUsuario"].value = value["valor"] * response.data.n_producto;
              form.elements["precioPromoReal"].value = value["valor"];
              }
            );

          editIdPromocionNxM.value = id

          if (response.data.ordenar == 1) {
            editChangeService(36, true)
          }
          if (response.data.ordenar == 0) {
            editChangeService(36, false)
          }

          if (response.data.parallevar == 1) {
            editChangeService(37, true)
          }
          if (response.data.parallevar == 0) {
            editChangeService(37, false)
          }

          if (response.data.domicilio == 1) {
            editChangeService(38, true)
          }
          if (response.data.domicilio == 0) {
            editChangeService(38, false)
          }
          //viewTypeService.value = response.data;
          //viewSlider.value = response.data.imagen;
          populateEditProductoTable(response.data.productos);
          editImagenPromocion.src = "{{env('Image')}}" + response.data.imagen;
          $("#buscarEditarPlato").fadeOut();
          swal.close();
        } else {
          swal("Error", "Error al cargar datos de la promoción", "error");
        }
      },
      error: function (xhr, errorText, errorThrown) {
        swal("Error!", "Error al cargar datos de la promoción", "error");
      }
    });


  }

  function populateViewProductoTable(productos) {
    //$('#tbProductVerPromocion tbody > tr').remove();
    $('#tbProductVerPromocion tbody').empty();
    productos.forEach(function (value, index, array) {
      /*
        <tr>Nombre</tr><tr>Precio</tr><tr>Opciones</tr>
        <tr>...</tr><tr>...</tr><tr>...</tr>
        <tr>...</tr><tr>...</tr><tr>...</tr>
      */
      $('#tbProductVerPromocion tbody').append('<tr class="text-center"><td>' + value["nombre"] + '</td><td>' + value["valor"] + '</td></tr>');
    });
  }

  function prepareViewPromocionNxMModal(id) {
    viewPromocionNxMModal = document.getElementById('viewPromocionNxMModal');
    viewPromocionNxMModal.setAttribute("data-idPromocionNxM", id);
    var host = "{{$_SERVER["HTTP_HOST"]}}";
    var data = {
      id: id
    };
    $.ajax({
      url: "{{route("promociones.nxm.show")}}",
      data: data,
      type: 'get',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function () {
        swal({
          title: "Cargando datos de la promoción",
          text: "Espere un momento...",
          showConfirmButton: false,
        });
      },
      success: function (response) {
        if (response.code == 200) {
          /*
          "nombre"
          "precioPromoReal"
          "fecha_finalizacion"
          "numPersonas"
          "tipoComida"
          "servicios"
          "ordenar"
          "parallevar"
          "domicilio"
          "imagen"
          */
          let form = document.getElementById('formView');
          form.elements["pagueN"].value = response.data.n_producto;
          form.elements["lleveM"].value = response.data.m_producto;

          viewNombrePromo.value = response.data.nombre;
          viewFechaPromo.value = response.data.fecha_finalizacion;
          viewNumPersonas.value = response.data.numPersonas;
          viewTipoComida.value = response.data.tipoComida;

          form.elements["precioPromoMostradoAlUsuario"].value = response.data.precio;
          //viewTypeService.value = response.data;
          //viewSlider.value = response.data.imagen;
          if (response.data.ordenar == 1) {
            viewChangeService(36, true)
          }
          if (response.data.ordenar == 0) {
            viewChangeService(36, false)
          }

          if (response.data.parallevar == 1) {
            viewChangeService(37, true)
          }
          if (response.data.parallevar == 0) {
            viewChangeService(37, false)
          }

          if (response.data.domicilio == 1) {
            viewChangeService(38, true)
          }
          if (response.data.domicilio == 0) {
            viewChangeService(38, false)
          }

          populateViewProductoTable(response.data.productos);
          viewImagenPromocion.src = "{{env('Image')}}" + response.data.imagen;
          swal.close();
        } else {
          swal("Error", "Error al cargar datos de la promoción", "error");
        }
      },
      error: function (xhr, errorText, errorThrown) {
        swal("Error!", "Error al cargar datos de la promoción", "error");
      }
    });
  }
  function prepareDeletePromocionNxMModal(id) {
    deletePromocionNxMModal = document.getElementById('deletePromocionNxMModal');
    deletePromocionNxMModal.setAttribute("data-idPromocionNxM", id);
  }

  // Execute

  function editPromocionNxMForm() {
    let editPromocionNxMModal = document.getElementById('editPromocionNxMModal');
    id = editPromocionNxMModal.getAttribute('data-idPromocionNxM');
  }
  function viewPromocionNxMForm() {
    let viewPromocionNxMModal = document.getElementById('viewPromocionNxMModal');
    id = viewPromocionNxMModal.getAttribute('data-idPromocionNxM');
  }
  function deletePromocionNxMForm() {
    let deletePromocionNxMModal = document.getElementById('deletePromocionNxMModal');
    id = deletePromocionNxMModal.getAttribute('data-idPromocionNxM');
    var host = "{{$_SERVER["HTTP_HOST"]}}";
    var data = {
      id: id
    };
    $.ajax({
      url: "{{route("promociones.nxm.delete")}}",
      data: data,
      type: 'post',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function () {
        swal({
          title: "Eliminando...",
          text: "Espere un momento",
          showConfirmButton: false,
        });
      },
      success: function (response) {
        if (response.code == 200) {
          swal("Éxito", "Se ha eliminado correctamente la promoción nxm", "success");
          location.replace(location.href)
        } else {
          swal("Error", "Error al eliminar la promoción nxm", "error");
        }
      },
      error: function (xhr) {
        swal("Error!", "Error al eliminar la promoción nxm", "error");
      }
    });
  }

  // Al salir de un modal, se eliminará toda información digitada en este.

  function clearModalData(e) {
    $(this)
      .find("input,textarea,select")
      .val('')
      .end()
      .find("input[type=checkbox], input[type=radio]")
      .attr("checked", "")
      .end();
  }

  $('#createPromocionNxMModal').on('hidden.bs.modal', clearModalData);
  $('#agregarPlato').on('hidden.bs.modal', clearModalData);
  $('#editPromocionNxMModal').on('hidden.bs.modal', clearModalData);
  $('#viewPromocionNxMModal').on('hidden.bs.modal', clearModalData);
  $('#deletePromocionNxMModal').on('hidden.bs.modal', clearModalData);

  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);
    }
  }

  function viewChangeService(idService, state) {
    $("#viewTypeService_" + idService).attr("checked", state);
  }

  function editChangeService(idService, state) {
    $("#editTypeService_" + idService).attr("checked", state);
  }

  $(document).ready(function () {

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

  $(document).ready(function () {

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

  function filtrarAgregar() {
    var validad = document.getElementById('filtroAgregar').value;
    var data = {
      buscar: validad,
    }
    $.ajax({
      url: "{{route("promociones.filtro")}}",
      data: data,
      type: 'post',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function () {
        // document.getElementById('respuestaAgregar').innerHTML=" <div class='alert alert-info'>Cargando...</div>";
      },
      success: function (response) {
        if (response.code == 200) {
          document.getElementById('respuestaAgregar').innerHTML = " <div class='alert alert-success'>Encontrado!! </div>";
          var nFilas = $("#tbActualizarAgregar 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="agregarPlatoByID(' + idEd + ')">Añadir</button></div>' +
              '</div>' +
              '</div>' +
              ' </td>' +
              '</tr>';
            $('#tbActualizarAgregar tr:first').after(agregar)
            let form = document.getElementById('formCreate');
            form.elements["precioPromoReal"].value = parseInt(element.valor);
          }
          document.getElementById('respuestaAgregar').innerHTML = " <div class='alert alert-success'>Encontrado!! </div>";
        } else {
          document.getElementById('respuestaAgregar').innerHTML = " <div class='alert alert-danger'>No existe!! </div>";
        }
      }
    });
    if (document.getElementById('filtroAgregar').value.length == null) {
      document.getElementById('respuestaAgregar').innerHTML = "";
    }
  }

  function filtrarEditar() {
    var validad = document.getElementById('filtroEditar').value;
    var data = {
      buscar: validad,
    }
    $.ajax({
      url: "{{route("promociones.filtro")}}",
      data: data,
      type: 'post',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function () {
        // document.getElementById('respuestaEditar').innerHTML=" <div class='alert alert-info'>Cargando...</div>";
      },
      success: function (response) {
        if (response.code == 200) {
          document.getElementById('respuestaEditar').innerHTML = " <div class='alert alert-success'>Encontrado!! </div>";
          var nFilas = $("#tbActualizarEditarPlato 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="editarPlatoByID(' + idEd + ')">Añadir</button></div>' +
              '</div>' +
              '</div>' +
              ' </td>' +
              '</tr>';
            $('#tbActualizarEditarPlato tr:first').after(agregar)

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

  function agregarPlatoByID(id) {
    var item;
    var data = {
      buscar: null,
      ids: id,
    }
    var host = "{{ $_SERVER['HTTP_HOST'] }}";
    $.ajax({
      url: "{{route("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 = $("#tbProductAgregarPromocion tr").length;
        i = nFilas - 1;
        var fila = '<tr id="row' + i + '">' +
          '<td class="text-center">' + item.nombre + '</td>' +
          '<td class="text-center" name="valorProductoTabla" data-productoId="' + id + '" id="precio_' + i + '">' + item.valor + '<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>';

        let form = document.getElementById('formCreate');
        form.elements["precioPromoReal"].value = parseInt(item.valor);
        i = i + 1;
        $('#tbProductAgregarPromocion 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 editarPlatoByID(id) {
    var item;
    var data = {
      buscar: null,
      ids: id,
    }
    var host = "{{ $_SERVER['HTTP_HOST'] }}";
    $.ajax({
      url: "{{route("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;
        $('#tbProductEditarPromocion tbody').append(
          '<tr class="text-center" data-productValue="' + response.valor + '" data-productId="' + response.idProducto + '" id="row_id_producto_' + response.idProducto + '"name="editCurrentPromocionProduct">' +
          '<td>' + response.nombre + '</td>' +
          '<td>' + response.valor + '</td>' +
          '<td>' +
          '<button class="btn btn-danger" onclick=deleteElementEditTable(' + response.idProducto + ')><i class="fa fa-trash" aria-hidden="true"></i></button> ' +
          '</td>' +
          '</tr>');

        /*
        var nFilas = $("#tbProductEditarPromocion tr").length;
        i = nFilas-1;
        var fila = '<tr id="row' + i + '">' +
        '<td >' + item.nombre + '</td>' +
        '<td name="valorProductoTabla" data-productoId="' + id + '" id="precio_' + i + '">' + item.valor + '<span id="total_' + i + '"></span></td>' +
        '<td > <button class="btn btn-danger   " onclick="eliminar(' + i +
        ')" ><i class="fa fa-trash" aria-hidden="true"></i></button> </td>' +
        '</tr>';
  
        i = i + 1;
        */


        let form = document.getElementById('formEdit');
        form.elements["precioPromoReal"].value = parseInt(response.valor);

        $("#editarPlato").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
        $("#buscarEditarPlato").fadeOut();
        swal.close();
      }

    });
  }

  function limpiarTabla(tableElement) {
    var tableRows = tableElement.getElementsByTagName('tr');
    var rowCount = tableRows.length;
    for (var x = rowCount - 1; x > 0; x--) {
      elmtTable.removeChild(tableRows[x]);
    }
  }

  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 onChangeNxMNumber(number, formType) {
    let form;
    switch (formType) {
      case 'create':
      form = document.getElementById('formCreate');
      break;
      case 'edit':
      form = document.getElementById('formEdit');
      break;
      case 'view':
      form = document.getElementById('formView');
      break;
    }
    let n_producto = parseInt(form.elements["pagueN"].value);
    if (typeof(n_producto) != 'number' || isNaN(n_producto) ) {
      return;
    }
    let precio = parseInt(form.elements["precioPromoReal"].value);
    if (typeof(precio) != 'number' || isNaN(precio) ) {
      return;
    }

    form.elements["precioPromoMostradoAlUsuario"].value = precio * n_producto;

  }
  function enviarDatos() {

  let form = document.getElementById('formCreate');
    //nombrePromo
    let valueNombrePromo = form.elements["nombrePromo"].value;
    if (valueNombrePromo == null || valueNombrePromo == "") {
        swal({
        title: "Error",
        text: "Digite el nombre de la promoción",
        showConfirmButton: true
      });
      return false;
    }
    //pagueN
    let valuePagueN = form.elements["pagueN"].value;
    if (valuePagueN == null || valuePagueN == "") {
        swal({
        title: "Error",
        text: "Digite el valor de Pague N:",
        showConfirmButton: true
      });
      return false;
    }
    //lleveM
    let valueLleveM = form.elements["lleveM"].value;
    if (valueLleveM == null || valueLleveM == "") {
        swal({
        title: "Error",
        text: "Digite el valor de Lleve M",
        showConfirmButton: true
      });
      return false;
    }

    let n_producto = parseInt(form.elements["pagueN"].value);
    if (typeof(n_producto) != 'number' || isNaN(n_producto) ) {
      swal({
        title: "Error",
        text: "El valor de 'Pague N' no es numérico",
        showConfirmButton: true
      });
      return false;
      }

    // Validación de M productos

    let m_producto = parseInt(form.elements["lleveM"].value);
    if (typeof(m_producto) != 'number' || isNaN(m_producto) ) {
      swal({
        title: "Error",
        text: "El valor de 'Lleve M' no es numérico",
        showConfirmButton: true
      });
      return false;
    }

    /*
      //precioPromoMostradoAlUsuario
      let valuePrecioPromoMostradoAlUsuario = form.elements["precioPromoMostradoAlUsuario"].value;
      if (valuePrecioPromoMostradoAlUsuario == null || valuePrecioPromoMostradoAlUsuario == "") {
          swal({
          title: "Error",
          text: "El valor de 'Lleve M' no es numérico",
          showConfirmButton: true
        });
        return false;
      }
    */
    //fechaPromo
    let valueFechaPromo = form.elements["fechaPromo"].value;
    if (valueFechaPromo == null || valueFechaPromo == "") {
        swal({
        title: "Error",
        text: "Digite la fecha de finalización de la promo",
        showConfirmButton: true
      });
      return false;
    }
    //numPersonas
    let valueNumPersonas = form.elements["numPersonas"].value;
    if (valueNumPersonas == null || valueNumPersonas == "") {
        swal({
        title: "Error",
        text: "Digite el número de personas a las que va dirigida la promoción",
        showConfirmButton: true
      });
      return false;
    }
    //tipoComida
    let valueTipoComida = form.elements["tipoComida"].value;
    if (valueTipoComida == null || valueTipoComida == "") {
        swal({
        title: "Error",
        text: "Digite el tipo de comida",
        showConfirmButton: true
      });
      return false;
    }
    //typeService_36 - valueTypeService_37 - valueTypeService_38
    let valueTypeService_36 = form.elements["typeService_36"].checked;
    let valueTypeService_37 = form.elements["typeService_37"].checked;
    let valueTypeService_38 = form.elements["typeService_38"].checked;
    if ( !(valueTypeService_36 || valueTypeService_37 || valueTypeService_38) ) {
        swal({
        title: "Error",
        text: "Debe colocar AL MENOS un servicio para la promoción",
        showConfirmButton: true
      });
      return false;
    }
    //slider
    let valueSlider = form.elements["slider"].value;
    if (valueSlider == null || valueSlider == "") {
        swal({
        title: "Error",
        text: "Debe digitar una imagen",
        showConfirmButton: true
      });
      return false;
    }


    var detalles = [];
    var detalleInputs = document.getElementsByName("valorProductoTabla");
    if (detalleInputs.length == 0) {
      swal({
        title: " {{  trans('entradas.noHaSeleccionadoPro') }}",
        text: " {{  trans('entradas.porFavorAñadeProducto') }}",
        showConfirmButton: true

      });
      return;
    } else {
      for (let index = 0; index < detalleInputs.length; index++) {
        if (!document.getElementById('precio_' + index)) {
          continue;
        }
        const valuePrecio = document.getElementById('precio_' + 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,
            idProducto: document.getElementById('precio_' + index).getAttribute("data-productoId"),
          });
        }
      }
    }
    var arrayService = new Array();
    $('input[name="typeService"]').each(function (element) {
      var item = {};
      item.id = this.getAttribute("data-serviceId");
      item.status = this.checked;
      arrayService.push(item);
    });
    var toService = JSON.stringify(arrayService);
    var productoDetalles = JSON.stringify(detalles);
    var tipoPromo = 2;
    $("#checkboxService").val(toService);
    $("#detalles").val(productoDetalles);
    $("#tipo_promo").val(tipoPromo);
    $('#foto').val(nombreImagen);

    form.elements["precioPromoReal"].value = parseInt(form.elements["precioPromoReal"].value) * n_producto;

    $("#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');
      }
    });
  })


  function cambiarEstado(idProducto, value) {
    var formData = new FormData();
    formData.append("idProducto", idProducto);
    formData.append("idEstado", value);
    var host = "{{$_SERVER["HTTP_HOST"]}}";
    $.ajax({
      url: "{{route("promociones.producto.change.estado")}}",
      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.close();
          $("#tbPromocionesNxM").load(location.href + " #tbPromocionesNxM>*", "");
        } else {
          swal({
            title: "Error",
            text: "{{  trans('inventario.error_al_actualizar_el_estado') }}",
            showConfirmButton: true
          });
        }
      },
    });
  }

  function editarPromocionNxM() {
    if ($('#tbProductEditarPromocion tr').length == 1) {
      swal({
        title: "{{  trans('entradas.noHaSeleccionadoPro') }}",
        text: "{{  trans('entradas.porFavorAñadeProducto') }}",
        showConfirmButton: true

      });
      return;
    }

    let form = document.getElementById('formEdit');
    //nombrePromo
    let valueNombrePromo = form.elements["editNombrePromo"].value;
    if (valueNombrePromo == null || valueNombrePromo == "") {
        swal({
        title: "Error",
        text: "Digite el nombre de la promoción",
        showConfirmButton: true
      });
      return false;
    }
    //pagueN
    let valuePagueN = form.elements["pagueN"].value;
    if (valuePagueN == null || valuePagueN == "") {
        swal({
        title: "Error",
        text: "Digite el valor de Pague N:",
        showConfirmButton: true
      });
      return false;
    }
    //lleveM
    let valueLleveM = form.elements["lleveM"].value;
    if (valueLleveM == null || valueLleveM == "") {
        swal({
        title: "Error",
        text: "Digite el valor de Lleve M",
        showConfirmButton: true
      });
      return false;
    }

    let n_producto = parseInt(form.elements["pagueN"].value);
    if (typeof(n_producto) != 'number' || isNaN(n_producto) ) {
      swal({
        title: "Error",
        text: "El valor de 'Pague N' no es numérico",
        showConfirmButton: true
      });
      return false;
      }

    // Validación de M productos

    let m_producto = parseInt(form.elements["lleveM"].value);
    if (typeof(m_producto) != 'number' || isNaN(m_producto) ) {
      swal({
        title: "Error",
        text: "El valor de 'Lleve M' no es numérico",
        showConfirmButton: true
      });
      return false;
    }

    /*
      //precioPromoMostradoAlUsuario
      let valuePrecioPromoMostradoAlUsuario = form.elements["precioPromoMostradoAlUsuario"].value;
      if (valuePrecioPromoMostradoAlUsuario == null || valuePrecioPromoMostradoAlUsuario == "") {
          swal({
          title: "Error",
          text: "El valor de 'Lleve M' no es numérico",
          showConfirmButton: true
        });
        return false;
      }
    */
    //fechaPromo
    let valueFechaPromo = form.elements["editFechaPromo"].value;
    if (valueFechaPromo == null || valueFechaPromo == "") {
        swal({
        title: "Error",
        text: "Digite la fecha de finalización de la promo",
        showConfirmButton: true
      });
      return false;
    }
    //numPersonas
    let valueNumPersonas = form.elements["editNumPersonas"].value;
    if (valueNumPersonas == null || valueNumPersonas == "") {
        swal({
        title: "Error",
        text: "Digite el número de personas a las que va dirigida la promoción",
        showConfirmButton: true
      });
      return false;
    }
    //tipoComida
    let valueTipoComida = form.elements["editTipoComida"].value;
    if (valueTipoComida == null || valueTipoComida == "") {
        swal({
        title: "Error",
        text: "Digite el tipo de comida",
        showConfirmButton: true
      });
      return false;
    }
    //typeService_36 - valueTypeService_37 - valueTypeService_38
    let valueTypeService_36 = form.elements["editTypeService_36"].checked;
    let valueTypeService_37 = form.elements["editTypeService_37"].checked;
    let valueTypeService_38 = form.elements["editTypeService_38"].checked;
    if ( !(valueTypeService_36 || valueTypeService_37 || valueTypeService_38) ) {
        swal({
        title: "Error",
        text: "Debe colocar AL MENOS un servicio para la promoción",
        showConfirmButton: true
      });
      return false;
    }

    var detalles = [];
    var detalleInputs = document.getElementsByName("editCurrentPromocionProduct");
    detalleInputs.forEach(function (value, index, array) {
      let valuePrecio = value.getAttribute("data-productValue");
      let currentId = value.getAttribute("data-productId");
      detalles.push({
        precioU: valuePrecio,
        idProducto: currentId,
      });
    });


    var arrayService = new Array();
    $('input[name="editTypeService"]').each(function (element) {
      var item = {};
      item.id = this.getAttribute("data-serviceId");
      item.status = this.checked;
      arrayService.push(item);
    });
    var toService = JSON.stringify(arrayService);
    $("#editCheckboxService").val(toService);

    $('#editFoto').val(nombreImagen);

    var host = "{{$_SERVER["HTTP_HOST"]}}";
    var data = {
      idPromocion: editIdPromocionNxM.value,
      nombrePromo: editNombrePromo.value,
      precioPromoReal: parseInt(form.elements["precioPromoReal"].value) * n_producto,
      fechaPromo: editFechaPromo.value,
      numPersonas: editNumPersonas.value,
      detalles: detalles,
      tipoComida: editTipoComida.value,
      tipo_promo: 2,
      checkboxService: toService,
      image: editFoto.value,
      slider: editSlider.value,
      pagueN: form.elements["pagueN"].value,
      lleveM: form.elements["lleveM"].value,
    };
    $.ajax({
      url: "{{route("promociones.nxm.edit")}}",
      data: data,
      type: 'post',
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function () {
        swal({
          title: "Editando datos de la promoción",
          text: "Espere un momento...",
          showConfirmButton: false,
        });
      },
      success: function (response) {
        if (response.code == 200) {
          swal("Éxito", "Se ha editado correctamente la promoción.", "success");
          location.replace(location.href)
        } else {
          swal("Error", response.message, "error");
        }
      },
      error: function (xhr, errorText, errorThrown) {
        swal("Error!", "Error al editar la promoción", "error");
      }
    });
  }


</script>

@endsection