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

<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">Reporte Margen Ventas</h4>
        </div>
    </div>
</div>

<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" );
        }
    }

    cambiarFiltroPorTipo = function()
    {

    }
</script>

<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 show" data-parent="#accordion">
            <div class="card-body pb-1">
                <form class="" name="form1" id="form1" method="POST" action="">
                    <input type="hidden" name="IdCompania" value="<?=myUser::getUser()->getIdBusiness()?>">

                    <div class="form-row mx-0">
                        <div class="col-md-4 mb-1">
                            <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-md-4 mb-1">
                            <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" value="<?=date( "Y-m-d" )?>">
                                <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 class="form-row mx-0">
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="VendedorOrden">Vendedor</label>
                            <select class="form-control" name="VendedorOrden" id="VendedorOrden">
                                <option value=""> - Seleccione - </option>
                                <?php foreach ( VTA_VendedorFN::select_all() as $a_Vendedor ) { ?>
                                    <option value="<?=$a_Vendedor['IdUsuario']?>"  > <?=$a_Vendedor['NombreCompleto']?> </option> <!-- <?php if( $a_Vendedor['IdUsuario'] == myUser::getUser()->getUserId() ){ echo "SELECTED"; } ?> -->
                                <?php } ?>
                            </select>
                        </div>
                    </div>



                    <div class="text-center mt-2">
                        <button class="btn btn-primary text-center" type="button" onclick="findControl(1);">Buscar</button>
                        <button class="btn btn-primary text-center" type="button" onclick="findControl(2);">Exportar Excel</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>

<script type="text/javascript">
    findControl = function( tipo )
    {
        pr( "ingresa" );
        var params = $( 'form' ).serialize();
        if( tipo == 2 )
        {
            params += "&excel=1"
            window.open( '<?=buildUrl( 'rep/gridMargenVenta' ) ?>' + '?' + params, '_BLANK' );
            return false;
        }
        blockContent( 'content_result' );
        executeAjaxUpdater
        (
            'content_result',
            "<?php echo buildUrl( 'rep/gridMargenVenta' ) ?>",
            params,
            function( response )
            {
                //unBlockContent( 'content_buttons' );
            }
        );
    }
</script>

<div class="" style="margin-top: 10px;" id="content_result">
</div>

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

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

<!-- Modal 1-->
<div class="modal 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">Buscar Producto</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-danger" data-dismiss="modal">Cerrar</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

<script>
    mostrarDocumentoReferencia = function( Id )
    {
        pr( Id );
        $( '#iframe_id' ).attr( 'src', '<?=buildUrlComplet( 'vta.php/pro/detailVta' )?>' + "s_TipoProc/shw/IdNumDoc/" + Id );
        //$( "#exampleModalLongTitle" ).html( "Comprobante" );
        $( '#exampleModalCenter' ).modal( { show:true } );
    }
</script>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->