@extends('layouts.panel')

@section('title', 'ویرایش کاربر - مدیریت کاربران')
@section('meta_description', 'ویرایش اطلاعات کاربر و نقش در سیستم CRM')

@section('content')
<div class="w-full max-w-none">
    <div class="modal-header">
        <h2>ویرایش کاربر</h2>
        <a href="{{ route('admin.users.index') }}" class="btn btn-secondary" style="font-size: 12px;">بازگشت</a>
    </div>

    <form id="userEditForm" method="POST" action="{{ route('admin.users.update', $user) }}" novalidate>
        @csrf
        @method('PUT')
        <div class="modal-body">
            <div class="form-row">
                <div class="form-group">
                    <label for="userFirstName">نام</label>
                    <input type="text" id="userFirstName" name="first_name" value="{{ old('first_name', $user->first_name) }}" required />
                    @error('first_name')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="userLastName">نام خانوادگی</label>
                    <input type="text" id="userLastName" name="last_name" value="{{ old('last_name', $user->last_name) }}" required />
                    @error('last_name')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="userPhone">شماره موبایل</label>
                    <input type="tel" id="userPhone" name="phone" value="{{ old('phone', $user->phone) }}" />
                    @error('phone')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="userEmail">ایمیل</label>
                    <input type="email" id="userEmail" name="email" value="{{ old('email', $user->email) }}" style="height: 40px; direction: ltr; text-align: left;" />
                    @error('email')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="userUsername">نام کاربری</label>
                    <input type="text" id="userUsername" name="username" value="{{ old('username', $user->username) }}" />
                    @error('username')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="userAccessLevel">نقش</label>
                    <select id="userAccessLevel" name="roles[]" required>
                        @php($roles = \Spatie\Permission\Models\Role::query()->orderBy('name')->get())
                        @php($userRoleNames = $user->roles->pluck('name')->toArray())
                        @foreach($roles as $role)
                            <option value="{{ $role->name }}" {{ in_array($role->name, old('roles', $userRoleNames)) ? 'selected' : '' }}>{{ $role->name }}</option>
                        @endforeach
                    </select>
                    @error('roles')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group" id="changePasswordToggleGroup">
                    <label style="display:flex; align-items:center; gap:8px; font-weight: normal;">
                        <input type="checkbox" id="changePasswordToggle" />
                        تغییر رمز عبور
                    </label>
                </div>
                <div class="form-group"></div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="userPassword" id="passwordLabel">رمز عبور جدید</label>
                    <div class="password-wrapper">
                        <input type="password" id="userPassword" name="password" autocomplete="new-password" disabled />
                        <button type="button" id="togglePasswordBtn" class="btn-action">نمایش</button>
                        <button type="button" id="generatePasswordBtn" class="btn-action" disabled>تولید</button>
                    </div>
                    @error('password')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group" id="passwordConfirmGroup">
                    <label for="userPasswordConfirm">تکرار رمز عبور</label>
                    <input type="password" id="userPasswordConfirm" name="password_confirmation" autocomplete="new-password" disabled />
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary" style="font-size: 12px;">انصراف</a>
            <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.getElementById('togglePasswordBtn')?.addEventListener('click', function(){
    const pw = document.getElementById('userPassword');
    if (!pw) return;
    if (pw.type === 'password') { pw.type = 'text'; this.textContent = 'مخفی'; } else { pw.type = 'password'; this.textContent = 'نمایش'; }
});

document.getElementById('generatePasswordBtn')?.addEventListener('click', function(){
    const pw = document.getElementById('userPassword');
    const pwc = document.getElementById('userPasswordConfirm');
    if (!pw) return;
    const len = Math.floor(Math.random()*5)+12;
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
    let out = '';
    for (let i=0;i<len;i++) out += chars[Math.floor(Math.random()*chars.length)];
    pw.value = out;
    if (pwc) pwc.value = out;
    pw.type = 'text';
    if (pwc) pwc.type = 'text';
    const tgl = document.getElementById('togglePasswordBtn'); 
    if (tgl) tgl.textContent = 'مخفی';
});

// Enable/disable password fields based on checkbox
(function(){
    const toggle = document.getElementById('changePasswordToggle');
    const pw = document.getElementById('userPassword');
    const pwc = document.getElementById('userPasswordConfirm');
    const generateBtn = document.getElementById('generatePasswordBtn');
    if (!toggle || !pw || !pwc) return;
    const apply = () => {
        const enabled = !!toggle.checked;
        pw.disabled = !enabled;
        pwc.disabled = !enabled;
        if (generateBtn) generateBtn.disabled = !enabled;
        pw.required = enabled;
        pwc.required = enabled;
        pw.closest('.form-group').style.opacity = enabled ? 1 : 0.6;
        document.getElementById('passwordConfirmGroup').style.opacity = enabled ? 1 : 0.6;
        if (!enabled) { pw.value=''; pwc.value=''; }
    };
    toggle.addEventListener('change', apply);
    apply();
})();
</script>
@endpush

@endsection