<div class="row">
    <div class="col-lg-12 mt-3">
        <p><a title="Main Module" href="/orders/list"><i class="fa fa-chevron-circle-left "></i> &nbsp;Zurück zur Liste der Daten Bestellungen verwalten</a></p>
        <!-- <p><a title="Main Module" href="/dashboard"><i class="fa fa-chevron-circle-left "></i> &nbsp;Zurück zur Liste der Daten Bestellungen verwalten</a></p> -->

        <div class="card mt-3">
            <div class="card-header card-primary align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1"><%= page_title %> - <%= order_dtls.order_uid %></h4>
                <div class="flex-shrink-0">
                </div>
            </div>

            <div class="card-body">                
                <div class="row g-3">
                    <div class="col-md-4">   
                        <a href="/orders/invoices/<%= order_dtls.id %>" class="btn btn-success btn-sm mb-3" target="_blank">Download Rechnung</a>
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div> 

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-start" colspan="2">Bestelldetails</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-start">
                                        <p>
                                            <b>Auftragsnummer: </b> <%= order_dtls.order_uid %><br>
                                            <b>Transaktions-ID: </b> <%= order_dtls.pay_id ? order_dtls.pay_id : 'N/A' %><br>
                                            <b>Datum hinzugefügt: </b> <%= new Date(order_dtls.order_date).toLocaleDateString('de-DE', { year: 'numeric', month: 'long', day: 'numeric' }) %><br>
                                        </p>
                                    </td>
                                    <td class="text-start">
                                        <p><b>Bezahlverfahren: </b> <%= order_dtls.payment_method %></p>
                                        <% if (order_dtls.shipping_method) { %>
                                            <p><b>Versandart: </b> <%= order_dtls.shipping_method %></p>
                                        <% } %>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-start">Rechnungsadresse</th>
                                    <th class="text-start">Lieferanschrift</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-th="Payment Address" class="text-start">
                                        <strong><%= order_dtls.billing_firstname %> <%= order_dtls.billing_lastname %></strong><br>
                                        <%= order_dtls.billing_address1 ? order_dtls.billing_address1 + ',' : '' %>
                                        <%= order_dtls.billing_address2 ? order_dtls.billing_address2 + ',' : '' %>
                                        <%= order_dtls.billing_city %>, <%= order_dtls.billing_state %>, <%= order_dtls.billing_zipcode %><br>
                                        Email: <%= order_dtls.billing_email %><br>
                                        Contact No: <%= order_dtls.billing_contact_no %><br>
                                    </td>
                                    <td data-th="Shipping Address" class="text-start">
                                        <strong><%= order_dtls.shipping_firstname %> <%= order_dtls.shipping_lastname %></strong><br>
                                        <%= order_dtls.shipping_address1 ? order_dtls.shipping_address1 + ',' : '' %>
                                        <%= order_dtls.shipping_address2 ? order_dtls.shipping_address2 + ',' : '' %>
                                        <%= order_dtls.shipping_city %>, <%= order_dtls.shipping_state %>, <%= order_dtls.shipping_zipcode %><br>
                                        Email: <%= order_dtls.shipping_email %><br>
                                        Contact No: <%= order_dtls.shipping_contact_no %>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-left">Produkt</th>                    
                                    <th class="text-start">Menge</th>
                                    <th class="text-start text-lg-end">Preis</th>
                                    <th class="text-start text-lg-end">Gesamt</th>
                                </tr>
                            </thead>

                            <tbody>
                                
                                <% if (products && products.length > 0) { %>
                                    <% products.forEach(product => { %>
                                        <tr>
                                          <td class="text-left"><%= product.name %></td>
                                          <td class="text-start"><%= product.quantity %></td>
                                          <td class="text-start text-lg-end">€<%= parseFloat(product.price).toFixed(2) %></td>
                                          <td class="text-start text-lg-end">€<%= parseFloat(product.total).toFixed(2) %></td>
                                        </tr>
                                      <% }); %>
                                <% } %>
                            </tbody>
                         
                            <tfoot>
                                <tr>
                                    <td colspan="3" class="text-start text-lg-end"><b>Zwischensumme</b></td>
                                    <td data-th="Sub Total" class="text-center text-lg-end">€<%= order_dtls.total %></td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-start text-lg-end"><b>Rabatt</b></td>
                                    <td data-th="Discount" class="text-center text-lg-end">-€<%= order_dtls.coupon_discount %></td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-start text-lg-end"><b>Zustellgebühr</b></td>
                                    <td data-th="Shipping Charge" class="text-center text-lg-end">€<%= order_dtls.shipping_charge %></td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-start text-lg-end"><b>Gesamtmenge</b></td>
                                    <td data-th="Grand Total" class="text-center text-lg-end">€<%= order_dtls.grand_total %></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                
                    <div id="response_msg"></div>
                </div>
            </div>
        </div>
    </div>
</div>
