@extends('layouts.app')

@section('title', 'Crear Usuarios')

@section('content')
    @if(session('info'))
        <div class="alert alert-success">
            <strong>{{session('info')}}</strong>
        </div>
    @endif

    <p>Bienvenido a esta vista para Crear Usuarios del sistema</p>
    <div class="card">
        <div class="card-body">
            <form action="{{ route('users.store') }}" method="POST" id="form_crea_rol">
                @csrf
                <div class="row">
                    <div class="col-12 col-md-6 mb-3">
                        <label for="name">Nombre</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="Ingrese el nombre del usuario">
                        @error('name')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                        @enderror
                    </div>
                    <div class="col-12 col-md-6 mb-3">
                        <label for="email">Email</label>
                        <input type="text" id="email" name="email" class="form-control" placeholder="Ingrese el correo del usuario">
                        @error('email')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                        @enderror
                    </div>
                    <div class="col-12 col-md-4 mb-3">
                        <label for="password">Contraseña Inicial</label>
                        <div class="position-relative">
                            <input type="password" id="password" name="password" class="form-control pe-5" placeholder="Ingrese una contraseña inicial">
                            <span type="button" class="position-absolute top-50 end-0 translate-middle-y me-3" onclick="togglePassword('password')" style="cursor: pointer;">
                                <i id="icon-password" class="fa-solid fa-eye"></i>
                            </span>
                        </div>
                        @error('password')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-12 col-md-4 mb-3">
                        <label for="password_confirmation">Confirmar Contraseña</label>
                        <div class="position-relative">
                            <input type="password" id="password_confirmation" name="password_confirmation" class="form-control pe-5" placeholder="Confirme la contraseña">
                            <span class="position-absolute top-50 end-0 translate-middle-y me-3" onclick="togglePassword('password_confirmation')" style="cursor: pointer;">
                                <i id="icon-password_confirmation" class="fa-solid fa-eye"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mb-3">
                        <label for="colaborador_id">Colaborador:</label>
                        <div class="position-relative">
                            <select name="colaborador_id" class="form-select">
                                <option value="">-- Seleccionar colaborador --</option>
                                @foreach($colaboradores as $col)
                                    <option value="{{ $col->id }}">{{ $col->paterno }} - {{ $col->nombres }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="mt-2 d-flex flex-column flex-md-row">
                    <button type="submit" class="btn btn-primary mb-2 mb-md-0 me-md-2">Crear Usuario</button>
                    <a href="{{ route('users.index') }}" class="btn btn-warning">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Verifica si hay un mensaje de éxito en la sesión
            var successMessage = "{{ session('success') }}";

            if (successMessage) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: successMessage,
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    // Redirecciona al index si el usuario presiona "OK"
                    if (result.isConfirmed) {
                        window.location.href = URLs+'/users';
                    }
                });
            }
        });

        //Funcion para el icono del input password
        function togglePassword(id) {
            const input = document.getElementById(id);
            const icon = document.getElementById('icon-' + id);

            if (input.type === "password") {
                input.type = "text";
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = "password";
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

        @if (session('success'))
            Swal.fire({
                    icon: 'success',
                    title: '¡Éxito!',
                    text: '{{ session('success') }}',
                    confirmButtonText: 'OK'
                }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = URLs+'/users';
                }
            });
        @endif

        @if ($errors->any())
            Swal.fire({
                icon: 'error',
                title: '¡Error!',
                text: 'Verifica los datos ingresados.',
                html: `
                    @foreach ($errors->all() as $error)
                        <div style="color: red; margin-bottom: 5px;">{{ $error }}</div>
                    @endforeach
                `,
                confirmButtonText: 'OK'
            });
        @endif
    </script>
@endsection