@component('components.superadmin.modal', ['title' => '','id' => 'addPromo'])
<h2 class="modal-title text-center"><i class="ci ci-discount"></i>
  @if($promotion)
  EUROBONUS PROMOZIONE
  @else
  CREA NUOVA EUROBONUS PROMOZIONE
  @endif

</h2>
<div class="row">
  <div class="col-md-12 text-center">
    <form class="do-form" action="{{route('superadmin.eurobonus-promotions.store')}}" method="POST">
      @csrf

      <div class="selectWrapper">
        <div class="form-group row">
          <label for="type" class="col-sm-2 col-form-label">Promozione per</label>
          <div class="col-sm-10">
            <select class="custom-select custom-select-sm singleSelection" id="type" name="type" @if($promotion) disabled @endif>
              <option></option>
              <option value="products" data-action="products" data-name="Prodotti" data-params="{{ json_encode([ 'type' => 'all' ]) }}" @if($promotion && $promotion->type=='products') selected @endif> @lang('Products')</option>
              <option value="treatments" data-action="treatments" data-name="Trattamenti" data-params="{{ json_encode([ 'type' => 'all' ]) }}" @if($promotion && $promotion->type=='treatments') selected @endif>@lang('Treatments')</option>
              <option value="families" data-action="families" data-name="Famiglie" data-params="{{ json_encode([ 'type' => 'all' ]) }}" @if($promotion && $promotion->type=='families') selected @endif>@lang('Families')</option>
            </select>
          </div>
        </div>
        <!-- Add dynamic select depending on chosen type -->
        <div class="form-group row do-dynamic-select">

          @if($promotion)
          <label for="users" class="col-sm-2 col-form-label">{{$labelText}}</label>
          <div class="col-sm-10">
            <select class="custom-select custom-select-sm multiSelect" multiple="multiple" disabled>
              @if(count($data))
              @foreach($data as $val)
              <option selected>{{$val->name}}</option>
              @endforeach
              @else
              <option selected>All</option>
              @endif
            </select>
          </div>
          @endif
        </div>
        <div class="form-group row">
          <label for="groups" class="col-sm-2 col-form-label">Gruppo</label>
          <div class="col-sm-10">

            <select class="custom-select custom-select-sm multiSelect" id="groups" name="groups[]" multiple="multiple" @if(isset($promotion)) disabled @endif>
              <option value="all" @if( isset($promotion) && is_array($promotion->groups) && !count($promotion->groups)) selected @endif>All</option>
              @foreach ($groups as $group)
              <option value="{{$group->id}}" @if( isset($promotion) && ($promotion->groups) && (in_array($group->id, $promotion->groups ))) selected @endif >{{$group->name}}</option>
              @endforeach
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label for="users" class="col-sm-2 col-form-label">Utenti</label>
          <div class="col-sm-10">
            <select class="custom-select custom-select-sm multiSelect" id="users" name="users[]" multiple="multiple" @if($promotion) disabled @endif>
              <option value="all" @if($promotion && is_array($promotion->users) && !count($promotion->users)) selected @endif>All</option>
              @foreach($users as $user)
              <option value="{{$user->id}}" @if($promotion && ($promotion->users) && (in_array($user->id, $promotion->users ))) selected @endif>{{$user->full_name ?? $user->username}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="form-group row do-slider">
          <label class="col-sm-2 col-form-label"></label>
          <div class="col-sm-10 filter">

            <h4>1 EUROBONUS / €</h4>
            <div class="sliderWrapper">
            <h5>€ 1,00</h5>
              <input id="eurobonusSlider" name="threshold" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="{{$promotion ? $promotion->threshold : '1'}}" />
              <h5>€ 100,00</h5>
            </div>

          </div>
        </div>

      </div>


      @if(!$promotion)
      <button type="submit" class="ci-btn btn-green" id="editSaldoVal">CREA</button>
      @endif

    </form>
  </div>

</div>

<script type="text/javascript">
  window.onModalShown = function() {
    $("#eurobonusSlider").bootstrapSlider({
      tooltip: "always",
      precision: 4
    });

    $(document).on('change', 'select[name="type"]', function() {

      let params = $(this).find(":selected").data("params");
      let action = $(this).find(":selected").data("action");
      let name = $(this).find(":selected").data("name");



      axios
        .get(`/api/filter/${action}`, {
          params: Object.assign(params, { connection: window.Laravel.connection })
        })
        .then(response => {
          $('.do-dynamic-select').empty();
          let result = response.data.data;
          let label = $(`<label for="${action}" name="${action}" class="col-sm-2 col-form-label">${name}</label>`);
          let wrapper = $('<div class="col-sm-10"> </div>');
          let select = $(`<select id="${action}" name="data[${action}][]" class="custom-select custom-select-sm multiSelect" multiple="multiple"></select>`);

          select.append(
            $("<option />")

          );
          select.append(
            $("<option />")
            .val("all")
            .text("All")
          );

          result.forEach(function(item) {
            select.append(
              $("<option />")
              .val(item.id)
              .text(item.name)
            );

          });
          wrapper.append(select);
          $('.do-dynamic-select').append(label);
          $('.do-dynamic-select').append(wrapper);
          $(".multiSelect").each(function() {
            $(this).select2({
              width: "100%",
              selectionCssClass: "multipleSelections",
              placeholder: 'Seleziona...'
            });
          });

        })
        .catch(error => {
          console.log(error);
          alert("Something went wrong :(");
        });



    });

  };
</script>
@endcomponent