@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-tit">


               </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:30px;height:30px;margin-right:10px;">

                                                            New Role
                                                        </a>
                                                    </li>
                                                </ul>


                                            </div>

                                            <div class="col-lg-9">
                                                        <h4 class="fs-16 fw-semibold mb-2 mx-3">New Role</h4>

                                                        <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">Description</label>
                                                                    <textarea id="propertyname" rows="1" 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="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="next" id="nextBtn">
                                                                <input type="hidden" name="edit_id" value="{{ $role_id }}">
                                                                <button type="submit" class="btn btn-primary">
                                                                    {{ !empty($role_id) ? 'Update' : 'Create' }} Role
                                                                </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);
                        Swal.fire('Updated Successfully');
                        window.location.href = '/roleList';
                     },
                     error: function(xhr) {
                        console.log(xhr.responseText);
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function (index, value) {
                            $('div.'+index+'').text(value);
                        });
                     }
                  });
               }
            });
         });
   });
</script>
@endsection