@extends('layout.main')
@section('content')

    <div class="sixteen wide tablet sixteen wide computer column ">
        <div class="ui segment">
            
            <h4 class="ui dividing header teal centered">EMITIR NUEVA PROFORMA</h4>
            
            <form class="ui form" id="frmNuevo" autocomplete="off"> 
            
                <br>

                <div class="four fields">
                    <div class="three wide field">
                        <div class="ui fluid large white label" id="tipo_doc">RUC / DNI</div>
                    </div>
                    <div class="three wide field">
                        <div class="ui action small input" >
                              <input type="text" id="numero_documento" name="numero_documento"  placeholder="Buscar..." maxlength="11">
                              <div class="ui icon button" id="loading_doc" title="Clic para Consultar"><i class="search icon"></i>&nbsp;SUNAT</div>
                        </div>
                    </div>

                    
                    <div class="inline fields">
                        <div class="three wide field"></div>
                        <div class="field">
                          <div class="ui radio checkbox">
                            <input type="radio" name="tipo" checked="checked" value="PROFORMA">
                            <label>PROFORMA</label>
                          </div>
                        </div>
                        <div class="field">
                          <div class="ui radio checkbox">
                            <input type="radio" name="tipo" value="PEDIDO">
                            <label>PEDIDO</label>
                          </div>
                        </div>
                    </div>

                </div>

                <div class="three fields">
                    <div class="three wide field">
                        <div class="ui fluid large white label">Nombre del cliente</div>
                    </div>
                    <div class="eleven wide field">
                        <div class="ui small input">
                            <input type="text"  name="nombre" id="nombre_cliente"    maxlength="200" oninput="$.upperCase(this)">
                        </div>  
                    </div>
                    <div class="two wide field">
                        <div class="ui fluid small green button btn_buscar_cliente" title="Clic para ver lista de clientes registrados"><i class="search icon"></i>BUSCAR</div>
                    </div>
                </div>

                <div class="three fields">
                    <div class="three wide field">
                        <div class="ui fluid large white label">Direccion</div>
                    </div>
                    <div class="eleven wide field">
                        <div class="ui small input">
                            <input type="text" name="direccion" id="direccion"  maxlength="200" oninput="$.upperCase(this)">
                        </div>  
                    </div>
                </div>

                <div class="three fields">
                    <div class="three wide field">
                        <div class="ui fluid large white label">Observacion</div>
                    </div>
                    <div class="eleven wide field">
                        <div class="ui small input">
                            <input type="text" name="observacion"  maxlength="200" oninput="$.upperCase(this)">
                        </div>  
                    </div>
                </div>

                

                <div class="five fields" style="visibility: hidden;">
                    <div class="three wide field">
                        <div class="ui fluid large white label">Fecha de Emision</div>
                    </div>
                    <div class="three wide field">
                        <div class="ui small input">
                            <input type="text" class="fecha hasDate" name="fecha_emision" >
                        </div> 
                    </div>
                </div>
               
                {{-- <br>
                <div class="ui divider"></div>  
                <br>  --}}
                <div class="four fields">
                    <div class="three wide field">
                        <div class="ui fluid large white label">Buscar producto</div>
                    </div>
                    <div class="eight wide field">
                        <select class="ui search selection " name="id_prod">
                            
                        </select> 
                    </div>
                    
                    <div class="three wide field">
                        <div class="ui icon small input" id="loading_input">
                            <input type="text" id="codigo_barras" maxlength="100" placeholder="CODIGO DE BARRAS" onkeyup="$.buscarCodigoBarras()">
                            <i class="search icon"></i>
                        </div> 
                    </div> 
                    <div class="two wide field">
                        <div class="ui fluid small green button btn_buscar_producto" title="Clic para ver lista de productos"><i class="search icon"></i>VER TODO</div>
                    </div>
                    
                    
                </div>

                <br>
                    
                <table class="ui celled table">
                    <thead>
                        <tr>
                            <th class="center aligned">Producto</th>
                            <th class="center aligned" data-tooltip="Cantidad a vender" data-position="top center" data-inverted="">Cantidad</th>
                            <th class="center aligned" data-tooltip="Precio de venta unitario" data-position="top center" data-inverted="">Precio S/</th>
                            {{-- <th class="center aligned" data-tooltip="Monto para descuento" data-position="top center" data-inverted="">Dscto S/</th> --}}
                            <th class="center aligned">Subtotal S/</th>
                            <th class="center aligned">Acción</th>
                        </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>

                <div class="form_footer">
                    <div class="ui labeled small input">
                        <label class="ui brown label">TOTAL  S/</label>
                        <input type="text" name="total_venta" id="total_venta" size="5" readonly style="width: 0%">
                    </div> 
                    &nbsp;&nbsp;
                    <a href="#" class="btn_nuevo_producto">(+) Agregar nuevo producto</a>

                    <div class="ui right floated primary button btn_registrar"><i class="check icon"></i>EMITIR</div>
                    <div class="ui right floated  button  btn_adelanto" style="visibility: hidden;">Adelanto</div>
                </div>

            </form>

        </div>
    </div>

    <!--start register modal -->
    <div class="ui small basic modal" id="register_modal">
        <div class="ui icon header"><i class="circular inverted white dollar sign icon"></i>Emitir Proforma</div>
        <div class="content" style="text-align: center; font-size: 16px">
          <p>¿Desea emitir la proforma de estos productos?</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button" title="Haga clic para salir"><i class="remove icon"></i>Cancelar</div>
            <div class="ui green ok inverted button" title="Haga clic para emitir"> <i class="paper plane icon"></i>Emitir</div>
        </div>
    </div>
    <!--end register modal -->

    <!--start nuevo producto modal -->
    <div class="ui modal" id="nuevo_producto_modal">
        <div class="header">Registrar Nuevo Producto</div>     
        <div class="content">
            <div class="ui disabled inverted dimmer" id="loader_producto">
                <div class="ui text loader">Procesando...</div>
            </div>
            <form class="ui form" id="frmNuevoProducto" autocomplete="off">
                <input type="hidden" name="id_unidad_medida" value="1">
                <input type="hidden" name="id_tipo_presentacion" value="1">
                <input type="hidden" name="tipo_impuesto" value="IGV">
                <input type="hidden" name="tipo_producto" value="Generico">
                <input type="hidden" name="precio_compra" value="0.00">
                <div class="two fields">
                    <div class="twelve wide field">
                        <label>Nombre del Producto</label>
                        <div class="ui small input ">
                          <input type="text" name="nombre" maxlength="800" oninput="$.upperCase(this)">
                        </div>
                    </div>
                    <div class="four wide field">
                        <label>Precio de Venta</label>
                        <div class="ui labeled small input">
                            <label class="ui label">S/</label>
                            <input type="text" name="precio" maxlength="11">
                        </div>  
                    </div>
                </div>  
                <div class="four fields">
                    <div class="four wide field">
                        <label>Marca</label>
                        <div class="ui small input ">
                          <input type="text" name="descripcion" maxlength="100" oninput="$.upperCase(this)">
                        </div>
                    </div>
                    <div class="four wide field">
                        <label>Codigo de Barras</label>
                        <div class="ui small input ">
                          <input type="text" name="codigo_barras" maxlength="100" oninput="$.upperCase(this)">
                        </div> 
                    </div>
                    <div class="four wide field">
                        <label>Situacion Impuesto</label>
                        <select class="ui small search selection dropdown" name="situacion_impuesto">
                            <option value="AFECTO">Afecto</option>
                            <option value="INAFECTO">Inafecto</option>
                            <option value="EXONERADO">Exonerado</option>
                        </select>  
                    </div>
                    <div class="four wide field">
                        <label>Valor de Impuesto</label>
                        <div class="ui right labeled small input">
                            <input type="text" name="valor_impuesto" id="valor_impuesto" value="{{$empresa->valor_impuesto}}" maxlength="8" readonly>
                            <label class="ui label">%</label>
                        </div>  
                    </div>
                </div> 
            </form>
        </div>
        <div class="actions" >
            <div class="ui left floated black right labeled icon deny button" style="margin-bottom: 1em">Cerrar<i class="times icon"></i></div>
            <div class="ui right floated primary button btn_registrar_producto"><i class="plus icon"></i>AGREGAR</div>
        </div>
    </div>
    <!--end nuevo producto  modal --> 

    <!--start buscar producto modal -->
    <div class="ui standard large modal" id="buscar_producto_modal">
        <div class="header">Buscar Productos</div>
        <div class="scrolling content">
            <div class="ui disabled inverted dimmer" id="loader_busqueda">
                <div class="ui text loader">Procesando...</div>
            </div>
            <div class="ui action small input"  autocomplete="off">
                <input type="text" id="buscar_producto" name="buscar_producto" placeholder="Producto a buscar...">
                <div class="ui icon button" id="btn_buscar_prod" title="Clic para buscar"><i class="search icon"></i></div>
            </div> 
            <table class="ui celled striped table" id="tabla_productos">
                <thead>
                    <tr>
                        <th class="head_table">N°</th>
                        <th class="head_table">Cod Barras</th>
                        <th class="head_table">Producto</th>  
                        <th class="head_table">Stock</th>                  
                        <th class="head_table">Precio por MENOR S/</th>
                        <th class="head_table">Precio por MAYOR S/</th>
                    </tr>
                </thead>
                <tbody id="tbody_productos">
                                       @foreach ($producto->sortBy('producto.nombre') as $row)
                    <tr data-table="{{ $row->id_producto }}">
                        <td>{{ $i }}</td>
                        <td>{{ $row->producto->codigo_barras }}</td>
                        <td>{{ $row->producto->nombre }} {{ $row->producto->descripcion }} </td>
                        <td>{{ $row->stock < 1000001 ? 'AGOTADO' : $row->stock - 1000000  }}</td>
                        <td>
                            <div class="ui mini vertical animated positive button btn_seleccionar_producto" title="Click para seleccionar este producto" data-id="{{ $row->id_producto }}" data-mayor="false">
                                <div class="hidden content">Añadir</div>
                                <div class="visible content">{{ $row->producto->precio }}</div>
                            </div>
                        </td>
                        <td>
                            @if($row->producto->precio_mayorista != null)
                                 @if($row->producto->precio_mayorista > 0)
                                <div class="ui mini vertical animated orange button btn_seleccionar_producto" title="Click para seleccionar este producto" data-id="{{ $row->id_producto }}" data-mayor="true">
                                    <div class="hidden content">Añadir</div>
                                    <div class="visible content">{{ $row->producto->precio_mayorista }}</div>
                                </div>
                                @endif
                            @endif
                        </td>
                    </tr>
                                        @endforeach
                </tbody>
            </table>
        </div>
        <div class="actions" >
            <div class="ui left floated red right labeled icon deny button" style="margin-bottom: 1em">Cerrar<i class="times icon"></i></div>
        </div>
    </div>
    <!--end buscar producto modal -->

    <!--start buscar cliente modal -->
    <div class="ui standard large modal" id="buscar_cliente_modal">
        <div class="header">Buscar Clientes</div>
        <div class="scrolling content">
  
            <div class="ui action small input"  autocomplete="off">
                <input type="text" id="buscar_cliente" name="buscar_cliente" placeholder="Cliente a buscar...">
                <div class="ui icon button" id="btn_buscar_cli" title="Clic para buscar"><i class="search icon"></i></div>
            </div> 
            <table class="ui celled striped table" id="tabla_clientes">
                <thead>
                    <tr>
                        <th class="head_table">N°</th>
                        <th class="head_table">Nombre</th>
                        <th class="head_table">Documento</th>
                        <th class="head_table">Numero</th>
                        <th class="head_table">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tbody_clientes">
                                       @foreach ($clientes as $row)
                    <tr data-table="{{ $row->id_cliente }}">
                        <td>{{ $i }}</td>
                        <td>{{ $row->nombre }}</td>
                        <td>{{ $row->tipo_documento->nombre }}</td>
                        <td>{{ $row->numero_documento}}</td>

                        <td>                            
                            <div class="ui mini vertical animated positive button btn_seleccionar_cliente" title="Seleccionar este cliente" data-nombre="{{ $row->nombre}}" data-documento="{{ $row->numero_documento }}" data-direccion="{{ $row->direccion }}">
                                <div class="hidden content">Elegir</div>
                                <div class="visible content"><i class="check icon"></i></div>
                            </div>
                        </td>
                    </tr>
                                        @endforeach
                </tbody>
            </table>
        </div>
        <div class="actions" >
            <div class="ui left floated red right labeled icon deny button" style="margin-bottom: 1em">Cerrar<i class="times icon"></i></div>
        </div>
    </div>
    <!--end buscar cliente modal -->

    <!--start calculadora modal -->    
    <div class="ui mini modal" id="adelanto_modal">
        {{-- <i class="close icon"></i> --}}
        <div class="content" >
          
                <div style="text-align: center !important;">
                    <div class="ui labeled small input" id="frmSaldo">
                        <label class="ui grey label">A CUENTA</label>
                        <input type="text" id="adelanto" name="adelanto" size="5"  style="width: 0%">
                    </div> 
                </div>
                <br>
                <div style="text-align: center !important;">
                    <div class="ui labeled small input">
                        <label class="ui brown label">&nbsp;SALDO S/&nbsp;</label>
                        <input type="text" id="saldo" size="5" readonly style="width: 0%">
                    </div> 
                </div>
                <div class="ui divider"></div>
                <div style="text-align: center !important;">
                    <div class="ui labeled small input">
                        <label class="ui violet label">TOTAL &nbsp; S/</label>
                        <input type="text" id="total" size="5" readonly style="width: 0%">
                    </div> 
                </div>
           
        </div>
        <div class="actions" >
            <div class="ui right floated primary button btn_registrar_adelanto" style="margin-bottom: 1em"><i class="check icon"></i>OK</div>
        </div>
    </div>
    <!--end calculadora modal -->

@stop

@section('scripts')
    <script src="{{ asset('js/proforma/nuevo.js') }}"></script>
@stop