@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; /* enough height to accommodate content */
  transform: scaleY(1);
  opacity: 1;
}

.filter-transition.hidden {
  max-height: 0;
  transform: scaleY(0);
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
}
  .dropdown-toggle {
  background: #00bfff;
  color: white;
  font-weight: bold;
  border-radius: 0;
  padding: 8px 12px;
}

.dropdown-toggle:hover {
  background: #009cd8;
  color: white;
}

.dropdown-sidebar a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.dropdown-sidebar a:hover {
  color: #007bff;
}
.page-sidebar-menu a {
  text-decoration: none !important;
}
  .toggle-icon {
    transition: transform 0.3s ease;
  }
  .collapse.show + .toggle-icon,
  .collapsed .toggle-icon {
    transform: rotate(180deg);
  }
  .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-shipping-sidebar')


      
          <!-- Main Content -->
          <div class="col-md-10">
            <!-- Filter Card -->
            <div class="d-flex justify-content-end mb-3">
              <button class="btn btn-primary"
              style="background: linear-gradient(180deg, #190650 -14.29%, #16ACF2 158.33%);"
              data-bs-toggle="modal"
              data-bs-target="#addOrderModal">
        + Add Order
      </button>
      
            </div>
            
            <div class="card mb-4">
<div id="filterForm" 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;">

<!-- Filter Toggle Section -->
<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;">Shipping Manifests Details All Customer</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="toggleFilter()" class="btn btn-light btn-sm border" style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">
      Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>
    </button>
  </div>
</div>

<!-- JavaScript -->
<script>
  function toggleFilter() {
    const filterForm = document.getElementById("filterForm");
    const icon = document.getElementById("chevronIcon");

    filterForm.classList.toggle("hidden");

    // Toggle icon
    if (filterForm.classList.contains("hidden")) {
      icon.classList.remove("bi-chevron-up");
      icon.classList.add("bi-chevron-down");
    } else {
      icon.classList.remove("bi-chevron-down");
      icon.classList.add("bi-chevron-up");
    }
  }

  // On page load, filter should be visible
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("filterForm").classList.remove("hidden");
  });
</script>
            
              <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><a href="{{ route('shipping-manifest-invoice') }}">FK12345</a></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>

<!-- Bootstrap 4 CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery (required for Bootstrap 4 JS) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
  $(document).ready(function () {
    $('#ordersTable').DataTable({
      responsive: true
    });
  });
</script>
<script>
  $(document).ready(function(){
    $('.dropdown-sidebar a[data-toggle="collapse"]').on('click', function(){
      var target = $(this).attr('href');
      var icon = $(this).find('.toggle-icon');

      // Delay to wait for collapse effect
      setTimeout(function() {
        if($(target).hasClass('show')) {
          icon.removeClass('bi-chevron-down').addClass('bi-chevron-up');
        } else {
          icon.removeClass('bi-chevron-up').addClass('bi-chevron-down');
        }
      }, 300);
    });
  });
</script>

</body>

</html>