@extends('layout.admin')
@section('content')
<div class="dashboard-main-body">


  <div class="row gy-2">
    <div class="col-xxl-12">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
        <h6 class="fw-semibold mb-0">Menus</h6>
        <div class="menu-grp-btn">

          <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deactive_Modal">Deactivate Items</a>
          <a href="#" class="btn btn-danger">Delete</a>
        </div>

      </div>
    </div>
  </div>

  <div class="row gy-4 mt-1">
    <div class="col-md-12">
      <div class="table-filter-menu">
        <div class="form-group">
          <select class="form-select">
            <option>Big on Breakfast</option>
          </select>
        </div>
        <div class="filt-btn">
          <a class="active" href="#"><span>Breakfast</span> Combos</a>
          <a href="#"><span>Reanger</span> Omelettes</a>
          <a href="#"><span>Waffles &</span> Pancakes</a>
          <a href="#"><span>Amazing</span> Muffins</a>
          <a href="#"><span>Baked Fresh</span> Pastries</a>
          <a href="#"><span>Fruitful</span> Mornings</a>
          <a href="#">Extras</a>
        </div>
        <a href="#"><img src="assets/images/tab-icon.svg"></a>
      </div>
      <div class="card h-100 overflow-hidden">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="filter-table table bordered-table mb-0">
              <thead>
                <tr>
                  <th scope="col">
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        Food Menu
                      </label>
                    </div>
                  </th>
                  <th scope="col">Descitpion</th>
                  <th scope="col">Preparation Time</th>
                  <th scope="col">Price</th>
                  <th scope="col">Food Tag</th>
                  <th scope="col">Action</th>
                  <th scope="col"><img src="assets/images/tab-icon.svg"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>
                    <span class="filter-badge bg1">New</span>
                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>
                    <span class="filter-badge bg1">New</span>
                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>
                    <span class="filter-badge bg1">New</span>
                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>
                    <span class="filter-badge bg1">New</span>
                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>

                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>

                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <img src="assets/images/avatar.png">
                          <span>Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>
                    <p class="description">Generously filled croissant with chicken salad, mayo and cheese,</p>
                  </td>
                  <td>25 Min</td>
                  <td>31 000 UGX</td>
                  <td>
                    <span class="filter-badge bg1">New</span>
                  </td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#"><img src="assets/images/edit.svg"></a>
                      <a href="#"><img src="assets/images/trash.svg"></a>
                    </div>
                  </td>
                  <td>
                    <a href="#"><img src="assets/images/tab-icon.svg"></a>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="mt-40">
              <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-left" class="text-xl"></iconify-icon></a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"><iconify-icon icon="iconamoon:arrow-left-2-light" class="text-xxl"></iconify-icon></a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">2</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px bg-primary-600 text-white" href="javascript:void(0)">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">5</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"> <iconify-icon icon="iconamoon:arrow-right-2-light" class="text-xxl"></iconify-icon> </a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"> <iconify-icon icon="ep:d-arrow-right" class="text-xl"></iconify-icon> </a>
                </li>
              </ul>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>

<footer class="d-footer">
  <div class="row align-items-center">
    <div class="col-12">
      <p class="mb-0 text-center">© 2024 CJ's. All Rights Reserved.</p>
    </div>

  </div>
</footer>

<!-- Modal -->
<div class="modal fade" id="deactive_Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content p-10 radius-15">
      <div class="modal-header border-0">
        <h5 class="modal-title text-xxl" id="exampleModalLabel">Deactivate Items<span class="modal-subtitle d-block">Set a time limit for deactivated items</span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="add-form-box">
          <div class="row">
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Select Date From</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Select Date Upto</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Time From</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Time Upto</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-xxl-12">
              <div class="form-group mb-3">
                <label>Select Branch</label>
                <select class="form-control custom-select">
                  <option></option>
                </select>
              </div>
            </div>
            <div class="col-xxl-12">
              <div class="form-group text-center">
                <a href="#" data-bs-dismiss="modal" class="btn btn-primary text-dark hover-text-white btn-width">Submit</a>
              </div>
            </div>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>
@endsection