
@extends('app.admin.layout.layout')
@section('title',__('All Menu Categories'))
@section('content')
<br>
<main>
	<div class="container">
		<div class="row">
			<div class="col">
				<div>

                    <div class="page-title-container">
                        <div class="row">
                            <div class="col-sm-12 col-md-6 col-lg-4">
                                <h1 class="mb-0 pb-0 display-4" id="title">@lang('All Categories')</h1>
                                <nav class="breadcrumb-container d-inline-block" aria-label="breadcrumb">
                                    <ul class="breadcrumb pt-0">
                                        <li class="breadcrumb-item"><a href="{{ route('admin:home') }}">@lang('Home')</a></li>
                                        <li class="breadcrumb-item"><a href="{{ route('admin:menuCategories.index') }}">@lang('Categories')</a></li>
                                    </ul>
                                </nav>
                            </div>

                            <div class="col-sm-12 col-md-6 col-lg-4 mb-2 d-flex align-items-start justify-content-center">
                                <form action="{{ route('admin:menuCategories.search') }}" method="GET" class="d-inline-block w-100">
                                    <div class="input-group w-100">
                                        <input type="text" name="query" class="form-control" placeholder="Ara..." required>
                                        <button type="submit" class="btn btn-outline-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-search undefined">
                                                <circle cx="11" cy="11" r="8"></circle>
                                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                            </svg>
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <div class="col-sm-12 col-md-6 col-lg-4 d-flex align-items-start justify-content-end three">
                                <a href="{{ route('admin:menyus.index') }}">
                                    <button type="button" class="btn btn-outline-primary btn-icon btn-icon-start w-100 w-md-auto">
                                        <i data-acorn-icon="leaf" class="me-2" data-acorn-size="17"></i>
                                        <span>@lang('All Menus')</span>
                                    </button>
                                </a>
                                <a href="{{ route('admin:menuCategories.create') }}">
                                    <button type="button" class="btn btn-outline-primary btn-icon btn-icon-start w-100 w-md-auto">
                                        <i data-acorn-icon="plus" class="me-2" data-acorn-size="17"></i>
                                        <span>@lang('Create new Category')</span>
                                    </button>
                                </a>
                                <div class="ms-1">
                                    <button type="button" class="btn btn-outline-primary btn-icon btn-icon-only" data-bs-offset="0,3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-submenu="">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-more-horizontal undefined">
                                            <path d="M9 10C9 9.44772 9.44772 9 10 9V9C10.5523 9 11 9.44772 11 10V10C11 10.5523 10.5523 11 10 11V11C9.44772 11 9 10.5523 9 10V10zM2 10C2 9.44772 2.44772 9 3 9V9C3.55228 9 4 9.44772 4 10V10C4 10.5523 3.55228 11 3 11V11C2.44772 11 2 10.5523 2 10V10zM16 10C16 9.44772 16.4477 9 17 9V9C17.5523 9 18 9.44772 18 10V10C18 10.5523 17.5523 11 17 11V11C16.4477 11 16 10.5523 16 10V10z"></path>
                                        </svg>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end">
                                        @foreach ($menuCategories as $category)
                                            <button class="dropdown-item" type="button">{{ $category->menu_category() }}</button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <style>
                        .input-group {
                            width: 100%;
                        }
                        .form-control {
                            width: 100%;
                        }
                        @media(max-width: 768px ){
                            .nosee{
                                display: none !important;
                            }
                        }
                        @media(max-width: 425px){
                            .three{
                                flex-direction: column !important;
                            }
                            .three a{
                                width: 100%;
                            }
                            .three div{

                            }
                        }
                    </style>



					<div class="row">
    <div class="col-xl-12 mb-5">
        <section class="scroll-section" id="userButtons">
            <h2 class="small-title">@lang('All Categories')</h2>
            <div class="card h-100-card">
                <div class="card-body mb-n2 border-last-none h-100">

                    {{-- ==== HEADER (Sütun başlıqları) ==== --}}
                    <div class="row fw-bold border-bottom pb-2 mb-2 text-muted small">
                        <div class="col-lg-2 col-md-2 col-sm-4 col-3">@lang('Image')</div>
                        <div class="col-lg-1 col-md-1 col-sm-2 col-2">@lang('Place Number')</div>
                        <div class="col-lg-1 col-md-1 col-sm-2 col-2">@lang('Position')</div>
                        <div class="col-lg-2 col-md-2 col-sm-3 col-3">@lang('Category')</div>
                        <div class="col-lg-1 col-md-1 d-none d-lg-block">@lang('AZ')</div>
                        <div class="col-lg-1 col-md-1 d-none d-lg-block">@lang('RU')</div>
                        <div class="col-lg-1 col-md-1 d-none d-lg-block">@lang('EN')</div>
                        <div class="col-lg-2 col-md-2 col-sm-3">@lang('Created At')</div>
                        <div class="col-lg-1 col-md-1 col-sm-1 text-center">@lang('Actions')</div>
                    </div>

                    {{-- ==== DATA ROWS ==== --}}
                    @if(isset($menuCategories) && count($menuCategories))
                        @foreach($menuCategories as $menuCategory)
                            <div class="row border-bottom border-separator-light mb-2 pb-2 align-items-center">
                                {{-- Image --}}
                                <div class="col-lg-2 col-md-2 col-sm-4 col-3">
                                    <img src="{{ $menuCategory->image() }}"
                                         class="card-img rounded-xl sh-6 sw-6"
                                         alt="{{ $menuCategory->menu_category() }}">
                                </div>

                                {{-- Number --}}
                                <div class="col-lg-1 col-md-1 col-sm-2 col-2">
                                    {{ $menuCategory->getAttribute('number') }}
                                </div>

                                {{-- Position --}}
                                <div class="col-lg-1 col-md-1 col-sm-2 col-2">
                                    @php
                                        $pos = $menuCategory->getAttribute('position');
                                    @endphp

                                    @if($pos === '1')
                                        <span class="badge bg-success">@lang('Aktivdir')</span>
                                    @elseif($pos === '2')
                                        <span class="badge bg-danger">@lang('Aktiv deyil')</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $pos }}</span>
                                    @endif
                                </div>


                                {{-- Category Name --}}
                                <div class="col-lg-2 col-md-2 col-sm-3 col-3">
                                    <div class="fw-semibold">{{ $menuCategory->menu_category() }}</div>
                                </div>

                                {{-- Translations (AZ/RU/EN) --}}
                                <div class="col-lg-1 col-md-1 d-none d-lg-block">
                                    {{ $menuCategory->getAttribute('menu_category_az') }}
                                </div>
                                <div class="col-lg-1 col-md-1 d-none d-lg-block">
                                    {{ $menuCategory->getAttribute('menu_category_ru') }}
                                </div>
                                <div class="col-lg-1 col-md-1 d-none d-lg-block">
                                    {{ $menuCategory->getAttribute('menu_category_en') }}
                                </div>

                                {{-- Created At --}}
                                <div class="col-lg-2 col-md-2 col-sm-3">
                                    {{ $menuCategory->getAttribute('created_at')->format('Y-m-d') }}
                                </div>

                                {{-- Actions --}}
                                <div class="col-lg-1 col-md-1 col-sm-1 text-center">
                                    <a href="{{ route('admin:menuCategories.edit', $menuCategory->id) }}"
                                       class="btn btn-outline-primary btn-sm">
                                        <i data-acorn-icon="pen" data-acorn-size="15"></i>
                                    </a>
                                    <a href="{{ route('admin:menuCategories.destroy', $menuCategory->id) }}"
                                       class="btn btn-outline-danger btn-sm">
                                        <i data-acorn-icon="bin" data-acorn-size="15"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center text-muted py-4">
                            @lang('No categories found.')
                        </div>
                    @endif

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

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


