<!--aca filtra el detalle cliente-->
<style>
    #botones {
        display: flex;
        justify-content: center;
    }

    #contenedorBotones {
        display: flex;
        justify-content: center;
        /* border-style: solid;*/
        border-width: medium;
        width: 750px;
        padding-top: 50px;
        margin-left: 20%;
        top: auto;
    }

    #botons {

        justify-content: center;
        margin-left: 50px;
        margin-right: 80px;
        /*border: 1px solid;*/
    }


    #botons2 {

        justify-content: center;
        margin-left: 50px;
        margin-right: 80px;
        /*border: 1px solid;*/
        background-color: #0072bf;
        color: #fff !important;
        text-align: center;
        border-radius: 50px;
        padding: 3px 25px;
        border: 1px solid;
        margin: 3px;
        transition: all .2s;
    }

    #campos p {
        float: left;
        /*inputs*/
        width: 49%;
    }


    label {
        display: inline-block;
        width: 80px;
    }



    input[type="file"]#importProductos {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
        padding-top: 20px;
    }

    label[for="importProductos"] {
        color: #fff;
        background-color: #0072bf;
        display: inline-block;
        transition: all .5s;
        cursor: pointer;
        border: 1px solid #0072bf;
        margin: 3px;
        padding-top: 23px;
        padding-right: 25px;
        padding-bottom: 3px;
        padding-left: 25px;
        text-align: center;
        border-radius: 50px 50px 50px 50px;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        box-sizing: border-box;
        border-width: 2px;
        padding: 5px;
        width: 220px;
    }

    label[for="importProductos"]:hover {
        background-color: #7a7a7a;

    }

    .miniTab {
        border-radius: 8px 8px 0px 0px;
        margin: 0px 2px 0px 2px;
        color: white;
    }
</style>

<div id="div">

    <div id="botones">
        <div>
            <p>
                <button id="primary1" disabled class="k-primary">Estado Cartera

                </button>
            </p>
        </div>
        <div>
            <p>
                <button id="primary2" disabled class="k-primary">Cupo credito

                </button>
            </p>
        </div>
        <div>
            <p>
                <button id="primary3" disabled class="k-primary">Productos pendientes

                </button>
            </p>
        </div>
        <div>
            <p>
                <button id="primary4" disabled class="k-primary">Pagos

                </button>
            </p>
        </div>
        <div>
            <p>
                <button id="primary5" class="k-primary">Cargar pedidos

                </button>
            </p>
        </div>
    </div>
    <div class="modal fade" id="Mod1" data-keyboard="false" data-backdrop="static" role="dialog">
        <div class="modal-dialog" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
            <div class="modal-content" style="padding: 0px !important">
                <div class="modal-header">
                    <h3>
                        Estado Cartera
                        <div style="float:right">


                            <button id="volver1" style="margin:0px !important;background-color: #ac2925;"
                                class="mdl-button mdl-button--acciones mdl-button--primary">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </button> Volver
                        </div>
                    </h3>
                </div>
                <div class="modal-body" id="Modal"
                    style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
                    <div id="tabstrip">
                        <ul>
                            <li id="tab1" class="miniTab">Agrupado</li>
                            <li id="tab2" class="miniTab">Detallado</li>
                        </ul>
                        <div>
                            <!--tab1-->

                            <div id="EstadoCartera"></div>

                        </div>
                        <!--tab1-->

                        <div>
                            <!--tab2-->

                            <input type="text" placeholder="Buscar productos">
                            <br>
                            <input type="text" placeholder="Buscar por código de producto">

                        </div>
                        <!--tab2-->
                    </div>
                    <!--tabstrip-->
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<!--</div>-->
<div class="modal fade" id="Mod2" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
        <div class="modal-content" style="padding: 0px !important">
            <div class="modal-header">
                <h3>
                    Cupo credito
                    <div style="float:right">
                        <button id="volver2" style="margin:0px !important;background-color: #ac2925;"
                            class="mdl-button mdl-button--acciones mdl-button--primary">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                        </button> Volver
                    </div>
                </h3>
            </div>
            <div class="modal-body" id="Modal" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
            </div>
            <div id="CupoCredito"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
<div class="modal fade" id="Mod3" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
        <div class="modal-content" style="padding: 0px !important">
            <div class="modal-header">
                <h3>
                    Productos pendientes
                    <div style="float:right">
                        <button id="volver3" style="margin:0px !important;background-color: #ac2925;"
                            class="mdl-button mdl-button--acciones mdl-button--primary">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                        </button> Volver
                    </div>
                </h3>
            </div>
            <div class="modal-body" id="Modal" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
            </div>
            <div id="ProductosPendientes"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
<div class="modal fade" id="Mod4" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
        <div class="modal-content" style="padding: 0px !important">
            <div class="modal-header">
                <h3>
                    Pagos
                    <div style="float:right">
                        <button id="volver4" style="margin:0px !important;background-color: #ac2925;"
                            class="mdl-button mdl-button--acciones mdl-button--primary">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                        </button> Volver
                    </div>
                </h3>
            </div>
            <div class="modal-body" id="Modal" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
            </div>
            <div id="Pagos"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
<div class="modal fade" id="Mod5" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
        <div class="modal-content" style="padding: 0px !important">
            <div class="modal-header">
                <h3>
                    <span>Cargar pedidos</span>
                    <div style="float:right">
                        <button id="volver5" style="margin:0px !important;background-color: #ac2925;"
                            class="mdl-button mdl-button--acciones mdl-button--primary">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                        </button> Volver
                    </div>
                </h3>
            </div>
            <div class="modal-body" id="Modal" style="width: 95%;overflow-x: initial;height: 90%;overflow-y: visible;">
                <div id="example">
                    <div class="demo-section k-content">
                        <ul class="fieldlist">
                            <div id="campos">
                                <p>
                                    <label for="simple-input">Nombre de cliente</label>
                                    <input id="NomClient" style="width: 70%;" />
                                </p>
                            </div>

                            <div id="campos">
                                <p>
                                    <label for="simple-input">Detalle cliente</label>
                                    <input id="DetalleCliente" style="width: 70%;" />
                                </p>
                            </div>
                        </ul>
                        <div id="contenedorBotones">
                            <div id="botons">
                                <button class="active mdl-button mdl-button--acciones mdl-button--primary"
                                    onclick="descargarPlantilla()">Descargar plantilla <i
                                        class="fa fa-file-excel-o"></i>
                                </button>
                            </div>




                            <span>
                                <input type="file" id="importProductos" />
                            </span>

                            <label for="importProductos"
                                class="active mdl-button mdl-button--acciones mdl-button--primary">
                                <span>Cargar Productos <i class="fa fa-upload" style="color: white;"></i></span>
                            </label>




                        </div>
                    </div>
                </div>
            </div>
            <div id="GridExcel"></div>
            <div class="modal-footer">
                <button id="valRegistros">Validar registros</button>
                <button id="CargarPedido">Cargar pedido</button>
            </div>
        </div>
    </div>



</div>
<!--modal 5-->
</div>