@extends('backend.layouts.app')

@section('content')

<!--<script src="{{ asset('expand_theme/css/coupon.css') }}"></script>-->

 <style type="text/css">

  .showhide {  
   display:none;
 }
</style>

<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>

  <div class="container">
    <h2>Add New Coupon</h2>
    
	{!! Form::open(array('url' => 'coupons/update', 'class' => 'form-horizontal edit_form')) !!}
      {{ csrf_field() }}

      <div class="row">
       
      <div class="col-sm-12{{ $errors->has('coupon_name') ? ' has-error' : '' }}">
        <label class="control-label col-sm-2" for="coupon_name" >Coupon Name *</label>

        <div class="col-sm-4">
          <input type="text" class="form-control" value="{{ old('coupon_name') }}" id="coupon_name" name="coupon_name" required autofocus >

          @if ($errors->has('coupon_name'))
          <span class="help-block">
            <strong>{{ $errors->first('coupon_name') }}</strong>
          </span>
          @endif
        </div>
     
    </div>
    </div>
   <div class="row">
      <div class="col-sm-12">
        <label class="control-label col-sm-2" for="code">Code *</label>
        <div class="col-sm-4">          
          <input type="text" class="form-control" id="coupon_code" name="coupon_code" required autofocus>
           @if ($errors->has('coupon_code'))
          <span class="help-block">
            <strong>{{ $errors->first('coupon_code') }}</strong>
          </span>
          @endif
        </div>
      </div>
    </div> 
    <br />
    
<div class="row">
     <div class="col-sm-12">        
        <div class="col-sm-offset-2 col-sm-4">
         
             <input type="checkbox" name="one_time" checked="checked" class="checkbox">&nbsp;One Time Use
          </div>
        </div>
      </div>
  
<div class="row">
  
        <div class="col-sm-12">
        <label class="control-label col-sm-2" for="code">Eligible Programs...</label>
        </div>

</div><br />

<div class="row">
      <div class="container">
        <div class="col-sm-12">
          <label><input type="radio" name="all_programs" value="1" onclick="show1();" />All Programs</label>
          <label><input type="radio" name="all_programs" value="0"  onclick="show2();" checked />Select Programs </label>
          
        </div>
      </div>
      
      </div>

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

          <select name="coupon_eligible_program[]" id="classes" class="form-control" multiple="multiple"  autofocus>
            @foreach($classes as $key => $class)
            <option value="{{ $class }}">{{ $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>
  </div>
      <div class="row">
 <div class="col-sm-6{{ $errors->has('coupon_amount') ? ' has-error' : '' }} || {{ $errors->has('coupon_percent') ? ' has-error' : '' }} ">
      
        <label class="control-label col-sm-2" for="code">Amount *</label>        
        <div class="col-sm-offset-2 col-sm-4">
          <input type="radio" class="radioBtn" name="Radio" id="Radio" value="radio1" checked>Fixed
          <input class="radioBtn" type="radio" name="Radio" id="Radio" value="radio2" >Percentage
          </div>&nbsp;
          <div class="container">
            <div class="col-sm-6">
          <div id="Amount" style="display:none">
             <div class="input-group">
 <span class="input-group-addon">$</span>
            <input type="text" class="form-control" value="{{ old('coupon_amount') }}" id="coupon_amount" name="coupon_amount" placeholder="Amount" autofocus>
<span class="input-group-addon">.00</span>
</div>
            @if ($errors->has('coupon_amount'))
            <span class="help-block">
              <strong>{{ $errors->first('coupon_amount') }}</strong>
            </span>
            @endif
          </div>
          <div id="Percentage" style="display:none" >
            <div class="input-group">
  <span class="input-group-addon">%</span>
            <input type="text" class="form-control" value="{{ old('coupon_percent') }}" id="coupon_percent" name="coupon_percent" placeholder="Percentage" autofocus>
<span class="input-group-addon"></span>
</div>
            @if ($errors->has('coupon_percent'))
            <span class="help-block">
              <strong>{{ $errors->first('coupon_percent') }}</strong>
            </span>
            @endif
          </div>
        </div>
      </div>
        </div>
      </div>

      &nbsp;
 <div class="row">
  <div class="container">
      
        <label class="control-label col-sm-2" for="code">Applies to</label>        
        <div class="col-sm-12">
          <div class="dropdown">

            <select class="dropdown-toggle" name="applies" type="select" data-toggle="dropdown">
              @foreach($applies_to as $applies)
              <option value="{{$applies->apply}}" >{{$applies->apply}}</option>
              @endforeach

              <span class="caret"></span></select>

            </div>
          </div>
        </div>
      </div>
    <div class="row">
  <div class="container">
       
          <label class="control-label col-sm-2" for="code">Usage</label>        
          <div class="col-sm-12">
            <div class="dropdown">
              <select class="dropdown-toggle" type="select" name="usage" data-toggle="dropdown">
                @foreach($usage as $usages)
                <option value="{{ $usages->usage}}" >{{ $usages->usage}}</option>
                @endforeach
                <span class="caret"></span></select>

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

           <div class="row">
            <div class="container">
  <div class="col-sm-6">    
          <div class="form-group{{ $errors->has('start_date') ? ' has-error' : '' }}">
        <label for="start_date" class="control-label col-sm-2">Start Date *</label>

        <div class="col-sm-4">
          <input type="date" class="form-control" value="{{ old('start_date') }}" id="start_date" name="start_date" required autofocus>

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

    <div class="col-sm-6">
       <div class="form-group{{ $errors->has('end_date') ? ' has-error' : '' }}">
        <label for="end_date" class="control-label col-sm-2">Expiry Date *</label>

        <div class="col-sm-4">
          <input type="date" class="form-control" value="{{ old('end_date') }}" id="end_date" name="end_date" required autofocus>
        </div>
          @if ($errors->has('end_date'))
          <span class="help-block">
            <strong>{{ $errors->first('end_date') }}</strong>
          </span>
          @endif
        </div>
      </div>
       </div>
</div>

         <div class="row">
<div class="container">
<div class="col-sm-6">
      
            
 <button type="reset" style="color:#50A4D7;" class="cancle-btn">Cancel</button>
            
          </div>


<div class="col-sm-6">
        
            <div class="col-sm-offset-2 col-sm-4">
              <button type="submit" class="btn btn-default">Save</button>
            </div>
          </div>
    
      
    </div>
    </div>
        </form>
</div>

      <script src="{{ asset('js/app.js') }}"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
      <script>
        $(document).ready(function(){
          $('#classes').select2({
            placeholder : 'Select Programms',
            tags: true
          });
        });
      </script>


      <script>

        function show1(){
          document.getElementById('autoUpdate').style.display ='none';
        }
        function show2(){
          document.getElementById('autoUpdate').style.display = 'block';
        }

      </script>

      <script>

        function showOne(){
          document.getElementById('autoOne').style.display ='none';
        }
        function showTwo(){
          document.getElementById('autoTwo').style.display = 'none';
        }

      </script>

      <script type="text/javascript">

        $(document).ready(function () {
          $('#id_radio1').click(function () {
            $('#div2').hide('fast');
            $('#div1').show('fast');
          });
          $('#id_radio2').click(function () {
            $('#div1').hide('fast');
            $('#div2').show('fast');
          });
        });
      </script>

      <script type="text/javascript">
        $('input[type="radio"]').click(function(){
          if($(this).attr("value")=="radio1"){
            $("#Amount").show('slow');
            $("#Percentage").hide('slow');
          }
          if($(this).attr("value")=="radio2"){
            $("#Amount").hide('slow');
            $("#Percentage").show('slow');

          }        
        });
        $('input[type="radio"]').trigger('click');
      </script>



@stop