<?php include "Views/templates/header.php"; ?>

<div class="card">

        <div class="card-header bg-light">

            <button class="btn btn-secondary" type="button" onclick="" id="btnClientesHide"><i class="fas fa-caret-square-up"></i></button>
            <button class="btn btn-secondary d-none" type="button" onclick="" id="btnClientesShow"><i class="fas fa-caret-square-down"></i></button>

            <button class="btn btn-success" type="button" onclick="frmCliente();"><i class="fas fa-address-card	"></i></button>
            <button class="btn btn-warning" onclick="location.href='<?php echo base_url; ?>cajas/cierre'" type="button"><i class="fas fa-fax"></i></button>
<!--        <button class="btn btn-success" type="button" id="btnProcesar"><i class="fas fa-save"></i></button> -->
<!--        <button class="btn btn-danger" onclick="location.href='<?php echo base_url; ?>ventas/historial'" type="button"><i class="fas fa-reply"></i></button>  -->
        </div>

        <div class="card-body">
            <div class="row" id='areaClienteMinimizado'>
                <div class="col-12"></div>
            </div>

            <div class="row">            
                <div class="col-md-3">
                    <div class="form-group">

                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="customCheck" onchange="clienteCustom(this.checked)">
                            <label class="custom-control-label" for="customCheck">Cliente Mostrador</label>
                        </div>                    

                    </div>
                </div>
            </div>

            <div class="row" id='areaCliente'>
                <div class="col-md-3">
                    <div class="form-group">

                        <div id='buscarClienteContainer'>
                            <label for="buscarCliente"><i class="fas fa-users"></i> Buscar Cliente 
                                <span class="badge bg-success" id='id_cliente_badge'></span>
                                <input type="hidden" id="id_cliente" value="1">
                            </label>
                            <!--<input type="hidden" id="id_cliente" value="1"> -->
                            <!-- <input id="id_cliente" value="1"> -->
                            <!-- <input id="tipoid_cliente" value="1"> -->
                            <!-- <input id="nit_cliente" value="CF"> -->
                            <input id="buscarCliente" class="form-control" type="text" placeholder="Nombre del cliente">
                        </div>

                        <div id='ClienteContainer' class='d-none'>
                            <label for="nombreCliente"><i class="fas fa-users"></i> Nombre Cliente <span class="text-danger">*</span></label>
                            <input id="nombreCliente" class="form-control" type="text" placeholder="Nombre del cliente">
                        </div>

                    </div>


                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="tipoid_cliente">TIPO</label>
                        <select class="form-control" id="tipoid_cliente" name="tipoid_cliente" required>
                            <option value="1" selected>NIT</option>
                            <option value="2">CUI</option>
                            <option value="3">PASAPORTE</option>
                        </select>                        
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="nit_cliente">NIT</label>
                        <input id="nit_cliente" name="nit_cliente" value="CF" class="form-control" type="text" placeholder="NIT/DPI/PASAPORTE">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="direccion_cliente">DIRECCIÓN</label>
                        <input id="direccion_cliente" name="direccion_cliente" value="GUATEMALA, CIUDAD" class="form-control" type="text" placeholder="Dirección">
                    </div>
                </div>                

                

              
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="serie">Serie</label>
                        <select class="form-control" id="serie" name="serie" required>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="vendedores">Vendedor</label>
                        <select class="form-control" required name="vendedores" id="vendedores">
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="fecha">Fecha</label>
                        <input type="date" id="fecha" name="fecha" class="form-control">
                    </div>
                </div>

            </div>
        </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="form-group">
            <label for="buscarProducto"><i class="fas fa-barcode"></i> Buscar Producto</label>
            <input id="buscarProducto" class="form-control" type="text" name="buscarProducto" placeholder="Código o nombre del producto">
            <span class="text-danger" id="error_producto"></span>
        </div>
        <div class="table-responsive">
        <table class="" id="t_ventas_hist" style="width: 100%;">
<!--        
            <table class="table table-bordered table-hover" id="t_ventas_hist" style="width: 100%;">             
                <thead>
                    <tr>
                        <th>Descripción</th>
                        <th>Cantidad</th>
                        <th>Descuento</th>
                        <th>Precio</th>
                        <th>Sub Total</th>
                        <th></th>
                    </tr>
                </thead> -->
                <tbody id="t_ven">
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card bg-light">
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="anotacion"><i class="fa fa-comment"></i> Anotación</label>
                    <textarea class="form-control" id="anotacion" id="anotacion" rows="3" maxlength="250"></textarea>
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    <label for="opcion_pago">Forma de pago</label>
                    <label class="btn btn-outline-primary btn-block">
                        <input type="radio" id="contado" name="forma" value="1" onclick="/*desactivar(event)*/"> Contado
                    </label>
                    <label class="btn btn-outline-primary btn-block">
                        <input type="radio" id="credito" name="forma" checked value="2" onclick="/*desactivar(event)*/"> Credito
                    </label>
                </div>
            </div>

<!--        <div class="col-md-3">
                <div class="form-group">
                    <label for="efectivo_recibido">Efectivo Recibido</label>
                    <input id="efectivo_recibido" class="form-control" type="text" name="efectivo_recibido" placeholder="Recibido" onkeyup="efectivo()">
                </div>
                <div class="form-group">
                    <label for="cambio">Cambio</label>
                    <input id="cambio" class="form-control" type="text" name="cambio" placeholder="Cambio" disabled>
                </div>
            </div>
-->

            <div class="col-md-3">
                <div class="form-group">
                    <label for="total" class="font-weight-bold">Total a Pagar</label>
                    <input style="font-size:24px;" id="total"  class="form-control font-weight-bold" type="text" name="total" placeholder="Total" disabled>


                    <button class="btn btn-success mt-2 btn-block" type="button" id="btnProcesar">Guardar</i></button>
                    <button class="btn btn-danger  mt-2 btn-block" onclick="location.href='<?php echo base_url; ?>ventas/historial'" type="button">Salir</button>                                        

                </div>
            </div>

<!--            
            <div class='col-12'>
                <div class="form-group">
                    <label for="anotacion"><i class="fa fa-comment"></i> Anotación</label>
                    <textarea class="form-control" id="anotacion" id="anotacion" rows="2" maxlength="250"></textarea>
                </div>
            </div>            
-->
        </div>
    </div>
</div>



<div id="nuevo_cliente" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Nuevo Cliente</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formulario" class="needs-validation" novalidate autocomplete="off">
                <div class="modal-body">
                    <div class="alert alert-info" role="alert">
                        Todo los campos con * son requeridos.
                    </div>
                    <div class="form-group">
                        <input type="hidden" id="id" name="id">
                        <label for="nombre">Nombre *</label>
                        <input id="nombre" class="form-control" type="text" name="nombre" placeholder="Nombre del cliente" required>
                        <div class="valid-feedback">
                            Correcto
                        </div>
                        <div class="invalid-feedback">
                            El nombre es requerido
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="telefono">Teléfono *</label>
                        <input id="telefono" class="form-control" type="text" name="telefono" placeholder="Teléfono" onkeypress="return soloNumeros(event);" required>
                        <div class="valid-feedback">
                            Correcto
                        </div>
                        <div class="invalid-feedback">
                            El teléfono es requerido
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="direccion">Dirección</label>
                        <textarea id="direccion" class="form-control" name="direccion" placeholder="Dirección" rows="3" required></textarea>
                        <div class="valid-feedback">
                            Correcto
                        </div>
                        <div class="invalid-feedback">
                            La direccion es requerido
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>




<style>
.height-max-autocomplete {
    max-height:400px;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>

<?php include "Views/templates/footer.php"; ?>