@component('panel.layouts.component', ['title' => 'محصولات'])

    @slot('style')
        <style>
            .btnSearch {
                margin-top: 10px;
            }
            .searchNaum{

                margin: 20px;
            }
            [dir=rtl] .btn .icon, [dir=rtl] .btn .fa, [dir=rtl] .treeview-item .icon {
                margin-right: 0;
                 margin-left: 0px !important;
            }
            .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' => 'جست جو محصولات'])
                    @component('product::components.message')
                    @endcomponent
                    @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="productName" value="{{ request()->query('productName') }}">
                                    </div>
                                    <div class="col">
                                        <label for="categories">{{ __(' نام دسته بندی:') }}</label>
                                        <select type="text" class="form-control" placeholder="دسته بندی..."
                                                name="productCategory"
                                                value="{{ request()->query('productCategory') }}">
                                            <option value="">همه</option>

                                            @foreach($categories as $cat)

                                                <option value={{$cat->id}} {{(request()->has('productStatus') && request()->query('productStatus') == "$cat->id") ? 'selected'
                                               : ''}}>{{$cat->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>
                              <div class="form-row">
                                  <div class="col">
                                      <label for="categories">{{ __('  وضعیت:') }}</label>
                                      <select type="text" class="form-control" placeholder="وضعیت..."
                                              name="productStatus" value="{{ request()->query('productStatus') }}">
                                          <option value="">همه</option>
                                          <option value=1 {{(request()->has('productStatus') && request()->query('productStatus') == "1") ? 'selected'
                                               : ''}}>موجود
                                          </option>
                                          <option value=0 {{(request()->has('productStatus') && request()->query('productStatus') ==" 0") ?
                                              'selected': ''}}>ناموجود
                                          </option>
                                      </select>
                                  </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="showProduct">جستجو
                                </button>
                              @if($products->total() > 0)
                                <p class="searchNaum">نتایج یافت شده: {{$products->total()}}</p>
                                  @endif
                            </form>

                            <div class="mt-4">
                                <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> sku</th>
                                        <th>قیمت</th>
                                        <th> قیمت فروش ویژه</th>
                                        <th> نویسنده</th>
                                        <th>وضعیت</th>
                                        <th>نوع</th>
                                        <th>توضیحات</th>
                                        <th>دسته بندی</th>
                                        <th> مدیریت</th>
                                    </tr>
                                @endslot
                                @slot('tbody')
                                    @forelse ($products as $product)
                                        <tr>
                                            <td>{{$product->id}}</td>
                                            <td>{{$product->title}}</td>
                                            <td>{{$product->slug}}</td>
                                            <td>{{$product->sku}}</td>
                                            <td>{{$product->price}}</td>
                                            <td>{{$product->sale_price}}</td>
                                            <td>{{$product->user->name}}</td>
                                            <td>{{$product->status}}</td>
                                            <td>{{$product->type}}</td>
                                            <td><?php  echo mb_substr($product->discription, 0, 15, 'UTF8') . '...'?></td>
                                            <td>
                                                @foreach($product->categories->pluck('title') as $category)
                                                    <span>{{$category}}{{'،'}}</span>
                                                @endforeach
                                            </td>
                                            <td class="d-flex">
                                                <a href="{{route('products.edit', $product->id)}}"
                                                   class="btn btn-sm btn-primary mr-2"><i class="icon fa fa-pencil"></i></a>
                                                <form
                                                    action="{{route('products.destroy', $product->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--}}
                {{ $products->withQueryString()->links() }}

                @endslot
                @endcomponent
            </div>
        </div>
    @endslot
    @slot('script')
{{--        <script>--}}


{{--            $("#showProduct").click(function(e){--}}
{{--                e.preventDefault();--}}
{{--                $(".searchNaum").show();--}}
{{--            });--}}
{{--        </script>--}}
    @endslot
@endcomponent