@extends('layouts.admin')

@section('pageTitle', 'افزودن کاربر جدید')

@section('content')
<div class="container mx-auto px-6 py-8">
    <h3 class="text-gray-700 dark:text-white text-3xl font-medium mb-6">افزودن کاربر جدید</h3>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <form action="{{ route('admin.users.store') }}" method="POST" id="userForm" x-data="userForm()">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Name -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">نام کاربر <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" required class="mt-1 block w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <!-- Phone Number -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">شماره تلفن <span class="text-red-500">*</span></label>
                    <input type="text" name="phone_number" value="{{ old('phone_number') }}" required class="mt-1 block w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">
                    @error('phone_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <!-- Email -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">ایمیل</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <!-- Password -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">رمز عبور <span class="text-red-500">*</span></label>
                    <input type="password" name="password" required @input="validatePassword()" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2" minlength="6">
                    @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    <p x-show="passwordErrors.length > 0" class="text-red-500 text-xs mt-2">
                        <span x-show="passwordErrors.includes('length')" class="block">رمز عبور حداقل ۶ کاراکتر باید باشد</span>
                        <span x-show="passwordErrors.includes('match')" class="block">رمز عبور و تایید آن مطابقت ندارند</span>
                    </p>
                </div>

                <!-- Password Confirmation -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">تایید رمز عبور <span class="text-red-500">*</span></label>
                    <input type="password" name="password_confirmation" required @input="validatePassword()" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2" minlength="6">
                    @error('password_confirmation') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <!-- Is Active -->
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" value="1" checked class="h-4 w-4 rounded border-gray-300 dark:bg-gray-700 dark:border-gray-600">
                    <label class="mr-2 text-sm font-medium text-gray-700 dark:text-gray-300">فعال</label>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="mt-8 flex justify-end gap-3">
                <a href="{{ route('users.index') }}" class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600">
                    انصراف
                </a>
                <button type="submit" :disabled="passwordErrors.length > 0" :class="passwordErrors.length > 0 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-indigo-700'" class="px-6 py-2 bg-indigo-600 text-white rounded-md focus:outline-none focus:bg-indigo-700">
                    <i class="fas fa-plus ml-2"></i>افزودن
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function userForm() {
    return {
        passwordErrors: [],
        validatePassword() {
            this.passwordErrors = [];
            const passwordInput = document.querySelector('input[name="password"]');
            const confirmInput = document.querySelector('input[name="password_confirmation"]');
            
            if (passwordInput.value.length > 0 && passwordInput.value.length < 6) {
                this.passwordErrors.push('length');
            }
            
            if (passwordInput.value !== confirmInput.value && confirmInput.value.length > 0) {
                this.passwordErrors.push('match');
            }
        }
    }
}
</script>
@endsection