<!-- create-user.blade.php -->
<div x-data="{ showModal: false }" x-on:user-created.window="showModal = false"
    x-on:open-create-user.window="showModal = true">

    <div x-show="showModal" class="modal-overlay" x-transition:enter.duration.300ms x-transition:leave.duration.300ms>
        <div x-on:click.outside="showModal = false" x-show="showModal" x-transition:enter="transition-enter"
            x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
            x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
            x-transition:leave-end="transition-leave-end" x-on:keydown.escape.window="showModal = false"
            class="modal-container">

            <h3 class="modal-title">Novo Usuário Nexus</h3>

            <form wire:submit.prevent="createUser" class="form-wrapper">
                @error('general')
                    <div class="error-box">
                        <strong>Erro:</strong> {{ $message }}
                    </div>
                @enderror

                <div>
                    <label for="name" class="form-label">Nome</label>
                    <input type="text" wire:model.defer="name" id="name" class="form-input">
                    @error('name') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="email" class="form-label">Email</label>
                    <input type="email" wire:model.defer="email" id="email" class="form-input">
                    @error('email') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="password" class="form-label">Senha</label>
                    <input type="password" wire:model.defer="password" id="password" class="form-input">
                    @error('password') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="password_confirm" class="form-label">Confirmar Senha</label>
                    <input type="password" wire:model="password_confirm" id="password_confirm" class="form-input">
                    @error('password_confirm') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="permissions" class="form-label">Permissões</label>

                    <div x-data="{ 
                            open: false, 
                            selected: @entangle('permissions'), 
                            options: { 'user': 'Usuário', 'admin': 'Admin' } 
                        }" x-on:click.outside="open = false" class="select-wrapper">

                        <button type="button" x-on:click="open = true" class="select-button">
                            <span class="select-text" x-text="options[selected]"></span>
                            <span class="select-icon">
                                <svg class="select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
                                        clip-rule="evenodd" />
                                </svg>
                            </span>
                        </button>

                        <div x-show="open" x-transition style="display: none;" class="select-options">
                            <div x-on:click="selected = 'user'; open = false" class="select-option"
                                :class="{ 'selected-option': selected == 'user' }">
                                <span class="option-label"
                                    :class="{ 'font-semibold': selected == 'user' }">Usuário</span>
                                <span x-show="selected == 'user'"
                                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                        fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>

                            <div x-on:click="selected = 'admin'; open = false" class="select-option"
                                :class="{ 'selected-option': selected == 'admin' }">
                                <span class="option-label"
                                    :class="{ 'font-semibold': selected == 'admin' }">Admin</span>
                                <span x-show="selected == 'admin'"
                                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                        fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>

                    @error('permissions') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div class="form-footer">
                    <button type="button" @click="showModal = false" class="btn-cancel">
                        Cancelar
                    </button>

                    <button type="submit" class="btn-submit">
                        <span wire:loading.remove wire:target="createUser">Salvar</span>
                        <span wire:loading wire:target="createUser" class="loading">Salvando...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>