@extends('dashboard.base')

@section('content')
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<style type="text/css">
  .box{
    width:600px;
    margin:0 auto;
   }
   #utype-error {
    position: absolute;
    margin-top: 2px;
    margin-left: 126px;

}

</style>
<div class="container-fluid">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Edit Plan</h4>
                    </div>
                    <div class="card-body">
                      @foreach (['danger', 'warning', 'success', 'info'] as $key)
                                @if(Session::get($key))
                                    <div class="alert alert-{{ $key }} alert-block">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        <strong>{{ Session::get($key) }}</strong>
                                    </div>
                                @endif
                            @endforeach
                      <form method="POST" id="plan" name="plan" action="{{ url('subscription-plan-update/'.$usermange->id) }}">
                            @csrf
                            <div class="form-group row ">
                              <div class="col-sm-6 required">
                                <input type="text"  class="form-control " id="planname" value="{{$usermange->plan_name}}" name="planname" placeholder="Plan Name*" required/>
                              </div>
                            </div>

                            <div class="form-group row">
                              <div class="col-sm-6">
                                <textarea title ="Details"  class="form-control" id="details" name="details" placeholder="Details" >{{$usermange->description}}</textarea>
                              </div>
                            </div>

                             <div class="form-group row col-md-12 required">
                                <label class="control-label">Create Plan for:</label>
                              <div class="col-sm-6 required">
                                <input type="checkbox" {{$usermange->plan_for == '2,3' || $usermange->plan_for == 2 ? 'checked' : ''}} name="utype[]" id="utype" value="2" >
                                <label class="control-label">Minipol</label>
                                <input type="checkbox" {{$usermange->plan_for == '2,3' ||  $usermange->plan_for == 3 ? 'checked' : ''}} name="utype[]" id ="utype" value="3" >
                                <label class="control-label">Pinipol</label>
                              </div>
                            </div>
                            <div class="form-group row col-md-12">
                              <label class="control-label">Plan Cost: </label>
                              <div class="col-sm-2">
                              <input placeholder = "Cost" type = "text" class="form-control" value = "{{$usermange->cost}}" name = "cost" id ="cost" readonly>
                              </div>

                            </div>
                           <!--  <div class="form-group row col-md-12">
                              <label class="control-label">No. of Polls for Plan:</label>
                              <div class="col-sm-2">
                                 <input placeholder = "Number of Polls" type = "number" class="form-control" value = "{{$usermange->no_of_polls}}" name = "no_of_polls" id ="no_of_polls" >
                              </div>

                            </div> -->
                            <button class="btn btn-success" type="submit">Save</button>
                            <a href="{{env('APP_URL','')}}/subscription-plan-management" class="btn btn-primary">Cancel</a>

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

@endsection
@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){


});

jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[0-9a-z\s]+$/i.test(value);
}, "Only alphabetical characters and numbers");

jQuery.validator.addMethod("pwc", function(value) {
   return /^[A-Za-z0-9\d=!\-@._*$#%]*$/.test(value) // consists of only these
       && /[a-z]/.test(value) // has a lowercase letter
       && /\d/.test(value) // has a digit
       && /[@$!%*#?&]/.test(value) // has a symbol*/
},"Password should be a combination of letters, numbers and symbols.");

jQuery.validator.addMethod("alphanumeric", function (value, element) {
    // return this.optional(element) || /^\w+$/i.test(value);
    return this.optional(element) || /^[a-zA-Z0-9@_-]+$/i.test(value);
}, "Letters, numbers, hypen, underscores and @ only please");

var max_chars = 15;
$(document).on('keydown', '#username', function(e) {

      if ($(this).val().length >= max_chars) {
        $(this).val($(this).val().substr(0, max_chars));
      }

});


 $( "#plan" ).validate({
          rules: {

              planname: {
                required: true,
                maxlength:25
              },
              details: {
                maxlength:150
              },
              cost: {
                number: true, // <-- no such method called "matches"!

              },
              utype:{
                required: true,
              }


          }
  });




</script>
@endsection