@extends('layouts.app')

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

    <main id="" class="side_user">
        <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>

        <div class="content">
            <div class="block block-rounded">
                <div class="block-header">
                    <h4 class="block-title">Show 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>


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

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

                        <!-- Mobile -->
                        <div class="form-outline mb-4 col-8">
                            <label>Mobile</label>
                            <input type="text" maxlength="10" pattern="[6789][0-9]{9}" name="mobile" disabled
                                value="{{ old('mobile', $admin->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 -->
                        <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}$" disabled
                                value="{{ old('email', $admin->email) }}" class="form-control form-control-lg"
                                placeholder="Enter a valid email address">
                        </div>
                        @error('email')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror


                        <!-- Role -->
                        <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" disabled>
                                <option value="">Select Role</option>
                                @foreach ($adminRoles as $key => $adminRole)
                                    <option value="{{ $adminRole->id }}"
                                        {{ old('role_id', $admin->role_id) == $adminRole->id ? 'selected' : '' }}>
                                        {{ $adminRole->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('role_id')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <!-- Submit and Back Buttons -->
                        <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>
@endsection