@extends('backend.layouts.app')
@section('backend_title', 'Admin Role Create')

@section('backend_content')

    <div class="row">
        <div class="col-lg-8 offset-2 ms-0">
            <div class="card">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.user.store') }}">
                        @csrf
                        <h4 class="border-b pb-2 mb-3">Register</h4>
                        @if (session('status'))
                            <div class="form-text text-danger mb-2">{{ session('status') }}</div>
                        @endif
                        <div class="row">
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="register-name">Name *</label>
                                    <input type="text" class="form-control" id="register-name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="register-name">Phone *</label>
                                    <input type="text" class="form-control" id="register-name" name="phone" value="{{ old('phone') }}" required>
                                    @error('phone')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="register-email">Your email address *</label>
                                    <input type="email" class="form-control" id="register-email" name="email" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="register-password">Password *</label>
                                    <div class="position-relative passwordshowhide">
                                        <input type="password" class="form-control pe-4" id="register-password" name="password" value="{{ old('password') }}" required>
                                        <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                            <i class="fas fa-eye-slash show" style="font-size: 16px; cursor: pointer;"></i>
                                            <i class="fas fa-eye d-none hide" style="font-size: 16px; cursor: pointer;"></i>
                                        </div>
                                    </div>
                                    @error('password')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="confirm-password">Confirm Password *</label>
                                    <div class="position-relative passwordshowhide">
                                        <input type="password" class="form-control pe-4" id="confirm-password" name="password_confirmation" value="{{ old('password_confirmation') }}" required>
                                        <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                            <i class="fas fa-eye-slash show" style="font-size: 16px; cursor: pointer;"></i>
                                            <i class="fas fa-eye d-none hide" style="font-size: 16px; cursor: pointer;"></i>
                                        </div>
                                    </div>
                                    @error('password_confirmation')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="mb-4">
                                    <label for="account-policy" class=""> Select User Type </label>
                                    <select id="account-policy" name="account_policy" class="form-control">
                                        <option value="admin" {{ old('account_policy') == 'admin' ? 'selected' : '' }}>Admin</option>
                                        <option value="wholesaler" {{ old('account_policy') == 'wholesaler' ? 'selected' : '' }}>Wholesaler</option>
                                    </select>
                                    @error('account_policy')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12" id="hiddenElement" style="display: {{ old('account_policy') == 'wholesaler' ? 'block' : 'none' }}">
                                <input type="hidden" value="wholesaler">
                                <div class="form-group">
                                    <label for="referral-code">Referral Code</label>
                                    <input type="text" class="form-control" id="referral-code" name="referral_code" value="{{ old('referral_code') }}">
                                    @error('referral_code')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="mb-4">
                                    <label for="userRole" class=""> Select User role </label>
                                    <select id="userRole" name="roles[]" class="form-control">
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->name }}" {{ in_array($role->name, old('roles', [])) ? 'selected' : '' }}>{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('roles')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12 mt-4">
                                <label>Status</label>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="status" id="status1" value="1">
                                        <label class="form-check-label" for="status1">Active</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="status" id="status0" value="0">
                                        <label class="form-check-label" for="status0">Inactive</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-footer justify-content-between">
                                    <button type="submit" class="btn btn-primary">
                                        <span>Add User</span>
                                        <i class="icon-long-arrow-right"></i>
                                    </button>
                                    <a class="btn btn-info" href="{{ Route('admin.users') }}">Back</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('beackend_scripts')
    <script>
        document.addEventListener('click', function(event) {
            const target = event.target;
            // Check if the clicked element has the class 'show' or 'hide'
            if (target.matches('.passwordshowhide .icon .show')) {
                const passwordshowhide = target.closest('.passwordshowhide');
                passwordshowhide.querySelector('.show').classList.add('d-none');
                passwordshowhide.querySelector('.hide').classList.remove('d-none');
                passwordshowhide.querySelector('input').setAttribute('type', 'text');
            } else if (target.matches('.passwordshowhide .icon .hide')) {
                const passwordshowhide = target.closest('.passwordshowhide');
                passwordshowhide.querySelector('.hide').classList.add('d-none');
                passwordshowhide.querySelector('.show').classList.remove('d-none');
                passwordshowhide.querySelector('input').setAttribute('type', 'password');
            }
        });


        function toggleReferralCode() {
            var selectElement = document.getElementById('account-policy');
            var hiddenElement = document.getElementById('hiddenElement');
            if (selectElement.value === 'wholesaler') {
                hiddenElement.style.display = 'block';
            } else {
                hiddenElement.style.display = 'none';
            }
        }

        // Initial call to set the correct display state on page load
        document.addEventListener('change', function() {
            toggleReferralCode();
        });
    </script>
@endsection