@extends('layouts.default')
@section('content')

<!-- Modal Nuevo Concepto Viatico -->
<div class="modal fade" id="modalNuevoConcepto" tabindex="-1" role="dialog" aria-labelledby="selAlmacenLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selAlmacenLabel">Ingrese un nuevo concepto de Viatico</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        Descripción:*<br/>
                        <input type="text" class="x-form-control text-uppercase" id="descripcionViatico" placeholder="" autocomplete="off" />
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="btnNuevoConcepto" onclick="nuevoConceptoViatico()">Agregar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="padding:10px">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="viaticos-tab" data-bs-toggle="tab" data-bs-target="#viaticos" type="button" role="tab" aria-controls="viaticos" aria-selected="false">
                            Viaticos
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="selects-tab" data-bs-toggle="tab" data-bs-target="#selects" type="button" role="tab" aria-controls="selects" aria-selected="false">
                            Otros
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent" style="padding:1em; border: #DDD 1px solid !important">
<!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA VIATICOS///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade show active" id="viaticos" role="tabpanel" aria-labelledby="viaticos-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                                        <div class="p-1">
                                            <span>Conceptos de Viaticos</span>
                                        </div>
                                        <div class="p-1">
                                            <div class="form-group" style="text-align:left">
                                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNuevoConcepto">
                                                    <i class="mdi mdi-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding:10px">
                                        <form id="miForm">  
                                            <div class="row">
                                                <div class="col-md-12">                 
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                Concepto:*<br/>
                                                                <select class="x-form-control" id="conceptoviatico">

                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                Tipo:*<br/>
                                                                <select class="x-form-control" id="tipoviatico">
                                                                    <option value="0">SIN FACTURA</option>
                                                                    <option value="1">CON FACTURA</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                Puesto:*<br/>
                                                                <select class="x-form-control" id="puestoviatico">
                                                                    
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-1">
                                                            <div class="form-group">
                                                                Monto:*<br/>
                                                                <input type="number" class="x-form-control" id="montoviatico" placeholder="" autocomplete="off" />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <button type="button" class="btn btn-success btn-icon-text" onclick="agregarViatico()" style="margin:8px;">Agregar</button>    
                                                            <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiarInputsViatico()" style="margin:8px;">Limpiar</button>  
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <span class="x-label">Buscar:</span>
                                                    <input type="text" class="form-control text-uppercase" id="buscarviatico" placeholder="Escribe el concepto del viatico" autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="height:520px; overflow:auto">
                                            <table class="table table-striped mx-2" id="tableViaticos">
                                                <thead>
                                                    <tr>
                                                        <th>Concepto</th>
                                                        <th>Tipo</th>
                                                        <th>Puesto</th>
                                                        <th>Subtotal</th>
                                                        <th>IVA</th>
                                                        <th>Total</th>
                                                        <th>Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
<!--////////////////////////////////////////////////////////////////////////////////////////OTRA PESTAÑA///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="selects" role="tabpanel" aria-labelledby="selects-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                                        <div class="p-1">
                                            <span>Otros Catalogos</span>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding:10px">      
                                        <p class="h4" style="background-size: 12px;">Mensajes de impresión</p>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="row">                      
                                                    <div class="form-group">
                                                        <span class="x-label">Almacén:</span>
                                                        <select class="x-form-control" id="selectAlmacen" onchange="getNotaImpresionTicket()">

                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">                        
                                                    <div class="form-group">
                                                        <span class="x-label">Operación:</span>
                                                        <select class="x-form-control" id="selectTipoDocumento" onchange="getNotaImpresionTicket()">

                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">                        
                                                <div class="form-group">
                                                    Nota:<br/>
                                                    <textarea rows="4" class="x-form-control text-uppercase" id="NotaImpresion" autocomplete="off"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="number" class="x-form-control" id="tipoNota" style="display:none"/>
                                                <button type="button" class="btn btn-success btn-icon-text" onclick="agregarNewNota()" style="margin:8px;">
                                                    <span id="buttonNewPais">Agregar</span>
                                                    <span id="buttonActualizarPais">Actualizar</span>                                        
                                                </button>  
                                            </div>
                                        </div>
                                        <hr>   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.nav-link.active{
    background: #90caf9 !important
}
#bordesTable{
    border: 1px solid #000000;
    text-align: center;
}
</style>

@stop
@section('jspage')
    <script src="jsprod/cat_rh.js"></script>
@stop