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

<input type="hidden" id="id_cliente_seleccionado" value="0">
<input type="hidden" id="nombre_cliente_seleccionado" value="Nombre del Cliente">
<input type="hidden" id="tipoid_cliente_seleccionado" value="1">
<input type="hidden" id="nit_cliente_seleccionado" value="CF">
<input type="hidden" id="direccion_cliente_seleccionado" value="Direccion del Cliente">
<!-- <input type="date" id="fecha"> -->

<div class="card">

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

            <!-- <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 pb-0">

            <div class="row" id='areaCliente'>
                <!-- ============================================ -->
                <!-- ÁREA DE SELECCIÓN DE CLIENTE - DINÁMICA -->
                <!-- ============================================ -->
                <div class="col-12" id="seleccionClienteContainer">
                    <div class="form-group">
                        <!-- Botón para seleccionar cliente (mostrar cuando NO hay cliente seleccionado) -->
                        <div id="btnSeleccionarClienteContainer">
                            <div class="d-flex align-items-center">
                                <button class="btn btn-primary btn-sm px-2 py-1" type="button" onclick="mostrarOpcionesCliente()">
                                    <i class="fas fa-user-plus mr-2"></i>Seleccionar Cliente
                                </button>
                            </div>
                        </div>

                        <!-- Información del cliente seleccionado (mostrar cuando SÍ hay cliente seleccionado) -->
                        <div id="clienteSeleccionadoContainer" class="d-none">
                            <div class="card border-success border-2 shadow-sm bg-secondary">
                                <div class="card-body p-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="flex-grow-1">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-user-check mr-2"></i>
                                                <div>
                                                    <h6 class="mb-0 font-weight-bold" style="line-height: 1.3;">
                                                        <span id="nombreClienteMostrar">Nombre del Cliente</span>
                                                    </h6>
                                                    <small class="d-block" style="line-height: 1.3;">
                                                        <span id="tipoClienteMostrar">Registrado</span> | 
                                                        <span id="labelTipoDocumento">NIT</span>: <span id="nitClienteMostrar">CF</span>
                                                    </small>
                                                    <div id="clienteDetallesExpandibles">
                                                        <small class="d-block" style="line-height: 1.3;">
                                                            <i class="fas fa-map-marker-alt mr-1"></i>
                                                            <span id="direccionClienteMostrar">Direccion del Cliente</span>
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ml-2 d-flex" style="white-space: nowrap; flex-shrink: 0;">
                                            <button class="btn btn-info btn-sm mr-1" type="button" onclick="toggleMinimizarCliente()" title="Minimizar Cliente" id="btnToggleCliente">
                                                <i class="fas fa-minus" id="iconToggleCliente"></i>
                                            </button>
                                            <button class="btn btn-warning btn-sm mr-1" type="button" onclick="editarCliente()" title="Editar Cliente" id="btnEditarCliente">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-danger btn-sm" type="button" onclick="eliminarCliente()" title="Quitar Cliente">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div id="clienteDetallesExpandibles2">
                                        <div id='area_estadocliente' class='mt-2'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- ============================================ -->
                <!-- CAMPOS ORIGINALES (Serie, Vendedor, Fecha) -->
                <!-- ============================================ -->
                <!-- <div class="col-md-2">
                    <div class="form-group">
                        <label for="serie" class='mb-0 small'>Serie</label>
                        <select class="form-control form-control-sm" id="serie" name="serie" required  disabled>
                        </select>
                    </div>
                </div> -->
<!-- 
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="vendedores" class='mb-0 small'>Vendedor</label>
                        <select class="form-control form-control-sm" required name="vendedores" id="vendedores" disabled>
                        </select>
                    </div>
                </div> -->

                <!-- <div class="col-md-2">
                    <div class="form-group">
                        <label for="fecha" class='mb-0 small'>Fecha</label>
                        <input type="date" id="fecha" name="fecha" class="form-control form-control-sm" disabled>
                    </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-9">
                <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>
                    <label for="opcion_pago" class='mb-0 mt-1 '>Fecha Pedido</label>
                    <input type="date" id="fecha" name="fecha" class="form-control" value="<?php echo date('Y-m-d'); ?>" disabled style='background:transparent;border:none;box-shadow:none;padding:0px !important;height:auto;line-height:1.4em;max-width:150px;display:inline-block;'>
                </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;
}

/* Estilos para SweetAlert2 más pequeño */
.swal2-small {
    font-size: 0.9rem !important;
}

.swal2-small .swal2-title {
    font-size: 1.2rem !important;
    margin: 0.5rem 0 !important;
}

.swal2-small .swal2-content {
    font-size: 0.85rem !important;
    margin: 0.5rem 0 !important;
}

.swal2-small .swal2-icon {
    width: 50px !important;
    height: 50px !important;
    margin: 0.5rem auto !important;
}

.swal2-small .swal2-actions {
    margin: 0.75rem 0 0.5rem 0 !important;
}

.swal2-small .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
}
</style>

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