@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;
      }
   </style>
@endsection

@section('content')
<!-- Content Start -->
		 
         <div class="content__boxed">
            <div class="content__wrap">

               <div id="page-tit">


               </div>

               <div class="card">

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

                     <div class="card-body">

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


                                        <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;">
                                                            New User
                                                        </a>
                                                    </li>
                                                </ul>


                                            </div>

                                            <div class="col-lg-9">
                                                        <h4 class="fs-16 fw-semibold mb-1">New User</h4>

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

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

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

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

                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="propertpass"
                                                                        class="form-label">Password</label>
                                                                    <input id="propertypass" type="text"
                                                                        class="form-control @error('password') is-invalid @enderror"
                                                                        placeholder="Enter Password" name="password" value="{{ old('password') }}">
                                                                        <div class="text-red-600 text-sm errors password"></div>
                                                                      
                                                                </div>
                                                            </div> <!-- end col -->

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

                                                                    <select class="form-select @error('role') is-invalid @enderror"
                                                                        aria-label="Default select example" name="role">
                                                                        <option value="" selected>Select Role
                                                                        </option>
                                                                        @foreach($roles as $role)
                                                                        <option value="{{ $role->id }}" @if($user && $user->role_id == $role->id) selected @endif>{{ $role->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                        <div class="text-red-600 text-sm errors role"></div>
                                                                      
                                                                </div>
                                                            </div> <!-- end col -->

                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <div class="form-check">
                                                                        <input type="hidden" name="welcome_email" value="{{ old('welcome_email', $user->welcome_email ?? '') }}">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            value="1" id="flexCheckDefault" @if($user && $user->welcome_email == 1) checked @endif>    
                                                                        <label class="form-check-label"
                                                                            for="flexCheckDefault">
                                                                            Send Welcome Email
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="next" id="nextBtn">
                                                                <input type="hidden" name="edit_id" value="{{ $user_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("users.store") }}',
                     type: 'POST',
                     contentType: false,
                     processData: false,
                     data: formData,
                     success: function(response) {
                        console.log(response);
						
						if(response.status == true) {
                            Swal.fire({
                                title: '{{ $PageTitle == "Update User" ? "User updated successfully" : "User created successfully" }}',
                                icon: 'success',
                            }).then((result) => {
                                window.location.href = '/userList';
                            });
                        //   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);
                        });
                     }
                  });
            //    }
            // });
         });
		 
		 $('#flexCheckDefault').on('click', function () {
			 if($(this).is(':checked')) {
				 $('input[name="welcome_email"]').val(1);
			 } else {
				 $('input[name="welcome_email"]').val(0);
			 }
		 });
   });
</script>
@endsection