@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())
@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="userCreateForm" method="POST" action="{{ route('admin.users.store') }}" novalidate>
        @csrf
        <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') }}" 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') }}" 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') }}" />
                    @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') }}" 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') }}" required />
                    @error('username')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="userAccessLevel">نقش</label>
                    <select id="userAccessLevel" name="roles[]" required>
                        @foreach(\Spatie\Permission\Models\Role::query()->orderBy('name')->get() as $role)
                            <option value="{{ $role->name }}" {{ collect(old('roles', []))->contains($role->name) ? '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">
                    <label for="userPassword">رمز عبور</label>
                    <div class="password-wrapper">
                        <input type="password" id="userPassword" name="password" autocomplete="new-password" required />
                        <button type="button" id="togglePasswordBtn" class="btn-action">نمایش</button>
                        <button type="button" id="generatePasswordBtn" class="btn-action">تولید</button>
                    </div>
                    @error('password')
                        <span class="error-message">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="userPasswordConfirm">تکرار رمز عبور</label>
                    <input type="password" id="userPasswordConfirm" name="password_confirmation" autocomplete="new-password" required />
                </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');
    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; pw.type = 'text';
    const tgl = document.getElementById('togglePasswordBtn'); if (tgl) tgl.textContent = 'مخفی';
});

// Suggest username based on email or name
(function(){
    function toEnglishDigits(s){
        return String(s || '').replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));
    }
    function slugifyUsername(s){
        s = toEnglishDigits(String(s || '').trim().toLowerCase());
        // keep letters, numbers, dot and underscore
        s = s.replace(/[^a-z0-9._]+/g, '');
        // collapse repeats
        s = s.replace(/[._]{2,}/g, '.');
        // trim leading/trailing dots/underscores
        s = s.replace(/^[._]+|[._]+$/g, '');
        return s;
    }
    function suggestFromEmail(email){
        const at = String(email || '').indexOf('@');
        if (at > 0) return slugifyUsername(email.slice(0, at));
        return '';
    }
    function suggestFromName(){
        const fn = document.getElementById('userFirstName')?.value || '';
        const ln = document.getElementById('userLastName')?.value || '';
        const base = (fn + '.' + ln).trim();
        return slugifyUsername(base);
    }
    const emailEl = document.getElementById('userEmail');
    const userEl = document.getElementById('userUsername');
    const firstEl = document.getElementById('userFirstName');
    const lastEl = document.getElementById('userLastName');
    if (emailEl && userEl){
        // show suggestion in placeholder live
        const updatePlaceholder = () => {
            const s = suggestFromEmail(emailEl.value) || suggestFromName();
            if (s) userEl.placeholder = s;
        };
        emailEl.addEventListener('input', updatePlaceholder);
        firstEl?.addEventListener('input', updatePlaceholder);
        lastEl?.addEventListener('input', updatePlaceholder);
        // autofill on blur if empty
        emailEl.addEventListener('blur', () => {
            if (!userEl.value.trim()){
                const s = suggestFromEmail(emailEl.value) || suggestFromName();
                if (s) userEl.value = s;
            }
        });
    }
})();

// Ensure edit implies view for permissions
document.getElementById('userPermissionsContainer')?.addEventListener('change', function(e){
    if (e.target.matches('input[type="checkbox"]')){
        const id = e.target.id || '';
        if (/-edit$/.test(id) && e.target.checked){
            const base = id.replace(/-edit$/, '');
            const view = document.getElementById(base + '-view');
            if (view) view.checked = true;
        }
        if (/-view$/.test(id) && !e.target.checked){
            const base = id.replace(/-view$/, '');
            const edit = document.getElementById(base + '-edit');
            if (edit) edit.checked = false;
        }
    }
});
</script>
@endpush

@endsection