<div class="panel panel-widget draft-widget" value-numer="<?= $this -> i;?>">
  <div class="panel-heading with-buttons">
    <span class="panel-title">Edycja wartości dla cechy: <?= $this -> attribute['languages']['pl']['name'];?></span>
    <div class="buttons">
      <a class="btn btn-success btn-save" href="#">
        <i class="fa fa-save"></i> zapisz
      </a>
      <a class="btn btn-dark" href="/admin/shop_attribute/view_list/">
        <i class="fa fa-ban"></i> wstecz
      </a>
    </div>
  </div>
  <div class="panel-body p20">
    <button class="btn btn-success mb10 btn-value-add">
      <i class="fa fa-plus-circle mr5"></i>Dodaj wartość
    </button>
    <div class="values-content">
      <?
        if ( $this -> values ):
          foreach ( $this -> values as $value ):
            echo \Tpl::view( 'shop-attribute/_partials/value', [
              'i' => ++$i,
              'value' => $value,
              'languages' => $this -> languages,
              'attribute' => $this -> attribute
            ] );
          endforeach;
        endif;
      ?>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function ()
  {
    disable_menu();

    $( 'body' ).on( 'click', '.btn-save', function()
    {
      var values = jQuery( '.dashboard-page' ).find( 'input, select, textarea' ).serializeObject();

      jQuery.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_attribute/values_save/',
        data: {
          values: JSON.stringify( values ),
          attribute_id: <?= $this -> attribute['id'];?>,
        },
        beforeSend: function() {
          jQuery( '#overlay' ).show();
        },
        success: function( response ) {
          var data = jQuery.parseJSON( response );
          jQuery( '#overlay' ).hide();
          if ( data.status === 'ok' )
          {
            var msg = "Zapisano wartości atrybutu";
            alert_message( msg );
          }
          else
          {
            if ( data.msg )
              var msg = data.msg;
            else
              var msg = "Przepraszamy. Podczas wczytywania danych wystąpił błąd. Prosimy spróbować ponownie.";
            create_error( msg );
          }
        }
      });
    });

    $( 'body').on( 'click', '.btn-value-add', function ()
    {
      var maxVal = Math.max.apply(null, $('div[value-number]').map(function() {
          var val = parseInt($(this).attr('value-number'));
          return isNaN(val) ? 0 : val;  // Jeżeli wartość nie jest liczbą, zwróć 0
      }).get());

      if (!isFinite(maxVal)) {
        maxVal = 0;
      }

      $.ajax({
        url: '/admin/shop_attribute/attribute_value_tpl/',
        type: 'POST',
        data: {
          i: maxVal + 1,
          value: null,
          languages: <?= json_encode( $this -> languages );?>,
          attribute: <?= json_encode( $this -> attribute );?>
        },
        success: function( response )
        {
          $('.values-content').append(response);
        }
      });
    });

    $( 'body' ).on( 'click', '.btn-value-remove', function()
    {
      var button = $( this );
      $.alert({
        title: 'Potwierdź',
        content: 'Na pewno chcesz usunąć wybraną wartość?',
        type: 'orange',
        closeIcon: true,
        closeIconClass: 'fa fa-close',
        typeAnimated: true,
        animation: 'opacity',
        autoClose: 'confirm|10000',
        useBootstrap: false,
        theme: 'modern',
        autoClose: 'cancel|10000',
        icon: 'fa fa-exclamation',
        buttons:
        {
          confirm:
          {
            text: 'TAK usuń',
            btnClass: 'btn-orange',
            keys: ['enter'],
            action: function()
            {
              button.closest( '.panel' ).remove();
            }
          },
          cancel:
          {
            text: 'anuluj',
            btnClass: 'btn-blue',
            action: function() {}
          }
        }
      });
    });
  });
</script>
