@extends('layouts.shop-control-layout')

@section('title', 'Товари')

@section('content')
    <div class="products__page">
        <div class="products__header">
            <h1 class="products__title">
                Перелік позицій
            </h1>
            <a href="{{ route('products.create') }}" class="add__product">Додати позицію</a>
        </div>
        <div class="filters">
            <a href="{{ route('products.index') }}" class="{{ request('category') ? '' : 'active' }}">Усі товари</a>
            <a href="{{ route('products.index', ['category' => 'Іграшки']) }}"
                class="{{ request('category') === 'Іграшки' ? 'active' : '' }}">Іграшки</a>
            <a href="{{ route('products.index', ['category' => 'Одяг']) }}"
                class="{{ request('category') === 'Одяг' ? 'active' : '' }}">Одяг</a>
            <a href="{{ route('products.index', ['category' => 'Матеріали']) }}"
                class="{{ request('category') === 'Матеріали' ? 'active' : '' }}">Матеріали</a>
            <div class="availability__filter">
                <label>
                    <input type="checkbox" name="availability" value="1"
                        {{ request('availability') === '1' ? 'checked' : '' }}
                        onchange="window.location.href='{{ route('products.index', array_merge(request()->all(), ['availability' => request('availability') === '1' ? null : '1'])) }}'">
                    В наявності
                </label>
                <label>
                    <input type="checkbox" name="availability" value="0"
                        {{ request('availability') === '0' ? 'checked' : '' }}
                        onchange="window.location.href='{{ route('products.index', array_merge(request()->all(), ['availability' => request('availability') === '0' ? null : '0'])) }}'">
                    Немає в наявності
                </label>
            </div>
        </div>
        <div class="products__block">
            @if ($products->isNotEmpty())
                <div class="products__titles">
                    <p class="column__name">Назва</p>
                    <p class="column__name">Дата</p>
                    <p class="column__name">Кількість товару</p>
                    <p class="column__name">Ціна</p>
                </div>
                <div class="products__list">
                    @foreach ($products as $product)
                        <div class="product">
                            <div class="image-block">
                                @if ($product->productPhotos->isNotEmpty())
                                    <img width="200px"
                                        src="{{ asset('products/' . $product->productPhotos->first()->photo_url) }}"
                                        alt="{{ $product->name }}">
                                @else
                                    <img width="200px" src="{{ asset('assets/images/logo.jpg') }}" alt="No Image">
                                @endif
                            </div>
                            <div class="product-info__block">
                                <p class="product__info name">
                                    {{ $product->name }}
                                </p>
                                <p class="product__info create-date">
                                    {{ $product->created_at->format('d.m.Y') }}
                                </p>
                                <p class="product__info count">
                                    {!! $product->quantity_in_stock != 0 ? $product->quantity_in_stock : 'Немає в<br>наявності' !!}
                                </p>
                                <p class="product__info price">
                                    {{ $product->price }}грн
                                </p>
                            </div>
                            <a href="{{ route('products.edit', ['product' => $product->product_id]) }}  "
                                class="edit__product">
                                <svg width="25" height="25" viewBox="0 0 25 25" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M23.0405 7.27741L7.85456 22.4842C6.49845 23.8549 2.4429 24.4826 1.4578 23.573C0.472698 22.6634 1.18911 18.6024 2.54522 17.2316L17.7311 2.02492C18.4324 1.35619 19.3669 0.988464 20.3351 1.00028C21.3034 1.0121 22.2286 1.40253 22.9133 2.08818C23.598 2.77381 23.9879 3.70036 23.9997 4.66993C24.0116 5.6395 23.6443 6.57526 22.9765 7.27741H23.0405Z"
                                        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M24 24H13" stroke="black" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </a>
                        </div>
                    @endforeach
                </div>
            @else
                <p>Товарів не знайдено.</p>
            @endif
        </div>
    </div>
@endsection