@extends('layouts.app')
@section('title', 'Add User')
@section('page-title', 'Ongeza Mtumiaji')
@section('content')

<div class="space-y-6" data-animate>
    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Ongeza Mtumiaji</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Jaza fomu hii kuongeza mtumiaji mpya kwenye mfumo</p>
        </div>
        
        <a href="{{ route('users.index') }}" 
           class="inline-flex items-center px-4 py-2.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-200">
            <span class="material-icons text-lg mr-2">arrow_back</span>
            Rudi Nyuma
        </a>
    </div>

    {{-- Success and Error Messages --}}
    @if ($errors->any())
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 animate-fade-in">
            <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 dark:text-red-300 text-sm">error</span>
                </div>
                <div class="flex-1">
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Kuna hitilafu katika fomu</h3>
                    <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                        <ul class="list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if (session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 flex items-center justify-between animate-fade-in" x-data="{ show: true }" x-show="show" x-transition>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-green-600 dark:text-green-300 text-sm">check_circle</span>
                </div>
                <p class="text-green-800 dark:text-green-200 font-medium">{{ session('success') }}</p>
            </div>
            <button @click="show = false" class="text-green-600 dark:text-green-300 hover:text-green-800 dark:hover:text-green-100 transition-colors">
                <span class="material-icons text-lg">close</span>
            </button>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 flex items-center justify-between animate-fade-in" x-data="{ show: true }" x-show="show" x-transition>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 dark:text-red-300 text-sm">error</span>
                </div>
                <p class="text-red-800 dark:text-red-200 font-medium">{{ session('error') }}</p>
            </div>
            <button @click="show = false" class="text-red-600 dark:text-red-300 hover:text-red-800 dark:hover:text-red-100 transition-colors">
                <span class="material-icons text-lg">close</span>
            </button>
        </div>
    @endif

    {{-- Main Form Card --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-primary-600 dark:text-primary-400">person_add</span>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Maelezo ya Mtumiaji</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Jaza maelezo ya kimsingi ya mtumiaji mpya</p>
                </div>
            </div>
        </div>

        <form action="{{ route('users.store') }}" method="POST" x-data="{ 
            formData: {
                name: '',
                email: '',
                password: 'polisi@1234',
                password_confirmation: 'polisi@1234'
            },
            showPassword: false,
            showConfirmPassword: false
        }" class="p-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Name Field --}}
                <div class="md:col-span-1">
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Jina Kamili <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="text" 
                               name="name" 
                               id="name" 
                               x-model="formData.name"
                               class="w-full px-4 py-3 pl-12 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                               placeholder="Ingiza jina kamili"
                               required>
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
                            <span class="material-icons text-gray-400 text-lg">person</span>
                        </div>
                    </div>
                </div>

                {{-- Email Field --}}
                <div class="md:col-span-1">
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Barua Pepe <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="email" 
                               name="email" 
                               id="email" 
                               x-model="formData.email"
                               class="w-full px-4 py-3 pl-12 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                               placeholder="mtumiaji@example.com"
                               required>
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
                            <span class="material-icons text-gray-400 text-lg">email</span>
                        </div>
                    </div>
                </div>

                {{-- Password Field --}}
                <div class="md:col-span-1">
                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Nenosiri <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input :type="showPassword ? 'text' : 'password'" 
                               name="password" 
                               id="password" 
                               x-model="formData.password"
                               class="w-full px-4 py-3 pl-12 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                               value="polisi@1234"
                               required>
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
                            <span class="material-icons text-gray-400 text-lg">lock</span>
                        </div>
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                            <button type="button" @click="showPassword = !showPassword" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                                <span class="material-icons text-lg" x-show="!showPassword">visibility</span>
                                <span class="material-icons text-lg" x-show="showPassword">visibility_off</span>
                            </button>
                        </div>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Nenosiri la msingi. Mtumiaji anaweza kulibadilisha baadaye.</p>
                </div>

                {{-- Confirm Password Field --}}
                <div class="md:col-span-1">
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Thibitisha Nenosiri <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input :type="showConfirmPassword ? 'text' : 'password'" 
                               name="password_confirmation" 
                               id="password_confirmation" 
                               x-model="formData.password_confirmation"
                               class="w-full px-4 py-3 pl-12 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                               value="polisi@1234"
                               required>
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
                            <span class="material-icons text-gray-400 text-lg">lock</span>
                        </div>
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                            <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                                <span class="material-icons text-lg" x-show="!showConfirmPassword">visibility</span>
                                <span class="material-icons text-lg" x-show="showConfirmPassword">visibility_off</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Password Match Indicator --}}
            <div class="mt-4" x-show="formData.password && formData.password_confirmation">
                <div class="flex items-center space-x-2" x-show="formData.password === formData.password_confirmation">
                    <span class="material-icons text-green-500 text-sm">check_circle</span>
                    <span class="text-sm text-green-600 dark:text-green-400">Nenosiri linaendana</span>
                </div>
                <div class="flex items-center space-x-2" x-show="formData.password !== formData.password_confirmation">
                    <span class="material-icons text-red-500 text-sm">cancel</span>
                    <span class="text-sm text-red-600 dark:text-red-400">Nenosiri haliendani</span>
                </div>
            </div>

            {{-- Form Actions --}}
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
                    <span class="material-icons text-lg">info</span>
                    <span>Mtumiaji atapokea barua pepe ya uthibitishaji</span>
                </div>
                
                <div class="flex items-center space-x-3">
                    <a href="{{ route('users.index') }}" 
                       class="inline-flex items-center px-4 py-2.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200">
                        Ghairi
                    </a>
                    
                    <button type="submit"
                            :disabled="formData.password !== formData.password_confirmation"
                            class="inline-flex items-center px-6 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed">
                        <span class="material-icons text-lg mr-2">person_add</span>
                        Ongeza Mtumiaji
                    </button>
                </div>
            </div>
        </form>
    </div>

    {{-- Info Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {{-- Default Settings Card --}}
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
            <div class="flex items-start space-x-3">
                <div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-blue-600 dark:text-blue-400">settings</span>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">Mipangilio ya Msingi</h3>
                    <ul class="mt-2 text-sm text-blue-700 dark:text-blue-300 space-y-1">
                        <li>• Nenosiri la msingi: polisi@1234</li>
                        <li>• Akaunti itakuwa amilifu mara moja</li>
                        <li>• Mtumiaji atahitaji kubadilisha nenosiri la kwanza</li>
                        <li>• Barua pepe ya uthibitishaji itatumwa</li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Security Notice Card --}}
        <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-6">
            <div class="flex items-start space-x-3">
                <div class="w-10 h-10 bg-amber-100 dark:bg-amber-800 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-amber-600 dark:text-amber-400">security</span>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">Onyo la Usalama</h3>
                    <ul class="mt-2 text-sm text-amber-700 dark:text-amber-300 space-y-1">
                        <li>• Hakikisha barua pepe ni sahihi</li>
                        <li>• Wasiliana na mtumiaji kuhusu nenosiri</li>
                        <li>• Mshauri kubadilisha nenosiri haraka</li>
                        <li>• Mpe majukumu yanayohitajika tu</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Form validation enhancement
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const requiredFields = form.querySelectorAll('[required]');
                let allValid = true;
                
                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        allValid = false;
                        field.classList.add('border-red-500');
                    } else {
                        field.classList.remove('border-red-500');
                    }
                });
                
                // Check password match
                const password = form.querySelector('[name="password"]').value;
                const confirmPassword = form.querySelector('[name="password_confirmation"]').value;
                
                if (password !== confirmPassword) {
                    allValid = false;
                    // Show error message or highlight fields
                }
                
                if (!allValid) {
                    e.preventDefault();
                    // You could show a toast or alert here
                    console.log('Please fill all required fields correctly');
                }
            });
        }

        // Email validation
        const emailField = document.getElementById('email');
        if (emailField) {
            emailField.addEventListener('blur', function() {
                const email = this.value;
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                
                if (email && !emailRegex.test(email)) {
                    this.classList.add('border-red-500');
                } else {
                    this.classList.remove('border-red-500');
                }
            });
        }
    });
</script>
@endpush