@extends('layouts.main')

@section('title')
    {{ __('users.create') }}
@endsection

@section('page_title')
    {{ __('users.create') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('admin.users.index'), 'label' => __('users.title')],
        ['url' => '', 'label' => __('users.create')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-user-plus text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('users.create') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('users.create_description') }}</p>
                    </div>
                </div>
                <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline whitespace-nowrap">{{ __('users.back_to_users') }}</span>
                    <span class="sm:hidden">{{ __('users.back') }}</span>
                </a>
            </div>
        </div>

        <!-- Create User Form Card -->
        <div class="">
            <div class="">
                <form action="{{ route('admin.users.store') }}" method="POST" class="space-y-8">
                    @csrf

                    <!-- Basic Information Section -->
                    <div class="space-y-6 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-user text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('users.basic_information') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('users.basic_information_description') }}</p>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Name Field -->
                            <div class="form-group">
                                <label for="name" class="form-label required">{{ __('users.full_name') }}</label>
                                <div class="relative">
                                    <input type="text" 
                                           id="name" 
                                           name="name" 
                                           class="form-control @error('name') is-invalid @enderror" 
                                           value="{{ old('name') }}" 
                                           placeholder="{{ __('users.full_name_placeholder') }}"
                                           required 
                                           autofocus>
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                        <i class="fas fa-user text-gray-400"></i>
                                    </div>
                                </div>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Email Field -->
                            <div class="form-group">
                                <label for="email" class="form-label required">{{ __('users.email_address') }}</label>
                                <div class="relative">
                                    <input type="email" 
                                           id="email" 
                                           name="email" 
                                           class="form-control @error('email') is-invalid @enderror" 
                                           value="{{ old('email') }}" 
                                           placeholder="{{ __('users.email_address_placeholder') }}"
                                           required>
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                        <i class="fas fa-envelope text-gray-400"></i>
                                    </div>
                                </div>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Role Assignment Section -->
                    <div class="space-y-6 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-shield-alt text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('users.role_assignment') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('users.role_assignment_description') }}</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="role" class="form-label required">{{ __('users.assign_role') }}</label>
                            <div class="relative">
                                <select id="role" 
                                        name="role" 
                                        class="form-control @error('role') is-invalid @enderror" 
                                        required>
                                    <option value="">{{ __('users.select_role') }}</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->name }}" {{ old('role') === $role->name ? 'selected' : '' }}>
                                            {{ ucfirst($role->name) }}
                                            @if($role->name === 'admin')
                                                - {{ __('users.full_system_access') }}
                                            @elseif($role->name === 'manager')
                                                - {{ __('users.manager_access') }}
                                            @else
                                                - {{ __('users.standard_user_access') }}
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('role')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-gray-500 mt-1">{{ __('users.role_help') }}</small>
                        </div>
                    </div>

                    <!-- Security Section -->
                    <div class="space-y-6 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-lock text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('users.security_settings') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('users.security_settings_description') }}</p>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Password Field -->
                            <div class="form-group">
                                <label for="password" class="form-label required">{{ __('users.password') }}</label>
                                <div class="relative">
                                    <input type="password" 
                                           id="password" 
                                           name="password" 
                                           class="form-control @error('password') is-invalid @enderror" 
                                           placeholder="{{ __('users.password_placeholder') }}"
                                           required>
                                    <button type="button" 
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors duration-200"
                                            onclick="togglePassword('password')">
                                        <i class="fas fa-eye" id="password-eye"></i>
                                    </button>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-gray-500 mt-1">{{ __('users.password_help') }}</small>
                            </div>

                            <!-- Confirm Password Field -->
                            <div class="form-group">
                                <label for="password_confirmation" class="form-label required">{{ __('users.confirm_password') }}</label>
                                <div class="relative">
                                    <input type="password" 
                                           id="password_confirmation" 
                                           name="password_confirmation" 
                                           class="form-control @error('password_confirmation') is-invalid @enderror" 
                                           placeholder="{{ __('users.confirm_password_placeholder') }}"
                                           required>
                                    <button type="button" 
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors duration-200"
                                            onclick="togglePassword('password_confirmation')">
                                        <i class="fas fa-eye" id="password_confirmation-eye"></i>
                                    </button>
                                </div>
                                @error('password_confirmation')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex items-center justify-end space-x-3 pt-6 border-t border-white/30">
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary border border-white/50 backdrop-blur-sm rounded-24">
                            <i class="fas fa-times mr-2"></i>
                            {{ __('users.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary rounded-24">
                            <i class="fas fa-save mr-2"></i>
                            {{ __('users.create_user_button') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const eyeIcon = document.getElementById(fieldId + '-eye');
    
    if (field.type === 'password') {
        field.type = 'text';
        eyeIcon.classList.remove('fa-eye');
        eyeIcon.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        eyeIcon.classList.remove('fa-eye-slash');
        eyeIcon.classList.add('fa-eye');
    }
}
</script>
@endpush