@section('title')
    Add User
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
@endsection

<x-app-layout>
    <form method="post" action="{{ route('user.create') }}">
        @csrf
        <x-slot name="header">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('messages.add_new_user') }}
            </h2>
            <div class="flex gap-4">
                @if (session('status') === 'user-created')
                    <p
                        x-data="{ show: true }"
                        x-show="show"
                        x-transition
                        x-init="setTimeout(() => show = false, 3000)"
                        class="text-sm text-gray-600 mt-2"
                    >{{ __('messages.saved') }}</p>
                @endif
                <x-primary-button class="submit">
                    {{ __('messages.save') }}
                </x-primary-button>
            </div>
        </x-slot>
        <div class="py-6">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">
                        <section>
                            <header>
                                <h2 class="text-lg font-medium text-gray-900">
                                    {{ __('messages.add_new_user') }}
                                </h2>
                            </header>
                            <div class="max-w-xl gap-2 space-y-6">
                                
                                <div>
                                    <x-input-label for="name" :value="__('messages.name')" />
                                    <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name')" autofocus autocomplete="name"/>
                                    <x-input-error class="mt-2" :messages="$errors->get('name')" />
                                </div>

                                <div>
                                    <x-input-label for="last_name" :value="__('messages.last_name')" />
                                    <x-text-input id="last_name" name="last_name" type="text" class="mt-1 block w-full" :value="old('last_name')" autofocus autocomplete="last_name"/>
                                    <x-input-error class="mt-2" :messages="$errors->get('last_name')" />
                                </div>
                                
                                <div>
                                    <x-input-label for="email" :value="__('messages.email')" />
                                    <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email')" autofocus autocomplete="email"/>
                                    <x-input-error class="mt-2" :messages="$errors->get('email')" />
                                </div>

                                <div>
                                    <x-input-label for="phone" :value="__('messages.phone')" />
                                    <x-text-input id="phone" name="phone" type="tel" class="mt-1 block w-full" :value="old('phone')" autofocus autocomplete="phone"/>
                                    <x-input-error class="mt-2" :messages="$errors->get('phone')" />
                                </div>

                                <!-- Password -->
                                <div class="mt-4">
                                    <x-input-label for="password" :value="__('messages.password')" />
                                    <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
                                    <x-input-error :messages="$errors->get('password')" class="mt-2" />
                                </div>

                                <!-- Confirm Password -->
                                <div class="mt-4">
                                    <x-input-label for="password_confirmation" :value="__('messages.confirm_password')" />
                                    <x-text-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
                                    <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                                </div>

                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(".submit").click(function (e) {
                $("form").submit();
            });
        </script>
    </form>
</x-app-layout>