@component('panel.layouts.component', ['title' => 'دسته بندی '])
    @slot('style')
        <style>
            .btnSearch {margin-top: 10px;}
            .searchNaum {margin: 20px;}
            .message{
                margin: auto;
            }
        </style>
    @endslot
    @slot('subject')
        <h1><i class="fa fa-users"></i> دسته بندی </h1>
        <p>لیست دسته بندی های تعریف شده برای مدیریت سطوح دسترسی.</p>
    @endslot
    @slot('breadcrumb')
        <li class="breadcrumb-item">دسته بندی</li>
    @endslot
    @slot('content')
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-11 message">
                @component('product::components.message')
                @endcomponent
                </div>
                @component('components.collapse-card' , ['title' => 'جست جو دسته بندی'])
                    @slot('body')
                        <form method="GET" action="">
                            <div class="form-row">
                                <div class="col">
                                    <label for="categories">{{ __(' نام دسته بندی:') }}</label>
                                    <input type="text" class="form-control" placeholder="محصول..."
                                           name="categoryName" value="{{ request()->query('categoryName') }}">
                                </div>
                                <div class="col">
                                    <label for="categories">{{ __(' slug:') }}</label>
                                    <input type="text" class="form-control" placeholder="دسته بندی..."
                                           name="categorySlug"
                                           value="{{ request()->query('categorySlug') }}">
                                </div>
                                <div class="col">
                                    <label for="categories">{{ __('  نام ثبت کننده:') }}</label>
                                    <input type="text" class="form-control" placeholder="ایجاد کننده دسته بندی..."
                                           name="creatorId" value="{{ request()->query('creatorId') }}">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary float-left btnSearch" id="show">جستجو
                            </button>
                            @if($categories->total() > 0)
                                <p class="searchNaum">نتایج یافت شده:{{$categories->total()}}</p>
                            @endif
                        </form>

                        <div class="mt-4">
                            <a href="{{ route('categories.create') }}" type="button" class="btn btn-primary"><i
                                    class="fa fa-plus"></i> ایجاد دسته بندی</a>
                            <a href="{{ route('products.create') }}" type="button" class="btn btn-primary"><i
                                    class="fa fa-plus"></i> ایجاد محصول</a>
                        </div>

                        @component('components.table')
                            @slot('thead')
                                <tr>
                                    <th>شماره دسته بندی</th>
                                    <th>نام دسته بندی</th>
                                    <th>slug</th>
                                    <th>نوع دسته بندی</th>
                                    <th> parent</th>
                                    <th>توضیحات دسته بندی</th>
                                    <th> اضافه کننده دسته بندی</th>
                                    <th> مدیریت</th>
                                </tr>
                            @endslot
                            @slot('tbody')

                                @forelse ($categories as $category)
                                    <tr>
                                        <td>{{$category->id}}</td>
                                        <td>{{$category->title}}</td>
                                        <td>{{$category->slug}}</td>
                                        <td>{{$category->category_type}}</td>
                                        <td>@if( $category->parent ){{ $category->parent->title }}@else - @endif</td>
                                        <td><?php  echo mb_substr(strip_tags($category->discription), 0, 15, 'UTF8') . '...'?></td>
                                        <td>{{$category->user->name}}</td>
                                        <td class="d-flex">
                                            <a href="{{route('categories.edit', $category->id)}}"
                                               class="btn btn-sm btn-primary mr-2"><i class="icon fa fa-pencil"></i></a>
                                            <form action="{{route('categories.destroy', $category->id)}}" method="POST" onsubmit="return confirm('آیا مطمئن هستید؟');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger"><i class="icon fa fa-close"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">موردی برای نمایش وجود ندارد.</td>
                                    </tr>
                                @endforelse
                            @endslot
                        @endcomponent
                        {{--Paginate section--}}
                        {{ $categories->withQueryString()->links() }}
                    @endslot
                @endcomponent
            </div>
        </div>
    @endslot
    @slot('script')
    @endslot
@endcomponent