@extends('layouts.master')

@section('content')

<div class="page-title">
    <div class="row">
        <div class="col-12 col-md-6 order-md-1 order-last">
            <h3>Registro de Ventas</h3>
        </div>
        <div class="col-12 col-md-6 order-md-2 order-first">
            <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Registro de Ventas
                    </li>
                </ol>
            </nav>
        </div>
    </div>
</div>
<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <form class="form" >
                            <div class="row">
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="first-name-column">Tipo Documento</label>
                                        <fieldset class="form-group">
                                        <select class="form-select" id="tipo-documento">
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="serie-factura">Serie Documento</label>
                                        <input type="text" id="serie-factura" class="form-control" placeholder="F001" name="serie-factura">
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="numero-factura">Número Documento</label>
                                        <input type="text" id="numero-factura" class="form-control" placeholder="00000001" name="numero-factura" autocomplete="off">                                        
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="moneda-factura">Moneda</label>
                                        <fieldset class="form-group">
                                        <select class="form-select" id="moneda-factura">
                                            <option>PEN</option>
                                            <option>USD</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="fecha-emision">Fecha Emisión</label>
                                        <input type="date" id="fecha-emision" class="form-control" name="fecha-emision" placeholder="fecha" >
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group has-icon-right">
                                            <label for="ruc-proveedor">R.U.C</label>
                                            <div class="position-relative">
                                                <input type="text" class="form-control" placeholder="" id="inp-cliente-proveedor-codigo" autocomplete="off">
                                                <input type="hidden" name="inp-cliente-proveedor-id" id="inp-cliente-proveedor-id" val="" />
                                                <div class="form-control-icon">
                                                    <i class="bi bi-search"></i>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label for="razon-social">Razón Social</label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" placeholder="" id="inp-cliente-proveedor"  autocomplete="off" aria-label="Example text with button addon" aria-describedby="button-addon1">
                                        <button class="btn btn-primary" type="button" id="button-razon" data-bs-toggle="modal" data-bs-target="#primary"><i class="bi bi-person-plus"></i></button>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="modalidad-pago">Modalidad de Pago</label>
                                        <fieldset class="form-group">
                                        <select class="form-select" id="modalidad-pago">
                                            <option>CONTADO</option>
                                            <option>CREDITO</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="dias-pago">Dias de Pago</label>
                                        <input type="text" id="dias-pago" class="form-control" name="dias-pago" placeholder="" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="guia-remision">Guia Remisión</label>
                                        <input id="guia-remision" class="form-control" name="guia-remision" placeholder="" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="comentarios">Fecha Vencimiento</label>
                                        <input type="date" id="fecha-vencimiento" class="form-control" name="fecha-vencimiento" placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                                        <label class="form-check-label" for="flexSwitchCheckChecked">Incluye I.G.V</label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked1" checked="">
                                        <label class="form-check-label" for="flexSwitchCheckChecked">Es Servicio?</label>
                                    </div>
                                </div>
                               
                                <div class="col-12 d-flex justify-content-end">
                                        <button class="btn btn-primary" type="button"  id="btn-agregar" data-bs-toggle="modal" data-bs-target="#mservicio">
                                        <i class="bi bi-cart-plus"></i>Agregar</button> 
                                </div>                            
                            </div>
                            <br/>
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped" id="table-detalle">
                                            <thead>
                                                <tr>
                                                    <th>Código</th>
                                                    <th>Dedcripción</th>
                                                    <th>UM</th>
                                                    <th>Cantidad</th>
                                                    <th>Precio</th>
                                                    <th>Total</th>
                                                    <th>Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-12">
                                    <div class="form-check">
                                        
                                    </div>
                                </div>
                                <div class="col-md-10 col-12">
                                    <div class="form-group">
                                        <label for="comentarios">Comentarios</label>
                                        <input id="comentarios" class="form-control" name="comentarios" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="form-group">
                                        <label for="subtotal-factura">SubTotal</label>
                                        <input id="subtotal-factura" class="form-control" name="subtotal-factura" placeholder="0.00">
                                    </div>
                                </div>
                                <div class="col-md-5 col-12">
                                    <div class="form-group">
                                        <label for="impuesto-tipo">Impuesto</label>
                                        <input id="impuesto-tipo" class="form-control" name="impuesto-tipo" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-5 col-12">
                                    <div class="form-group">
                                        <label for="impuesto-monto">Monto</label>
                                        <input id="impuesto-monto" class="form-control" name="impuesto-monto" placeholder="0.00">
                                    </div>
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="form-group">
                                        <label for="igv-factura">I.G.V</label>
                                        <input id="igv-factura" class="form-control" name="igv-factura" placeholder="0.00">
                                    </div>
                                </div>
                                <div class="col-md-10 col-12">
                                    
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="form-group">
                                        <label for="total-factura">Total</label>
                                        <input id="total-factura" class="form-control" name="total-factura" placeholder="0.00">
                                    </div>
                                </div>
                                <div class="col-sm-12 d-flex justify-content-end">
                                    <div class="form-group">
                                        <button type="button" id="addMovimientoOperacion" class="btn btn-primary me-1 mb-1">Registrar</button>
                                        <button type="reset" class="btn btn-light-secondary me-1 mb-1">Cancelar</button>
                                    </div>
                                 </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--MODAL DETALLE SERVICIO-->
    <div class="modal fade text-left" id="mservicio" tabindex="-1" aria-labelledby="myModalLabel160" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="m_servicio">Detalle Servicio</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <form id="frm-add-proveedores">
                    <div class="modal-body">
						<div class="form-group">
							<label>Ruc</label> 
							<div class="form-floating">
                                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                            </div>
						</div>						
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">
                            <i class="bx bx-x d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Cancelar</span>
                        </button>
                        <button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal" onclick="$('#frm-add-proveedores').submit();">
                            <i class="bx bx-check d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Guardar</span>
                        </button>
                    </div>
				</form>
            </div>
        </div>
    </div>
    <!--MODAL REGISTRO PROVEEDORES-->
    <div class="modal fade text-left" id="primary" tabindex="-1" aria-labelledby="myModalLabel160" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel33">Login Form </h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <form id="frm-add-proveedores">
                    <div class="modal-body">
						<div class="form-group">
							<label>Ruc</label> 
							<input id="inp-prov-ruc" name="inp-prov-ruc" placeholder="Ruc" class="form-control" required="true" data-inputmask-regex="\d{11}">
							<div id="inp-prov-ruc-error"></div>

						</div>
						<div class="form-group">
							<label>Razón Social</label> 
							<input id="inp-prov-razons" name="inp-prov-razons" placeholder="Razón Social" class="form-control" required="true">
							<div id="inp-prov-razons-error"></div>
						</div>
						<div class="form-group">
							<label>Dirección</label> 
							<input id="inp-prov-direccion" name="inp-prov-direccion" placeholder="Dirección" class="form-control">
						</div>
						<div class="form-group">
							<label>Correo</label> 
							<input id="inp-prov-correo" name="inp-prov-correo" placeholder="Correo" class="form-control">
						</div>
						<div class="form-group">
							<label>Telefono</label> 
							<input id="inp-prov-telefono" name="inp-prov-telefono" placeholder="Telefono" class="form-control">
						</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="frm-find-proveedores">
                            <i class="bx bx-x d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">SUNAT</span>
                        </button>
                        <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">
                            <i class="bx bx-x d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Cancelar</span>
                        </button>
                        <button type="button" class="btn btn-primary ml-1" data-bs-dismiss="modal" onclick="$('#frm-add-proveedores').submit();">
                            <i class="bx bx-check d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Guardar</span>
                        </button>
                    </div>
				</form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-2.1.7/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{asset('backend/assets/script/script_ventas.js')}}"></script>
<script type="text/javascript">
        
</script>
        
@endsection