@extends('layouts.main')

@push('nav_title')
    {{--    <a class="navbar-brand" href="{{route('users')}}">User</a>--}}
    <a class="navbar-brand" href="#">Enzy</a>
@endpush

@section('page_title')

    <h1>Products</h1>

@endsection

@section('profile')

    @include('layouts/profile')

@endsection

@section('side_bar')

    @include('layouts/side_bar')

@endsection


@section('main_div')

    <div class="product_with filter">
        <div class="filters">

            <div class="filter_tab">
                <div class="tab_header">
                    <h6>Select Categories</h6>
                    <i class="fa-solid fa-chevron-down"></i>
                </div>
                <div class="catalogue">

                    @foreach($categories as $category)

                        <input type="checkbox" id="{{$category->id}}" name="categories[]" value="{{$category->id}}"
{{--                        <input type="radio" id="{{$category->id}}" name="categories[]" value="{{$category->id}}"--}}
                               @if(in_array($category->id, $selected_categories)) checked @endif
                        />
                        <label for="{{$category->id}}">{{ ucwords($category->category) }}</label>

                    @endforeach

                </div>
            </div>
            <div class="filter_tab">
                <div class="tab_header"><h6>Select Sizeing</h6><i class="fa-solid fa-chevron-down"></i></div>
                <select id="size" name="size" class="form-control">
                    @foreach($sizes as $size)
                        <option value="{{$size->id}}" @if($size->id == $selected_size) selected @endif>
                            {{strtoupper($size->size)}}
                        </option>
                    @endforeach
                </select>
            </div>
{{--            <div class="filter_tab color">--}}
{{--                <div class="tab_header"><h6>Select Color</h6><i class="fa-solid fa-chevron-down"></i></div>--}}
{{--                <select id="color" name="color" class="form-control">--}}
{{--                    @foreach($colors as $color)--}}
{{--                        <option value="{{$color->id}}" @if($color->id == $selected_color) selected @endif>--}}
{{--                            {{ucwords($color->color)}}--}}
{{--                        </option>--}}
{{--                    @endforeach--}}
{{--                </select>--}}
{{--            </div>--}}
            <a href="{{route('product_list')}}">
                <button>Reset</button>
            </a>
            <button class="apply_filter">Apply</button>

        </div>
        <div class="product-body">
            @foreach($products as $product)
                <div class="product_tab">
                    <div class="product-img">
                        <img src="{{ url('/../../interior.images.local/'.$product->image) }}">
                        <div class="add-to-cart">
                            @if($product->quantity > 0)
                                <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}">Add To
                                    Cart
                                </button>
                            @else
                                <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}" disabled>
                                    Add To Cart
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="product_content">
                        <h5 class="mb-8"><a href="{{route('card_detail',['id' => $product->id])}}"
                                            class="hover-text-main-600">{{$product->name}}</a></h5>
                        <div class="flex-between gap-4 flex-wrap mt-10">
                            <div class="flex-align gap-2">
                                    <span class="price"><i
                                            class="fa-solid fa-dollar-sign"></i>{{$product->price}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="cart">
        @include('layouts.cart')
    </div>

    </div>

@endsection