@extends('layouts.app')
@section('content')
@php
use App\Helpers\RouteHelper;
@endphp

@include(RouteHelper::getSidebarView())


    <main id="" class="side_user">
        <!-- Hero -->
        <div class="bg-body-light ">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">


                </div>
            </div>
        </div>

        <!-- END Hero -->
        <div class="content">
            <div class="block block-rounded">
                <div class="block-header">
                    <h4 class="block-title ">Add Roles</h4>
                </div>
                <div class="block-content block-content-full">
                    <div class="loader" id="loader" style="display: none;">
                        <div class="external-shadow">
                            <div class="central">
                            <div class="intern"></div>
                            </div>
                        </div>
                        </div>
                    <form action="{{ route('roles.store') }}" method="POST">
                        @csrf
                        @method('POST')

                        <!-- Name -->
                        <div class="form-outline mb-4 col-8">
                            <label>Name</label>
                            <input type="text" name="name" maxlength="255" minlength="3" required
                                value="{{ old('name') }}" class="form-control form-control-lg" placeholder="Enter Name" />

                        </div>
                        @error('name')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror




                        <div class="form-outline mb-4 col-8">
                            <label>Mobile</label>
                            <input type="text" maxlength="10" pattern="[6789][0-9]{9}" name="mobile" required
                                value="{{ old('mobile') }}" class="form-control form-control-lg"
                                placeholder="Enter a valid mobile number" />
                        </div>

                        @error('mobile')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror


                        <!-- Email input -->
                        <div class="form-outline mb-4 col-8">
                            <label>Email</label>
                            <input type="email" maxlength="255" name="email"
                                pattern="[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required value="{{ old('email') }}"
                                class="form-control form-control-lg" placeholder="Enter a valid email address" />
                        </div>
                        @error('email')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror



                        <!-- Password input -->
                        <div class="form-outline mb-3 col-8">
                            <label>Password</label>
                            <input type="password" required name="password" id="password1" maxlength="15" minlength="6"
                                placeholder="Password" class="form-control form-control-lg" />
                            <span toggle="#password-field" onclick="myPassword()"
                                class="fa fa-fw fa-eye-slash field-icon toggle-password"></span>

                        </div>
                        @error('password')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror


                        <div class="form-outline mb-3 col-8">
                            <label>Confirm Password</label>
                            <input type="password" required name="confirm_password" id="password2" maxlength="15"
                                class="form-control form-control-lg" placeholder="Confirm Password">
                            <span toggle="#password-field" onclick="myConfirmPassword()"
                                class="fa fa-fw fa-eye-slash field-icon toggle-password"></span>

                        </div>

                        @error('confirm_password')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <div class="px-1 col-sm-6 modal-label-input">
                            <label class="text-primary-dark" for="">Role</label>
                            <div class="px-1 col-sm-6 modal-label-input">
              <label class="text-primary-dark" for="">Role</label>
              <select name="role_id" id="role_id" required>
                <option value="">select role</option>
                <option>Super Admin</option>
                <option>Admin</option>
              </select>
            </div>                        </div>

                        <div class="form-group pt-2">
                            <a href="{{ Route('roles.index') }}"><button type="button"
                                    class="btn btn-secondary">Back</button></a>
                            <button type="submit" id="submitted" class="addbtn">Submit</button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('submitted').addEventListener('click', function(event) {
                event.preventDefault(); // Prevent the default behavior of the submit button

                // Display loader
                var loader = document.getElementById('loader');
                loader.style.display = 'flex';

                // Submit the form
                var form = document.querySelector('form');
                var formData = new FormData(form);

                // Simulate an asynchronous action (e.g., an AJAX request)
                setTimeout(function() {
                    // Once the action is completed (simulated with setTimeout), hide the loader
                    loader.style.display = 'none';

                    // Submit the form
                    form.submit();

                    // Reload the admin.index page after form submission
                    window.location.href = '{{ Route("roles.index") }}';
                }, 2000); // Adjust the time (in milliseconds) as needed
            });
        });
    </script>

@endsection
@section('script')
    <script>
        function myPassword() {
            var x = document.getElementById("password1");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }

        function myConfirmPassword() {
            var x = document.getElementById("password2");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
@endsection