@extends('user.layouts.template')

@section('style')
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <!-- DateTime picker CSS CDN -->
   <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
   <style>
      .form-content-wizard {
         width: 100%;
         position: relative;
         top: -20px;
      }

      .checkbox-inpu {
         width: 38px !important;
      }

      .card-body {
         padding: 0px !important;
      }

      .datepicker.datepicker-dropdown.datepicker-orient-left.dropdown-menu {
         display: block !important;
         pointer-events: visibleFill !important;
         touch-action: auto !important;
         opacity: 1 !important;
         transform: scale(1) !important;
         visibility: visible !important;
      }

      .asterisk {
         color: red;
      }

      input::placeholder {
         color: black !important;
      }

      .form-select {
         color: black !important;
      }

      .form-control {
         background: var(--nf-mainnav-bg) !important;

         color: var(--bs-heading-color) !important;
      }
   </style>
@endsection

@section('content')
   <!-- Content Start -->

   <div class="content__boxed">
      <div class="content__wrap">

         <div id="page-titl">
            Team Management <i class="ri-arrow-right-s-line"></i> <a class="text-white" style="text-decoration:none;"
               href="{{ route('roleList') }}">List Role</a> <i class="ri-arrow-right-s-line"></i> Update Role
         </div>

         <div class="card p-2">

            <!-- Custom style form wizard -->
            <div class="align-content-stretch">

               <div class="card-body">

                  <!-- Form sections -->
                  <div class="mt-3 mb-3">


                     <div class="row">
                        <div class="col-lg-3">


                           <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                              role="tablist">
                              <li class="nav-item" role="presentation">
                                 <a href="#generaldetails1" id="generaldetails1-tab" data-bs-toggle="tab" data-toggle="tab"
                                    class="nav-link rounded-0 py-2 active" aria-selected="true" role="tab"><img
                                       src="frontend/assets/img/1.png" class="tab-img"
                                       style="width:25px;height:25px;margin-right:10px;object-fit:contain;">
                                    Role
                                 </a>
                              </li>
                           </ul>


                        </div>

                        <div class="col-lg-9">
                           <form id="verticalwizard" action="" method="POST">
                              @csrf
                              <div class="row py-2 mx-2">
                                 <div class="col-lg-6">
                                    <div class="mb-3">
                                       <label for="propertyname" class="form-label">Name</label>
                                       <input id="propertyname" type="text"
                                          class="form-control @error('name') is-invalid @enderror"
                                          placeholder="Enter Role Name" name="name"
                                          value="{{ old('name', $role->name ?? '') }}" readonly>
                                       <div class="text-red-600 text-sm errors name"></div>
                                    </div>
                                 </div> <!-- end col -->


                                 <div class="col-lg-6">
                                    <div class="mb-3">
                                       <label for="propertyname" class="form-label">Title</label>
                                       <input id="propertyname" type="text"
                                          class="form-control @error('name') is-invalid @enderror"
                                          placeholder="Enter Role Name" name="title"
                                          value="{{ old('title', $role->title ?? '') }}">
                                       <div class="text-red-600 text-sm errors name"></div>
                                    </div>
                                 </div> <!-- end col -->


                                 <div class="col-lg-6">
                                    <div class="mb-3">
                                       <label for="Status" class="form-label">Status</label>

                                       <select class="form-select @error('status') is-invalid @enderror"
                                          aria-label="Default select example" name="status">
                                          <option value="1" @if($role && $role->status == 1) selected @endif>Active
                                          </option>
                                          <option value="0" @if($role && $role->status == 0) selected @endif>Inactive
                                          </option>
                                       </select>
                                       <div class="text-red-600 text-sm errors status"></div>
                                    </div>
                                 </div> <!-- end col -->

                                 <div class="col-lg-6">
                                    <div class="mb-3">
                                       <label for="propertyname" class="form-label">Description</label>
                                       <textarea id="propertyname" style="min-height:100px" type="text"
                                          class="form-control @error('description') is-invalid @enderror"
                                          placeholder="Enter Description" name="description">{{ old('description', $role->description ?? '') }}</textarea>
                                       <div class="text-red-600 text-sm errors description"></div>
                                    </div>
                                 </div> <!-- end col -->

                                 <div class="next" id="nextBtn">
                                    <input type="hidden" name="edit_id" value="{{ $role_id }}">
                                    <button type="submit" class="btn btn-primary">
                                       {{ $PageTitle }}
                                    </button>
                                 </div>

                              </div> <!-- end row -->
                           </form>
                        </div>
                     </div> <!-- end #horizontalwizard-->
                  </div>
                  <!-- END : Form sections -->


               </div>
            </div>
            <!-- END : Custom style form wizard -->

         </div>




      </div>
   </div>
   <!-- Content End -->
@endsection

@section('script')
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

   <script type="text/javascript">
      $(document).ready(function () {
         $('#verticalwizard').on('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $('div.errors').empty();

            var formData = new FormData(this);

            // Swal.fire({
            //    title: 'Warning',
            //    text: 'Are you sure to store?',
            //    icon: 'warning',
            //    showCancelButton: true,
            //    customClass: {
            //       confirmButton: 'btn btn-danger',
            //       cancelButton: 'btn btn-secondary'
            //    },
            //    confirmButtonText: 'Yes'
            // }).then((result) => {
            //    if(result.isConfirmed) {

            $.ajax({
               url: '{{ route("roles.store") }}',
               type: 'POST',
               contentType: false,
               processData: false,
               data: formData,
               success: function (response) {
                  console.log(response);
                  if (response.status == true) {
                     Swal.fire({
                        title: 'Role updated successfully',
                        icon: 'success',
                     }).then((result) => {
                        window.location.href = '/roleList';
                     });
                     //   Swal.fire('Updated Successfully');
                  }
               },
               error: function (xhr) {
                  console.log(xhr.responseText);
                  let errors = xhr.responseJSON.errors;
                  $.each(errors, function (index, value) {
                     $('div.' + index + '').text(value);
                  });
               }
            });
            // }
            // });
         });
      });
   </script>
@endsection