<form class="form formEvent formCreate" data-route="Store_SuperUsuario" data-event="submit"
      data-tables_liged="SuperUsuario">

    <input type="hidden" name="id_rol" value="{{ $rol->id_encrypt_rol }}">

    <div class="form-group">
        <label for="name">Nombre de cliente:</label>
        <input type="text" placeholder="Ingrese el nombre del cliente" class="form-control nom_usuario" name="name">
        <div class="contMessage contMessage_name"></div>
    </div>

    <div class="form-group">
        <label for="num_user">Número de usuarios:</label>
        <input type="number" placeholder="Ingrese número de usuario" class="form-control nombres" name="num_user">
        <div class="contMessage contMessage_num_user"></div>
    </div>

    <div class="form-group">
        <label for="num_project">Número de proyecto</label>
        <input type="number" placeholder="Ingrese número de proyectos" class="form-control num_project"
               name="num_project">
        <div class="contMessage contMessage_num_project"></div>
    </div>

    <div class="form-group">
        <label for="tipo_de_suscripcion">Tipo de suscripción</label>
        <select name="tipo_de_suscripcion" class="form-control tipo_de_suscripcion">
            <option value="">Seleccione un tipo de suscripción...</option>
            <option value="1">Bronce</option>
            <option value="2">Silver</option>
            <option value="3">Gold</option>
            <option value="4">Platinum</option>
        </select>
        <div class="contMessage contMessage_tipo_de_suscripcion"></div>
    </div>

    <div class="form-group">
        <label for="imagen_cliente_value">Imagen cliente</label>
        <input id="imagen_cliente_value" type="file"
               class="form-control imagen_cliente_value" name="imagen_cliente_value">
        <input id="imagen_cliente" type="hidden"
               class="form-control imagen_cliente" name="imagen_cliente">
        <div class="col-md-12 mb-2 m-0 px-0 py-3">
            <img id="preview-image-before-upload" src="img/v2m.jpg"
                 alt="preview image" style="width: 100%; border: solid 1px gray">
        </div>
        <div class="contMessage contMessage_imagen_cliente"></div>
    </div>
    <script>
        $(document).ready(function (e) {
            $('#imagen_cliente_value').change(function(){
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#imagen_cliente').attr('value', e.target.result)
                    $('#preview-image-before-upload').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            })
        })
    </script>

    <hr>

    <div class="form-group">
        <label for="nom_usuario">Nombre de usuario:</label>
        <input type="text" placeholder="Ingrese el nombre del usuario" class="form-control nom_usuario"
               name="nom_usuario">
        <div class="contMessage contMessage_nom_usuario"></div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col">
                <label for="password">Contraseña:</label>
                <input type="password" placeholder="Contraseña temporal" class="form-control password" name="password">
            </div>
            <div class="col">
                <label for="password_confirmation">Confirmación:</label>
                <input type="password" placeholder="Confirmación de contraseña"
                       class="form-control password_confirmation" name="password_confirmation">
            </div>
        </div>
        <div class="contMessage contMessage_password"></div>
    </div>

    <hr>

    <div class="form-group">
        <label for="nombres">Nombres:</label>
        <input type="text" placeholder="Ingrese los nombres completos" class="form-control nombres" name="nombres">
        <div class="contMessage contMessage_nombres"></div>
    </div>

    <div class="form-group">
        <label for="apellidos">Apellidos:</label>
        <input type="text" placeholder="Ingrese los apellidos completos" class="form-control apellidos"
               name="apellidos">
        <div class="contMessage contMessage_apellidos"></div>
    </div>

    <div class="form-group">
        <label for="nit">Identificación:</label>
        <input type="number" placeholder="Ingrese el campo nit" class="form-control nit" name="nit">
        <div class="contMessage contMessage_nit"></div>
    </div>

    <div class="form-group">
        <label for="correo">Correo electrónico:</label>
        <input id="correo" type="email" placeholder="Ingrese el correo electrónico del usuario"
               class="form-control correo" name="correo">
        <div class="contMessage contMessage_correo"></div>
    </div>



    <button type="submit" class="btn btn-primary">Guardar</button>
</form>
