@extends('backend.layouts.app')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<style type="text/css">

  .showhide {  
   display:none;
 }
 .row{margin-top:10px;}
 .has-error .form-control { border-color: #e74c3c; }
</style>

<div class="row new_member" id="ajaxmaterialdisplayform">
<div class="col-md-12">
<div class="box">


  <div class="container">
    <h2>Add Multi Class Discounts</h2>
    <form class="form-horizontal" method="POST" action="">
      {{ csrf_field() }}
      <div class="col-md-9">
      <div class="row">

        <div class="col-md-12{{ $errors->has('class_name') ? ' has-error' : '' }}">
          <label class="control-label" for="class_name" ><p>Name <b style="color: #ec1515;">*</b></p></label>

          
          <input type="text" class="form-control" value="{{ old('class_name') }}" id="class_name" name="class_name"   >

          @if ($errors->has('class_name'))
          <span class="help-block">
            <strong style = "color: #e74c3c !important;">{{ $errors->first('class_name') }}</strong>
          </span>
          @endif
          

        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <label class="control-label" for="code">Number of Classes</label>
          
          <select class="form-control" id="no_of_users" name="no_of_classes" >

           <option value="0">Select Number of Classes</option>
           @foreach($numOfClasses as $key => $numOfClass)
           <option value="{{$key}}">{{$numOfClass}}</option>
           @endforeach

         </select>
         @if ($errors->has('no_of_classes'))
         <span class="help-block">
          <strong>{{ $errors->first('no_of_classes') }}</strong>
        </span>
        @endif

      </div>
    </div> 
    <br />

    <div class="row">

      <div class="col-md-12">
        <label class="control-label" for="code">Eligible Classes</label>
      </div>

    </div><br />

    <div class="row">
        <div class="col-md-12">
          
          <label><input type="radio" id="all" name="all_programs" value="1" onclick="yesnoCheck() ;" checked />All Classes</label>
          <label><input type="radio" id="program" name="all_programs" value="2"  onclick="yesnoCheck();" />Select Classes </label>
          
        </div>
      </div>
      

      <div class="row">
        
        <div class="col-md-12{{ $errors->has('coupon_eligible_program[]') ? ' has-error' : '' }}" id="autoUpdate" style="visibility:hidden"  >

          <select name="coupon_eligible_program[]" id="classes" class="form-control" multiple="multiple"  >
            @foreach($classes as $key => $class)
            <option value="{{ $key }}">{{ $class }}</option>
            @endforeach
          </select>

          @if ($errors->has('coupon_eligible_program[]'))
          <span class="help-block">
            <strong>{{ $errors->first('coupon_eligible_program[]') }}</strong>
          </span>
          @endif
          
        </div>
      </div>
  
<br />
<div class="row">
  <div class="col-md-12">
    <label class="control-label" for="code"><p>Amount <b style="color: #ec1515;">*</b></p></label>  
  </div>
</div>
<div class="row">

  <div class="col-md-3">

    <input type="radio" class="radio-check" name="Radio" id="Radio" value="1" checked >Fixed

    <label hidden >$</label>

    <input class="radio-check" type="radio" name="Radio" id="Radio" value="2" >Percentage
    <label hidden >%</label>

  </div>
  <div class="row">
    <div class="col-md-4{{ $errors->has('discount_amount') ? ' has-error' : '' }}">

      <div id="Amount">
        <div class="input-group">
          <span class="input-group-addon" id="spanOne"></span>
          <input type="text" class="form-control" value="{{ old('discount_amount') }}" id="discount_amount" name="discount_amount" placeholder="Amount"  aria-label="Amount (to the nearest dollar)" >
        </div>
      </div>
      @if ($errors->has('discount_amount'))
      <span class="help-block">
        <strong style = "color: #e74c3c !important;">{{ $errors->first('discount_amount') }}</strong>
      </span>
      @endif

    </div> 
  </div>


  <!-- <div class="row">
    <div class="col-md-12">
     <label class="control-label" for="code"><p>Application Order <b style="color: #ec1515;">*</b></p></label> 
     <select class="form-control selectWidth" type="select" name="application_order" data-toggle="dropdown">
      <option value="1">Organization</option>
      <option value="2">User</option>
      <span class="caret"></span></select>
    </div>
  </div> -->


  <div class="row">

   <div class="col-md-12">
     <label class="control-label" for="code"><p>Details</p></label>  
     <select class="form-control" id="discount_details" name="discount_details" >
     </select>
   </div>

 </div>
</div><br />



<!-- <div class="row">
  <div class="col-md-4" style="text-align: center;">
   <strong>1st program</strong><br />
   <img src="{{ asset('images/SingleEventCalendar.png')}}"><br />
   <strong>$0 OFF</strong>
 </div>

 <div class="col-md-4" style="text-align: center;">
   <strong>2nd program</strong><br />
   <img src="{{ asset('images/SingleEventCalendar.png')}}"><br />
   <strong>$0 OFF</strong>
 </div>

 <div class="col-md-4" style="text-align: center;">
   <strong>All others</strong><br />
   <img src="{{ asset('images/FullEventCalendar.png')}}"><br />
   <strong>$0 OFF</strong>
 </div>


</div> -->

<hr />

<br /><br />
<span class='amount'></span>
<div class="row">
 <div class="col-md-6">
  <a href="{{ url('discounts/classes')}}" type="button"  style="color:#50A4D7;" class="cancle-btn">Cancel</a>
</div>

<div class="col-md-6">     
 <button type="submit" class="btn-primary" style="float:right;">Save</button>
</div>
</div>
<br />
</div>
</form>
</div>

<script>
  $(document).ready(function(){
    $('#classes').select2({
      placeholder : 'Select Classes',
      tags: true
    });
  });
</script>


</script>
<script type="text/javascript">


 function yesnoCheck() 
 {
   if (document.getElementById('all').checked) {
     document.getElementById('autoUpdate').style.visibility = 'hidden';
   }
   else document.getElementById('autoUpdate').style.visibility = 'visible';

 }
</script>

<script type="text/javascript">

  var load_val = $('.radio-check:checked').next('label').text();
  $('.input-group-addon').text(load_val);
  $('.radio-check').change(function() { 
    load_val = $(this).next('label').text();
    $('.input-group-addon').text(load_val); 
  });
</script>

<script type="text/javascript">
  $('#no_of_users').change(function(){
    var detailsID = $(this).val();
    if(detailsID){
      $.ajax({
       type:"GET",
       url:"{{url('details/dropdown/ajax')}}?ex_no_of_id="+detailsID,
       success:function(res){               
        if(res){
          $("#discount_details").empty();
          
          $.each(res,function(key,value){
            $("#discount_details").append('<option value="'+key+'">'+value+'</option>');
          });

        }else{
         $("#discount_details").empty();
       }
     }
   });
    }else{
      $("#discount_details").empty();

    }      
  });
</script>

</div>
</div>
</div>


@stop