<!DOCTYPE html>
<html lang="en" class="h-100">


<head>
    <!-- meta and links start -->
    <%- include('templet/meta')-%>

</head>

<body>
    <%- include('templet/preloder_topbar_sidebar',{titel: language.Order_Details})-%>

        <!--********** Content body start **********-->

        <div class="content-body">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-9">
                        <div class="card">
                            <div class="card-header py-3">
                                <div class="d-none">
                                    <input type="hiden" name="sym" value="<%= accessdata.symbol %>">
                                    <input type="hiden" name="pls" value="<%= accessdata.plac %>">
                                    <input type="hiden" name="thousands_separator" value="<%= accessdata.thousands_separator %>">
                                </div>

                                <div>
                                    <h3 class="text-uppercase mb-3"><%=storedata.name.toUpperCase() %></h3>

                                    <p class="mb-0"><%= language.Phone_No %>  :- <span><%=storedata.mobile_number %> </span></p>
                                    <p class="mb-0"><%= language.Email %>  :- <span> <%=storedata.store_email %> </span></p>
                                    <p class="mb-0 text-break w-75"><%= language.Address %>  :- <span> <%=storedata.address %> </span></p>
                                    <p class="mb-0"> <%= language.TAX %>  :- <span> <%= storedata.store_tax_number.toUpperCase() %> </span></p>
                                </div>

                                <div class="mt-4">
                                    <h5 class="text-uppercase fw-500">
                                        <span> <%= language.Order_ID %>  :- </span>
                                        <span> <%=order.order_id %> </span>
                                    </h5>
                                    <p class="text-sm mb-1">
                                        <span> <%= language.Order_Date %>  :- </span>
                                        <% let Order_date = new Date(order.order_date) %>
                                        <% let Order_day = (Order_date.getDate() < 10 ? '0' : '') + Order_date.getDate() %>
                                        <% let Order_month = ((Order_date.getMonth()+1) < 10 ? '0' : '') + (Order_date.getMonth()+1) %>
                                        <% let Order_year = Order_date.getFullYear() %>
                                        <% let Order_fullDate = `${Order_year}-${Order_month}-${Order_day}` %>
                                        <span><%=Order_fullDate %></span>
                                    </p>
                                    <p class="text-sm mb-3">
                                        <span> <%= language.Delivery_Date %>  :- </span>
                                        <% let Delivery_date = new Date(order.delivery_date) %>
                                        
                                        <% let Delivery_day = (Delivery_date.getDate() < 10 ? '0' : '') + Delivery_date.getDate() %>
                                        <% let Delivery_month = ((Delivery_date.getMonth()+1) < 10 ? '0' : '') + (Delivery_date.getMonth()+1) %>
                                        <% let Delivery_year = Delivery_date.getFullYear() %>
                                        <% let Delivery_fullDate = `${Delivery_year}-${Delivery_month}-${Delivery_day}` %>
                                        <span><%=Delivery_fullDate %></span>
                                    </p>
                                    <div class="d-flex align-items-center">
                                        <div><%= language.Order_Status %>  :- </div>
                                        <div class="btn-group m-2" role="group">
                                            <button type="button" class="btn btn-primary btn-xs dropdown-toggle"
                                                data-bs-toggle="dropdown" <%= accessdata.logas != 'custmor' && accessdata.roll.orders.includes('edit') ?'':'disabled' %>><%=order.status %> </button>
                                            <ul class="dropdown-menu">
                                                <% Ordersatus.forEach(function(data){ %>
                                                    <li><a class="dropdown-item" href="javascript:void()" onclick="changeOrderStatus('<%=data.id %>','<%=order.id %>')" ><%=data.status %></a></li>
                                                <% }) %>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead class="table_head">
                                            <tr>
                                                <th>#</th>
                                                <th><%= language.Service_Name %> </th>
                                                <th><%= language.Color %> </th>
                                                <th><%= language.Rate %> </th>
                                                <th><%= language.Qty %> </th>
                                                <th><%= language.Total %> </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% orderServiceList.forEach(function (data, i){ %>
                                                <tr>
                                                    <th><%= i+1 %></th>
                                                    <td>
                                                        <div class="d-flex">
                                                            <div class="mx-5">
                                                                <img class="rounded-circle" width="60" height="60" src="../../uploads/<%= data.service_img %>"
                                                                    alt="image">
                                                            </div>
                                                            <div class="d-flex flex-column justify-content-center">
                                                                <span><%= data.service_name %></span>
                                                                <span>[<%= data.service_type_name %>]</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td><input type="color" class="p-1 w-75" value="<%= data.service_color %>" disabled ></td>
                                                    <td class="symbol"><%= data.service_type_price.toFixed(2) %></td>
                                                    <td><%= data.service_quntity %></td>
                                                    <td class="symbol"><%= (data.service_type_price * data.service_quntity).toFixed(2) %></td>
                                                </tr>
                                            <% }) %>
                                            
                                            
                                        </tbody>
                                    </table>
                                </div>

                                <div class="card-header">

                                    <div>
                                        <% if (customer.name != 'Walk in customer') { %>
                                            <h4 class="mb-0"><%= language.Invoice_To %> :</h4>
                                            <p class="mb-0"><%= language.Name %>  :- <span> <%=customer.name%> </span></p>
                                            <p class="mb-0"><%= language.Phone_No %>  :- <span> <%=customer.number%> </span></p>
                                            <p class="mb-0"><%= language.Email %>  :- <span> <%=customer.email%> </span></p>
                                            <p class="mb-0 text-break w-75"><%= language.Address %>  :- <span> <%=customer.address%> </span></p>
                                            <p class="mb-0"> <%= language.TAX %>  :- <span><%=customer.taxnumber%> </span></p>
                                        <% } %>
                                    </div>

                                    <div>
                                        <h4> <%= language.Payment_Details %>  :- </h4>
                                        <p class="mb-0">
                                            <span><%= language.Sub_Total %>  :- </span>
                                            <span class="symbol"><%=order.sub_total.toFixed(2) %></span>
                                        </p>
                                        <p class="mb-0">
                                            <span> <%= language.Addon %>  :- </span>
                                            <span class="symbol"><%=order.addon_price.toFixed(2) %></span>
                                        </p>
                                        <p class="mb-0">
                                            <span> <%= language.Discount %>  :- </span>
                                            <span class="symbol"><%=order.extra_discount.toFixed(2) %></span>
                                        </p>
                                        <p class="mb-0">
                                            <span> <%= language.Coupon_Discount %>  :- </span>
                                            <span class="symbol"><%=order.coupon_discount.toFixed(2) %></span>
                                        </p>
                                        <p class="mb-2">
                                            <span> <%= language.TAX %>  (<%=order.tax %> %) :- </span>
                                            <span class="symbol"><%=order.tax_amount.toFixed(2) %></span>
                                        </p>
                                        <p>
                                            <span><b> <%= language.Gross_Total %>  :- </b></span>
                                            <span ><b class="symbol"><%=order.gross_total.toFixed(2) %></b></span>
                                        </p>

                                    </div>
                                </div>

                                <div class="mt-4">
                                    <div class="col">
                                        <p><%= language.Notes %>  :-
                                            <span><%=order.note %></span>
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-body p-3">
                                        <% if(addonlist.length > 0){ %>
                                        <h4 class="card-title"><%= language.Service_Addons %> </h4>
                                        <ul class="list-group mb-3" style="background-color: #F2F2F2;">
                                            <% addonlist.forEach(function(data){ %>
                                                <li class="list-group-item d-flex px-4 py-1">
                                                    <div class="d-flex flex-column">
                                                        <span class="text-sm mb-0">
                                                            <span><%=data.addon %> :</span>
                                                            <span class="symbol"> <%=data.price %></span>
                                                        </span>
    
                                                    </div>
                                                </li>
                                            <% }) %>
                                        </ul>
                                        <% } %>
                                        <h4 class="card-title"><%= language.Payments %> </h4>
                                        <div id="DZ_W_TimeLine1" class="widget-timeline style-1 ps ps--active-y">
                                            <ul class="timeline">
                                                <% payments.forEach(function(data){ %>
                                                <li>
                                                    <div class="timeline-badge primary"></div>
                                                    <div class="mx-5">
                                                        <h5><strong class="symbol"> <%=data.payment_amount %></strong></h5>

                                                        <span>
                                                            <% let payment_date = new Date(data.payment_date) %>
                                                            <% let payment_day = (payment_date.getDate() < 10 ? '0' : '') + payment_date.getDate() %>
                                                            <% let payment_month = ((payment_date.getMonth()+1) < 10 ? '0' : '') + (payment_date.getMonth()+1) %>
                                                            <% let payment_year = payment_date.getFullYear() %>
                                                            <% let payment_fullDate = `${payment_year}-${payment_month}-${payment_day}` %>
                                                            <h6> <%=payment_fullDate %></h6>
                                                        </span>
                                                        <strong>[<%=data.ac_name %>]</strong>
                                                    </div>
                                                </li>
                                                <% }) %>
                                               
                                            </ul>


                                            <div class="row">
                                                <div class="col-12 <%= accessdata.logas != 'custmor' && accessdata.roll.orders.includes('edit') ?'':'d-none' %>" >
                                                    <button data-bs-toggle="modal" data-bs-target="#addpaymentmodel" type="button"
                                                        class="btn light btn-success mb-3 w-100" <%= order.balance_amount > 0 ? '':'disabled' %>>
                                                        <%= language.Add_Payment %> 
                                                    </button>
                                                </div>
                                                <div class="col-12">
                                                    <!-- <a href="#" target="_blank" type="button"
                                                        class="btn btn-icon btn-warning mb-0 w-100">
                                                        Print Invoice
                                                    </a> -->
                                                    <button type="button" class="btn btn-warning mb-1 w-100"
                                                        data-bs-toggle="modal" data-bs-target="#invoice"><%= language.Print_Invoice %>  </button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!--********** Content body end **********-->

            <!-- Modal add -->
            <div class="modal fade" id="addpaymentmodel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><%= language.Add_Payment %> </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <form id="add_order_payment" method="post" class="need-validation">
                            <div class="modal-body">
                                <div class="row g-2 align-items-center">
                                    <div class=" col-12">

                                        <div class="row mb-50 align-items-center">
                                            <div class="col text-sm"><%= language.Customer_Name %> :</div>
                                            <div class="col-auto text-sm"><%=customer.name%></div>
                                        </div>

                                        <div class="row mb-50 align-items-center">
                                            <div class="col text-sm"><%= language.Order_ID %> : </div>
                                            <div class="col-auto text-sm"><%=order.order_id %></div>
                                        </div>

                                        <div class="row mb-50 align-items-center">
                                            <div class="col text-sm"><%= language.Order_Date %> : </div>
                                            <div class="col-auto text-sm"><%=Order_fullDate %></div>
                                        </div>

                                        <div class="row mb-50 align-items-center">
                                            <div class="col text-sm"> <%= language.Delivery_Date %> :</div>
                                            <div class="col-auto text-sm"><%=Delivery_fullDate %></div>
                                        </div>

                                        <hr>

                                        <div class="row mb-50 align-items-center">
                                            <div class="col text-sm"> <%= language.Order_Amount %> :</div>
                                            <div class="col-auto text-sm symbol"> <%=order.gross_total.toFixed(2) %></div>
                                        </div>

                                        <div class="row mb-50 align-items-center">
                                            <div class="col text-sm"><%= language.Paid_Amount %> :</div>
                                            <div class="col-auto text-sm symbol"><%=order.paid_amount.toFixed(2) %></div>
                                        </div>

                                        <hr>

                                        <div class="row align-items-center">
                                            <div class="col text-sm"><%= language.Balance %> :</div>
                                            <div class="col-auto text-sm symbol"><%=order.balance_amount.toFixed(2) %></div>
                                        </div>

                                        <hr>

                                        <div class="row align-items-center">
                                            <div class="col-md-6 mb-1">
                                                <label class="form-label"><%= language.Paid_Amount %> </label>
                                                <input type="flot" class="form-control" placeholder="Enter Amount" name="paid" value="0">
                                                <input type="hidden"  name="orderid" value="<%=order.id%>">
                                                <input type="hidden"  name="balan" value="<%=order.balance_amount %>">
                                            </div>
                                            <div class="col-md-6 mb-1">
                                                <label class="form-label"><%= language.Payment_Type %> </label>
                                                <select class="default-select form-control wide" name="payment"
                                                    id="payment">
                                                    <option value selected disabled>Choose Payment Type</option>
                                                    <% account.forEach(function(data){ %>
                                                        <option value="<%=data.id %>"><%=data.ac_name %></option>
                                                    <% }) %>
                                                    
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><%= language.Cancel %></button>
                                <button type="submit" value="submit"  class="btn btn-primary" id="add_order_payment_submit"><%= language.Save %> </button>
                            </div>
                        </form>




                    </div>
                </div>
            </div>

            <!-- Modal invoice -->
            <div class="modal fade" id="invoice">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="invoice_page" id="invoice_page">
                            

                                <div class="text-center m-3">
                                    <h3 class="text-uppercase"><%=storedata.name.toUpperCase() %></h3>
                                    <h6><%= language.Phone_Number %>  : <%=storedata.mobile_number %></h6>
                                    <h6><%= language.Email %>  : <%=storedata.store_email %> </h6>
                                </div>

                                <hr class="mb-3">

                                <div class="d-flex m-3 justify-content-between align-items-center">
                                
                                    <div>
                                        <h5> <%= language.Order_ID %>  :<%=order.order_id %></h5>
                                        <h5> <%= language.Order_Status %>  : <%=order.status %></h5>
                                    </div>
                                    <div>
                                        <h5><%= language.Order_Date %>  : <%=Order_fullDate %></h5>
                                        <h5><%= language.Delivery_Date %>  : <%=Delivery_fullDate %></h5>
                                    </div>
                                </div>
 
                                <hr class="mt-2">

                                <div class="table-responsive m-3">
                                    <p class="mb-0"><%= language.Service_List %> </p>
                                    <table id="default-datatable" class="display table">
                                        <thead class="table_head">
                                            <tr>
                                                <th>#</th>
                                                <th> <%= language.Item %> </th>
                                                <th> <%= language.QTY %> </th>
                                                <th> <%= language.Price %> </th>
                                            </tr>
                                        </thead>
                                        <tbody id="invoice_item" class="align-items-center">
                                            <% orderServiceList.forEach(function (data, i){ %>
                                                <tr>
                                                    <td><%= i+1 %></td>
                                                    <td>
                                                    <h5 class="mb-0"><%= data.service_name %></h5>
                                                    <span class="mb-0 fs-6">[<%= data.service_type_name %>] </span> <br>
                                                    </td>
                                                    <td> <%= data.service_quntity %> </td>
                                                    <td class="symbol"><%= data.service_type_price %> </td>
                                                </tr>
                                            <% }) %>

                                        </tbody>
                                    </table>
                                </div>

                                <hr> 
                                <% if(addonlist.length > 0){ %>
                                <div class="table-responsive m-3">
                                    <p class="mb-0"><%= language.Addons_List %> </p>
                                    <table id="default-datatable" class="display table">
                                        <thead class="table_head">
                                            <tr>
                                                <th>#</th>
                                                <th> <%= language.Addons %> </th>
                                                <th> <%= language.Price %> </th>
                                            </tr>
                                        </thead>
                                        <tbody class="align-items-center">
                                            <% addonlist.forEach(function(data,i){ %>
                                                <tr>
                                                    <td><%= i+1 %></td>
                                                    <td> <%=data.addon %> </td>
                                                    <td class="symbol"><%=data.price %></td>
                                                </tr>
                                            <% }) %>
                                        </tbody>
                                    </table>
                                
                                </div>
                                <hr>
                                <% } %>
                           

                                <table class="table table-borderless px-4">
                                    <tbody>
                                        <tr>
                                            <td class="py-0 "><%= language.Item_Price %>  :</td>
                                            <td class="py-0 text-end symbol" ><%=order.sub_total.toFixed(2) %> </td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Addons %>  :</td>
                                            <td class="py-0 text-end symbol"><%=order.addon_price.toFixed(2) %> </td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.TAX %>  :</td>
                                            <td class="py-0 text-end symbol"><%=order.tax_amount.toFixed(2) %> </td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Discount %>  :</td>
                                            <td class="py-0 text-end symbol"><%=order.extra_discount.toFixed(2) %> </td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Coupon %>  :</td>
                                            <td class="py-0 text-end symbol"><%=order.coupon_discount.toFixed(2) %> </td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Total %>  :</td>
                                            <td class="py-0 text-end symbol"><%=order.gross_total.toFixed(2) %> </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <hr>

                                <div class="m-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                            <h5><%= language.Paid_Amount %>  : <span class="symbol"><%=order.paid_amount.toFixed(2) %></span></h5>
                                            <h5><%= language.Due_Amount %>  : <span class="symbol"><%=order.balance_amount.toFixed(2) %></span></h5>
                                    </div>
                                    
                                </div>

                                <% if (customer.name != 'Walk in customer') { %>
                                <hr>
                           
                                <p class="mb-0 px-4"><%= language.Invoice_To %> </p>
                                <table class="table table-borderless px-4">
                                    <tbody>
                                        <tr>
                                            <td class="py-0 "><%= language.Name %>  :</td>
                                            <td class="py-0 text-end"><%=customer.name%></td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Number %>  :</td>
                                            <td class="py-0 text-end"><%=customer.number%></td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Email %>  :</td>
                                            <td class="py-0 text-end"><%=customer.email%></td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Address %>  :</td>
                                            <td class="py-0 text-end"><%=customer.address%></td>
                                        </tr>
                                        <tr>
                                            <td class="py-0"><%= language.Tax_ID %>  :</td>
                                            <td class="py-0 text-end"><%=customer.taxnumber%></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <% } %>

                                <hr>

                                <div class="d-flex justify-content-start px-4">
                                    <%=order.note %>
                            
                                </div>

                                <hr>

                                <div class="d-flex justify-content-center">
                                    ******** <%= language.Thank_You %>  ********
                                </div>

                                <hr>
                        
                        </div>
                        <footer class="m-3 d-flex justify-content-end">
                            <button type="button" class="btn btn-primary mx-2" id="pri_invo"> <%= language.Print_Invoice %>  </button>
                            <button type="button" class="btn btn-danger mx-2" onclick="location.reload()"><%= language.Go_Back %> </button>
                        </footer>
                    </div>

                </div>

            </div>

        </div>
        <!--**********************************
            Footer start
        ***********************************-->
        <div class="footer">
            <div class="copyright">
                <p><%= language.Copyright %> © <%= language.Designed %> &amp; <%= language.Developed_by %> <a href="#" target="_blank">KMS</a> 2024</p>
            </div>
        </div>
        <!--**********************************
            Footer end
        ***********************************-->

        </div>

        <!--********** Main wrapper end **********-->
        <%- include('templet/script')-%>

</body>


</html>