@extends('admin.lyoute.masterpage2')

@section('page_title', isset($user) ? 'ویرایش کاربر' : 'ایجاد کاربر جدید')
@section('page_description', 'فرم ثبت اطلاعات کاربر در سیستم')

@section('main_section')
    <div class="container-fluid">
        <!-- پیام خطاهای کلی -->
        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                <i class="fas fa-exclamation-triangle ml-2"></i>
                <strong>خطاهای زیر را بررسی کنید:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-user-plus ml-2"></i>
                            @if(isset($user))
                                ویرایش کاربر
                            @else
                                ایجاد کاربر جدید
                            @endif
                        </h4>
                        <a href="{{ route('admin.users.index') }}" class="btn btn-light btn-sm">
                            <i class="fas fa-arrow-right ml-2"></i> بازگشت به لیست
                        </a>
                    </div>

                    @if(isset($user))
                        <form action="{{ route('admin.users.update', $user->id) }}" method="POST">
                            @method('PUT')
                            @else
                                <form action="{{ route('admin.users.store') }}" method="POST">
                                    @endif
                                    @csrf

                                    <div class="card-body">
                                        <div class="row">
                                            <!-- ستون اصلی: اطلاعات کاربری -->
                                            <div class="col-md-8">
                                                <div class="card mb-4 border-0 shadow-sm">
                                                    <div class="card-header bg-light">
                                                        <h5 class="mb-0"><i class="fas fa-id-card ml-2 text-primary"></i> اطلاعات حساب کاربری</h5>
                                                    </div>
                                                    <div class="card-body">
                                                        <!-- نام و نام خانوادگی -->
                                                        <div class="form-group mb-3">
                                                            <label for="name" class="form-label">نام و نام خانوادگی <span class="text-danger">*</span></label>
                                                            <input type="text" name="name" id="name"
                                                                   class="form-control @error('name') is-invalid @enderror"
                                                                   value="{{ old('name', isset($user) ? $user->name : '') }}"
                                                                   placeholder="مثال: علی محمدی" required>
                                                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                                        </div>

                                                        <!-- نام کاربری -->
                                                        <div class="form-group mb-3">
                                                            <label for="username" class="form-label">نام کاربری <span class="text-danger">*</span></label>
                                                            <div class="input-group">
                                                                <span class="input-group-text"><i class="fas fa-at"></i></span>
                                                                <input type="text" name="username" id="username"
                                                                       class="form-control @error('username') is-invalid @enderror"
                                                                       value="{{ old('username', isset($user) ? $user->username : '') }}"
                                                                       placeholder="مثال: ali_ahmadi یا ali.ahmadi"
                                                                       pattern="^[a-zA-Z0-9_.-]+$"
                                                                       title="نام کاربری فقط می‌تواند شامل حروف انگلیسی، اعداد، نقطه، خط تیره و زیرخط باشد."
                                                                       minlength="3"
                                                                       maxlength="30"
                                                                       required>
                                                            </div>
                                                            <small class="text-muted">مثال: admin123, user_01, ali.ahmadi</small>
                                                            @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                                        </div>

                                                        <!-- شماره موبایل -->
                                                        <div class="form-group mb-3">
                                                            <label for="phone" class="form-label">شماره موبایل <span class="text-danger">*</span></label>
                                                            <div class="input-group">
                                                                <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                                                <input type="tel" name="phone" id="phone"
                                                                       class="form-control @error('phone') is-invalid @enderror"
                                                                       value="{{ old('phone', isset($user) ? $user->phone : '') }}"
                                                                       placeholder="مثال: 09123456789"
                                                                       pattern="09[0-9]{9}"
                                                                       maxlength="11"
                                                                       required>
                                                            </div>
                                                            @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                                        </div>

                                                        <!-- نقش کاربر -->
                                                        <div class="form-group mb-3">
                                                            <label for="role" class="form-label">نقش کاربر <span class="text-danger">*</span></label>
                                                            <select name="role" id="role" class="form-select @error('role') is-invalid @enderror" required>
                                                                <option value="">انتخاب نقش...</option>
                                                                <option value="user" {{ old('role', isset($user) ? $user->role : '') == 'user' ? 'selected' : '' }}>کاربر عادی</option>
                                                                <option value="admin" {{ old('role', isset($user) ? $user->role : '') == 'admin' ? 'selected' : '' }}>مدیر سیستم</option>
                                                            </select>
                                                            @error('role') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- ستون کناری: رمز عبور -->
                                            <div class="col-md-4">
                                                <div class="card mb-4 border-0 shadow-sm">
                                                    <div class="card-header bg-light">
                                                        <h5 class="mb-0"><i class="fas fa-shield-alt ml-2 text-primary"></i> تنظیمات امنیتی</h5>
                                                    </div>
                                                    <div class="card-body">
                                                        <!-- رمز عبور با دکمه چشم -->
                                                        <div class="form-group mb-3">
                                                            <label for="password" class="form-label">
                                                                رمز عبور
                                                                @if(!isset($user)) <span class="text-danger">*</span> @endif
                                                            </label>
                                                            <div class="input-group">
                                                                <input type="password" name="password" id="password"
                                                                       class="form-control @error('password') is-invalid @enderror"
                                                                       {{ !isset($user) ? 'required' : '' }}
                                                                       pattern="^[a-zA-Z0-9!@#$%^&*()_+\-=]{8,}$"
                                                                       title="رمز عبور باید حداقل ۸ کاراکتر و شامل حروف انگلیسی و اعداد باشد."
                                                                       placeholder="حداقل ۸ کاراکتر">
                                                                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                            </div>
                                                            @if(isset($user))
                                                                <small class="text-muted">برای تغییر رمز، مقدار جدید وارد کنید.</small>
                                                            @endif
                                                            @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                                        </div>

                                                        <!-- تکرار رمز عبور با دکمه چشم -->
                                                        <div class="form-group mb-3">
                                                            <label for="password_confirmation" class="form-label">تکرار رمز عبور</label>
                                                            <div class="input-group">
                                                                <input type="password" name="password_confirmation" id="password_confirmation"
                                                                       class="form-control"
                                                                    {{ !isset($user) ? 'required' : '' }}>
                                                                <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- دکمه‌ها -->
                                                <div class="card border-0 shadow-sm">
                                                    <div class="card-body">
                                                        <button type="submit" class="btn btn-success w-100 mb-2">
                                                            <i class="fas fa-save ml-2"></i>
                                                            @if(isset($user)) ذخیره تغییرات @else ایجاد کاربر @endif
                                                        </button>
                                                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary w-100">
                                                            <i class="fas fa-times ml-2"></i> انصراف
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        .form-control:focus, .form-select:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }
        .card { border-radius: 10px; overflow: hidden; }
        .card-header { border-radius: 10px 10px 0 0 !important; }
        .is-invalid { border-color: #dc3545; }
        .invalid-feedback { display: block; font-size: 0.85em; color: #dc3545; }
    </style>

    <!-- اسکریپت نمایش/مخفی کردن رمز -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const togglePassword = document.querySelector('#togglePassword');
            const passwordInput = document.querySelector('#password');

            const toggleConfirm = document.querySelector('#toggleConfirmPassword');
            const confirmInput = document.querySelector('#password_confirmation');

            if (togglePassword && passwordInput) {
                togglePassword.addEventListener('click', function () {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);

                    // تغییر آیکون
                    const icon = this.querySelector('i');
                    icon.classList.toggle('fa-eye');
                    icon.classList.toggle('fa-eye-slash');
                });
            }

            if (toggleConfirm && confirmInput) {
                toggleConfirm.addEventListener('click', function () {
                    const type = confirmInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    confirmInput.setAttribute('type', type);

                    const icon = this.querySelector('i');
                    icon.classList.toggle('fa-eye');
                    icon.classList.toggle('fa-eye-slash');
                });
            }
        });
    </script>
@endsection