@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
      <style>
    .filter-transition {
  overflow: hidden;
  transition: all 0.4s ease;
  transform-origin: top;
  max-height: 1000px;
  transform: scaleY(1);
  opacity: 1;
}

.filter-transition.hidden {
  max-height: 0;
  transform: scaleY(0);
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.page-content {
    min-height: 100vh;
    padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
}
</style>
       <div class="page-content">
      <div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
        <div class="row mt-4">
      
          <!-- Sidebar Column -->
            @include('includes.under-sidebar')
      
          <!-- Main Content -->
          <div class="col-md-10">
            <!-- Filter Card -->
            <div class="d-flex justify-content-end mb-3">
              <a href="{{ route('create-invoice') }}"><button class="btn btn-primary"
              style="background: linear-gradient(180deg, #190650 -14.29%, #16ACF2 158.33%);"
             >
        + Add Invoice
      </button></a>
      
            </div>
            
            <div class="card mb-4">
              <!-- Invoice Filter Section -->
<div id="filterFormInvoice" class="card-body filter-transition">
  <form class="row g-3">
    <div class="col-md-4">
      <label class="form-label">Customer</label>
      <select class="form-select"><option>Select Customer</option></select>
    </div>
    <div class="col-md-4">
      <label class="form-label">Order Type</label>
      <select class="form-select"><option>Select Order</option></select>
    </div>
    <div class="col-md-4">
      <label class="form-label">Order Status</label>
      <select class="form-select"><option>Select Status</option></select>
    </div>
    <div class="col-md-4">
      <label class="form-label">Payment Status</label>
      <select class="form-select"><option>Select Payment</option></select>
    </div>
    <div class="col-md-4">
      <label class="form-label">Driver</label>
      <select class="form-select"><option>Select Driver</option></select>
    </div>
    <div class="col-md-4">
      <label class="form-label">Date Range</label>
      <select class="form-select"><option>Last Week</option></select>
    </div>
    <div class="col-12 text-end">
      <button class="btn btn-primary mt-2" style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>
    </div>
  </form>
</div>

<hr style="border: 1px solid #0D0D0D;">

             <div class="d-flex justify-content-between align-items-center p-2 rounded">
  <!-- Left Buttons -->
  <div class="d-flex gap-2">
    <button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;" >
        <img src="../assets/images/icons/Group 207309.png">
    </button>
    <button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">
      <img src="../assets/images/icons/Group 207310.png">
    </button> 
    <button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">
      <img src="../assets/images/icons/Group 207311.png">
    </button>
  </div>

  <!-- Center Title -->
  <div class="text-center">
    <h6 class="mb-0" style="font-size: 20px; font-weight: 600;" >Invoice List</h6>
    <small style="font-size: 16px; font-weight: 500;">From May 13, 2025 to May 20, 2025</small>
  </div>

  <!-- Right Filter Button -->
  <div>
    <button onclick="toggleInvoiceFilter()" class="btn btn-light btn-sm border" style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">
      Filter <i id="chevronIconInvoice" class="bi bi-chevron-up"></i>
    </button>
  </div>
</div>
      
              <div class="card-body">
                <div class="table-responsive">
                <table id="ordersTable" class="table table-bordered table-striped" style="background: linear-gradient(90deg, #190650 0%, #16ACF2 100%);
 color: white;">
                  <thead>
                    <tr>
                      <th>Order ID</th>
                      <th>Customer</th>
                      <th>Type</th>
                      <th>Date</th>
                      <th>Weight</th>
                      <th>Cart</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>FK12345</td>
                      <td>Aman</td>
                      <td>COG</td>
                      <td>13 May 2025</td>
                      <td>15 Kg</td>
                      <td>Cart-0001</td>
                      <td>
                        <button class="btn btn-sm btn-info">View</button>
                        <button class="btn btn-sm btn-danger">Delete</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
                </div>
                
                
              </div>
            </div>
      
          </div>
        </div>
        <div class="modal fade" id="addOrderModal" tabindex="-1" aria-labelledby="addOrderModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <!-- Modal Header -->
              <div class="modal-header">
                <h5 class="modal-title" id="addOrderModalLabel">Add COG Order</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
        
              <!-- Modal Body -->
              <div class="modal-body">
                <div class="container">
                  <div class="row mb-3">
                    <div class="col-md-6">
                      <label for="customer" class="form-label">Customer:</label>
                      <select id="customer" class="form-select">
                        <option selected disabled>Select Customer</option>
                        <!-- Add dynamic options here -->
                      </select>
                    </div>
                    <div class="col-md-6">
                      <label for="cartNumber" class="form-label">Cart Number:</label>
                      <select id="cartNumber" class="form-select">
                        <option selected disabled>Select Cart Number</option>
                        <!-- Add dynamic options here -->
                      </select>
                    </div>
                  </div>
              
                  <div class="row mb-3">
                    <div class="col-md-6">
                      <label for="cartWeight" class="form-label">Cart Weight:</label>
                      <input type="number" id="cartWeight" class="form-control" placeholder="Enter Cart Weight">
                    </div>
                    <div class="col-md-6">
                      <label for="deliveryDate" class="form-label">Delivery Date:</label>
                      <input type="date" id="deliveryDate" class="form-control">
                    </div>
                  </div>
              
                  <div class="row mb-3">
                    <div class="col-md-6">
                      <label for="deliveryTime" class="form-label">Delivery Time:</label>
                      <select id="deliveryTime" class="form-select">
                        <option selected disabled>Select Delivery Time</option>
                        <!-- Add time slots here -->
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              
        
              <!-- Modal Footer -->
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" style="background-color: #16ACF2; border-color: #16ACF2;" >Order Created</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Footer -->
        <!--<div class="py-4 text-center">-->
        <!--  <p class="mb-0 fs-5">-->
        <!--    Design and Developed by -->
        <!--    <a href="https://adminmart.com/" target="_blank" class="text-primary text-decoration-underline">AdminMart.com</a> -->
        <!--    | Distributed by -->
        <!--    <a href="https://themewagon.com" class="text-primary text-decoration-underline">ThemeWagon</a>-->
        <!--  </p>-->
        <!--</div>-->
      </div>
      </div>
      @include('includes.footer')

<!-- Scripts -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> -->
<!-- jQuery -->


    </div>
  </div>
  <script src="../assets/libs/jquery/dist/jquery.min.js"></script>
  <script src="../assets/js/sidebarmenu.js"></script>
  <script src="../assets/js/app.min.js"></script>
  <script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
  <script src="../assets/libs/simplebar/dist/simplebar.js"></script>
  <script src="../assets/js/dashboard.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
  $(document).ready(function () {
    $('#ordersTable').DataTable({
      responsive: true
    });
  });
</script>
<script>
  function toggleInvoiceFilter() {
    const invoiceFilter = document.getElementById("filterFormInvoice");
    const iconInvoice = document.getElementById("chevronIconInvoice");

    invoiceFilter.classList.toggle("hidden");

    if (invoiceFilter.classList.contains("hidden")) {
      iconInvoice.classList.remove("bi-chevron-up");
      iconInvoice.classList.add("bi-chevron-down");
    } else {
      iconInvoice.classList.remove("bi-chevron-down");
      iconInvoice.classList.add("bi-chevron-up");
    }
  }

  // Optional: show by default on load
  document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("filterFormInvoice").classList.remove("hidden");
  });
</script>

</body>

</html>