@extends('layouts.main')
@section('content')
    <div class="container-fluid bgmain pb-5  mb-5" id="pageheader">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 pb-5">
                    <h4> {{ __('messages.products_title') }}</h4>
                </div>
                <div class="col-sm-6">
                    <div class="form-floating">
                        <form action="{{ route('product.filter') }}" method="post">
                            @csrf
                            <div class="row ">
                                <div class="col-sm-4 my-1">
                                    <select class="form-select" name="category" id="category_id"
                                        aria-label="Floating label select example">
                                        @foreach ($categories as $cat)
                                         
                                                    <option value="{{ $cat->id }}" class="bg-white ">
                                                        {{ App::isLocale('en') ? $cat->name_en : $cat->name }} </option>
                                               
                                        @endforeach
                                        <option class="ps-3" value="" selected>
                                            {{ __('messages.selectCategory') }}
                                        </option>
                                    </select>
                                </div>
                                <div class="col-sm-4 my-1">
                                    <select class="form-select" name="brand" id="brand_id"
                                        aria-label="Floating label select example">
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}">
                                                {{ App::isLocale('en') ? $brand->name_en : $brand->name_ar }}</option>
                                        @endforeach
                                        <option value="" selected> {{ __('messages.selectBrand') }} </option>
                                    </select>
                                </div>
                                <div class="col-sm-4 my-1">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <button type="submit"
                                            class="btn btn-light d-inline ">{{ __('messages.filter') }}</button>
                                        <a href="{{ url('/product') }}" class="btn btn-dark">{{ __('messages.all') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container ">
        <div class="row">
            @foreach ($products as $product)
                <div class="col-sm-4 col-6 my-4">
                    <div class="card bg-white border-0">
                        <img src="{{ url('products/' . $product->image) }}" class="card-img-top" alt="..." width="100%" height="auto" style="aspect-ratio:1">
                        <div class="card-body">
                            <h5 class=" fs-5">
                                <a href="{{ route('product.show', $product->id) }}"
                                    class="textmain text-decoration-none">{{ App::isLocale('en') ? $product->name_en : $product->name_ar }}</a>
                                {{-- <span class="float-end fw-bold  badge mainbutton mx-2">
                                    {{ $product->salePrice }} <span class="fs-6 fw-light">دينار</span></span>
                                <span
                                    class="float-end {{ $product->salePrice ? 'fs-5 text-decoration-line-through text-danger' : '' }}">
                                    {{ $product->price }} </span> --}}
                            </h5>
                            <p class="card-text">
                                {{ App::isLocale('en') ? $product->category->name_en : $product->category->name }}
                                <br>
                                {{ App::isLocale('en') ? __('messages.company') . ': ' . $product->brand->name_en : __('messages.company') . ': ' . $product->brand->name_ar }}
                                <br>
                                {{ App::isLocale('en') ? __('messages.country') . ': ' . $product->brand->origin_en : __('messages.country') . ': ' . $product->brand->origin_ar }}
                            </p>
                            <a href="{{ route('product.show', $product->id) }}" class="btn mainbutton text-center">
                                {{ __('messages.more') }} </a>
                        </div>
                    </div>
                </div>
            @endforeach
            {{ $products->links() }}
        </div>
    </div>
@endsection