@component('components.superadmin.modal', ['title' => 'CREA NUOVA COLORAZIONI CODICE','classes' => 'trattamentoModal text-center ', 'id' => 'editService'])

@if (isset($codeColoration))
{{ Form::model($codeColoration, ['action' => ['FormController@index', 'create_update_coloration_codes'], 'method' => 'POST'], ['class' => 'dynamic-form']) }}
@else
{{ Form::open(['action' => ['FormController@index', 'create_update_coloration_codes']]) }}
@endif


{{ Form::hidden('dynamic-form', 1) }}
@if (isset($codeColoration))
{{ Form::hidden('id', $codeColoration->id) }}
@endif
<div class="row">
  <div class="col-12">
    <div id="appendProduct" class="form-group appendableTable @if($codeColoration) do-code @endif" data-columns="{{ json_encode([
        [
          'name' => 'colorations[]',
          'display' => 'COLORAZIONE',
          'type' => 'select',
          'ctrlOptions' => $colorations->pluck('name', 'id')
        ],
        [
          'name' => 'palettes[]',
          'display' => 'PALETTE',
          'type' => 'select',
          'ctrlOptions' => $palettes->pluck('name', 'id')
          
        ],
        [
          'name' => 'colors[]',
          'display' => 'COLORI',
          'type' => 'select',
          'ctrlOptions' => $colors->pluck('name', 'id')
    
        ],
        [
          'name' => 'codes[]',
          'display' => 'CODICE',
          'type' => 'text'
        ]
      ]) }}"
      @if ($codeColoration) 
      data-init-data="{{ json_encode($data)}}" 
      @endif
      >
      <div class="table-wrapper">
        <table class="table"></table>
      </div>
    </div>
  </div>
</div>
<div class="d-flex justify-content-center">
  <button class="ci-btn btn-green" id="editSaldoVal">
    @if (isset($codeColoration))
    AGGIORNA
    @else
    CREA
    @endif
  </button>
</div>

<p class="disclaimer text-center">I campi Contrassegnati da (*) sono obbligatori.</p>
{{ Form::close() }}

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


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

      let row = $(this).closest('tr');
      let selectPalletes = row.find('select[name="AG_palettes[]"]');
      let selectColors = row.find('select[name="AG_colors[]"]');
      // Coloration id
      let id = $(this).find(":selected").val();

      axios
        .get('/api/filter/palettes', {
          params: {
            coloration_id: id,
            connection: window.Laravel.connection
          }
        })
        .then(response => {
          selectPalletes.empty();
          selectColors.empty();
          let palettes = response.data.data.palettes;
          let colors = response.data.data.colors;


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

          });
          colors.forEach(function(item) {
            selectColors.append(
              $("<option />")
              .val(item.id)
              .text(item.name)
            );

          });



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



    });

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

      let row = $(this).closest('tr');
      let selectColors = row.find('select[name="AG_colors[]"]');
      // Palette id
      let id = $(this).find(":selected").val();

      axios
        .get('/api/filter/colors', {
          params: {
            palette_id: id,
            connection: window.Laravel.connection
          }
        })
        .then(response => {

          selectColors.empty();

          let colors = response.data.data;
          colors.forEach(function(item) {
            selectColors.append(
              $("<option />")
              .val(item.id)
              .text(item.name)
            );

          });

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



    });

  };
</script>
@endcomponent