@extends('components.dashboard.layouts.master')
@section('styles')
    @stack('datatableStyles')
    <style>
        .gov-option {
            font-weight: bold;
        }
        .city-option {
            margin: 20px;
        }
        .select2-results__option.city-option {
            padding-left: 20px !important;
        }
    </style>




@endsection
@section('title')
    {{__('Add Admin')}}
@endsection

<!-- BEGIN: Content-->
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{__('Add Admin')}}">
                <li class="breadcrumb-item"><a href="{{route('admin.admins.index')}}">
                        {{__('Admins List')}}
                    </a></li>
            </x-dashboard.layouts.breadcrumb>

            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{__('Add Admin')}}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form class="form form-vertical" method="POST" action="{{route('admin.admins.store')}}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="form-group col-6">
                                        <label class="w-100" for="name_en">{{__('name')}}
                                            <input type="text" class="form-control" name="name" placeholder="{{__('name')}}" value="{{old('name')}}" />
                                            @error('name')
                                            <span style="font-size: 12px;" class="text-danger">{{$message}}</span>
                                            @enderror
                                        </label>
                                    </div>
                                    <div class="form-group col-6">
                                        <label class="w-100" for="name_en">{{__('email')}}
                                            <input type="text" class="form-control" name="email" placeholder="{{__('email')}}" value="{{old('email')}}" />
                                            @error('email')
                                            <span style="font-size: 12px;" class="text-danger">{{$message}}</span>
                                            @enderror
                                        </label>
                                    </div>
                                    <div class="form-group col-6">
                                        <label class="w-100" for="phone">{{__('phone')}}
                                            <input type="number" class="form-control" name="phone" placeholder="{{__('phone')}}" value="{{old('phone')}}" />
                                            @error('phone')
                                            <span style="font-size: 12px;" class="text-danger">{{$message}}</span>
                                            @enderror
                                        </label>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="status">{{ __('dashboard.status') }}</label>
                                        <select class="form-control" name="status" id="status">
                                            <option value="{{ \App\Enum\GeneralStatusEnum::INACTIVE }}"
                                                {{ old('status') == \App\Enum\GeneralStatusEnum::INACTIVE ? 'selected' : '' }}>
                                                {{ __('dashboard.inactive') }}
                                            </option>
                                            <option value="{{ \App\Enum\GeneralStatusEnum::ACTIVE }}"
                                                {{ old('status', \App\Enum\GeneralStatusEnum::ACTIVE) == \App\Enum\GeneralStatusEnum::ACTIVE ? 'selected' : '' }}>
                                                {{ __('dashboard.active') }}
                                            </option>
                                        </select>
                                        @error('status')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group col-12">
                                        <label class="w-100" for="role">{{__('Role')}}</label>
                                        <select class="form-control" id="role" name="role">
                                            <option value="">{{__('Select Role')}}</option>
                                            @foreach($roles as $role)
                                                <option value="{{ $role->name }}" >{{ $role->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                        <span style="font-size: 12px;" class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="password">{{ __('dashboard.password') }}</label>
                                        <div class="input-group">
                                            <!-- Password input field -->
                                            <input type="password" class="form-control" name="password" id="password"
                                                   placeholder="{{ __('dashboard.password') }}" />

                                            <!-- Eye icon for toggling visibility (Outside the input field) -->
                                            <span class="input-group-append">
                                            <span class="input-group-text" id="toggle-password" style="cursor: pointer;">
                                                <i class="feather icon-eye" id="eye-icon"></i>
                                            </span>
                                        </span>
                                        </div>
                                        @error('password')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <!-- Password Confirmation Input -->
                                    <div class="form-group col-sm-6">
                                        <label for="confirm_password">{{ __('dashboard.password_confirmation') }}</label>
                                        <div class="input-group">
                                            <input type="password" class="form-control" name="confirm_password" id="confirm_password"
                                                   placeholder="{{ __('dashboard.password_confirmation') }}" />

                                            <span class="input-group-append">
            <span class="input-group-text" id="toggle-password-confirmation" style="cursor: pointer;">
                <i class="feather icon-eye" id="eye-icon-confirmation"></i>
            </span>
        </span>
                                        </div>
                                        @error('confirm_password')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary">{{__('submit')}}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Toggle visibility for the first password field
        document.getElementById('toggle-password').addEventListener('click', function() {
            var passwordField = document.getElementById('password');
            var eyeIcon = document.getElementById('eye-icon');

            if (passwordField.type === "password") {
                passwordField.type = "text";
                eyeIcon.classList.remove("icon-eye");
                eyeIcon.classList.add("icon-eye-off");
            } else {
                passwordField.type = "password";
                eyeIcon.classList.remove("icon-eye-off");
                eyeIcon.classList.add("icon-eye");
            }
        });

        document.getElementById('toggle-password-confirmation').addEventListener('click', function() {
            var passwordConfirmationField = document.getElementById('confirm_password');
            var eyeIconConfirmation = document.getElementById('eye-icon-confirmation');

            if (passwordConfirmationField.type === "password") {
                passwordConfirmationField.type = "text";
                eyeIconConfirmation.classList.remove("icon-eye");
                eyeIconConfirmation.classList.add("icon-eye-off");
            } else {
                passwordConfirmationField.type = "password";
                eyeIconConfirmation.classList.remove("icon-eye-off");
                eyeIconConfirmation.classList.add("icon-eye");
            }
        });
    </script>
@endsection