@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">Edit 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.update', $admin->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <!-- First 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', $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) }}" 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" required="required" 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}$" required="required" 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

                    <!-- Password -->
                    <div class="form-outline mb-3 col-8">
                        <label>Password</label>
                        <div class="input-group">
                            <input type="password" name="password" id="password1" maxlength="15" minlength="6" placeholder="Password (leave blank to keep current password)" class="form-control form-control-lg">
                            <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

                    <!-- 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" required="required">
                            <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