@extends('layouts.backend')
@section('extraCss')
<style type="text/css">
.table-responsive{
  overflow-x: auto !important;
}

.fieldset{
    padding: 1rem !important;
    border : 2px dashed #d0d7dd !important;  

}

</style>
@endsection
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Affiliate Settings
        </h4>
    </div>
    
    <div class="alert alert-default " >  
        <form action="{{ route('affiliate-settings') }}" id="articlereport" >
        @csrf
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Set Commission Level</label>
                    <input type="number" min="0" name="downline" value="{{ $settings['downline']->metavalue }}" class="form-control downline">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table levels">
                    <thead>
                        <tr>
                            <td>Level</td>
                            <td>Commission (%)</td>
                        </tr>
                    </thead>
                    <tbody>
                        @if($settings['downline'] && $settings['downline']->metavalue > 0)
                        @php $totals = 0; @endphp
                        @foreach($settings as $s)
                        @if($s->metakey == 'downline')
                        @continue
                        @endif
                        @php $totals++; @endphp
                        <tr id="level_{{ $totals }}">
                            <td><input type="text" class="form-control required" name="level[]" value="{{ $s->metakey }}" placeholder="level_{{ $totals }}" readonly="readonly"></td>
                            <td><input type="number" class="form-control required" name="commission[]" value="{{ $s->metavalue }}" step="0.1"></td>
                        </tr>
                        @endforeach
                        @if($totals < $settings['downline']->metavalue)
                        @for($i=$totals;$i<$settings['downline']->metavalue;$i++)
                        <tr id="level_{{ $i+1 }}">
                            <td><input type="text" class="form-control required" name="level[]" value="level_{{ $i+1 }}" placeholder="level_{{ $i+1 }}" readonly="readonly"></td>
                            <td><input type="number" class="form-control required" name="commission[]" value="" step="0.1"></td>
                        </tr>
                        @endfor
                        @endif
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="submit" class="btn btn-primary" value="Update" name="submit">
            </div>
        </div>
        </form>
    </div>
</div>
@endsection
@section('extraJs')
<script type="text/javascript">
function updateStatus(elem) {
  event.preventDefault();
  $(elem).replaceWith("<span id='spinner'><img src='{{ asset(BACKEND_THEME_IMAGES_PATH . 'input-spinner.gif') }}'></span>");
  var _token   = '{{ csrf_token() }}';
  var s   = $(elem).attr('data-status');
  var id   = $(elem).attr('data-id');
  $.ajax({
      type: "post",
      url: "{{ route('website-articles-update') }}",
      data: {
        a: id,
        status: s,              
        _token: _token
      },
      success: function(response) {
        if (response.status == true) {
          toastr.success(response.data);
        } else {
          toastr.success(response.data);   
        }
        $('#spinner').replaceWith(response.text);
      }
  });
}
$(document).ready(function() {
    $('.downline').change(function() {
        console.log('hello');
        if($('.levels tbody tr').length > $(this).val()) {
        console.log('ifhello');
            for(var i=$('.levels tbody tr').length;i>$(this).val();i--)
                $('.levels tbody tr#level_'+i).remove();
        }
        else {
        console.log('elsehello');
            for(var i=$('.levels tbody tr').length+1;i<=$(this).val();i++)
                $('.levels tbody').append('<tr id="level_'+i+'"><td><input type="text" class="form-control required" name="level[]" value="level_'+i+'" placeholder="level_'+i+'" readonly="readonly"></td><td><input type="number" class="form-control required" name="commission[]" value="" step="0.1"></td></tr>');
        }
    });
});
</script>
@endsection