<!--
Solicitud de alta
Archivo: solicitud_de_alta.html
Ruta: src\templates\solicitud_de_alta.html
Lenguaje: HTML
-->

<!DOCTYPE html>
<html data-bs-theme="light" lang="es-MX">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>{{ _('Registro para nuevos usuarios') }} </title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/Montserrat.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/baguetteBox.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vanilla-zoom.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/Ventas/VentasEUA/VEUcotizador.css') }}">


</head>

<body>
    <!-- Encabezado para el cambio de idioma -->
    <header class="d-flex justify-content-end p-3">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown"
                data-bs-toggle="dropdown" aria-expanded="false">
                {{ _('Idioma') }}
            </button>
            <ul class="dropdown-menu" aria-labelledby="languageDropdown">
                <li><a class="dropdown-item" href="{{ url_for('set_language', lang_code='es') }}">Español</a></li>
                <li><a class="dropdown-item" href="{{ url_for('set_language', lang_code='en') }}">English</a></li>
            </ul>
        </div>
    </header>
    <main class="page">
        <section class="clean-block clean-form dark">
            <div class="container">
                <div class="block-heading">
                    <h2 class="text-info">{{ _('Registro para Nuevos Usuarios') }}</h2>
                    <p>
                        {{ _('Completa los siguientes campos para solicitar su usuario y contraseña. Los campos marcados con * son
                        obligatorios. Este es un pre-registro; personal de IGSA se pondrá en contacto para validar la
                        información proporcionada.') }}
                    </p>
                </div>

                <form class="form-group">
                    <label for="RequestType" class="required">{{ _('Tipo de Usuario') }}</label>
                    <select id="RequestType" class="form-select"><!-- LLenar de la tabla RequestType-->
                        <option selected disabled value="">{{ _('Seleccione una opción') }}</option>
                        {% for RequestTyp in RequestTypes %}
                        <option value="{{ RequestTyp.RequestTypeID }}">{{ _(RequestTyp.RequestType) }} </option>
                        {% endfor %}

                    </select>
                    <div class="seccionFormulario"><!-- Seccion 0  EMPLEADOS-->
                        <div class="container">
                            <div>
                                <br>
                                <h4 class="text-info">{{ _('Registro para nuevos usuarios') }}</h2>
                                    <p>{{ _('Completa los siguientes campos para solicitar el acceso al sistema. Los campos
                                        marcados con * son obligatorios.') }}</p>
                            </div>

                            {% if error %}
                            <div class="alert alert-danger">
                                {{ error }}
                            </div>
                            {% endif %}
                            <div id="Colaboradores-form">
                                <div class="mb-3">
                                    <label class="form-label" for="EMPFirstName">{{ _('Nombre') }}</label>
                                    <input class="form-control required" type="text" id="EMPFirstName"
                                        name="EMPFirstName" placeholder="Escribe tu nombre" aria-label="Nombre"
                                        required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPMiddleName">{{ _('Segundo Nombre') }}</label>
                                    <input class="form-control" type="text" id="EMPMiddleName" name="EMPMiddleName"
                                        placeholder="Escribe tu segundo nombre (opcional)" aria-label="Segundo Nombre">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPLastName">{{ _('Apellido Paterno') }} </label>
                                    <input class="form-control" type="text" id="EMPLastName" name="EMPLastName"
                                        placeholder="Escribe tu apellido paterno" aria-label="Apellido Paterno"
                                        required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPSecondLastName">{{ _('Apellido Materno') }}
                                    </label>
                                    <input class="form-control" type="text" id="EMPSecondLastName"
                                        name="EMPSecondLastName" placeholder="Escribe tu apellido materno"
                                        aria-label="Apellido Materno" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPCorporateEmail">{{ _('Correo Electrónico
                                        Corporativo') }}</label>
                                    <input class="form-control" type="email" id="EMPCorporateEmail"
                                        name="EMPCorporateEmail" placeholder="correo@igsa.com.mx"
                                        aria-label="Correo Electrónico Corporativo" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPContactPhone">{{ _('Extensión o Teléfono de
                                        Contacto') }} </label>
                                    <input class="form-control" type="text" id="EMPContactPhone" name="EMPContactPhone"
                                        placeholder="123-456-7890" aria-label="Teléfono de Contacto" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPEmployeeNumber">{{ _('Número de Empleado')
                                        }}</label>
                                    <input class="form-control" type="text" id="EMPEmployeeNumber"
                                        name="EMPEmployeeNumber" placeholder="Escribe tu número de empleado"
                                        aria-label="Número de Empleado" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPCompanyID">{{ _('Compañía') }}</label>
                                    <select class="form-select" id="EMPCompanyID" name="EMPCompanyID"
                                        data-action="load-divisions" required>
                                        <option value="" disabled selected>Selecciona tu compañía</option>
                                        {% for company in companies %}
                                        <option value="{{ company.CompanyID }}">{{ company.Company }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPDivisionID">{{ _('División') }} </label>
                                    <select class="form-select" id="EMPDivisionID" name="EMPDivisionID"
                                        data-action="load-departments" aria-label="Selecciona tu división" required>
                                        <option value="" disabled selected>Selecciona tu división</option>
                                    </select>
                                    <div id="loading-indicator-division" class="text-info mt-2" style="display: none;">
                                        Cargando divisiones...
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPDepartamentID">{{ _('Departamento') }} </label>
                                    <select class="form-select" id="EMPDepartamentID" name="EMPDepartamentID"
                                        aria-label="Selecciona tu departamento" required>
                                        <option value="" disabled selected>Selecciona tu departamento</option>
                                    </select>
                                    <div id="loading-indicator-department" class="text-info mt-2"
                                        style="display: none;">
                                        Cargando departamentos...
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPPosition">{{ _('Puesto') }} </label>
                                    <input class="form-control" type="text" id="EMPPosition" name="EMPPosition"
                                        placeholder="Escribe tu puesto" aria-label="Puesto" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPDirectSupervisor">{{ _('Nombre de Jefe Directo')
                                        }} </label>
                                    <input class="form-control" type="text" id="EMPDirectSupervisor"
                                        name="EMPDirectSupervisor" placeholder="Escribe el nombre de tu jefe directo"
                                        aria-label="Jefe Directo" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPPermissionType">{{ _('Tipo de Permiso Solicitado')
                                        }} </label>
                                    <select class="form-select" id="EMPPermissionType" name="EMPPermissionType"
                                        aria-label="Selecciona el tipo de permiso" required>
                                        <option value="" disabled selected>Selecciona el permiso</option>
                                        <option value="Lectura">Lectura</option>
                                        <option value="Creacion y Edicion">Creación y Edición</option>
                                    </select>


                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EMPComments">{{ _('Comentarios')
                                        }}</label>
                                    <textarea class="form-control" id="EMPComments" name="EMPComments"></textarea>
                                </div>
                                <div class="mb-3">
                                    <div class="d-flex align-items-center justify-content-center">
                                        <input class="form-check-input me-2" type="checkbox" id="EMPTerms" name="EMPTerms" style="width: 8px; height: 8px;" />
                                        <label class="form-check-label" for="EMPTerms">{{ _('Aceptar términos y condiciones') }}</label>
                                    </div>
                                </div>



                            </div>
                        </div>

                    </div>

                    <div class="seccionFormulario"> <!-- Seccion 1 DISTRIBUIDORES ESTADOS UNIDOS Y CANDA-->
                        <div class="container">
                            <div>
                                <br>
                                <h4 class="text-info">{{ _('Registro de Distribuidores Internacionales') }}</h2>
                                    <p>
                                        {{ _('Completa los siguientes campos para solicitar ser distribuidor
                                        internacional. Los campos marcados con son obligatorios. Este es un
                                        pre-registro; personal de IGSA se pondrá en contacto para validar la información
                                        proporcionada.') }}
                                    </p>
                            </div>
                            <div id="Distribuidores_Estados_Unidos-form">

                                <div class="mb-3">
                                    <label class="form-label" for="EU_BusinessName">{{ _('Razón social') }}</label>
                                    <input class="form-control" type="text" id="EU_BusinessName" name="EU_BusinessName"
                                        placeholder="{{ _('Escribe el nombre') }}" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EU_FiscalAddress">{{ _('Domicilio fiscal ')
                                        }}</label>
                                    <textarea class="form-control" id="EU_FiscalAddress" name="EU_FiscalAddress"
                                        rows="3" placeholder="{{ _('Escribe el domicilio completo') }}"
                                        required></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EU_State">{{ _('Estado') }}</label>
                                    <input class="form-control" type="text" id="EU_State" name="EU_State"
                                        placeholder="{{ _('Estado') }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="EU_City">{{ _('Ciudad') }}</label>
                                    <input class="form-control" type="text" id="EU_City" name="EU_City"
                                        placeholder="{{ _('Ciudad') }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="EU_PostalCode">{{ _('Código postal') }}</label>
                                    <input class="form-control" type="text" id="EU_PostalCode" name="EU_PostalCode"
                                        placeholder="{{ _('Escribe el código postal') }}" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EU_LegalRepresentative">{{ _('Nombre del
                                        representante legal') }}</label>
                                    <input class="form-control" type="text" id="EU_LegalRepresentative"
                                        name="EU_LegalRepresentative" placeholder="{{ _('Escribe el nombre') }}"
                                        required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EU_PrimaryContact">{{ _('Nombre del contacto
                                        principal ') }}</label>
                                    <input class="form-control" type="text" id="EU_PrimaryContact"
                                        name="EU_PrimaryContact" placeholder="{{ _('Escribe el nombre') }}" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EU_ContactEmail">{{ _('Correo electrónico de contacto
                                        ') }}</label>
                                    <input class="form-control" type="email" id="EU_ContactEmail" name="EU_ContactEmail"
                                        placeholder="{{ _('correo@empresa.com') }}" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="EU_ContactPhone">{{ _('Teléfono de contacto ')
                                        }}</label>
                                    <input class="form-control" type="text" id="EU_ContactPhone" name="EU_ContactPhone"
                                        placeholder="{{ _('123-456-7890 (incluye código de país)') }}" required>
                                </div>




                                <div class="mb-3">
                                    <label class="form-label" for="EU_Comments">{{ _('Comentarios')
                                        }}</label>
                                    <textarea class="form-control" id="EU_Comments" name="EU_Comments"></textarea>
                                </div>
                            
                                <div class="mb-3 text-center">
                                    <div class="d-flex align-items-center justify-content-center">
                                        <input class="form-check-input me-2" type="checkbox" id="EU_Terms" name="EU_Terms" style="width: 24px; height: 24px;" />
                                        <label class="form-check-label" for="EU_Terms">{{ _('Acepto que los datos proporcionados son reales y pueden verificarse.') }}</label>
                                    </div>
                                </div>


                                <div class="mb-3">
                                    <p>
                                        <strong>{{ _('Nota:') }}</strong> {{ _('Este es un pre-registro. Para concluir
                                        el registro, personal de IGSA se pondrá en contacto para solicitar la
                                        documentación legal necesaria dependiendo del país de operación.') }}
                                    </p>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="seccionFormulario"> <!-- Seccion 2 DISTRIBUIDORES MEXICO-->
                        <div class="section-MEXICO">
                            <div class="container">
                                <div>
                                    <br>
                                    <h4 class="text-info">Registro de Distribuidores México</h2>
                                        <p>
                                            Completa los siguientes campos para solicitar ser distribuidor. Los campos
                                            marcados con son obligatorios.
                                            Este es un pre-registro; personal de IGSA se pondrá en contacto para validar
                                            la información proporcionada.
                                        </p>
                                </div>


                                <div id="Distribuidores_Mexico-form">
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_BusinessName">{{ _('Razón social') }}</label>
                                        <input class="form-control" type="text" id="MX_BusinessName"
                                            name="MX_BusinessName" placeholder="{{ _('Escribe el nombre') }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_RFC">{{ _('RFC (Registro Federal de
                                            Contribuyentes)') }} </label>
                                        <input class="form-control" type="text" id="MX_RFC" name="MX_RFC"
                                            placeholder="Escribe el RFC" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_FiscalAddress">{{ _('Domicilio fiscal ')
                                            }}</label>
                                        <textarea class="form-control" id="MX_FiscalAddress" name="MX_FiscalAddress"
                                            rows="3" placeholder="{{ _('Escribe el domicilio completo') }}"
                                            required></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_State">{{ _('Estado de la República')
                                            }}</label>
                                        <input class="form-control" type="text" id="MX_State" name="MX_State"
                                            placeholder="{{ _('Estado de la República') }}" required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="MX_City">{{ _('Ciudad') }}</label>
                                        <input class="form-control" type="text" id="MX_City" name="MX_City"
                                            placeholder="{{ _('Ciudad') }}" required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="MX_PostalCode">{{ _('Código postal de operación
                                            ') }}</label>
                                        <input class="form-control" type="text" id="MX_PostalCode" name="MX_PostalCode"
                                            placeholder="{{ _('Escribe el código postal') }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_LegalRepresentative">{{ _('Nombre del
                                            representante legal') }}</label>
                                        <input class="form-control" type="text" id="MX_LegalRepresentative"
                                            name="MX_LegalRepresentative" placeholder="{{ _('Escribe el nombre') }}"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_PrimaryContact">{{ _('Nombre del contacto
                                            principal ') }}</label>
                                        <input class="form-control" type="text" id="MX_PrimaryContact"
                                            name="MX_PrimaryContact" placeholder="{{ _('Escribe el nombre') }}"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_ContactEmail">{{ _('Correo electrónico de
                                            contacto ') }}</label>
                                        <input class="form-control" type="email" id="MX_ContactEmail"
                                            name="MX_ContactEmail" placeholder="{{ _('correo@empresa.com') }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="MX_ContactPhone">{{ _('Teléfono de contacto ')
                                            }}</label>
                                        <input class="form-control" type="text" id="MX_ContactPhone"
                                            name="MX_ContactPhone"
                                            placeholder="{{ _('123-456-7890 (incluye código de país)') }}" required>
                                    </div>




                                    <div class="mb-3">
                                        <label class="form-label" for="MX_Comments">{{ _('Comentarios')
                                            }}</label>
                                        <textarea class="form-control" id="MX_Comments" name="MX_Comments"></textarea>
                                    </div>
                                    <div class="mb-3 text-center">
                                        <div class="d-flex align-items-center justify-content-center">
                                            <input class="form-check-input me-2" type="checkbox" id="MX_Terms" name="MX_Terms" style="width: 24px; height: 24px;" />
                                            <label class="form-check-label" for="MX_Terms">{{ _('Acepto que los datos proporcionados son reales y pueden verificarse.') }}</label>
                                        </div>
                                    </div>

                                </div>


                                <div class="mb-3">
                                    <p>
                                        <strong>Nota:</strong> Este es un pre-registro. Para concluir el registro,
                                        personal de IGSA se pondrá en contacto
                                        para solicitar la documentación legal necesaria, incluyendo:
                                    </p>
                                    <ul>
                                        <li>Acta constitutiva</li>
                                        <li>Comprobante de domicilio</li>
                                        <li>Constancia de situación fiscal (actualizada)</li>
                                        <li>Identificación oficial del representante legal</li>
                                    </ul>
                                </div>


                            </div>
                        </div>

                    </div>


                    <div class="seccionFormulario"> <!-- Seccion 3 Boton-->
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-primary" type="submit">{{ _('Enviar Solicitud') }}</button>
                        </div>
                    </div>


                </form>



        </section>
    </main>
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/baguetteBox.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vanilla-zoom.js') }}"></script>
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
    <script src="{{ url_for('static', filename='js/solicitud_de_alta.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>

</html>