@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <a class="breadcrumb-item" href="/ventas">Ventas</a>
    <span class="breadcrumb-item active">Nueva</span>
</nav>

<!-- <div class="row d-none">

  <div class="col-md-3">
    <div class="card-body p-0">
        <div class="listview listview--bordered listview--striped border-top-green">
            <div class="listview__item pt-0 pl-4 pr-4">
                <div class="listview__content">
                    <div class="toolbar toolbar--inner pt-0 pl-0 pr-0">
                        <div class="toolbar__label">Producto</div>
                        <div class="actions">
                            <i class="actions__item producto-buscar zmdi zmdi-search" data-ma-action="toolbar-search-open"></i>
                        </div>

                        <div class="toolbar__search" style="display: none;">
                            <input type="text" placeholder="Buscar producto..." class="producto-search required">
                            <i class="toolbar__search__close producto-empty zmdi zmdi-long-arrow-left" data-ma-action="toolbar-search-close"></i>
                        </div>
                    </div>

                    <div class="text-center">
                        <i class="zmdi zmdi-settings zmdi-hc-spin zmdi-hc-2x producto-loading" style="display: none"></i>
                    </div>

                    <ul class="list-unstyled producto-resultados m-0">
                    </ul>

                    <form id="formulario-detalle" action="#" style="display:none">
                        @csrf
                        <input type="hidden" id="detalle_nombre" value="">
                        <input type="hidden" id="detalle_id" value="">
                        <h5 id="producto-nombre" class="mb-3"></h5>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group mb-2">
                                    <label>Medida</label>
                                    <select id="detalle_medida" name="detalle_medida" class="required select2" data-placeholder="Elegir" disabled>
                                        <option></option>
                                        {{-- @foreach($productos as $p)
                                        <option value="{{ $p->id }}">{{ $p->nombre }}</option>
                                        @endforeach --}}
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-2">
                                    <label>Cantidad</label>
                                    <input type="number" id="detalle_cantidad" name="detalle_cantidad" class="form-control digits" min="1" value="1" maxlength="3" autocomplete="off" disabled>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-2">
                                    <label>Precio</label>
                                    <input type="text" id="detalle_precio" name="detalle_precio" class="form-control text-right required digits" min="1" autocomplete="off" disabled>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-2">
                                    <label>Subtotal</label>
                                    <p id="detalle_subtotal" class="form-control text-right">--</p>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <button type="button" class="btn btn-sm btn-warning producto-cancelar">Cancelar</button>
                            <button type="submit" class="btn btn-sm btn-primary">Agregar</button>
                        </div>
                    </form>
                </div>
            </div>

            <form class="formulario" id="formulario-documento" action="#" method="post" data-url="{{ url('/ventas/generar') }}">
                @csrf
                <div class="listview__item pl-4 pr-4 border-top-green">
                    <div class="listview__content">
                        <div class="listview__heading">Tipo de Documento</div>
                        <div class="form-group mt-2 mb-0">
                            <select id="tipo_documento" name="tipo_documento" class="required select2" data-placeholder="Seleccionar dirección">
                                <option value="b" selected>BOLETA ELECTRÓNICA</option>
                                <option value="f">FACTURA ELECTRÓNICA</option>
                            </select>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>
                </div>

                <div class="listview__item pl-4 pr-4 border-top-green">
                    <div class="listview__content">
                        <div class="listview__heading">Cliente</div>
                        <div class="form-group mb-3 mt-3">
                            <input type="text" class="form-control rut" maxlength="15" name="cliente_rut" id="cliente_rut" placeholder="Buscar RUT" autocomplete="off">
                            <i class="form-group__bar"></i>
                        </div>

                        <div id="box-cliente" style="display:none">
                            <input type="hidden" name="cliente_id" id="cliente_id" value="">
                            <input type="hidden" name="empresa_id" id="empresa_id" value="">
                            <div class="form-group mb-3">
                                <input type="text" class="form-control required" name="cliente_nombre" id="cliente_nombre" placeholder="Nombre" autocomplete="off" disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <input type="text" class="form-control email" name="cliente_email" id="cliente_email" placeholder="Correo electrónico" autocomplete="off" disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <input type="text" class="form-control" name="cliente_telefono" id="cliente_telefono" placeholder="Teléfono" autocomplete="off" disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <button type="button" class="btn btn-sm btn-danger" id="cliente-cancelar">Cancelar</button>
                        </div>

                        <div id="box-empresa" style="display:none">
                            <div class="form-group mb-3">
                                <input type="text" class="form-control" id="empresa_razon_social" placeholder="Razón Social" readonly disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <select id="empresa_giro" name="empresa_giro" class="required select2" data-placeholder="Seleccionar giro" disabled>
                                    <option></option>
                                </select>
                                <input type="text" class="form-control required" id="empresa_giro_texto" name="empresa_giro_texto" placeholder="Ingresar giro" style="display:none">
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <select id="empresa_direccion" name="empresa_direccion" class="required select2" data-placeholder="Seleccionar dirección" disabled>
                                    <option></option>
                                </select>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <input type="text" class="form-control text-uppercase" name="empresa_comuna" id="empresa_comuna" placeholder="Comuna" readonly disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <button type="button" class="btn btn-sm btn-danger" id="empresa-cancelar">Cancelar</button>
                        </div>

                        <div class="text-center">
                            <i class="zmdi zmdi-settings zmdi-hc-spin zmdi-hc-2x cliente-loading" style="display: none"></i>
                        </div>

                        <ul class="list-unstyled cliente-resultados m-0">
                        </ul>

                        <div class="cliente-datos">
                            No seleccionado
                        </div>
                    </div>
                </div>

                <div class="listview__item pl-4 pr-4 border-top-green">
                    <div class="listview__content">
                        <div class="listview__heading">Forma de Pago</div>
                        <div class="form-group mb-0">
                            <div class="select">
                                <select class="form-control select2 required" name="forma_pago" id="forma-pago" data-placeholder="SELECCIONAR">
                                    <option value=""></option>
                                    <option value="1">EFECTIVO</option>
                                    <option value="3">TARJETA</option>
                                    <option value="5">TRANSFERENCIA</option>
                                </select>
                            </div>
                            <i class="form-group__bar"></i>
                        </div>

                        <div id="box-efectivo" class="mt-4" style="display:none;">
                            <div class="form-group mb-2">
                                <input type="text" id="monto_pagado" class="form-control text-right required digits" min="0" maxlength="8" autocomplete="off" placeholder="Monto recibido">
                                <i class="form-group__bar"></i>
                            </div>
                            <div class="text-right">
                                Vuelto:
                                <strong class="text-right lead font-weight-bold" id="vuelto">--</strong>
                            </div>
                        </div>

                        <div id="box-tarjeta" class="mt-4" style="display:none;">
                            <div class="form-group mb-2">
                                <input type="text" class="form-control required digits" name="comprobante" placeholder="Número de comprobante" disabled>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>

                        <div id="box-transferencia" class="mt-4" style="display:none;">
                            <div class="form-group mb-3">
                                <input type="text" class="form-control required digits" name="transferencia_numero" placeholder="Número" disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <input type="text" class="form-control required" name="transferencia_titular" placeholder="Titular" disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <select name="transferencia_banco" class="select2 required" data-placeholder="Banco" disabled>
                                    <option></option>
                                    @foreach($bancos as $b)
                                    <option value="{{ $b->id }}">{{ $b->nombre }}</option>
                                    @endforeach
                                </select>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <input type="text" class="form-control required fecha-simple" data-end="true" name="transferencia_fecha" placeholder="Fecha" disabled>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group mb-3">
                                <input type="text" class="form-control required digits" min="1" name="transferencia_monto" placeholder="Monto" disabled>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-success btn-lg btn--action zmdi zmdi-mail-send" data-toggle="tooltip" data-original-title="Emitir documento"></button>
            </form>
        </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="items-documento">
                <thead class="thead-light2">
                    <tr><th colspan="5">Listado de productos</th></tr>
                    <tr>
                        <th width="40%">Item</th>
                        <th width="10%" class="text-right">Cantidad</th>
                        <th width="20%" class="text-right">Precio</th>
                        <th width="20%" class="text-right">Subtotal</th>
                        <th width="" class="text-right"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="5" class="text-center empty">No se han ingresado items.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  </div>

  <div class="col-md-3">
    <div class="card">
        <div class="card-header p-3">
            RESUMEN VENTA<br>
            <small class="resumen-iva">* IVA Incluido</small>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm mt-1 mb-0">
                <tbody>
                    <tr style="display:none">
                        <th width="40%">Total neto</th>
                        <td class="text-right lead text-cyan font-weight-bold" id="total-neto">--</td>
                    </tr>
                    <tr style="display:none">
                        <th>IVA</th>
                        <td class="text-right lead text-cyan font-weight-bold" id="total-iva">--</td>
                    </tr>
                    <tr>
                        <th>Total a pagar</th>
                        <td class="text-right lead text-cyan font-weight-bold" id="total-monto" data-monto="0">--</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
  </div>

</div> -->

<!-- fin testing layout -->

<div class="row d-none-2">
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="items-documento">
                        <thead class="thead-light2">
                            <tr><th colspan="5">Listado de productos</th></tr>
                            <tr>
                                <th width="40%">Item</th>
                                <th width="10%" class="text-right">Cantidad</th>
                                <th width="20%" class="text-right">Precio</th>
                                <th width="20%" class="text-right">Subtotal</th>
                                <th width="" class="text-right"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="5" class="text-center empty">No se han ingresado items.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row justify-content-end">
            <div class="col-md-7">
                <div class="card">
                    <div class="card-header p-3">
                        RESUMEN VENTA<br>
                        <small class="resumen-iva">* IVA Incluido</small>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mt-1 mb-0">
                            <tbody>
                                <tr style="display:none">
                                    <th width="40%">Total neto</th>
                                    <td class="text-right lead text-cyan font-weight-bold" id="total-neto">--</td>
                                </tr>
                                <tr style="display:none">
                                    <th>IVA</th>
                                    <td class="text-right lead text-cyan font-weight-bold" id="total-iva">--</td>
                                </tr>
                                <tr>
                                    <th>Total a pagar</th>
                                    <td class="text-right lead text-cyan font-weight-bold" id="total-monto" data-monto="0">--</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 pl-md-0">
        <div class="card">
            <div class="card-body p-0">
                <div class="listview listview--bordered listview--striped border-top-green">
                    <div class="listview__item pt-0 pl-4 pr-4">
                        <div class="listview__content">
                            <div class="toolbar toolbar--inner pt-0 pl-0 pr-0">
                                <div class="toolbar__label">Producto</div>
                                <div class="actions">
                                    <i class="actions__item producto-buscar zmdi zmdi-search" data-ma-action="toolbar-search-open"></i>
                                </div>

                                <div class="toolbar__search" style="display: none;">
                                    <input type="text" placeholder="Buscar producto..." class="producto-search required">
                                    <i class="toolbar__search__close producto-empty zmdi zmdi-long-arrow-left" data-ma-action="toolbar-search-close"></i>
                                </div>
                            </div>

                            <div class="text-center">
                                <i class="zmdi zmdi-settings zmdi-hc-spin zmdi-hc-2x producto-loading" style="display: none"></i>
                            </div>

                            <ul class="list-unstyled producto-resultados m-0">
                            </ul>

                            <form id="formulario-detalle" action="#" style="display:none">
                                @csrf
                                <input type="hidden" id="detalle_nombre" value="">
                                <input type="hidden" id="detalle_id" value="">
                                <h5 id="producto-nombre" class="mb-3"></h5>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group mb-2">
                                            <label>Medida</label>
                                            <select id="detalle_medida" name="detalle_medida" class="required select2" data-placeholder="Elegir" disabled>
                                                <option></option>
                                                {{-- @foreach($productos as $p)
                                                <option value="{{ $p->id }}">{{ $p->nombre }}</option>
                                                @endforeach --}}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group mb-2">
                                            <label>Cantidad</label>
                                            <input type="number" id="detalle_cantidad" name="detalle_cantidad" class="form-control digits" min="1" value="1" maxlength="3" autocomplete="off" disabled>
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group mb-2">
                                            <label>Precio</label>
                                            <input type="text" id="detalle_precio" name="detalle_precio" class="form-control text-right required digits" min="1" autocomplete="off" disabled>
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group mb-2">
                                            <label>Subtotal</label>
                                            <p id="detalle_subtotal" class="form-control text-right">--</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button type="button" class="btn btn-sm btn-warning producto-cancelar">Cancelar</button>
                                    <button type="submit" class="btn btn-sm btn-primary">Agregar</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <form class="formulario" id="formulario-documento" action="#" method="post" data-url="{{ url('/ventas/generar') }}">
                        @csrf
                        <div class="listview__item pl-4 pr-4 border-top-green">
                            <div class="listview__content">
                                <div class="listview__heading">Tipo de Documento</div>
                                <div class="form-group mt-2 mb-0">
                                    <select id="tipo_documento" name="tipo_documento" class="required select2" data-placeholder="Seleccionar dirección">
                                        <option value="b" selected>BOLETA ELECTRÓNICA</option>
                                        <option value="f">FACTURA ELECTRÓNICA</option>
                                    </select>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>

                        <div class="listview__item pl-4 pr-4 border-top-green">
                            <div class="listview__content">
                                <div class="listview__heading">Cliente</div>
                                <div class="form-group mb-3 mt-3">
                                    <input type="text" class="form-control rut" maxlength="15" name="cliente_rut" id="cliente_rut" placeholder="Buscar RUT" autocomplete="off">
                                    <i class="form-group__bar"></i>
                                </div>

                                <div id="box-cliente" style="display:none">
                                    <input type="hidden" name="cliente_id" id="cliente_id" value="">
                                    <input type="hidden" name="empresa_id" id="empresa_id" value="">
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control required" name="cliente_nombre" id="cliente_nombre" placeholder="Nombre" autocomplete="off" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control email" name="cliente_email" id="cliente_email" placeholder="Correo electrónico" autocomplete="off" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control" name="cliente_telefono" id="cliente_telefono" placeholder="Teléfono" autocomplete="off" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-danger" id="cliente-cancelar">Cancelar</button>
                                </div>

                                <div id="box-empresa" style="display:none">
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control" id="empresa_razon_social" placeholder="Razón Social" readonly disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <select id="empresa_giro" name="empresa_giro" class="required select2" data-placeholder="Seleccionar giro" disabled>
                                            <option></option>
                                        </select>
                                        <input type="text" class="form-control required" id="empresa_giro_texto" name="empresa_giro_texto" placeholder="Ingresar giro" style="display:none">
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <select id="empresa_direccion" name="empresa_direccion" class="required select2" data-placeholder="Seleccionar dirección" disabled>
                                            <option></option>
                                        </select>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control text-uppercase" name="empresa_comuna" id="empresa_comuna" placeholder="Comuna" readonly disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-danger" id="empresa-cancelar">Cancelar</button>
                                </div>

                                <div class="text-center">
                                    <i class="zmdi zmdi-settings zmdi-hc-spin zmdi-hc-2x cliente-loading" style="display: none"></i>
                                </div>

                                <ul class="list-unstyled cliente-resultados m-0">
                                </ul>

                                <div class="cliente-datos">
                                    No seleccionado
                                </div>
                            </div>
                        </div>

                        <div class="listview__item pl-4 pr-4 border-top-green">
                            <div class="listview__content">
                                <div class="listview__heading">Forma de Pago</div>
                                <div class="form-group mb-0">
                                    <div class="select">
                                        <select class="form-control select2 required" name="forma_pago" id="forma-pago" data-placeholder="SELECCIONAR">
                                            <option value=""></option>
                                            <option value="1">EFECTIVO</option>
                                            <option value="3">TARJETA</option>
                                            <option value="5">TRANSFERENCIA</option>
                                        </select>
                                    </div>
                                    <i class="form-group__bar"></i>
                                </div>

                                <div id="box-efectivo" class="mt-4" style="display:none;">
                                    <div class="form-group mb-2">
                                        <input type="text" id="monto_pagado" class="form-control text-right required digits" min="0" maxlength="8" autocomplete="off" placeholder="Monto recibido">
                                        <i class="form-group__bar"></i>
                                    </div>
                                    <div class="text-right">
                                        Vuelto:
                                        <strong class="text-right lead font-weight-bold" id="vuelto">--</strong>
                                    </div>
                                </div>

                                <div id="box-tarjeta" class="mt-4" style="display:none;">
                                    <div class="form-group mb-2">
                                        <input type="text" class="form-control required digits" name="comprobante" placeholder="Número de comprobante" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div id="box-transferencia" class="mt-4" style="display:none;">
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control required digits" name="transferencia_numero" placeholder="Número" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control required" name="transferencia_titular" placeholder="Titular" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <select name="transferencia_banco" class="select2 required" data-placeholder="Banco" disabled>
                                            <option></option>
                                            @foreach($bancos as $b)
                                            <option value="{{ $b->id }}">{{ $b->nombre }}</option>
                                            @endforeach
                                        </select>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control required fecha-simple" data-end="true" name="transferencia_fecha" placeholder="Fecha" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>

                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control required digits" min="1" name="transferencia_monto" placeholder="Monto" disabled>
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success btn-lg btn--action zmdi zmdi-mail-send" data-toggle="tooltip" data-original-title="Emitir documento"></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@push('scripts')
<script type="text/javascript" src="{{ URL::to('js/app/ventas/nueva.js') }}"></script>
@endpush