<script>
    let products='<%- JSON.stringify(products) %>'
</script>
<div class="container">
    <div class="main-body">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <button class="btn btn-info" onclick="history.back()"><i class="fa fa-rotate-left iconoboton"></i>Atrás</button>
                </div>
                
                <br>
                <div class="card  mb-12 ">
                    
                    <div class="card-header">
                        
                        <div class="row">
                            <div class="col-md-1">
                                <h5>Pedido:</h5>
                            </div>
                            <div class="col-md-4">
                                <h5><%= order.paciente %></h5>
                            </div>
                            <div class="col-md-3">
                                <h5>Proveedor: <%= order.company %></h5>
                            </div>
                            <div class="col-md-3">
                                <h5>Ref:<%= order.referencia %> </h5>
                            </div>
                            <div class="col-md-1">
                                <% if (order.estado!=3){%>
                                <a href="/pedidos/pedido/delete/<%= order.id %>"><i class="fas fa-trash" title="Eliminar"></i></a>
                                <%}%>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="card  mb-12 ">
                    
                        <div class="card-header">
                            <div class="row">

                                
                                    <div class="col-md-4">
                                        <h5>Elementos</h5>
                                    </div>
                                    
                                    <div class="col-md-4 text-center">
                                        <h5>
                                        <% if (order.estado==3){%> 
                                            <i class="fa fa-circle-check ok"></i> <%= estados[2].nombre %>
                                        <% }else if(order.estado==1){ %>
                                            <i class="fa fa-user-clock war"></i> <%= estados[0].nombre %>
                                        <%} else {%>
                                            <i class="fa fa-paper-plane enviado"></i> <%= estados[1].nombre %>
                                        <%}%>
                                        </h5>
                                        
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <% if (order.estado==1){%> 
                                            <form action="/pedidos/pedido/<%= order.id %>/2" method="POST">
                                            <button type="submit" class="btn btn-success btn-sm" >Marcar Enviado a proveedor</button>
                                        </form>
                                        <% } else if(order.estado==2){%> 
                                            <form action="/pedidos/pedido/<%= order.id %>/3" method="POST">
                                            <button type="submit" class="btn btn-success btn-sm">Marcar Entregado</button>
                                        </form>
                                            <%} %>
                                        
                                    </div>
        
                                    
                                

                                <!--
                                <div class="col-md-6">
                                    <h5>Elementos</h5>
                                </div>
                                <div class="col-md-5">
                                    <form id="cambiaestadoPedido">
                                    <select class="form-select" name="estado" id="estado" required>
                                        <option value="" selected disabled>Seleccione estado</option>
                                        <% estados.forEach(es => { %> 
                                            <option value="<%=es.id %>" <% if(order.estado==es.id){ %> selected <%}%> ><%=es.nombre%></option> 
                                        <% }) %>  
                                    </select>
                                    </form>
                                </div>
                                <div class="col-md-1">
                                    <a class="salvar" href="javascript:$('#cambiaestadoPedido').submit();"><i class="fa fa-floppy-disk"></i></a>
                                </div>-->
                            </div>
                            
                        </div>
                        <div class="card-body">
                                               
                            <div class="row">
                                <table class="table">
                                    <thead>
                                      <tr>
                                        <th scope="col">Producto</th>
                                        <th class="text-center" scope="col">Cantidad</th>
                                        <th class="text-center" scope="col">Comentario</th>
                                        <th scope="col"></th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                        <% productosPedido.forEach(pr => { %> 
                                      <tr>
                                        <td ><%= pr.nombre %></td>
                                        <td class="text-center"><%= pr.cantidad %></td>
                                        <td class="text-center "><%= pr.comentario %></td>
                                        <td class="text-end">
                                            <% if (order.estado==1){%>
                                            <a data-bs-toggle="modal" data-bs-target="#modalEditProductOrder<%= pr.id %>" href="#modalEditProductOrder<%= pr.id %>"><i class="fas fa-pen"></i></a>
                                            <a href="/pedidos/pedido/deleteProductOrder/<%= pr.id %>/<%= order.id %>"><i class="fas fa-trash"></i></a>
                                            <% } %>
                                        </td>
                                      </tr>
                                      <% }) %> 
                                      
                                      
                                    </tbody>
                                  </table>
    
                            </div>
                            <% if (order.estado==1){%>
                            <div class="row">
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-primary btn-md" data-bs-toggle="modal" data-bs-target="#modalAddProductOrder"><i class="fa fa-plus iconoboton"></i>Añadir Producto</button>
                                </div>
                            </div>
                            <% } %>
                        </div>
                        
                              
    
                </div>
            </div>
        </div>
    </div>
</div>