<form autocomplete="off">
    <input type="hidden" wire:model="user_id">

    <div class="row match-height mt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Datos del Usuario</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label for="name">Nombre</label>
                                    <input type="text" class="form-control" wire:model="name"
                                        placeholder="Nombre del usuario">
                                    @error('name') <span class="text-danger">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            @if ($type != 'admin')
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="lastname">Apellido</label>
                                        <input type="text" class="form-control" wire:model="lastname"
                                            placeholder="Apellido del usuario">
                                        @error('lastname') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                            @endif
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control" wire:model="email"
                                        placeholder="Ingrese el e-mail"
                                        {{ $mode == 'create' || $type == 'user' ? '' : 'readonly' }}
                                        autocomplete="new-email">
                                    @error('email') <span class="text-danger">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            @if ($type == 'user')
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label for="user_email_optional">Emails opcionales</label>
                                    <input type="email" class="form-control" wire:model="user_email_optional"
                                        placeholder="Emails opcionales"
                                        {{ $mode == 'create' || $type == 'user' ? '' : 'readonly' }}
                                        autocomplete="new-email">
                                        @foreach ($arrEmails as $key => $item)
                                            @error('arrEmails.'.$key) <span
                                            class="text-danger">{{ $message }}</span>@enderror
                                        @endforeach
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group" wire:ignore>
                                    <label for="user_main">Usuario principal</label>
                                    <select class="form-control user_main" wire:model="user_main">
                                        <option value="0" id={{ rand() }}>Seleccione el usuario principal
                                        </option>
                                        @foreach ($users_list as $user)
                                            <option value="{{ $user->id }}">{{ $user->document }} - {{ $user->fullname }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('user_main') <span
                                        class="text-danger">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            @endif
                            @if ($type != 'admin')
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Tipo de Usuario:</label>
                                        <div class="wrapper pt-2">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" wire:model="type"
                                                    name="type" id="type_agent" value="agent"
                                                    {{ $type == 'user' && $mode == 'edit' ? 'disabled' : '' }}>
                                                <label class="form-check-label" for="type_agent">Agente</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" wire:model="type"
                                                    name="type" id="type_user" value="user"
                                                    {{ $type == 'agent' && $mode == 'edit' ? 'disabled' : '' }}>
                                                <label class="form-check-label" for="type_user">Usuario</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if ($type == 'user')
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="document">Documento</label>
                                        <input type="text" class="form-control document" wire:model="document"
                                            placeholder="Documento" maxlength="20" pattern="[A-Za-z0-9]+">
                                        @error('document') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <script>
                                    $('.document').mask('ZZZZZZZZZZZZZZZZZZZZ', {
                                        translation: {
                                            'Z': {
                                                pattern: /[0-9A-Za-z]/,
                                                optional: true
                                            }
                                        }
                                    });
                                </script>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="phone">Teléfono</label>
                                        <input type="text" class="form-control" wire:model="phone"
                                            placeholder="Teléfono">
                                        @error('phone') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                            @endif
                            @if ($type == 'agent')
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label>Tipo de Póliza:</label>
                                        <div class="wrapper pt-2">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" wire:model="category"
                                                    name="category" id="category_sv" value="SV">
                                                <label class="form-check-label" for="category_sv">Salud y vida</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" wire:model="category"
                                                    name="category" id="category_rg" value="RG">
                                                <label class="form-check-label" for="category_rg">Riesgos
                                                    generales</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" wire:model="category"
                                                    name="category" id="category_all" value="ALL">
                                                <label class="form-check-label" for="category_all">Todas</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if ($mode == 'create')
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="password">Contraseña</label>
                                        <input type="password" class="form-control" wire:model="password"
                                            placeholder="Contraseña" autocomplete="new-password">
                                        @error('password') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="password_confirmation">Confirmar contraseña</label>
                                        <input type="password" class="form-control" wire:model="password_confirmation"
                                            placeholder="Confirmar contraseña">
                                        @error('password_confirmation') <span
                                            class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                            @endif
                            @if ($type != 'admin')
                                <div class="col-12">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="status"
                                            wire:model="status">
                                        <label class="custom-control-label" for="status">Activo</label>
                                    </div>
                                </div>
                            @endif
                            <div class="col-12 d-flex justify-content-end">
                                @if ($mode == 'create')
                                    <button wire:click.prevent="store()" class="btn btn-primary mr-1 mb-1">
                                        <i class="far fa-save"></i>
                                        Guardar
                                    </button>
                                @else
                                    <button wire:click.prevent="update()" class="btn btn-primary mr-1 mb-1">
                                        <i class="far fa-save"></i>
                                        Actualizar
                                    </button>
                                @endif
                                <button wire:click.prevent="cancel()" class="btn btn-light-secondary mr-1 mb-1">
                                    <i class="fas fa-ban"></i>
                                    Cancelar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    document.addEventListener('livewire:load', function() {
        //User main select2
        $(".user_main").select2();
        $('.user_main').on('change', function (e) {
            let data = $(this).val();
            @this.set('user_main', data);
        });
    });
</script>

<script>
    //User main select2
    window.addEventListener('activeSelect2', event => {
        if(event.detail.user_main == 'agent') {
            $(".user_main").select2().next().hide();
            $('.user_main').on('change', function (e) {
                let data = $(this).val();
                @this.set('user_main', data);
            });
        } else {
            $(".user_main").select2();
            $('.user_main').on('change', function (e) {
                let data = $(this).val();
                @this.set('user_main', data);
            });
        }
    })
</script>

