@extends('admin.layouts.app')
@section('title', 'Menus')
@section('content')


<div class="pagetitle">
    <h1>Categories</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Menus</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

  <section class="section">
    <div class="row">
      <div class="col-lg-12">

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">All System Items</h5>
            {{-- <p>Add lightweight datatables to your project with using the <a href="https://github.com/fiduswriter/Simple-DataTables" target="_blank">Simple DataTables</a> library. Just add <code>.datatable</code> class name to any table you wish to conver to a datatable. Check for <a href="https://fiduswriter.github.io/simple-datatables/demos/" target="_blank">more examples</a>.</p> --}}

            <!-- Table with stripped rows -->
              <div class="table-responsive">

                  <table class="table datatable table-responsive">
                      <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        @forelse($menus as $menu)
                        <tr>
                            <td>
                                <span>
                                    <img width="50px" height="50px" src="{{ $menu->icon ?  route('menu.icon',['file_name'=>$menu->icon]) : '#' }}" alt=".">
                                </span>
                                <span>{{ $menu->name }}</span>
                            </td>
                            <td class="text-uppercase">{!! $menu->menu_type !!}</td>
                            <td> <x-adminstatus :status='$menu->status' /> </td>

                            <td>
                                <a href="{{ route('admin.menus.edit',['menu'=>$menu->id]) }}" class="btn btn-primary">Edit</a>
                                <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#menuModal{{ $menu->id }}">Delete</a>

                            </td>
                        </tr>
                        <!-- Modal -->
                        <div class="modal fade" id="menuModal{{ $menu->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="menuModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                            <div class="modal-content modal-dialog-center">
                                <div class="modal-header">
                                <h1 class="modal-title fs-5" id="menuModalLabel">Delete menu:<b class="text-success"> {{ $menu->name }}</b>?</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p>Are you sure you want to remove menu: {{ $menu->name }}</p>
                                    <p>Everything related to <b class="text-success">{{ $menu->name }}</b> that you have saved will be lost, please make sure you know what you are doing</p>
                                </div>
                                <form action="{{ route('admin.menus.destroy',['menu'=>$menu->id]) }}" method="POST">
                                    @csrf
                                    @method('delete')
                                    <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                                </form>
                                </div>
                            </div>
                            </div>
                        </div>

                    @empty
                        <tr>
                            <td class="colspan-12">
                                No menu Yet.
                                Please   <a href="{{ route('admin.menus.create') }}" class="btn">ADD A MENU </a>
                            </td>
                        </tr>
                    @endforelse
                      </tbody>
                    </table>

              </div>


            <!-- End Table with stripped rows -->

          </div>
        </div>

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



@endsection