@component('components.superadmin.modal', ['title' => '','id' => 'addPromo'])
<h2 class="modal-title text-center"><i class="ci ci-discount"></i>
  @if(isset($promotion))
  PROMOZIONE
  @else
  CREA NUOVA PROMOZIONE
  @endif
</h2>
<div class="row">
  <div class="col-md-12 text-center">
    <form class="do-form" action="{{ route('superadmin.promotions.store') }}" method="POST">
      @csrf
      <div class="form-group row inputWrapper">
        <label for="name" class=" col-form-label">Nome promozione</label>

        <input type="text" name="name" class="form-control" id="name" value="{{isset($promotion) ? $promotion->name : ''}}" @if(isset($promotion)) readonly @endif>

      </div>
      <div class="form-group row inputWrapper">
        <label for="code" class=" col-form-label">Codice</label>
        <input type="text" name="code" class="form-control" id="code" value="{{isset($promotion) ? $promotion->code : ''}}" @if(isset($promotion)) readonly @endif>
      </div>
      <div class="form-group row inputWrapper">
        <label for="discount" class=" col-form-label">Sconto %</label>
        <input type="number" name="discount" class="form-control" id="discount" value="{{isset($promotion) ? $promotion->discount : ''}}" @if(isset($promotion)) readonly @endif>
      </div>


      <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(isset($promotion)) disabled @endif>

              <option value="product" @if (isset($promotion) && ($promotion->type == 'product')) selected @endif>Prodotti</option>
              <option value="treatment" @if (isset($promotion) && ($promotion->type == 'treatment')) selected @endif>Trattamenti</option>

            </select>
          </div>
        </div>
        <h4 class="text-center">Seleziona un prodotto per il quale effettuare la promozione</h4>
        <div class="form-group row">
          <label for="geometry_id" class="col-sm-2 col-form-label">Geometria</label>
          <div class="col-sm-10">
            <select class="custom-select custom-select-sm singleSelection" id="geometry_id" name="geometry_id" @if(isset($promotion)) disabled @endif>
              <option></option>
              <option value="all" data-action="families" data-filter="family_id" data-params="{{ json_encode([ 'geometry_id' => 'all' ]) }}" @if(isset($promotion) && !$promotion->geometry_id) selected @endif>All</option>
              @foreach ($geometries as $geometry)
              <option value="{{$geometry->id}}" data-action="families" data-filter="family_id" data-params="{{ json_encode([ 'geometry_id' => $geometry->id ]) }}" @if (isset($promotion) && ($promotion->geometry_id) && ($promotion->geometry_id == $geometry->id)) selected @endif>{{$geometry->name}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label for="family_id" class="col-sm-2 col-form-label">Famiglia prodotti</label>
          <div class="col-sm-10">
            <select class="custom-select custom-select-sm singleSelection" id="family_id" name="family_id" @if(isset($promotion)) disabled @endif>
              @if($promotion)
              <option selected>{{$family->name}}</option>
              @endif
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label for="products" class="col-sm-2 col-form-label"> Prodotti</label>
          <div class="col-sm-10">

            <select class="custom-select custom-select-sm multiSelect" id="products" name="products[]" multiple="multiple" @if(isset($promotion)) disabled @endif>
              @if($promotion)
              @foreach($products as $product)
              <option selected>{{$product->name}}</option>
              @endforeach
              @endif

            </select>
          </div>
        </div>
        <div class="form-group row">
          <label for="treatment" class="col-sm-2 col-form-label">Trattamento</label>
          <div class="col-sm-10">
            <select class="custom-select custom-select-sm multiSelect" id="treatment" name="treatments[]" multiple="multiple" @if(isset($promotion)) disabled @endif>
              <option value="all" @if( isset($promotion) && is_array($promotion->treatments) && !count($promotion->treatments)) selected @endif>All</option>
              @foreach ($treatments as $treatment)
              <option value="{{$treatment->id}}" @if( isset($promotion) && ($promotion->treatments) && (in_array($treatment->id, $promotion->treatments ))) selected @endif >{{$treatment->name}}</option>
              @endforeach

            </select>
          </div>
        </div>
        <h4 class="mt-5 mb-3">Associa questa promozione ai seguenti gruppi</h4>
        <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(isset($promotion)) disabled @endif>

              <option value="all" @if( isset($promotion) && is_array($promotion->users) && !count($promotion->users)) selected @endif >All</option>
              @foreach($users as $user)
              <option value="{{$user->id}}" @if( isset($promotion) && ($promotion->users) && (in_array($user->id, $promotion->users ))) selected @endif >{{$user->full_name ?? $user->username}}</option>
              @endforeach
            </select>
          </div>
        </div>

      </div>
      <div class="row promoDates">
        <div class="col-sm-12 mt-5">
          <h5>Durata promozione</h5>

        </div>
        <div class="col-sm-6 promo text-right dateInputCustoms no-gutters p-0">
          <div class="form-group row inputWrapper blockResponsive">
            <label for="start_date" class=" col-form-label text-right">Inizio promozione</label>
            <!-- <i class="ci ci-calendar"></i> -->
            <input type="text" class="form-control datePicker text-center" autocomplete="off" id="start_date" name="start_date" value="{{isset($promotion) ? $promotion->start_date->format('Y-m-d') : ''}}" @if(isset($promotion)) disabled @endif>
            <i class="ci ci-polyDown"></i>

          </div>
        </div>
        <div class="col-sm-6 promo text-left dateInputCustoms no-gutters p-0">
          <div class="form-group row inputWrapper blockResponsive">
            <label for="end_date" class=" col-form-label text-right">Fine promozione</label>
            <!-- <i class="ci ci-calendar"></i> -->
            <input type="text" class="form-control datePicker text-center" autocomplete="off" id="end_date" name="end_date" value="{{isset($promotion) ? $promotion->end_date->format('Y-m-d') : ''}}" @if(isset($promotion)) disabled @endif>
            <i class="ci ci-polyDown"></i>

          </div>

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

</div>

<script type="text/javascript">
  window.onModalShown = function() {

    $(document).on('change', 'select[name="geometry_id"], select[name="family_id"], select[name="products[]"]', function() {
      let selectVal = $(this).val();
      let selectName = $(this).attr('name');
      let params = $(this).find(":selected").data("params");
      let action = $(this).find(":selected").data("action");
      let filterSelect = $(this).find(":selected").data("filter");
      if (selectName != 'products[]') {
        axios
          .get(`/api/filter/${action}`, {
            params
          })
          .then(response => {
            let result = response.data.data;
            $('select[name="' + filterSelect + '"]').empty();
            $('select[name="products[]"]').empty();
            $('select[name="' + filterSelect + '"]').append(
              $("<option />")
              .val("")
              .text("Seleziona...")
            );
            if (selectVal == 'all') {
              if (filterSelect != 'products[]') {
                let paramsData = {
                  "family_id": 'all',
                  "geometry_id": selectVal
                }
                $('select[name="' + filterSelect + '"]').append(
                  $("<option />")
                  .val("all")
                  .text("All").attr("data-params", JSON.stringify(paramsData)).attr("data-action", "products").attr("data-filter", "products[]")
                );
              } else {

                $('select[name="' + filterSelect + '"]').append(
                  $("<option />")
                  .val("all")
                  .text("All")
                );
              }

            } else {
              let geometryVal = $('select[name="geometry_id"]').val();
              if (filterSelect == 'products[]' && geometryVal == 'all') {
                $('select[name="' + filterSelect + '"]').append(
                  $("<option />")
                  .val("all")
                  .text("All")
                );
              }

            }
            result.forEach(function(item) {
              if (filterSelect != 'products[]') {
                let paramsData = {
                  "family_id": item.id,
                  "geometry_id": selectVal
                }
                $('select[name="' + filterSelect + '"]').append(
                  $("<option />")
                  .val(item.id)
                  .text(item.name).attr("data-params", JSON.stringify(paramsData)).attr("data-action", "products").attr("data-filter", "products[]")

                );
              } else {

                $('select[name="' + filterSelect + '"]').append(
                  $("<option />")
                  .val(item.id)
                  .text(item.name)

                );
              }
            });

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


    });

  };
</script>
@endcomponent