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

<style type="text/css">
    .ui-dialog .ui-dialog-titlebar-close
    {
        position: absolute;
        right: .3em;
        top: 50%;
        width: 20px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 20px;
        background-position: -96px -128px;
        /*background-image: url("images/ui-icons_056b93_256x240.png");*/
        background-image: url("<?=Constantes::ROOT_DIR_APP?>web/css/jquery/themes/start_1.12.1/images/ui-icons_056b93_256x240.png");
    }
</style>

<script type="text/javascript">
    changeIcon = function( elm, name )
    {
        var elms    = $( elm ).find( "svg" );
        var elm_sel = elms.first();
        if( $( "#" + name ).is( ":visible" ) )
        {
            $( elm_sel ).removeClass( "fa-angle-down" );
            $( elm_sel ).addClass( "fa-angle-right" );
        }
        else
        {
            $( elm_sel ).removeClass( "fa-angle-right" );
            $( elm_sel ).addClass( "fa-angle-down" );
        }
    }
</script>

<div class="shadow-sm p-3 mb-2 bg-white rounded card card-body">
    <div class="row">
        <div class="col mb-1">
            <h4 class="text-info text-nowrap mb-0">Valorizaci&oacute;n de Alquiler</h4>
        </div>
    </div>
</div>
<div id="resultContent" style=""></div>
<div id="accordion" class="mb-2">
    <div class="card">
        <div class="card-header">
            <a data-toggle="collapse" href="#collapseThree" aria-expanded="true" aria-controls="collapse1" class="text-info" onclick="changeIcon(this,'collapseThree');" id="cotent_a_collapse">
                <h5 class="mb-0"> Filtro <i class="fas fa-angle-right pull-right"></i></h5>
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordion">
            <div class="card-body pb-1">
                <form class="" name="form1" id="form1" method="POST" action="">
                    <input type="hidden" name="Estado" value="C">
                    <div class="form-row mx-0">

                        <div class="col-md-3 mb-1">
                            <label class="col-form-label" for="">Proyecto</label>
                            <div class="input-group mb-0 " >
                                <input type="hidden" name="IdProyecto" id="IdProyecto" value="">
                                <input type="text" class="form-control" name="NombreProyecto" id="NombreProyecto" placeholder="" autocomplete="off">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" id="btnProyectoBus" type="button">Buscar</button>
                                    <script type="text/javascript">
                                        $( "#btnProyectoBus" )
                                        .click
                                        (
                                            function()
                                            {
                                                var frameSrc = "<?=buildUrlComplet( 'vta.php/cot/listProyectos', 'IdPersona=' )?>";
                                                $( "#exampleModalLongTitle" ).html( "Buscar Proyecto" );
                                                $( '#iframe_id' ).attr( "src", frameSrc );
                                                $( '#exampleModalCenter' ).modal( { show:true } );
                                            }
                                        );
                                        asignarCotizacion = function( IdProyecto, Nombre )
                                        {
                                            $( "#IdProyecto" ).val( IdProyecto );
                                            $( "#NombreProyecto" ).val( Nombre );
                                            ocultarModal();
                                        }
                                        actualizarProyecto = function( IdProyecto, Nombre )
                                        {
                                            $( "#IdProyecto" ).val( IdProyecto );
                                            $( "#NombreProyecto" ).val( Nombre );
                                            ocultarModal();
                                        }
                                    </script>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3 mb-1">
                            <label class="col-form-label" for="FechaDocumento1">Fecha de Corte</label>
                            <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><?=addImgButton( "calendar.png", array( "class"=>"", "height"=>24 ) )?></div>
                                </div>
                                <input type="text" class="form-control text-center" id="FechaDocumento1" name="FechaDocumento1" autocomplete="off" placeholder="Fecha Desde" value="">
                                <script type="text/javascript">
                                    $( "#FechaDocumento1" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-2:+1", changeMonth: true, onClose: function (){ this.focus(); } } );
                                </script>
                            </div>
                        </div>

                        <div class="col-md-6 mb-1 ">

                            <label class="col-form-label" for="">&nbsp;</label>
                            <div class="text-center mt-2">
                                <button class="btn btn-primary text-center" type="button" onclick="findControl(0);">Calcular</button>
                                <button class="btn btn-primary text-center" type="button" onclick="procesarCorte();">Procesar Corte</button>
                                <a data-toggle="collapse" href="#collapseThree" class="text-info" onclick="changeIcon( $('#cotent_a_collapse')[0],'collapseThree');" style="background: none;">
                                    Contraer <i class="fas fa-angle-up"></i>
                                </a>
                                <button class="btn btn-primary text-center" type="button" onclick="findControl(1);">Excel</button>
                                <button class="btn btn-primary text-center" type="button" onclick="findControl(2);">PDF</button>
                            </div>

                        </div>
                        <!--
                        <div class="col-md-3 mb-1 ">
                            <div class="col-auto">
                                <label class="sr-only" for="FechaDocumento1">Fecha Desde</label>
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><?=addImgButton( "calendar.png", array( "class"=>"", "height"=>24 ) )?></div>
                                    </div>
                                    <input type="text" class="form-control text-center" id="FechaDocumento1" name="FechaDocumento1" placeholder="Fecha Desde" value="<?=date( "Y-m-" )?>01">
                                    <script type="text/javascript">
                                        $( "#FechaDocumento1" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-5:+0", changeMonth: true, onClose: function (){ this.focus(); } } );
                                    </script>
                                </div>
                            </div>
                            <div class="col-auto">
                                <label class="sr-only" for="FechaDocumento2">Fecha Hasta</label>
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><?=addImgButton( "calendar.png", array( "class"=>"", "height"=>24 ) )?></div>
                                    </div>
                                    <input type="text" class="form-control text-center" id="FechaDocumento2" name="FechaDocumento2" placeholder="Fecha Hasta">
                                    <script type="text/javascript">
                                        $( "#FechaDocumento2" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-5:+0", changeMonth: true, onClose: function (){ this.focus(); } } );
                                    </script>
                                </div>
                            </div>
                        </div>
                        -->
                    </div>

                    <!--
                    <div class="text-center mt-2">
                        <input type="hidden" name="IdCompania" value="<?=myUser::getUser()->getIdBusiness()?>">
                        <button class="btn btn-primary text-center" type="button" onclick="findControl();">Buscar</button>
                        <a data-toggle="collapse" href="#collapseThree" class="text-info" onclick="changeIcon( $('#cotent_a_collapse')[0],'collapseThree');" style="background: none;">
                            Contraer <i class="fas fa-angle-up"></i>
                        </a>
                    </div>
                    -->
                </form>
            </div>
        </div>
    </div>
</div>

<div id="content_grid"></div>

<script>
procesarCorte = function()
{
    var Fecha      = $( "#FechaDocumento1" ).val();
    var IdProyecto = $( "#IdProyecto" ).val();

    if( Fecha != "" && IdProyecto != "" )
    {
        x = confirm( "Esta seguro de realizar el Corte a la fecha de " + Fecha + "?" );
        if( x )
        {
            blockContent( 'content_grid' );
            var strFormSerialize = "Fecha=" + Fecha + "&IdProyecto=" + IdProyecto;
            executeAjaxJson
            (
                "<?php echo buildUrl( 'valalq/generarCorte' ) ?>",
                strFormSerialize,
                function( o_json )
                {
                    unBlockContent( "content_grid" );
                    if( o_json.error )
                    {
                        showAlertBootStrap( 'content_alert', 'alert-danger', o_json.mensaje_error );
                        return false;
                    }
                    findControl( 0 );
                }
            );
        }
    }
    else
    {

    }
}

findControl = function ( tipo )
{
    if( tipo == 0 )
    {
        var strFormSerialize = $( 'form' ).serialize();
        strFormSerialize += "&Tipo=BUSCAR";
        blockContent( 'content_grid' );
        executeAjaxUpdater
        (
            "content_grid",
            "<?=buildUrl( 'valalq/grid' )?>",
            strFormSerialize,
            function( o_json )
            {
                unBlockContent( 'content_grid' );
                if( o_json.error )
                {

                    alert( o_json.mensaje_error );
                    return false;
                }
            }
        );
    }
    else
    {
        if( $( "#IdProyecto" ).val() == "" )
        {

            return false;
        }
        if( $( "#FechaDocumento1" ).val().trim() == "" )
        {

            return false;
        }

        if( tipo == 1 )
        {
            window.open( "<?=buildUrl( 'valalq/grid' )?>?Tipo=EXCEL&" + $( '#accordion :input' ).serialize(), "_BLANK" )
        }
        if( tipo == 2 )
        {
            window.open( "<?=buildUrl( 'valalq/grid' )?>?Tipo=PDF&" + $( '#accordion :input' ).serialize(), "_BLANK" )
        }
    }
}
$( document ).bind
(
    'keyup',
    function( e )
    {
        if( e.which === 13 ) //ENTER
        {
            findControl();
        }
        if( e.which == 107 || e.which == 27 || e.which == 109 ) //tecla + | ESC | -
        {
            $( "#cotent_a_collapse" ).trigger( "click" );
        }
    }
);
</script>

<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<style type="text/css">
    .modal
    {
        padding: 0 !important;
    }
    .modal-dialog {
        max-width: 95% !important;
        height: 90%;
        /*  padding: 0;
          margin: 0;*/
    }

    .modal-content {
        /*border-radius: 0 !important;*/
        height: 90%;
    }
</style>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<!-- Modal - NUEVO CLIENTE -->
<div class="modal hide fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Nuevo Cliente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <iframe id="iframe_id" src="" style="zoom:0.60;" width="99.6%" height="99.6%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    asignarValores = function( idpersona )
    {
        $( "#ClienteNumero" ).val( idpersona );
        buscarInfoCliente();
        ocultarModal();
    }
    ocultarModal = function()
    {
        $( '#exampleModalCenter' ).modal( 'hide' );
    }
</script>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->