@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">Add-Ons</h6>
        <div class="menu-grp-btn">

          <a href="#" class="btn btn-primary"><img src="assets/images/export.svg"> Upload Bulk</a>
          <a href="#" class="btn btn-primary"><img src="assets/images/add-square.svg">Add Items</a>
        </div>

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

  <div class="row gy-4 mt-1">
    <div class="col-md-12">

      <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">
                        Accompaniment
                      </label>
                    </div>
                  </th>
                  <th scope="col">Price</th>
                  <th scope="col">Action</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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 class="w-auto">Buffalo Chicken Wrap</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>31 000 UGX</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>
                </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 text-secondary-light fw-medium radius-8 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 text-secondary-light fw-medium radius-8 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 text-secondary-light fw-medium radius-8 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 text-secondary-light fw-medium radius-8 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 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 active text-white" href="javascript:void(0)">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 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 text-secondary-light fw-medium radius-8 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 text-secondary-light fw-medium radius-8 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 text-secondary-light fw-medium radius-8 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>
@endsection