<div class="pestanyas">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <button class="nav-link <% if (tipo == 0) { %> active <% } %>" id="nav-datos-tab" data-bs-toggle="tab" data-bs-target="#nav-datos"
                type="button" role="tab" aria-controls="nav-datos" aria-selected="true">Datos</button>
            <button class="nav-link <% if (tipo == 1) { %> active <% } %>" id="nav-historial-tab" data-bs-toggle="tab" data-bs-target="#nav-historial"
                type="button" role="tab" aria-controls="nav-historial" aria-selected="false">Historial</button>
            <button class="nav-link <% if (tipo == 2) { %> active <% } %>"" id="nav-ventas-tab" data-bs-toggle="tab" data-bs-target="#nav-ventas" type="button"
                role="tab" aria-controls="nav-ventas" aria-selected="false">Ventas</button>
            <button class="nav-link <% if (tipo == 3) { %> active <% } %>" id="nav-presupuestos-tab" data-bs-toggle="tab" data-bs-target="#nav-presupuestos"
                type="button" role="tab" aria-controls="nav-presupuestos" aria-selected="false">Presupuestos</button>
            <button class="nav-link <% if (tipo == 4) { %> active <% } %>" id="nav-pedidos-tab" data-bs-toggle="tab" data-bs-target="#nav-pedidos"
                type="button" role="tab" aria-controls="nav-pedidos" aria-selected="false">Pedidos</button>
            <button class="nav-link <% if (tipo == 5) { %> active <% } %>" id="nav-productos-tab" data-bs-toggle="tab" data-bs-target="#nav-productos"
                type="button" role="tab" aria-controls="nav-productos" aria-selected="false">Productos</button>
            <!--<button class="nav-link <% if (tipo == 6) { %> active <% } %>" id="nav-archivos-tab" data-bs-toggle="tab" data-bs-target="#nav-archivos"
                    type="button" role="tab" aria-controls="nav-archivos" aria-selected="false">Archivos</button>-->
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade <% if (tipo == 0) { %> show active <% } %>" id="nav-datos" role="tabpanel" aria-labelledby="nav-datos-tab" tabindex="0">
            <br>
            <div class="container">
                <div class="main-body">
                    <div class="row">
                        <div class="col-md-6">
                            
                            <div class="card  mb-3">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <h5>Datos Principales</h5>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center ptp" style="background-color:<%= patient.colorFondo %>; color:<%= patient.colorTexto %>"><%=patient.ptnombre%></div>
                                        </div>
                                    </div>
                                    
                                  </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Nombre</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <%= patient.nombre %> <%= patient.primerApellido %> <%= patient.segundoApellido %>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Direccion</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <%= patient.direccion %>, <%= patient.poblacion %>, <%= patient.cp %>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">F. Nacimiento</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <%= (patient.fechaNacimiento).toLocaleDateString() %>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">DNI</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <%= patient.DNI %>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Género</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <%= genero %>
                                        </div>
                                    </div>
                                    <hr>
                                    
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalEditPatient" href="#modalEditPatient">Editar</a>
                                        </div>
                                    </div>
                                </div><!--cierre card body-->
                            </div><!--cierre tarjeta-->
                            <div class="card  mb-3">
                                <div class="card-header">
                                    <h5>Comentarios</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <%= comment %>
                                        </div>
                                        
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <% if (comment === null ) { %> 
                                                <a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalAddComment" href="#modalAddComment">Añadir</a>
                                            <% } else { %> 
                                                <a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalEditComment" href="#modalEditComment">Editar</a>
                                                <a class="btn btn-danger" id="borrarcomentario" href="/pacientes/comment/delete/<%= patient.id %>">Borrar</a>
                                            <% } %>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div><!--cierre primera columna-->
                        <div class="col-md-6">
                            <div class="card  mb-3">
                                <div class="card-header">
                                    <h5>Contacto</h5>
                                  </div>
                                <div class="card-body">
                                    <!--<div class="row">
                                        <h6 class="card-subtitle mb-2 text-muted">Teléfonos</h6>
                                    </div>-->
                                    <% telefonos.forEach(t => { %>
                                        <div class="row">
                                            <!--<div class="col-sm-3">
                                                <h6 class="mb-0">Teléfono</h6>
                                            </div>-->
                                            <div class="col-sm-6 text-secondary">
                                                <i class="fas fa-phone"></i> <%= t.valor %>
                                            </div>
                                            <div class="col-sm-3 text-secondary">
                                                <%= t.comentario %>
                                            </div>
                                            <div class="col-sm-3 text-end">
                                                <a data-bs-toggle="modal" data-bs-target="#modalEditContact<%= t.id %>" href="#modalEditContact<%= t.id %>"><i class="fas fa-pen"></i></a>
                                                <a href="/pacientes/paciente/deletecontact/<%= patient.id %>/<%= t.id %>"><i class="fas fa-trash"></i></a>
                                            </div>
                                        </div>
                                        <hr>
                                    <% }) %>

                                    <!--<div class="row">
                                        <h6 class="card-subtitle mb-2 text-muted">Emails</h6>
                                    </div>-->
                                    <% emails.forEach(m => { %>
                                        <div class="row">
                                            <!--<div class="col-sm-3">
                                                <h6 class="mb-0">Email</h6>
                                            </div>-->
                                            <div class="col-sm-6 text-secondary">
                                                <i class="fas fa-envelope"></i> <%= m.valor %>
                                            </div>
                                            <div class="col-sm-3 text-secondary">
                                                <%= m.comentario %>
                                            </div>
                                            <div class="col-sm-3 text-end">
                                                
                                                <a data-bs-toggle="modal" data-bs-target="#modalEditContact<%= m.id %>" href="#modalEditContact<%= m.id %>"><i class="fas fa-pen"></i></a>
                                                <a href="/pacientes/paciente/deletecontact/<%= patient.id %>/<%= m.id %>"><i class="fas fa-trash"></i></a>
                                                    
                                            </div>
                                        </div>
                                        <hr>
                                    <% }) %>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalAddContact" href="#modalAddContact">Añadir</a>
                                        </div>
                                    </div>
                                
                                </div><!-- cierre card body-->
                            </div><!--cierre tarjeta-->
                            

                        </div><!--Cierra segunda columna-->
                    </div> <!-- cierre fila -->
                </div> <!-- cierre main-body-->

            </div> <!--cierre container-->

        </div> <!-- cierre tab Datos-->

        <!-- PANEL DE HISTORIAL-->
        <div class="tab-pane fade <% if (tipo == 1) { %> show active <% } %>" id="nav-historial" role="tabpanel" aria-labelledby="nav-historial-tab" tabindex="0">
            
            <br>
            <div class="container">
            <div class="main-body">
                <div class="row">
                    <div class="col-md-3">
                        <a class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalAddHistory" href="#modalAddHistory"><i class="fas fa-notes-medical iconoboton"></i>Añadir historia</a>
                    </div>
                </div> <!-- fin fila-->
                
            
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <% histories.forEach(h => { %>
                            <div class="card  mb-12">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-1">
                                            <i class="fas <% if (h.tipo == 1) { %> fa-glasses <% } else{ %> fa-phone <% } %>"></i>
                                        </div>
                                        <div class="col-md-3">
                                            <h7> <%= (h.fechaHistoria).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'}) %> - <%= h.horaHistoria %></h7>
                                        </div>
                                        <div class="col-md-6 text-end">
                                            <h7><%= h.nombre %> <%= h.primerapellido %> <%= h.segundoapellido %> </h7>
                                        </div>
                                        <div class="col-md-2 text-end">
                                            <a data-bs-toggle="modal" data-bs-target="#modalEditHistory<%= h.id %>" href="#modalEditHistory<%= h.id %>"><i class="fas fa-pen"></i></a>
                                            <a href="/pacientes/paciente/deletehistory/<%= patient.id %>/<%= h.id %>"><i class="fas fa-trash"></i></a>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <%= h.contenido %>
                                    </div>   
                                </div><!-- fin card-body-->    
                            </div> <!--fin tarjeta-->
                            <% }) %>
                        </div><!-- fin columna tarjeta-->
                    </div>
                </div>
            </div> <!-- fin container-->    
        </div>
        <!-- FIN PANEL DE HISTORIAL-->
        <div class="tab-pane fade <% if (tipo == 2) { %> show active <% } %>" id="nav-ventas" role="tabpanel" aria-labelledby="nav-ventas-tab" tabindex="0">
            <br>
            <div class="container">
                <div class="main-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button" class="btn btn-info btn-md" data-bs-toggle="modal" data-bs-target="#modalAddSale"><i class="fas fa-cart-plus iconoboton"></i>Nueva Venta</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card  mb-12 ">
                                <div class="card-header">
                                    <div class="row">
                            
                                        <div class="col-md-3">
                                            <h5>Ventas</h5>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" placeholder="Escribe para filtrar..." id="buscadorVentasPaciente">
                                        </div>
                                        <div class="col-md-3">
            
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row tablaVentas">
                                        <table class="table " data-toggle="table" data-pagination="true">
                                            <thead class="sticky-top bg-white">
                                              <tr>
                                                <th scope="col">Paciente</th>
                                                <th scope="col" class="text-center">Estado</th>
                                                <th scope="col">Referencia</th>
                                                <th scope="col">Fecha </th>
                                                <th scope="col"></th>
                                              </tr>
                                            </thead>
                                            <tbody id="tablaVentas">
                                              <% sales.forEach(es => { %> 
                                              <tr>
                                                <td ><%= es.nombre %> <%= es.primerApellido %> <%= es.segundoApellido %></td>
                                                <td class="text-center"><i class="fa <% if (es.estado == 1) { %>fa-user-clock war <% } else if (es.estado==2){ %> fa-circle-check ok <% } else if (es.estado==3){ %> fa-circle-xmark nok <% } %>"></i></td> 
                                                <td><%= es.comentario %></td>
                                                <td><%= (es.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'}) %></td>
                                                <td class="text-end">
                                                    <a href="/ventas/venta/<%= es.id %>"><i class="fas fa-pen"></i></a>
                                                    <a href="/ventas/venta/delete/<%= es.id %>"><i class="fas fa-trash"></i></a>
                                                </td>
                                              </tr>
                                              <% }) %> 
                                              
                                            </tbody>
                                          </table>
                                        
                                    </div>
                                </div>        
                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade <% if (tipo == 3) { %> show active <% } %> " id="nav-presupuestos" role="tabpanel" aria-labelledby="nav-presupuestos-tab" tabindex="0">
            <br>
            <div class="container">
                <div class="main-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button" class="btn btn-info btn-md" data-bs-toggle="modal" data-bs-target="#modalAddEstimate"><i class="fas fa-file-invoice iconoboton"></i>Nuevo Presupuesto</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card  mb-12 ">
                                <div class="card-header">
                                    <div class="row">
                            
                                        <div class="col-md-3">
                                            <h5>Presupuestos</h5>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" placeholder="Escribe para filtrar..." id="buscadorPresupuestosPaciente">
                                        </div>
                                        <div class="col-md-3">
            
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row tablaPresupuestos">
                                        <table class="table" class="table " data-toggle="table" data-pagination="true">
                                            <thead class="sticky-top bg-white">
                                              <tr>
                                                <th scope="col">Paciente</th>
                                                <th scope="col" class="text-center">Estado</th>
                                                <th scope="col">Referencia</th>
                                                <th scope="col">Fecha </th>
                                                <th scope="col"></th>
                                              </tr>
                                            </thead>
                                            <tbody id="tablaPresupuestos">
                                              <% estimates.forEach(es => { %> 
                                              <tr>
                                                <td ><%= es.nombre %> <%= es.primerApellido %> <%= es.segundoApellido %></td>
                                                <td class="text-center"><i class="fa <% if (es.estado == 1) { %>fa-user-clock war <% } else if (es.estado==2){ %> fa-circle-check ok <% } else if (es.estado==3){ %> fa-circle-xmark nok <% } %>"></i></td> 
                                                <td><%= es.comentario %></td>
                                                <td><%= (es.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'}) %></td>
                                                <td class="text-end">
                                                    <% if (es.estado != 3 ) { %>
                                                        <a href="/presupuestos/presupuesto/<%= es.id %>"><i class="fas fa-pen"></i></a>
                                                    <%} else {%>
                                                        <a href="/presupuestos/presupuesto/<%= es.id %>"><i class="fas fa-eye"></i></a>
                                                    <%}%>
                                                    <a href="/presupuestos/presupuesto/delete/<%= es.id %>"><i class="fas fa-trash"></i></a>
                                                </td>
                                              </tr>
                                              <% }) %> 
                                              
                                            </tbody>
                                          </table>
                                        
                                    </div>
                                </div>        
                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade <% if (tipo == 4) { %> show active <% } %>" id="nav-pedidos" role="tabpanel" aria-labelledby="nav-pedidos-tab" tabindex="0">
            <br>
            <div class="container">
                <div class="main-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button" class="btn btn-info btn-md" data-bs-toggle="modal" data-bs-target="#modalAddOrder"><i class="fas fa-dolly iconoboton"></i>Nuevo Pedido</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card  mb-12 ">
                                <div class="card-header">
                                    <div class="row">
                            
                                        <div class="col-md-3">
                                            <h5>Pedidos</h5>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" placeholder="Escribe para filtrar..." id="buscadorPedidosPaciente">
                                        </div>
                                        <div class="col-md-3">
            
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row tablaPedidos">
                                        <table class="table" class="table " data-toggle="table" data-pagination="true">
                                            <thead class="sticky-top bg-white">
                                              <tr>
                                                <th scope="col">Destinatario</th>
                                                <th scope="col" class="text-center">Estado</th>
                                                <th scope="col">Referencia</th>
                                                <th scope="col">Creación</th>
                                                <th scope="col">Modificado</th>
                                                <th scope="col"></th>
                                              </tr>
                                            </thead>
                                            <tbody id="tablaPedidos">
                                              <% orders.forEach(p => { %> 
                                              <tr>
                                                <td ><%= p.para %></td>
                                                <td class="text-center"><i class="fa <% if (p.estado == 1) { %>fa-user-clock war <% } else if (p.estado==2){ %> fa-paper-plane enviado <% } else if (p.estado==3){ %> fa-circle-check ok <% } %>"></td>
                                                <td><%= p.referencia %></td>
                                                <td><%= (p.fechaCreacion).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'}) %></td>
                                                <td><%= (p.fechaModificacion).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'}) %></td>
                                                <td class="text-end">
                                                    <% if (p.estado==1){%>
                                                        <a href="/pedidos/pedido/<%= p.id %>"><i class="fas fa-pen"></i></a>
                                                        <a href="/pacientes/paciente/pedido/delete/<%= p.id %>/<%=patient.id%>"><i class="fas fa-trash"></i></a>
                                                    <%} else if (p.estado == 2 ) { %>
                                                        <a href="/pedidos/pedido/<%= p.id %>"><i class="fas fa-eye"></i></a>
                                                        <a href="/pacientes/paciente/pedido/delete/<%= p.id %>/<%=patient.id%>"><i class="fas fa-trash"></i></a>
                                                    <%} else {%>
                                                        <a href="/pedidos/pedido/<%= p.id %>"><i class="fas fa-eye"></i></a>
                                                    <% } %>
                                                    
                                                </td>
                                              </tr>
                                              <% }) %> 
                                              
                                            </tbody>
                                          </table>
                                        
                                    </div>
                                </div>        
                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade <% if (tipo == 5) { %> show active <% } %>" id="nav-productos" role="tabpanel" aria-labelledby="nav-productos-tab" tabindex="0">
            <br>
            <div class="container">
                <div class="main-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card  mb-12 ">
                                <div class="card-header">
                                    <div class="row">
                            
                                        <div class="col-md-6">
                                            <h5>Productos con número de serie</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <table class="table">
                                            <thead>
                                              <tr>
                                                <th scope="col">Tipo</th>
                                                <th class="text-center" scope="col">Número de serie</th>
                                                <th scope="col">Fecha</th>
                                                <th scope="col"></th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                                <% nserie.forEach(p => { %> 
                                              <tr>
                                                <td ><%= p.nombre %></td>
                                                <td class="text-center"><%= p.nserie %></td>
                                                <td ><%= (p.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'}) %> %></td>
                                                <td> 
                                                    <div class="row">
                                                        <div class="col-md-3"></div>
                                                        <div class="col-md-3"></div>
                                                        <div class="col-md-3">
                                                            <form  action="/ventas/venta/<%= p.idsale %>" method="GET">
                                                                <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-cart-shopping iconoboton"></i>Venta</button>
                                                            </form>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalAcceptSale"><i class="fas fa-wrench iconoboton"></i>Reparar</button></td>
                                                        </div>
                                                    </div>
                                                    
                                                    
                                              </tr>
                                              <% }) %>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
        </div>
        <div class="tab-pane fade <% if (tipo == 6) { %> show active <% } %>" id="nav-archivos" role="tabpanel" aria-labelledby="nav-archivos-tab" tabindex="0">
            <br>
            <div class="container">
                <div class="main-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button" class="btn btn-info btn-md" data-bs-toggle="modal" data-bs-target="#modalUploadFiles"><i class="fas fa-file-arrow-up iconoboton"></i>Subir archivos</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card  mb-12 ">
                                <div class="card-header">
                                    <div class="row">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>