<!DOCTYPE html>
<html lang="en">
  
<head>
  <title><%= lang_data.Online_Shopping %></title>
    <%- include('./partials/meta'); -%>
  </head>
  <body>
    <%- include('./partials/header_sidebar'); -%> 

        <div class="page-body">
          <div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-sm-6">
                  <h3><%= lang_data.Online_Shopping %></h3>
                </div>
                <div class="col-sm-6">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                    <li class="breadcrumb-item"><a href="/online_shopping/pre_alert"><%= lang_data.Pre_Alert_List %></a></li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
          <!-- Container-fluid starts-->
          <div class="container-fluid">
            <div class="row"> 
             
              <!-- Scroll - vertical dynamic Starts-->
              <div class="col-sm-12">
                <div class="card">
                  <div class="card-header pb-0">
                    <h4><%= lang_data.Pre_Alert_List %></h4>
                  </div>
                  
                  <input type="hidden" id="rates_sym" value="<%= accessdata.data.site_currency %>">
                  <input type="hidden" id="rates_pla" value="<%= accessdata.data.currency_placement %>">
                  <input type="hidden" id="thousands_replace" value="<%= accessdata.data.thousands_separator %>">

                  <div class="card-body pt-0">
                    <div class="table-responsive theme-scrollbar">
                      <table class="display" id="basic-1" aria-label="table">
                        <thead>
                          <tr>
                            <th id="abc" class="d-none"></th>
                            <th id="abc"><%= lang_data.date %></th>
                            <th id="abc"><%= lang_data.Purchase_Tracking %></th>
                            <th id="abc"><%= lang_data.customer_name %></th>
                            <th id="abc"><%= lang_data.Shipping_Company %></th>
                            <th id="abc"><%= lang_data.Store %> / <%= lang_data.Supplier %></th>
                            <th id="abc"><%= lang_data.Package_Description %></th>
                            <th id="abc"><%= lang_data.Estimated_delivery_date %></th>
                            <th id="abc"><%= lang_data.Purchase_price %></th>
                            <th id="abc"><%= lang_data.status %></th>
                            <th id="abc"><%= lang_data.Action %></th>
                          </tr>
                        </thead>
                        <tbody>
                          <% pre_alert_data.forEach((data) => { %>

                            <tr>
                              <td class="d-none"></td>
                              <td class="text-nowrap"><%= data.date.toLocaleDateString() %></td>
                              <td class="text-nowrap"><%= data.tracking %></td>
                              <td class="text-nowrap"><%= data.customer_firstname %> <%= data.customer_lastname %></td>
                              <td class="text-nowrap"><%= data.company %></td>
                              <td class="text-nowrap"><%= data.store_supplier %></td>
                              <td class="text-nowrap"><%= data.description %></td>
                              <td class="text-nowrap"><%= data.date.toLocaleDateString() %></td>
                              <td class="invosymbol"><%= data.purchase_price %></td>
                              <td class="text-nowrap">
                                <% if (data.status == "Pending") { %>
                                  <span class="badge badge-danger p-2">Pending</span>
                                <% } else { %>
                                  <span class="badge badge-success p-2">Approved</span>
                                <% } %>
                              </td>
                              <td class="text-nowrap"> 
                                <div class="dropdown">
                                  <button class="btn-pill btn-primary dropbtn px-4 py-2">Action</button>
                                  <div class="dropdown-content myDropdown">
                                    <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#assigndriver_toggle" id="prealert_show_image" data-id="<%= data.image %>"><i class="fa fa-search f-14"></i> <%= lang_data.Show_Details %></a>

                                    <% if (role_data.role == "1") { %>

                                      <% if (data.status == "Pending") { %>
                                        <a class="dropdown-item" href="/online_shopping/add_pre_alert_packages/<%= data.id %>"><i class="fa fa-pencil f-14"></i> <%= lang_data.Convert_To_Package %></a>
                                      <% } %>
                                        
                                    <% } %>
                                  </div>
                                </div>

                              </td>
                            </tr>
                          <% }) %>
                        </tbody>
                        <tfoot>
                          <tr>
                            <th id="abc" class="d-none"></th>
                            <th id="abc"><%= lang_data.date %></th>
                            <th id="abc"><%= lang_data.Purchase_Tracking %></th>
                            <th id="abc"><%= lang_data.customer_name %></th>
                            <th id="abc"><%= lang_data.Shipping_Company %></th>
                            <th id="abc"><%= lang_data.Store %> / <%= lang_data.Supplier %></th>
                            <th id="abc"><%= lang_data.Package_Description %></th>
                            <th id="abc"><%= lang_data.Estimated_delivery_date %></th>
                            <th id="abc"><%= lang_data.Purchase_price %></th>
                            <th id="abc"><%= lang_data.status %></th>
                            <th id="abc"><%= lang_data.Action %></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Scroll - vertical dynamic Ends-->
            </div>
          </div>
          <!-- Container-fluid Ends-->
        </div>

        <!-- edit status modal-->

        <div class="modal fade" id="assigndriver_toggle" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title"><%= lang_data.Image %></h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="row">
                    <img id="image_show" alt="image" style="width: 100%; height: 80vh;" >
                  </div>
              </div>
            </div>
          </div>
      </div>
        
        <%- include('./partials/footer'); -%>
        
    <%- include('./partials/script'); -%>

  </body>

</html>