@extends('front-end.inc.layout')

@section('content')

<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
            <h1 class="mb-5"><span class="section-title text-primary text-uppercase">{{$category->name .' '. __('main.Products')}}</span></h1>
        </div>
        <div class="row g-4">
            @php
            $duration=0.1;
            @endphp

            @forelse ($products as $product)
            @php
            $duration=0.1 + 0.2;
            @endphp
                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="{{$duration}}">
                            <div class="room-item shadow rounded overflow-hidden">
                                <div class="position-relative">
                                    <img class="img-fluid" src="{{asset('storage/'.$product->image)}}" alt="">
                                    <small class="position-absolute start-0 top-100 translate-middle-y bg-primary text-white rounded py-1 px-3 ms-4">{{$product->category->getTranslatedAttribute("name")}}</small>
                                </div>
                                <div class="p-4 mt-2">
                                    <div class="d-flex justify-content-between mb-3">
                                        <h5 class="mb-0">{{$product->getTranslatedAttribute("name")}}</h5>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <a class="btn btn-sm btn-dark rounded py-2 px-4" href="{{route('product_detail',$product->id)}}">{{__('main.View Details')}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
            @empty
                <h3 class="text-center">{{__('main.No Data Found')}}</h3>
            @endforelse
        </div>
    </div>
</div>

@endsection