<?php use_helper( 'UrlFunctions' ); ?>
<?php use_helper( 'UtilFunctions' ); ?>
<?php use_helper( 'IncludePartial' ); ?>

<style>
    .bd-placeholder-img
    {
        font-size: 1.125rem;
        text-anchor: middle;
    }

    @media (min-width: 768px)
    {
        .bd-placeholder-img-lg
        {
            font-size: 3.5rem;
        }
    }

    .placeholder-shown
    {
        color: #777 !important;
        font-size: 10px;
        margin-top: 0;
        padding-bottom: 0.25rem !important;
        padding-top: 0.15rem !important;
    }
</style>

<style type="text/css">
    .login100-form
    {
        background-color: #fff;
        border-radius: 10px;
        width: 100%;
    }
    .txt1
    {
        font-family: Raleway-SemiBold;
        font-size: 13px;
        color: #555555;
        line-height: 1.4;
        text-transform: uppercase;
    }
    .p-b-11
    {
        /*padding-bottom: 11px;*/
    }
</style>

<script type="text/javascript">
    activePlaceholder = function( eve, elm )
    {
        elm = document.getElementById( "nickname" );
        if( $( elm ).val() != "" )
        {
            $( "label[for='"+elm.id+"']" ).addClass( "placeholder-shown" );
        }
        else
        {
            $( "label[for='"+elm.id+"']" ).removeClass( "placeholder-shown" );
        }

        elm = document.getElementById( "password" );
        if( $( elm ).val() != "" )
        {
            $( "label[for='"+elm.id+"']" ).addClass( "placeholder-shown" );
        }
        else
        {
            $( "label[for='"+elm.id+"']" ).removeClass( "placeholder-shown" );
        }
    }
    findCompany = function( value )
    {
        if( trim( value ) != "" )
        {
            $( '#IdCompania' )[0].options.length=0;
            executeAjaxUpdater
            (
                'content_company',
                '<?php echo buildUrl( 'user/findCompany' ) ?>',
                'nickname=' + value,
                function()
                {
                    console.log( "Request: OK" );
                }
            );
        }
    }
    showAlertBootStrap = function( elm_id_content, class_default, message_alert )
    {
        var html_alert = '<div class="alert ' + class_default + ' alert-dismissible fade show" role="alert"> ' +
            '' + message_alert +
            '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
            '<span aria-hidden="true">&times;</span>' +
            '</button>' +
            '</div>';
        $( "#" + elm_id_content ).append( html_alert );
    }
</script>

<form class="form-signin login100-form" style="padding-bottom: 33px;" method="POST" action="">
    <input type="hidden" name="Control" id="Control" value="ok">

    <div class="text-center mb-4" style="">
        <?=addImgButton( "sesion.png", array( "src"=>"common/", "style"=>"margin-left: 20px;" ) ); ?>
    </div>

    <div id="content_alert" style="">
    </div>

    <div class="form-label-group">
        <input type="text" id="nickname" class="form-control" placeholder="Id Usuario" required autofocus name="nickname"
               onkeyup="activePlaceholder();"
               onblur="findCompany( this.value );"
        >
        <script type="text/javascript">
            $( "#nickname" ).on("onkeyup click mousedown mouseup focus blur keydown change",function(e){
                activePlaceholder();
            });
        </script>
        <label for="nickname">Id Usuario</label>
    </div>

    <div class="form-label-group">
        <input type="password" id="password" name="password" class="form-control" placeholder="Password" required onkeyup="activePlaceholder();">
        <label for="password">Contrase&ntilde;a</label>
    </div>

    <div id="content_company">
        <span class="txt1 p-b-11">Empresa</span>
        <div class="form-label-group">
            <select class="form-control" id="IdCompania" name="IdCompania" required>
                <!--<option value="1"> DROINSUR EIRL - EMP </option>
                <option value="2"> DISDROFAR S.A.C. - EMP </option>
                <option value="3"> DISUR EIRL - EMP </option>-->
            </select>
        </div>

        <span class="txt1 p-b-11">Sucursal</span>
        <div class="form-label-group">
            <select class="form-control" id="IdSucursal" name="IdSucursal" required>
                <!--<option value="1"> SUC DROGUERIA DROINSUR E.I.R.L. </option>-->
            </select>
        </div>
    </div>

    <button class="btn btn-lg btn-primary btn-block" type="submit">INGRESAR</button>

    <p class="mt-5 mb-3 text-muted text-center">&copy; Copyright <?=date( "Y" )?>. Todos los derechos reservados</p>

</form>

<?php if( $message_error ){ ?>
    <script type="text/javascript">
        showAlertBootStrap( 'content_alert', 'alert-danger', '<?=$message_error?>' );
    </script>
<?php } ?>