@extends('admin.layout.main')
@section('title','Profile-Edit')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 align-items-center d-flex breadcrumb-style">
              <h1 class="m-0">Profile</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard </a></li>
                <li class="breadcrumb-item active">Edit</li>
              </ol>
            </div><!-- /.col -->

          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
            <div class="card pb-4 pt-2 px-3 w-100">
              <form class="form row pt-3 mb-3 validate" action="{{ route('admin.profile.update',$userDetail['id']) }}" method="post" enctype="multipart/form-data" name="dataForm" id="dataForm">
                @csrf
                
                <input type="hidden" name="user_id" id="user_id" value="{{ @$userDetail['id'] }}" />
                <input type="hidden" name="old_password" id="old_password" value="{{ $userDetail['password'] }}" />

                <div class="col-md-6">
                <div class="form-floating form-item mb-3">
                      <div class="form-item form-float-style serach-rem mb-3">
                        <div class="select top-space-rem after-drp form-float-style ">
                          <select data-live-search="true" name="role" id="role" class="order-td-input selectpicker select-text height_drp is-valid" disabled>
                        <option value="" >Select Role</option>
                        @foreach(App\Models\Role::select('id','name','code')->where('status','1')->get() as $value)
                          <option value="{{$value->code}}" @if($userDetail['role_code'] == $value->code) selected="selected" @endif>{{ ucwords($value->name) }}</option>
                        @endforeach
                        </select>
                        <label class="select-label searchable-drp" style="font-size: 12px; font-weight: 400 !important;">Role</label>
                        </div>                        
                      </div>
                    </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                      <input type="text" id="fname" name="name" autocomplete="off" value="{{ $userDetail['name'] }}" class="is-valid">
                    <label for="fname">Full Name<span class="req-star">*</span></label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input type="email" id="email-id" name="email" autocomplete="off" value="{{ $userDetail['email'] }}" class="is-valid" disabled>
                    <label for="email-id">Email Address</label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input type="password" id="new_password" name="new_password" autocomplete="off" value="" class="is-valid">
                    <label for="newpswrd">New Password</label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input type="password" id="confirm-pswrd" name="confirm_password" autocomplete="off" value="" class="is-valid">
                    <label for="confirm-pswrd">Confirm New Password</label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                    <input type="file" id="file" name="profile_image" class="file-upload" autocomplete="off">
                    <label for="file">Upload User Avatar</label>
                    <img src="{{$userDetail->profile_image ?? URL::asset('assets/images/no-image.png')}}" name="image" width="150" height="150" class="img_prev">


                  </div>
                </div>
                <div class="cards-btn">
                  <button type="submit" id="disBtn" class="btn btn-success form-btn-success">Submit</button>
                  <a href="{{ url()->previous() }}" class="btn btn-danger form-btn-danger">Cancel</a>
                </div>
              </form>

            </div>



          </div>
          <!-- /.row -->
        </div>
        <!--/. container-fluid -->
      </section>
   @endsection
   @section('js')
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
  
  <script>
    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    $(function () {
      //jquery Form validation
      $('*[value=""]').removeClass('is-valid');

      $('#dataForm').validate({
        rules: {
          // role: {
          //   required: true,
            
          // },
          name: {
            required: true,
            lettersonly:true,
            maxlength:50
          },
          // email: {
          //   required: true,
          //   // email:true

          // },
          new_password:{
            minlength:8,
            maxlength:16
          },
          confirm_password:{
            required: function(element){
              return $("#new_password").val()!="";
            },
            equalTo:"#new_password"
          },
          profile_image: {
            required: false,
            extension: "jpg|jpeg|png",
            maxsize: 2000000
            
          },
          
        },


        messages: {
          // role: {
          //   required: "Please select a Role"

          // },
          name: {
            required: "Please enter a Full Name"
          },
          // email: {
          //   required: "Please enter an Email Address",
          // },
          new_password:{
            required: "Please enter a New Password",
          },
          confirm_password:{
            required: "Please enter a Confirm Password",
            equalTo:"Confirm Password does not match"
          },
          profile_image: {
            
            extension: "Please select image format must be .jpg, .jpeg or .png",
            maxsize: "Please upload image size less than 2MB"

          },
          
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-item').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) { 
            $("#disBtn").attr("disabled", true);
          form.submit();
        }
      });
    });  
    // INCLUDE JQUERY & JQUERY UI 1.12.1
    $(function () {
      $("#datepicker").datepicker({
        dateFormat: "dd-mm-yy",
        duration: "fast"
      });
    });
  </script>

  
  
  <!-- Page specific script -->
  <script>
    CKEDITOR.replace('editor1');
    CKEDITOR.on('instanceReady', function (evt) {
      var editor = evt.editor;

      editor.on('change', function (e) {
        var contentSpace = editor.ui.space('contents');
        var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
        var ckeditorFrame = ckeditorFrameCollection[0];
        var innerDoc = ckeditorFrame.contentDocument;
        var innerDocTextAreaHeight = $(innerDoc.body).height();
        console.log(innerDocTextAreaHeight);
      });
    });

    document.getElementById('flexCheckDefault1').onclick = function () {
      var checkboxes = document.getElementsByName('check');
      for (var checkbox of checkboxes) {
        checkbox.checked = this.checked;
      }
    }

    
  </script>

@append