@extends('admin.layouts.master')
@section('content')
<div class="card bg-body-white hoverable card-xl-stretch mb-xl-8">	
	<div class="card card-custom">
		<div class="card-header">
			<h3 class="card-title">
				Menu List
			</h3>
		</div>
        <div class="card-header border-0 pt-6" data-select2-id="select2-data-82-td10">
			<div class="card-title">
				<div class="d-flex align-items-center position-relative my-1">
					<span class="svg-icon svg-icon-1 position-absolute ms-6">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
							<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black"></rect>
							<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black"></path>
						</svg>
					</span>
					<input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Search user">
				</div>
			</div>
			</div>
		</div>
		<div class="card-body pt-0">
			<div class="table-responsive">
				<table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" id="kt_table_users">
			        <thead>
			            <tr>
			                <th>#</th>
			                <th>Name</th>
			                <th>Action</th>
			            </tr>
			        </thead>
			        <tbody>
			            @forelse($menus as $i => $menu)
			                <tr>
			                    <td>{{ $i + 1 }}</td>
			                    <td>{{ $menu }}</td>
			                    <td>
			                        <a href="{{ route('admin.menus.index', ['type' => $i]) }}" class="btn btn-primary btn-sm">View</a>
			                    </td>
			                </tr>
			            @empty
			                <tr><td colspan="4">No pages found.</td></tr>
			            @endforelse
			        </tbody>
			    </table>
			</div>
		</div>
	</div>
</div>
@endsection