@extends('front.layout.app')
@section('title', 'Our Store')
@section('content')

    <section class="inner-banner">
        <img src="{{ $store->cmsImages('banner_image') ?? '' }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <div class="row">
                    <div class="col-lg-6">
                        <h1> {{ $store->content['banner_heading'] ?? '' }} <span
                                class="font-bold">{{ $store->content['banner_heading_imp'] ?? '' }}</span></h1>
                        <p>
                            {{ $store->content['banner_description'] ?? '' }}
                        </p>
                        <div class="btn-group">
                            <a href="{{ route('front.about') }}" class="themeBtn">
                                {{ $store->content['banner_btn1'] ?? '' }}</a>
                            <a href="{{ route('front.contact') }}" class="themeBtn">
                                {{ $store->content['banner_btn2'] ?? '' }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inner-banner__bottom">
            <div class="container">
                <ul class="bottom__links d-flex align-items-center justify-content-start">
                    <li><a href="{{ route('front.index') }}"><span><i class="fas fa-home"></i></span> Home</a></li>
                    <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Store</a></li>
                </ul>
            </div>
        </div>
    </section>


    {{-- <section class="store-section">
        <div class="container">
            <div class="serviceHeading text-center mb-5" data-aos="fade-up">
                <h2 class="secHeading">Shop Our Products!</h2>
            </div>
            <div class="row align-items-center">
                @if (isset($findSlug))
                    @forelse ($findSlug->products as $item)
                        <div class="col-md-3">
                            <a href="{{ route('front.product.detail', ['id' => $item->id]) }}">

                                <div class="store-wrap">
                                    <figure>
                                        <img src="{{ $item->productImage('product_image') }}" class="img-fluid"
                                            alt="">
                                    </figure>
                                    <div class="store-cntnt">
                                        <h3>{{ $item->name }}</h3>

                                        <h5>$75.00

                                        </h5>
                                    </div>
                                </div>
                            </a>

                        </div>

                    @empty
                        <p>no data found</p>
                    @endforelse
                @endif


            </div>
        </div>
    </section> --}}

    <section class="store-section">
        <div class="container">
            @if (isset($findSlug) && $findSlug->slug == 'clothing-&-accessories')
                <div class="row align-items-center">
                    {{--                @dd($products['result']) --}}
                    @if (!empty($products['result']))
                        @foreach ($products['result'] as $product)
                            @php
                                $productDetails = \App\Services\PrintfulService::fetchOne($product['id']);
                                $productPrices = \App\Services\PrintfulService::getTopAndBottomPrices($productDetails);
                            @endphp


                            <div class="col-md-3">
                                <div class="store-wrap">
                                    <figure>
                                        <!-- Check if thumbnail_url is not null, otherwise provide a fallback image -->
                                        <img src="{{ $product['thumbnail_url'] ?? 'path/to/default-image.jpg' }}"
                                            class="img-fluid" alt="{{ $product['name'] }}">
                                    </figure>
                                    <div class="store-cntnt">
                                        <!-- Product Name -->
                                        <h3>{{ $product['name'] }}</h3>

                                        <!-- Assuming Printful doesn't always provide a description, so provide a placeholder -->
                                        <p>{{ $product['description'] ?? '' }}</p>

                                        <!-- Show the price (if available) -->
                                        @if (isset($productPrices['topPrice']))
                                            {{-- <h5>${{ $product['variants'][0]['retail_price'] }}
                                                @if (isset($product['variants'][0]['original_price']))
                                                    -
                                                    <del>${{ $product['variants'][0]['original_price'] }}</del>
                                                @endif
                                            </h5> --}}

                                            <h5>
                                                ${{ number_format($productPrices['bottomPrice'] * 1.2, 2) }} - 
                                                ${{ number_format($productPrices['topPrice'] * 1.2, 2) }}
                                            </h5>
                                        @else
                                            <h5>No price available</h5>
                                        @endif

                                        <!-- Product Link -->
                                        <a href="{{ route('front.store.product.details', $product['id']) }}"
                                            class="btn btn-primary">View Product</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="serviceHeading text-center mb-5" data-aos="fade-up">
                            <h2 class="secHeading">Comming Soon!</h2>
                        </div>
                    @endif
                </div>
            @else
                <div class="serviceHeading text-center mb-5" data-aos="fade-up">
                    <h2 class="secHeading">Comming Soon!</h2>
                </div>
            @endif
        </div>
    </section>


    {{-- @include('front.include.stories') --}}

@endsection