@extends('layouts.admin')
@section('content')
<style>
  .pb-border {
      padding-bottom: 0px;
    margin-bottom: 10px !important;
   }
</style>
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li><a href="{{ url('/admin/roles') }}">Roles</a></li>
               <li>Edit New Role</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-2x"></i> </a>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 text-center pb-3">
            <h3 class="text-blue fw-700">Edit New Role</h3>
         </div>
      </div>
      <!-- ============New Employee Forms============= -->
      <div class="col-md-8 offset-md-2 grid-margin stretch-card">
        <form action="{{url('/admin/roles/update',['id'=>base64_encode($roles->id)])}}"  method="POST" id="editRoleFrm">
            @csrf
                <div class="form-body">
                    <div class="card radius shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                <h4 class="card-title mb-1 mt-3">Edit Role</h4>
                                <p class="pb-border"> </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="role" class="form-control-label font-weight-300">Role <span class="text-danger">*</span></label>
                                        <input type="text" id="role" class="form-control role ignoreSpaceFornotext" name="role" value="{{$roles->role}}" placeholder="e.g. Role Name">
                                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-role"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="">
                                <button class="btn float-left m-0 btn-submission roleBtn" type="submit">Update</button>
                            </div>
                            <div class="text-center">
                                <div class="error"></div>
                            </div>
                        </div>
                    </div>
                </div>
        </form>
      </div>
   </div>
</div>

<script>
$(document).ready(function(){
     //
     $('.roleBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });
     //
    $(document).on('submit', 'form#editRoleFrm', function (event) {
      event.preventDefault();
      //clearing the error msg
      $('p.error_container').html("");
      $('.error-control').removeClass('border-danger');
      $('.roleBtn').attr('disabled',true);
      $('.form-control').removeClass('border-danger');
      var form = $(this);
      var data = new FormData($(this)[0]);
      var url = form.attr("action");

      $.ajax({
         type: form.attr('method'),
         url: url,
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         success: function (response) {

               console.log(response);
               if(response.success==true) {
                  // window.location = "{{ url('/')}}"+"/sla/?created=true";
                  toastr.success('Role Updated successfully');
                  window.setTimeout(function(){
                     window.location = "{{ url('/')}}"+"/admin/roles";
                  },2000);
               }
               //show the form validates error
                if(response.success==false ) {
                   $('.roleBtn').attr('disabled',false);
                     var loadingText = 'Submit';
                     $('.roleBtn').html(loadingText);
                     for (control in response.errors) {
                         $('#error-' + control).html(response.errors[control]);
                     }
                }
         },
         error: function (response) {
            console.log(response);
         }
      });
      return false;
    });
});

</script>
@endsection