@extends('front.layout.app')
@section('content')
    <section class="inner-banner">
        <img src="{{ $data->cmsImages('banner_image') ?? '' }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <h1>{{ $data->content['banner_heading'] ?? '' }}</h1>
            </div>
        </div>
    </section>

    <section class="productSec padd-y">
        <div class="container">
            <h2 class="secHeading text-center" data-aos="fade-up">{{ $data->content['main_heading'] ?? '' }}</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="productTabs" data-aos="fade-up">

                        <ul class="nav nav-pills" id="pills-tab" role="tablist">

                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                    data-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                    aria-selected="true">All Candle</button>
                            </li>
                            @forelse ($categories as $cat)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-{{ $cat->slug }}-tab" data-toggle="pill"
                                        data-target="#pills-{{ $cat->slug }}" type="button" role="tab"
                                        aria-controls="pills-{{ $cat->slug }}"
                                        aria-selected="false">{{ $cat->name }}</button>
                                </li>

                            @empty
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-contact-tab" data-toggle="pill"
                                        data-target="#pills-contact" type="button" role="tab"
                                        aria-controls="pills-contact" aria-selected="false">NO Category Found</button>
                                </li>
                            @endforelse

                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent" data-aos="fade-up">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">
                            <div class="row justify-content-center">
                                @forelse ($products as $pro)
                                    @if ($pro->category_id == 1)
                                        <div class="col-md-4 col-sm-6">
                                            <a href="{{ route('front.product.detail', $pro->id) }}" class="productWraps"
                                                data-aos="zoom-in">
                                                <figure>
                                                    <img src="{{ $pro->productImage('product_image') ?: '' }}"
                                                        class="img-fluid" alt="">
                                                    <span>Sale!</span>
                                                </figure>
                                                <div class="productContent">
                                                    <h4>{{ $pro->name }}</h4>
                                                    <h5 class="price">{{ $pro->price }}</h5>
                                                </div>
                                            </a>
                                        </div>
                                    @endif
                                @empty
                                    <p>no data found</p>
                                @endforelse

                            </div>
                        </div>
                        @forelse ($categories as $cat)
                            <div class="tab-pane fade" id="pills-{{ $cat->slug }}" role="tabpanel"
                                aria-labelledby="pills-{{ $cat->slug }}-tab">
                                <div class="row justify-content-center">
                                    @foreach ($cat->products as $product)
                                        <div class="col-md-4 col-sm-6">
                                            <a href="{{ route('front.product.detail', $product->id) }}"
                                                class="productWraps" data-aos="zoom-in">
                                                <figure>
                                                    <img src="{{ $product->getFirstMediaUrl('product_image') }}"
                                                        class="img-fluid" alt="{{ $product->name }}">
                                                    <span>Sale!</span>
                                                </figure>
                                                <div class="productContent">
                                                    <h4>{{ $product->name }}</h4>
                                                    <h5 class="price">


                                                        ${{ number_format($product->price, 2) }}

                                                    </h5>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @empty
                            <div class="tab-pane fade" id="pills-no-category" role="tabpanel"
                                aria-labelledby="pills-no-category-tab">
                                <div class="row justify-content-center">
                                    <p>No categories found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection