What kind of friends do I need to group a view that I am doing for a point of sale, as well as this one (the part that is at the bottom where the products appear):
I already managed to divide all that, but now I need to fit it like this in the sample image in two columns but it does not work out, what am I doing wrong? already modify the code.
The bar code would be good on that side and the categories below, the rest would go on the other side, as I do and tried with cabbage and it does not come out.
This is my vision code:
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Ventas
<small>Nuevo</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="box box-solid">
<div class="box-body">
<div class="row">
<div class="col-md-12">
<form action="<?php echo base_url();?>movimientos/ventas/store" method="POST" class="form-horizontal">
<!-- <input type="hidden" name="estado" value="<?php// echo $estado; ?>">-->
<div class="form-group">
<div class="col-md-6">
<label for="">Producto:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-barcode" aria-hidden="true"></i>
</div>
<input type="text" class="form-control" id="producto" placeholder="Buscar por codigo de barras o nombre del proucto">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<table id="tbventas" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Codigo</th>
<th>Nombre</th>
<th>Precio</th>
<th>Stock Max.</th>
<th>Cantidad</th>
<th>Importe</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="">Comprobante:</label>
<select name="comprobantes" id="comprobantes" class="form-control" required>
<option value="">Seleccione...</option>
<?php foreach($tipocomprobantes as $tipocomprobante):?>
<?php $datacomprobante = $tipocomprobante->id."*".$tipocomprobante->cantidad."*".$tipocomprobante->iva."*".$tipocomprobante->serie;?>
<option value="<?php echo $datacomprobante;?>"><?php echo $tipocomprobante->nombre?></option>
<?php endforeach;?>
</select>
<input type="hidden" id="idcomprobante" name="idcomprobante">
<input type="hidden" id="iva">
</div>
<div class="col-md-3">
<label for="">Tipo de Pago:</label>
<select name="comprobantes" id="comprobantes" class="form-control" required>
<option value="">Seleccione...</option>
</select>
<input type="hidden" id="idcomprobante" name="idcomprobante">
<input type="hidden" id="iva">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="">Serie:</label>
<input type="text" class="form-control" id="serie" name="serie" readonly>
</div>
<div class="col-md-3">
<label for="">Numero:</label>
<input type="text" class="form-control" name="numero" readonly>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="">Cliente:</label>
<div class="input-group">
<input type="hidden" name="idcliente" id="idcliente">
<input type="text" class="form-control" " id="cliente">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal-default" ><span class="fa fa-search"></span> Buscar</button>
</span>
</div><!-- /input-group -->
</div>
<div class="col-md-3">
<label for="">Fecha:</label>
<input type="date" class="form-control" name="fecha" value="<?php echo date("Y-m-d");?>" required>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="">Monto Recibido:</label>
<input type="text" class="form-control" id="serie" name="serie">
</div>
</div>
<!-- /.col -->
<div class="form-group">
<div class="col-md-2">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Total a Pagar</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<h2>
<div class="box-body">
$.90
</div>
</h2>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-2">
<div class="box box-warning box-solid">
<div class="box-header with-border">
<h3 class="box-title">Importe Recibido</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<h2>
<div class="box-body">
$.100
</div>
</h2>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-2">
<div class="box box-danger box-solid">
<div class="box-header with-border">
<h3 class="box-title">Cambio</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<h2>
<div class="box-body">
$.10
</div>
</h2>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<div class="form-group">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Subtotal:</span>
<input type="text" class="form-control" placeholder="Subtotal" name="subtotal" readonly="readonly">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">IVA:</span>
<input type="text" class="form-control" placeholder="Subtotal" name="iva" readonly="readonly">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Descuento:</span>
<input type="text" class="form-control" placeholder="descuento" name="descuento" id="descuento" value="0.00" readonly="readonly">
<span class="input-group-btn">
<button class="btn btn-danger" id="btn-descuento" type="button" data-toggle="modal" data-target="#modal-default2">
Aplicar
</button>
</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Total:</span>
<input type="text" class="form-control" placeholder="Total" name="total" readonly="readonly">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-success btn-flat"><i class="fa fa-save"></i> Guardar Venta</button>
<button type="button" class="btn btn-pagar btn-warning btn-flat" id="btn-ver"><i class="fa fa-dollar"></i> Pagar</button>
<a href="<?php echo base_url().$this->uri->segment(1).'/'.$this->uri->segment(2); ?>" class="btn btn-danger btn-flat"><i class="fa fa-times"></i> Cancelar</a>
</div>
</div>
</form>
</div>
</div>
<!--end row1-->
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Clientes</h4>
</div>
<div class="modal-body">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab">Listado</a></li>
<li><a href="#tab_2" data-toggle="tab">Registrar</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<table id="example1" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Documento</th>
<th>Opcion</th>
</tr>
</thead>
<tbody>
<?php if(!empty($clientes)):?>
<?php foreach($clientes as $cliente):?>
<tr>
<td><?php echo $cliente->id;?></td>
<td><?php echo $cliente->nombre;?></td>
<td><?php echo $cliente->num_documento;?></td>
<?php $datacliente = $cliente->id."*".$cliente->nombre."*".$cliente->tipocliente."*".$cliente->tipodocumento."*".$cliente->num_documento."*".$cliente->telefono."*".$cliente->direccion;?>
<td>
<button type="button" class="btn btn-success btn-check" value="<?php echo $datacliente;?>"><span class="fa fa-check"></span></button>
</td>
</tr>
<?php endforeach;?>
<?php endif;?>
</tbody>
</table>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_2">
<form action="<?php echo base_url();?>movimientos/ventas/savecliente" method="POST" id="form-cliente">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="tipocliente">Tipo de Cliente</label>
<select name="tipocliente" id="tipocliente" class="form-control" required>
<option value="">Seleccione...</option>
<?php foreach ($tipoclientes as $tipocliente) :?>
<option value="<?php echo $tipocliente->id;?>" ><?php echo $tipocliente->nombre ?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="tipodocumento">Tipo de Documento</label>
<select name="tipodocumento" id="tipodocumento" class="form-control" required>
<option value="">Seleccione...</option>
<?php foreach ($tipodocumentos as $tipodocumento) :?>
<option value="<?php echo $tipodocumento->id;?>" ><?php echo $tipodocumento->nombre ?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="numero">No. de Documento:</label>
<input type="text" class="form-control" id="numero" name="numero" required>
</div>
<div class="form-group">
<label for="telefono">Telefono:</label>
<input type="text" class="form-control" id="telefono" name="telefono">
</div>
<div class="form-group">
<label for="direccion">Direccion:</label>
<input type="text" class="form-control" id="direccion" name="direccion">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-flat">Guardar y Seleccionar</button>
</div>
</form>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-right" data-dismiss="modal">Cerrar</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal-default2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Datos del Administrador</h4>
</div>
<div class="modal-body">
<form action="#" method="POST" id="form-comprobar-password">
<div class="form-group">
<label for="">Introduzca Contraseña</label>
<input type="password" name="password" class="form-control" placeholder="Contraseña...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Comprobar</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-right" data-dismiss="modal">Cerrar</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->