@extends('admin/layouts.master')
@section('title', 'Create Course - Admin')
@section('body')


<section class="content">
  <div class="row">
    <!-- left column -->
    <div class="col-md-12">
      <!-- general form elements -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <div class="row">
            <div class="col-md-10">
              <h3 class="box-title"> {{ __('adminstaticword.Add') }} {{ __('adminstaticword.SubscriptionPlans') }}</h3>
            </div>
            <div  class="col-md-2">
                <div><h4 class="admin-form-text"><a href="{{url('subscription_plans')}}" data-toggle="tooltip" data-original-title="Go back" class="btn-floating"><i class="material-icons"><button class="btn btn-xs btn-success abc"> << {{ __('adminstaticword.Back') }}</button> </i></a></h4></div>
            </div>
          </div>
        </div>

        <div class="box-body">
          <div class="form-group">
            <form action="{{url('subscription_plans/')}}" method="post" enctype="multipart/form-data">
              {{ csrf_field() }}

                <input type="hidden" class="form-control" name="user_id" id="exampleInputTitle" value="{{ Auth::User()->id }}" required>

                <div class="form-group">
                  <label for="exampleInputTit1e">{{ __('adminstaticword.Title') }}: <sup class="redstar">*</sup></label>
                  <input type="title" class="form-control" name="name" id="exampleInputTitle" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Title') }}" value="{{ (old('name')) }}" required>
                </div>
              
              <br>


              <div class="row">
                <div class="col-md-12">
                  <label for="exampleInputTit1e">{{ __('adminstaticword.Detail') }}:</label><sup class="redstar">*</sup>
                  <textarea id="description" name="description" rows="3" cols="100%" class="form-control" value="{{ (old('description')) }}" required></textarea>
                </div>
              </div>
              <br>
              <div class="row">
                <div class="col-sm-12">
                  <label>{{ __('adminstaticword.ProductCategory') }}:</label>
                </div>
                <div class="col-sm-3">
                  <label for="product_cate_id">{{ __('adminstaticword.ProductCate') }}:</label><sup class="redstar">*</sup>
                  <select name="product_cate_id" class="form-control" id="product_cate_id" required>
                    <option value="">{{ __('adminstaticword.PleaseSelect') }}</option>
                    @foreach ($productCategory as $item)
                      <option value="{{ $item->id }}">{{ $item->cate_name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-sm-3">
                  <label for="product_code">{{ __('adminstaticword.ProductCode') }}:</label><sup class="redstar">*</sup>
                  <input type="text" id="product_code" class="form-control" name="product_code" value="{{ (old('product_code')) }}" required>
                </div>
              </div>
              
              <br>

              <div class="row">
                <div class="col-sm-12">
                  <label for="exampleInputDetails">{{ __('adminstaticword.SubscriptionPlans') }}:</label>
                </div>
                <div class="col-md-3">
                  <div class="" id="pricebox">
                    <label for="exampleInputSlug">{{ __('adminstaticword.Price') }}: <sup class="redstar">*</sup></label>
                    <input type="number" class="form-control" name="price" id="priceMain" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Price') }}" value="{{ (old('price')) }}" required>
                  </div>
                </div>
                  
                <div class="col-md-3 d-none">
                  <label for="exampleInputSlug" class="display-none">{{ __('adminstaticword.DiscountPrice') }}: </label>
                  <input type="text" class="form-control display-none" name="offer_price" id="offerPrice" placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.DiscountPrice') }}" value="{{ (old('offer_price')) }}" disabled>
                </div>
                <div class="col-md-3">
                  <label for="">方案週期:</label><sup class="redstar">*</sup>
                  <input type="number" class="form-control" name="period" min="1" required oninput="javascript:this.value=this.value.replace(/[^\d]/g,'')" required>
                </div>
                <div class="col-md-3">
                  <label for="">週期單位:</label>
                  <select name="unit" class="form-control">
                      @foreach( $units as $unit_value => $unit_name )
                          <option value="{{$unit_value}}" 
                              {{ !empty($subscription->unit) && $subscription->unit == $unit_value ? 'selected' : '' }}
                              >
                          {{$unit_name}}
                          </option>
                      @endforeach
                    </select>
                  </div>    
                </div>
              </div>

              <div class="row">
                <div class="col-md-2">
                  <label for="is_ios_pay">{{ __('adminstaticword.IOSPay') }}</label>
                  <br>
                  <li class="tg-list-item">              
                    <input class="tgl tgl-skewed" id="ios_pay" type="checkbox">
                    <label class="tgl-btn" data-tg-off="{{ __('adminstaticword.Disable') }}" data-tg-on="{{ __('adminstaticword.Enable') }}" for="ios_pay"></label>
                  </li>
                  <input type="hidden"  name="is_ios_pay" value="0" id="is_ios_pay">
                </div>

                <div class="ios_subcription_id col-md-5 d-none">
                  <label for="ios_subcription_id">IOS 方案 ID</label>
                  <input id="ios_subcription_id" name="ios_subcription_id" type="text" class="form-control" placeholder="IOS 方案 ID">
                </div>
              </div>

              <div class="row">
                <div class="col-md-3">
                  <label for="is_family">{{ __('adminstaticword.FamilyPlan') }}</label>
                  <br>
                  <li class="tg-list-item">              
                    <input class="tgl tgl-skewed" id="family" type="checkbox"  >
                    <label class="tgl-btn" data-tg-off="{{ __('adminstaticword.Disable') }}" data-tg-on="{{ __('adminstaticword.Enable') }}" for="family"></label>
                  </li>
                  <input type="hidden"  name="is_family" value="0"  id="is_family">
                </div>

                <div class="col-md-3">
                  <label>{{ __('adminstaticword.PreviewImage') }}:</label><sup class="redstar">*</sup> - <p class="inline info">size: 250x150</p>
                  <input type="file" name="image" id="image" class="inputfile inputfile-1">
                  <label for="image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>{{ __('adminstaticword.Chooseafile') }}&hellip;</span></label>
                </div>

              </div>
              <br>
            {{-- <!--Stripe Subscription Row-->
              <div class="row">
                <div class="col-md-3">
                    <label for="cbToggleSubscription">{{ __('adminstaticword.Subscription') }}:</label>
                    <li class="tg-list-item">
                        <input class="tgl tgl-skewed" id="cbToggleSubscription" type="checkbox">
                        <label class="tgl-btn" data-tg-off="Disable" data-tg-on="Enable" for="cbToggleSubscription"></label>

                         <small class="text-muted"><i class="fa fa-question-circle"></i> Subscription bundle works with stripe payment only.</small><br>
                         <small class="text-muted"> Enable it only when you have setup stripe.</small>
                    </li>

                    <br>
                    <div id="stripeSubscriptionContainer" class="display-none">
                        <input name="is_subscription_enabled" type="hidden" value="0" id="is_subscription_enabled" />
                        <div class="form-group">
                            <label>{{ __('adminstaticword.BillingPeriod') }}</label>
                            <select class="form-control" name="billing_interval">
                              <option value="day">Daily</option>
                              <option value="week">Weekly</option>
                              <option value="month" selected>Monthly</option>
                              <option value="year">Yearly</option>
                            </select>
                        </div>

                    </div>
                </div>


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

                <label for="">{{ __('adminstaticword.Duration') }}: </label>
                <li class="tg-list-item">              
                  <input class="tgl tgl-skewed" id="duration_type" type="checkbox" name="duration_type" >
                  <label class="tgl-btn" data-tg-off="days" data-tg-on="month" for="duration_type"></label>
                </li>

                <label for="exampleInputSlug">{{ __('adminstaticword.BundleExpireDuration') }} </label>
                <input min="1" class="form-control" name="duration" type="number" id="duration"  placeholder="Enter Duration" value="{{ (old('duration')) }}">

              </div>
            </div>
            <br>
            <!--Stripe Subscription--> --}}




              <div class="box-footer">
                <button type="submit" class="btn btn-lg col-md-4 btn-primary">{{ __('adminstaticword.Submit') }}</button>
              </div>

            </form>
          </div>
        </div>
        <!-- /.box -->
      </div>
      <!-- /.box -->
    </div>
  </div>
  <!-- /.row -->
</section>

@endsection

@section('scripts')


<script>
(function($) {
"use strict";

  $(function() {
    $('.js-example-basic-single').select2();
  });

  $(function() {
    $('#cb1').change(function() {
      $('#j').val(+ $(this).prop('checked'))

    })
  })

  $(function() {
    $('#cb3').change(function() {
      $('#test').val(+ $(this).prop('checked'))
    })
  })


  $('#cb111').on('change',function(){

    if($('#cb111').is(':checked')){
      $('#pricebox').show('fast');

      $('#priceMain').prop('required','required');

    }else{
      $('#pricebox').hide('fast');

      $('#priceMain').removeAttr('required');
    }

  });

  $('#preview').on('change',function(){

    if($('#preview').is(':checked')){
      $('#document1').show('fast');
      $('#document2').hide('fast');
    }else{
      $('#document2').show('fast');
      $('#document1').hide('fast');
    }

  });

  $("#cb3").on('change', function() {
    if ($(this).is(':checked')) {
      $(this).attr('value', '1');
    }
    else {
      $(this).attr('value', '0');
    }});

  $(function(){

      $('#ms').change(function(){
        if($('#ms').val()=='yes')
        {
            $('#doabox').show();
        }
        else
        {
            $('#doabox').hide();
        }
      });

  });

  $(function() {
    $('#family').change(function() {
      $('#is_family').val(+ $(this).prop('checked'))
    })
  })

  $(function() {
    $('#ios_pay').change(function() {
      $('#is_ios_pay').val(+ $(this).prop('checked'))
      $('.ios_subcription_id').toggleClass('d-none')
      if($('#is_ios_pay').val() == 1){
        $('#ios_subcription_id').prop('required',true);
        $('#ios_subcription_id').prop('disable',false);
      }else{
        $('#ios_subcription_id').prop('required',false);
        $('#ios_subcription_id').prop('disable',true);
      }
    })
  })

  $(function(){

      $('#ms').change(function(){
        if($('#ms').val()=='yes')
        {
            $('#doaboxx').show();
        }
        else
        {
            $('#doaboxx').hide();
        }
      });

  });

  $(function(){

      $('#msd').change(function(){
        if($('#msd').val()=='yes')
        {
            $('#doa').show();
        }
        else
        {
            $('#doa').hide();
        }
      });

  });

  $(function() {
    var urlLike = '{{ url('admin/dropdown') }}';
    $('#itemegory_id').change(function() {
      var up = $('#upload_id').empty();
      var item_id = $(this).val();
      if(item_id){
        $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type:"GET",
          url: urlLike,
          data: {itemId: item_id},
          success:function(data){
            console.log(data);
            up.append('<option value="0">Please Choose</option>');
            $.each(data, function(id, title) {
              up.append($('<option>', {value:filter(id), text:filter(title)}));
            });
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
          }
        });
      }
    });
  });

  $(function() {
    var urlLike = '{{ url('admin/gitem') }}';
    $('#upload_id').change(function() {
      var up = $('#grand').empty();
      var item_id = $(this).val();
      if(item_id){
        $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type:"GET",
          url: urlLike,
          data: {itemId: item_id},
          success:function(data){
            console.log(data);
            up.append('<option value="0">Please Choose</option>');
            $.each(data, function(id, title) {
              up.append($('<option>', {value:filter(id), text:filter(title)}));
            });
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
          }
        });
      }
    });
  });
})(jQuery);
</script>

@endsection