@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>
<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 User</h4>
                    </div>
                    <div class="card-body">
                      @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                      @endif
                       <form method="POST" id="myForm" name="myForm" action="{{url('user-manage-update/'.$usermange->id)}}">

                            @csrf

                            <div class="form-group row ">

                             <div class="col-sm-6 required">
                                     <input type="radio" name="utype" value="2" {{ $usermange->user_role == '2' ? 'checked': '' }}>
                                    <label class="control-label">Minipol</label>
                                    <input type="radio" name="utype" value="3" {{ ($usermange->user_role==3) ?  "checked" : "" }} >
                                      <label class="control-label">Pinipol</label>
                                   




                                </div>

                          </div>

                            <div class="form-group row ">
                                <div class="col-sm-6 required">
                                    <label class="control-label">Firstname</label>
                                         <input type="text"  class="form-control " id="firstname" value="{{ $usermange->firstname }}" name="firstname" placeholder="First Name" >
                                </div>

                                 <div class="col-sm-6 required">
                                    <label class="control-label">Lastname</label>
                                         <input type="text"  class="form-control" id="" value="{{ $usermange->lastname }}" name="lastname" placeholder="Last Name" >
                                </div>

                              </div>

                               <div class="form-group row" id="mini_div">
                      <div class="col-sm-6">
                         <label class="control-label">Parent Email Address</label>
                        <input type="email"  class="form-control" id="parentemail" value="{{ $usermange->email }}" name="parentemail" placeholder="Parent Email Address" >

                        
                         <span id="error_pemail"></span>
                      </div>
                       <div class="col-sm-6">
                         <label class="control-label">Child Email Address</label>
                        <input type="email"  class="form-control" id="childemail" value="{{ isset($usermange->child_email)? $usermange->child_email:'' }}" name="childemail" placeholder="Child Email Address" >
                        <span id="error_childemail"></span>
                      </div>
                     </div>

                       <div class="form-group row" id="pini_div">
                      <div class="col-sm-6">
                         <label class="control-label">Email Address</label>
                        <input type="email"  class="form-control " id="pini_email" onchange="checkEmail(this)" value="{{ $usermange->email}}" name="email" placeholder=" Email Address" >

                        <span id="error_email"></span>
                      </div>

                      </div>

                    <!-- <div class="form-group row">


                      <div class="col-sm-6">
                        <label class="control-label">Password</label>
                        <input type="password"  class="form-control" id="password" value="" name="password" placeholder="Password*" >
                      </div>
                       <div class="col-sm-6">
                        <label class="control-label">Confirm Password</label>
                         <input type="password"  class="form-control" id="confirm" name="confirm" value="" placeholder="Confirm Password*" >
                      </div>

                     </div> -->


                     <div class="form-group row">


                       <div class="col-sm-6">
                          <label class="control-label">Phone Number</label>
                <input type="text"  class="form-control" id="phone_no" value="{{$usermange->phone_no}}" name="phone_no" placeholder="Phone Number" >
                      </div>
                      <div class="col-sm-6">
                         <label class="control-label">Username</label>
                <input type="text"  class="form-control" id="username" value="{{$usermange->username}}" name="username" placeholder="Username" readonly="readonly">

                      </div>



              </div>
               <div class="form-group row">
                 <div class="col-sm-6">
                        <label class="control-label">Date of Birth</label>
                   <!--       <input type="date"  class="form-control" name="dob" id="dob" value="{{$usermange->dob}}" >
 -->
                          <input placeholder = "dd-mm-yyyy*"  type = "text" onfocus = "(this.type = 'date')" class="form-control" name="dob" id="dob" value="{{date('d-m-Y', strtotime($usermange->dob))}}" >

                      </div>
                    <!--   <div class="col-sm-6">
                         <button type="button" class="btn btn-primary" onclick="checkUsername(this)" style="float:right;">Check Avaliablity</button>
                          <span id="error_email"></span>
                      </div> -->



                      </div>
                       <div class="form-group row">
                       <div class="col-sm-6 required">
                                    <label class="control-label">Suspend User</label>
                                     <input type="checkbox" id="suspend" name="suspend" value="1"  {{ $usermange->suspend == '1' ? 'checked': '0' }}>


                                </div>
                                </div>
                         <button class="btn btn-success" type="submit">Update</button>
                            <a href="{{ env('APP_URL', '')}}/user-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">

jQuery.validator.addMethod('parentemail', function (value) {
    return /^([a-zA-Z0-9_\-\.]+)\+?([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/.test(value)
  },"Please enter a valid email address.");
jQuery.validator.addMethod("lettersonly", function(value, element) { 
    return this.optional(element) || /^[a-zA-Z\-\s]*$/.test(value);
},"Only letters are allow");

   

$( "#myForm" ).validate({
        rules: {
            firstname: {
               // required: true,
                lettersonly:true,
                maxlength:30
            },
          lastname: {
             lettersonly:true,
             maxlength:30
            },
            parentemail: {
                required: true,
                 parentemail: true,

                maxlength:60
            },
            childemail: {
               // required: true,
               //  parentemail: true,

                maxlength:60
            },
            email: {
                required: true,
                 parentemail: true,

                maxlength:60
            },

             dob: {
                required: true

            },
             phone_no: {
                number: true, // <-- no such method called "matches"!
                minlength:10,
                maxlength:12
            },

        }
    });

</script>
<script>
  $(document).ready( function () {

      $("#dob").on("change",function(){

         var utype=$('input[name="utype"]:checked').val();
           var child_dob = $(this).val();
              var age = moment().diff(moment(child_dob, 'YYYY-MM-DD'), 'years');
    if(utype){

         $(".btn-success"). attr("disabled", false);

             if(utype=='3'){


              if(age<=13){
                       alert('Age should be above 13 years');
                       $(".btn-success"). attr("disabled", true);
                     }else{

                          $(".btn-success"). attr("disabled", false);
                     }



               } else if(utype=='2'){


                     if(age <= 6 || age > 14){
                       alert('Age should be between 7 to 14 years');
                       $(".btn-success"). attr("disabled", true);
                     }else{

                          $(".btn-success"). attr("disabled", false);
                     }


               }
           }else{

          alert('User Type field is required');
           $(".btn-success"). attr("disabled", true);
           }


          });

  });

  //  function checkUsername(that){

  //    var username = $('#username').val();
  //    var _token = $('input[name="_token"]').val();

  //   $.ajax({

  //     url:"{{ route('username_available.check') }}",
  //     method:"POST",
  //     data:{username:username, _token:_token},
  //     success:function(result)
  //     {

  //          if(result == 'unique')
  //          {
  //           $('#error_email').html('<label class="text-success">Username Available</label>');
  //            $(".btn-success"). attr("disabled", false);
  //          }
  //          else
  //          {
  //           $('#error_email').html('<label class="error">Username not Available</label>');
  //            $(".btn-success"). attr("disabled", true);
  //          }
  //       }
  //   })
  // }
// function cparentEmail(thatt){

//      var pemail = $(thatt).val();
//      var _token = $('input[name="_token"]').val();

//     if (ValidateEmail(pemail)) {
        
       
//     $.ajax({

//       url:"{{ route('username_available.check') }}",
//       method:"POST",
//       data:{pemail:pemail, _token:_token},
//       success:function(result)
//       {

//            // if(result == 'unique')
//            // {

//            //  $('#error_email').html('<br/><label class="text-success">Email Available</label>');
//            //   $(".btn-success"). attr("disabled", false);
//            // }
          
//            if(result == 'not_unique')
//            { 


//             $('#error_pemail').html('<br/<><label class="error"> Email Already Exists</label>');
//                $(".btn-success"). attr("disabled", true);
//            }else{
//                 $(".btn-success"). attr("disabled", false);
//                  $('#error_pemail').html('');

//            }
//         }
//     })


//   }else{
//   $('#error_pemail').html('');

//   }
// }


    function checkEmail(that){

     var email = $('#pini_email').val();
     var _token = $('input[name="_token"]').val();
    
    if (ValidateEmail(email)) {
        
       
    $.ajax({

      url:"{{ route('username_available.check') }}",
      method:"POST",
      data:{email:email, _token:_token},
      success:function(result)
      {

           // if(result == 'unique')
           // {

           //  $('#error_email').html('<br/><label class="text-success">Email Available</label>');
           //   $(".btn-success"). attr("disabled", false);
           // }
         if(result == 'not_unique')
           {

            $('#error_email').html('<br/<><label class="error">Email Already Exists</label>');
               $(".btn-success"). attr("disabled", true);
           }else{
              $(".btn-success"). attr("disabled", false);

                 $('#error_email').html('');

           }
        }
    })


  }else{
  $('#error_email').html('');

  }
}

//     function childEmail(that){

//      var child_email = $('#childemail').val();
//      var _token = $('input[name="_token"]').val();
//      if (ValidateEmail(child_email)) {
//     $.ajax({

//       url:"{{ route('username_available.check') }}",
//       method:"POST",
//       data:{child_email:child_email, _token:_token},
//       success:function(result)
//       {

//            // if(result == 'unique')
//            // {

//            //  $('#error_childemail').html('<br/><label class="text-success">Child Email Available</label>');
//            //    $(".btn-success"). attr("disabled", false);
//            // }

//            if(result == 'not_unique')
//            {

//             $('#error_childemail').html('<br/<><label class="error">Child Email Already Exists</label>');
//              $(".btn-success"). attr("disabled", true);
//            }else{

//                $(".btn-success"). attr("disabled", false);
//                  $('#error_childemail').html('');

//            }


//         }
//     })
//    }else{
//      $('#error_childemail').html('');
//    }
// }

  function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    }

  $(document).ready( function () {



      var utypes='{{ $usermange->user_role }}';

      if(utypes==3){



          $('#mini_div').css('display','none');
      }else{



          $('#pini_div').css('display','none');


      }

   $('input[name="utype"]').on("change",function(){

   // alert('1');

         var utype=$(this).val();

            if(utype==2){

              $("input[name=dob]").val("");


              $('#pini_div').css('display','none');
              $('#mini_div').show();


            }else {

              $("input[name=dob]").val("");

               $('#pini_div').css('display','block');
               $('#mini_div').css('display','none');


            }

    });
  });


</script>
@endsection