<div class="panel panel-info panel-border top">
  <div class="panel-heading">
    <span class="panel-title">Edycja stawek: <u><?= $this -> _phrase['phrase'];?></u></span>
  </div>
  <div class="panel-heading p5" style="height: auto;">
    <div class="row mb10 pl5">
      <div class="col col-xs-12">        
        <?= \Html::button(
                    array(
                      'class' => 'btn btn-sm btn-success',
                      'text'  => 'Zatwierdź',
                      'js'    => 'checkForm( "formularz" );',
                      'icon'  => 'fa-check-circle'
                    )
                );?>
        <?= \Html::button(
                    array(
                      'class' => 'btn btn-sm btn-danger',
                      'text'  => 'Anuluj',
                      'url'   => '/?p=client_sites',
                      'icon'  => 'fa-times'
                    )
                );?>
      </div>
    </div>
  </div>
  <div class="panel-body">    
    <form method="POST" action="/?p=client_sites&id=<?= $this -> _site_id;?>" id="formularz" class="form-horizontal">
      <input type="hidden" name="site_id" value="<?= $this -> _site_id;?>" />
      <input type='hidden' name='phrase_id' value='<?= $this -> _phrase['id'];?>'>
      <input type="hidden" name="reseller_id" value="<?= $this -> _reseller_id;?>" />
      <input type='hidden' name='rw' value='save_costs' />
      <div class="row">
        <div class="col col-md-12 col-lg-8">
          <div class="form-group">
            <label class="col-lg-4 control-label">Zakresy:</label>
            <div class="col-lg-8">
              <div id="prices-edit">
                <? 
                  if ( !$this -> _prices )
                  {
                    $i = 1;
                    ?>
                    <div class="price-box" id="price-box-1" count="1">
                      <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-5 text-left pb10">
                          od: <input type="text" class="form-control text-center from" id="from_1" name="from[1]" onChange="checkIntFrom( 1 )" value="1" style="width: 45px; margin: 0 5px; display: inline-block;" /> 
                          do: <input type="text" class="form-control text-center to" id="to_1" name="to[1]" onChange="checkIntTo( 1 )" value="1" style="width: 45px; margin: 0 5px; display: inline-block;" />
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-7 text-left pb10">
                          stawka / stawka m-c: <input type="text" class="form-control text-right" id="price_1" name="price[1]" onChange="checkPrice( 1 )" style="width: 60px; margin: 0 5px; display: inline-block;" /> /
                          <input type="text" class="form-control text-right" id="price_month_1" onChange="checkPriceMonth( 1 );" style="width: 60px; margin: 0 5px; display: inline-block" /> zł
                          <a href='#' onClick="deletePrice( 1 ); return false;">
                            <i class="fa fa-trash fa-lg ml10 text-danger"></i>
                          </a>
                            </a>
                          </div>
                        </div>
                        <div class="m5" style="border: 1px solid #ccc;"></div>
                    </div>
                    <?
                  }
                  else
                  {
                    $i = 0;
                    foreach ( $this -> _prices as $price )
                    {
                      $i++;
                      ?>
                      <div class="price-box" id="price-box-<?= $i;?>" count="<?= $i;?>">
                        <div class="row">
                          <div class="col-xs-12 col-sm-6 col-md-5 text-left pb10">
                            od: <input type="text" class="form-control text-center from" id="from_<?= $i;?>" name="from[<?= $i;?>]" value="<?= $price['start'];?>" onChange="checkIntFrom( <?= $i;?> )" style="width: 45px; margin: 0 5px; display: inline-block;" /> 
                            do: <input type="text" class="form-control text-center to" id="to_<?= $i;?>" name="to[<?= $i;?>]" value="<?= $price['end'];?> "onChange="checkIntTo( <?= $i;?> )" style="width: 45px; margin: 0 5px; display: inline-block;" /> 
                          </div>
                          <div class="col-xs-12 col-sm-6 col-md-7 text-left pb10">
                            st. / st. m-c: <input type="text" class="form-control text-right" id="price_<?= $i;?>" value="<?= $price['price'];?>" name="price[<?= $i;?>]" onChange="checkPrice( <?= $i;?> )" style="width: 60px; margin: 0 5px; display: inline-block;" /> /
                            <input type="text" class="form-control text-right" id="price_month_<?= $i;?>" value="" onChange="checkPriceMonth( <?= $i;?> );" style="width: 60px; margin: 0 5px; display: inline-block" /> zł
                            <a href='#' onClick="deletePrice( <?= $i;?> ); return false;">
                              <i class="fa fa-trash fa-lg ml10 text-danger"></i>
                            </a>
                          </div>
                        </div>
                        <div class="m5" style="border: 1px solid #ccc;"></div>
                      </div>
                      <?
                    }
                  }
                ?>
              </div>
              <a onClick="addPriceBox(); return false;" class="btn btn-sm btn-success">dodaj zakres</a>
              <input type="hidden" name="count_prices" id="count_prices" value="<?= $i;?>">
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<script type="text/javascript">
  $( function()
  {
    disable_menu();    
  });
  
  function deletePrice( id )
  {
    $( '#price-box-' + id ).remove();
  }

  function addPriceBox() 
  {
    var i = 0;
    var z = 0;
    
    $( '.price-box' ).each( function() 
    {
      if ( i < parseInt( $( this ).attr( 'count' ) ) )
        i = parseInt( $( this ).attr( 'count' ) );
    });
    
    $( '.to' ).each( function() 
    {
      if ( z < parseInt( $( this ).val() ) )
        z = parseInt( $( this ).val() );
    });

    var text = '<div class="price-box" id="price-box-' + ( i + 1 ) + '" count="' + ( i + 1 ) + '">\n' +
                  '<div class="row">' +
                      '<div class="col-xs-12 col-sm-6 col-md-5 text-left pb10">' +
                        'od: <input type="text" class="form-control text-center from" value="' + ( z + 1 ) + '" id="from_' + ( i + 1 ) + '" name="from[' + ( i + 1 ) + ']" onChange="checkIntFrom( ' + ( i + 1 ) + ' )" style="width: 45px; margin: 0 5px; display: inline-block;" />' +
                        'do: <input type="text" class="form-control text-center to" value="' + ( z + 1 ) + '" id="to_' + ( i + 1 ) + '" name="to[' + ( i + 1 ) + ']" onChange="checkIntTo( ' + ( i + 1 ) + ' )" style="width: 45px; margin: 0 5px; display: inline-block;" />' +
                      '</div>' +
                      '<div class="col-xs-12 col-sm-6 col-md-7 text-left pb10">' +
                        'st. / st. m-c: <input type="text" class="form-control text-right" id="price_' + ( i + 1 ) + '" name="price[' + ( i + 1 ) + ']" onChange="checkPrice( ' + ( i + 1 ) + ' )" style="width: 60px; margin: 0 5px; display: inline-block;"> / ' +
                        '<input type="text" class="form-control text-right" id="price_month_' + ( i + 1 ) + '" onChange="checkPriceMonth( ' + ( i + 1 ) + ' )" style="width: 60px; margin: 0 5px; display: inline-block;"> zł' +
                        '&nbsp;<a href="#" onClick="deletePrice( ' + ( i + 1 ) + ' )">' +
                          '<i class="fa fa-trash fa-lg text-danger ml10"></i>' +
                        '</a>' +
                      '</div>' +
                    '</div>' +
                    '<div class="m5" style="border: 1px solid #ccc;"></div>' +
                '</div>';
        
    $ ( '#prices-edit' ).append( text );
    $( '#count_prices' ).val( z + 1 );
  }  

  function checkIntFrom( id ) 
  {
    var val = $( '#from_' + id ).val();
    val = parseInt( val );
    if ( !val )
      val = 1;
    $( '#from_' + id ).val( val )
  }

  function checkIntTo( id ) 
  {
    var val = $( '#to_' + id ).val();
    val = parseInt( val );
    if ( !val )
      val = 1;
    $( '#to_' + id ).val( val )
  }
  
  function checkPriceMonth( id )
  {
    var val = $( '#price_month_' + id ).val();
    val 		= parseFloat( val.replace( '.', '.' ) * 1 );
    
    $( '#price_month_' + id ).val( number_format( val, 2 , '.', '' ) );
    
    if ( isNaN( val ) )
      val 	= 0;
    
    val = number_format( val / 30 , 2 , '.', '' );
    $( '#price_' + id ).val( val );
  }

  function checkPrice( id ) 
  {
    var val = $( '#price_' + id ).val();
    val 		= parseFloat( val.replace( '.', '.' ) * 1 );
    if ( isNaN( val ) )
      val 	= 0;
    val = number_format( val , 2 , '.', '' );
    $( '#price_' + id ).val( val );
  }
</script>