@extends('layouts.app')
@section('title', $page_title)

@push('scripts')
<script src="{{asset('assets/js/show-password.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
   // Initialize timezone select2
   $('#timezone').select2({
       placeholder: '{{__("app.select_timezone")}}',
       allowClear: false,
       width: '100%'
   });
   
   // Initialize language select2
   $('select[name="language"]').select2({
       placeholder: '{{__("app.language")}}',
       allowClear: false,
       width: '100%',
       dropdownParent: $('body')
   });
});
</script>
@endpush

@section('styles')
<style>
/* Language dropdown styling */
.select2-container {
   z-index: 1040 !important; /* Below Bootstrap modals (1050) but above other elements */
}

.select2-dropdown {
   max-height: 300px;
   overflow-y: auto;
   z-index: 1040 !important;
   position: absolute !important;
}

.select2-results__options {
   max-height: 250px;
   overflow-y: auto;
}

.select2-results__option {
   padding: 8px 12px;
   font-size: 14px;
}

.select2-results__option--highlighted {
   background-color: #007bff;
   color: white;
}

/* Ensure proper scrolling for language dropdown */
.select2-container--default .select2-results > .select2-results__options {
   max-height: 250px;
   overflow-y: auto;
}

.select2-dropdown--below {
   z-index: 1040 !important;
}

/* Ensure form containers don't hide dropdown */
.form-group {
   overflow: visible !important;
}

.col-md-6 {
   overflow: visible !important;
}
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card custom-card">
            <div class="card-body">
                <form method="POST" action="{{ route('clients.update', $user->id) }}" class="needs-validation" novalidate>
                    @csrf
                    @method('PUT')
                    
                    <!-- Basic Information Section -->
                   
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.name')}} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" placeholder="{{__('app.enter_name')}}"
                                aria-label="{{__('app.name')}}" value="{{ $user->name }}" name="name" required>
                                <div class="invalid-feedback">{{__('app.name_required')}}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.email')}} <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" placeholder="{{__('app.enter_email')}}" value="{{ $user->email }}" name="email" required>
                                <div class="invalid-feedback">{{__('app.email_required')}}</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="position-relative">
                                    <label class="form-label fw-semibold">{{__('app.password')}}</label>
                                    <input id="password" type="password" class="form-control" placeholder="{{__('app.user_edit_password')}}" name="password">
                                    <a href="javascript:void(0);" class="show-password-button " onclick="createpassword('password',this)" id="button-addon2"><i class="ri-eye-off-line align-middle text-primary"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="position-relative">
                                    <label class="form-label fw-semibold">{{__('app.confirm_password')}}</label>
                                    <input id="confirm-password" type="password" class="form-control" placeholder="{{__('app.confirm_password')}}" name="confirm-password">
                                    <a href="javascript:void(0);" class="show-password-button " onclick="createpassword('confirm-password',this)" id="button-addon2"><i class="ri-eye-off-line align-middle text-primary"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.address')}}</label>
                                <input type="text" class="form-control" placeholder="{{__('app.enter_address')}}" name="address" value="{{ $user->address }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.phone')}}</label>
                                <input type="text" class="form-control" placeholder="{{__('app.enter_phone')}}" name="phone" value="{{ $user->phone }}">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Preferences Section -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                  <span class="avatar avatar-xs avatar-rounded bg-info svg-white">
                                        <i class="bi bi-gear"></i>
                                    </span>
                                </div>
                                <h6 class="mb-0 text-info fw-semibold fs-14">{{__('app.preferences')}}</h6>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3 mt-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.language')}}</label>
                                <select name="language" class="single-select form-select">
                                    @foreach(\App\Http\Helper\Helper::languages() as $key => $language)
                                    <option value="{{ $key }}" {{ ($key == $user->language) ? 'selected' : '' }}>{{ $language }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.timezone')}}</label>
                                <select name="timezone" id="timezone" class="single-select form-select">
                                    @foreach(\App\Http\Helper\Helper::timeZones() as $key => $timezone)
                                    <option value="{{ $key }}" {{ ($key == $user->timezone) ? 'selected' : '' }}>{{ $timezone }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Account Settings Section -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                  <span class="avatar avatar-xs avatar-rounded bg-info svg-white">
                                        <i class="bi bi-person-gear"></i>
                                    </span>
                                </div>
                                <h6 class="mb-0 text-info fw-semibold fs-14">{{__('app.account_settings')}}</h6>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3 mt-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.status')}}</label>
                                <select class="form-select form-select-lg" name="is_active">
                                    <option value="1" {{ $user->is_active ? 'selected' : ''}}>{{__('app.active')}}</option>
                                    <option value="0" {{ !$user->is_active ? 'selected' : ''}}>{{__('app.in_active')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.role')}}
                                    <a href="{{route('roles.create', 't=2')}}"><i class="bi bi-plus-circle text-primary"></i></a>
                                </label>
                                <select name="roles" class="form-select form-select-lg" required>
                                    <option value="">{{__('app.select_role')}}</option>
                                    @foreach ($roles as $role)
                                    <option value="{{ $role->name }}" {{ isset($userRole[$role->name]) ? 'selected' : ''}}>
                                        {{ $role->display_name }}
                                    </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">{{__('app.role_required')}}</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label fw-semibold">{{__('app.packages')}}
                                    <a href="{{route('packages.create')}}"><i class="bi bi-plus-circle text-primary"></i></a>
                                </label>
                                <select name="package_id" class="form-select form-select-lg" required>
                                    <option value="">{{__('app.select_package')}}</option>
                                    @foreach ($packages as $package)
                                    <option value="{{ $package->id }}" {{ $user->package_id == $package->id ? 'selected' : '' }}>
                                        {{ $package->name }}
                                    </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">{{__('app.package_required')}}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary btn-loading">
                                    <i class="bi bi-check-circle me-1"></i>{{__('app.update')}}
                                </button>
                                <a href="{{route('users.index')}}" class="btn btn-light">
                                    <i class="bi bi-arrow-left me-1"></i>{{__('app.cancel')}}
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection