@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>Guía de Remisión</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">Guía de Remisión
                    </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 de transporte</label>
                                        <fieldset class="form-group">
                                        <select class="form-select" id="tipo-documento">  
                                            <option value="01">01 - TRANSPORTE PÚBLICO</option>
                                            <option value="02">02 - TRANSPORTE PRIVADO</option>                                          
                                        </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="motivo-traslado">Motivo de Traslado</label>
                                        <fieldset class="form-group">
                                        <select class="form-select" id="motivo-traslado">                                           
                                        </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="tipo-doc">Tipo Doc Reacionado</label>
                                        <fieldset class="form-group">
                                        <select class="form-select" id="tipo-doc">                                           
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group">
                                        <label for="serie-docref">Serie Doc Reacionado</label>
                                        <input  type="text" id="serie-docref" class="form-control" name="serie-docref" placeholder="" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <label for="comentarios">Número Doc Reacionado</label>
                                    <div class="input-group mb-3">
                                        <input id="doc-relacionado" class="form-control" name="doc-relacionado" placeholder="">
                                        <button class="btn btn-primary" type="button" id="button-doc" data-bs-toggle="modal" data-bs-target="#mreferencia"><i class="bi bi-search"></i></button>
                                    </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>Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                               <div class="accordion" id="accordionExample">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                DATOS DEL TRASLADO
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
                                            <div class="accordion-body">
                                                <div class="row">
                                                    <div class="col-md-3 col-12">
                                                        <div class="form-group">
                                                            <label for="modalidad-pago">Peso - unidad de medida</label>
                                                            <fieldset class="form-group">
                                                            <select class="form-select" id="modalidad-pago">
                                                            <option value="KGM">KGM - KILOGRAMO</option>
                                                            <option value="TNE">TNE - TONELADA (TONELADA MÉTRICA)</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 col-12">
                                                        <div class="form-group">
                                                            <label for="dias-pago">Peso bruto total</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">Numero de bultos</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 de inicio de traslado</label>
                                                            <input type="date" id="fecha-vencimiento" class="form-control" name="fecha-vencimiento" placeholder="Email">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                DATOS DEL CONDUCTOR
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div class="row">
                                                    <div class="col-md-3 col-12">
                                                        <div class="form-group">
                                                            <label for="tipodoc-entidad">Tipo de documento</label>
                                                            <fieldset class="form-group">
                                                            <select class="form-select" id="tipodoc-entidad">
                                                                
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 col-12">
                                                        <div class="form-group">
                                                            <label for="dias-pago">Documento número</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">Nombre del conductor</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">Apellidos del conductor</label>
                                                            <input id="fecha-vencimiento" class="form-control" name="fecha-vencimiento" placeholder="Email">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 col-12">
                                                        <div class="form-group">
                                                            <label for="dias-pago">Licencia de conducir</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">Transportista placa numero</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">Número de registro MTC (condicional)</label>
                                                            <input id="fecha-vencimiento" class="form-control" name="fecha-vencimiento" placeholder="Email">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingThree">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                DATOS DEL DESTINO
                                            </button>
                                        </h2>
                                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div class="row">
                                                    <div class="col-md-5 col-12">
                                                        <div class="form-group has-icon-right">
                                                            <label for="ubigeo">Ubigeo</label>
                                                            <div class="position-relative">
                                                                <input type="text" class="form-control" placeholder="" id="ubigeo" autocomplete="off">
                                                                <input type="hidden" name="ubigeo-id" id="ubigeo-id" val="" />
                                                                <div class="form-control-icon">
                                                                    <i class="bi bi-search"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="form-group">
                                                            <label for="guia-remision">Dirección de llegada</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">Código Sunat</label>
                                                            <input id="fecha-vencimiento" class="form-control" name="fecha-vencimiento" placeholder="Email">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <BR/>
                            <div class="row">    
                                <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 DOCUMENTO REFERENCIA-->
    <div class="modal fade text-left" id="mreferencia" tabindex="-1" aria-labelledby="myModalLabel160" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" 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>
                
                    <div class="modal-body">
						<div class="form-group">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="table-referencia">
                                    <thead>
                                        <tr>
                                            <th>Nro Documento</th>
                                            <th>ID Proveedor</th>
                                            <th>R.U.C</th>
                                            <th>Razon Social</th>
                                            <th>Fecha Emisión</th>
                                            <th>Producto</th>
                                        </tr>
                                    </thead>
                                    <tbody>                                        
                                    </tbody>
                                </table>
                            </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>
				
            </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_guiaremision.js')}}"></script>
<!--script src="{{asset('backend/assets/js/pages/form-element-select.js')}}"></script-->
<script src="{{asset('backend/assets/extensions/choices.js/public/assets/scripts/choices.js')}}"></script>
<script type="text/javascript">
        
</script>
        
@endsection