@extends('layouts.app')
 @section('content')
    @include('layouts.sidebar')

    <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 Admin</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('admin.store') }}" method="POST">
                        @csrf @method('POST')

                        <!-- Name -->
                        <div class="form-outline mb-4 col-8">
                            <label>First Name</label>
                            <input type="text" name="first_name" maxlength="160" required="required"
                                value="{{ old('first_name') }}" class="form-control form-control-lg"
                                placeholder="Enter Name"></input>
                        </div>
                        @error('first_name')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <div class="form-outline mb-4 col-8">
                            <label>Last Name</label>
                            <input type="text" name="last_name" maxlength="160" value="{{ old('last_name') }}"
                                class="form-control form-control-lg" placeholder="Enter Name"></input>
                        </div>
                        @error('last_name')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

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

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

                        <!-- Password input -->
                        <div class="form-outline mb-3 col-8">
                            <label>Password</label>
                            <div class="input-group">
                                <input type="password" required="required" name="password" id="password1" maxlength="15"
                                    minlength="6" value="{{ old('password') }}" placeholder="Password"
                                    class="form-control form-control-lg"></input>

                                <div class="input-group-append">
                                    <span class="input-group-text toggle-password"
                                        onclick="togglePasswordVisibility('password1')">
                                        <i class="fa fa-fw fa-eye-slash"></i>
                                    </span>
                                </div>
                            </div>
                        </div>

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

                        <div class="form-outline mb-3 col-8">
                            <label for="">Role</label>
                            <select class="form-control form-control-lg" name="role_id" id="role_id" required="required">
                                <option value="">Select Role</option>
                                @foreach ($adminRoles as $key => $adminRole)
                                    <option value="{{ $adminRole->id }}"
                                        {{ old('role_id') == $adminRole->id ? 'selected' : '' }}>{{ $adminRole->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group pt-2">
                            <a href="{{ Route('admin.index') }}">
                                <button type="button" class="backbtn">Back</button>
                            </a>

                            <button type="submit" id="submitted" class="addbtn">Submit</button>
                        </div>
                    </form>
                </div>


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



    <script>
        function togglePasswordVisibility(id) {
            var passwordField = document.getElementById(id);
            var toggleIcon = passwordField.nextElementSibling.querySelector('i');

            if (passwordField.type === "password") {
                passwordField.type = "text";
                toggleIcon.classList.remove("fa-eye-slash");
                toggleIcon.classList.add("fa-eye");
            } else {
                passwordField.type = "password";
                toggleIcon.classList.remove("fa-eye");
                toggleIcon.classList.add("fa-eye-slash");
            }
        }
    </script>

    <script>
        function displaySelectedRole() {
            var roleSelect = document.getElementById("role_id");
            var selectedRole = document.getElementById("selectedRoleDisplay");

            // Clear previous selection
            selectedRole.innerHTML = "";

            // Get the selected option
            var selectedOption = roleSelect.options[roleSelect.selectedIndex];

            // Display the selected option
            if (selectedOption.value !== "") {
                selectedRole.innerHTML = "Selected Role: " + selectedOption.text;
            }
        }
    </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