@extends('layouts.main',['title'=>'Product Information'])

@section('head')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
    <style>
        .slider-wrapper .slider-for .items img {width: 100%; height: 450px; object-fit: contain; margin-bottom: 20px;}
        .slider-wrapper .slider-nav .items {border:1px solid #fff;}
        .slider-wrapper .slider-nav .items img {width: 100%; height: 125px; object-fit: contain; cursor: pointer;}
        .slider-wrapper .slider-nav .slick-slide {
            margin: 0 9px;
        }
        .slider-wrapper .slider-nav{
            margin-left: -9px; 
            margin-right: -9px; 
        }
        .slider-wrapper .slider-nav .slick-current {border:1px solid #ddd;}
        .slider-wrapper.review-img .slider-for .items img {height: 210px;}
    </style>
@endsection

@section('content')
<section class="mt-4">
      
        @if($product)
        <div class="row g-4">
            <div class="col-lg-6">
            <div class="main-card">
                <div class="slider-wrapper review-img">
                @if(!empty($product['images']))
                    <div class="slider-for">
                        @foreach($product['images'] as $img)
                            <div class="items">
                                <img src="{{ $img['public-path'] }}" alt="">
                            </div>
                        @endforeach
                    </div>
                    <div class="slider-nav">
                        @foreach($product['images'] as $img)
                            <div class="items">
                                <img src="{{ $img['public-path'] }}" alt="">
                            </div>
                        @endforeach
                    </div>
                @endif
                </div>
                </div>
            </div>
            <div class="col-lg-6">
            <div class="main-card">
                <div class="review-section">
                    <div>
                        <span class="star-rating">
                            @php
                                $rating = $product->member->rounded_rating ?? 0;
                                $fullStars = floor($rating); // Number of full stars
                                $halfStar = ($rating - $fullStars) >= 0.5 ? true : false; // Check for half star
                                $emptyStars = 5 - $fullStars - ($halfStar ? 1 : 0); // Remaining empty stars
                            @endphp

                            {{-- Full Stars --}}
                            @for ($i = 0; $i < $fullStars; $i++)
                                <img src="{{ asset('images/star.svg') }}" alt="Full Star">
                            @endfor

                            {{-- Half Star --}}
                            @if ($halfStar)
                                <img src="{{ asset('images/half-star.svg') }}" alt="Half Star">
                            @endif

                            {{-- Empty Stars --}}
                            @for ($i = 0; $i < $emptyStars; $i++)
                                <img src="{{ asset('images/empty-star.svg') }}" alt="Empty Star">
                            @endfor
                        </span>
                        <span class="review-info">{{ $product->member->ratings_avg_cbr_rating ? number_format($product->member->ratings_avg_cbr_rating, 1) . ' Ratings' : 'No reviews yet' }}
                        </span>
                    </div>
                    <div class="review-date">
                        <span>Member Since</span> {{ date('M d, Y', strtotime($product['member']['cbmCreatedAt'])) }}
                    </div>
                </div>
                <ul class="review-list">
                    <li><span>Seller name:</span> {{ $product['member']['cbmName'] }}</li>
                    <li><span>Platform:</span> {{ $product['member']['cbmMarketPlaces'] }}</li>
                    <li><span>Seller store:</span> {{ $product['member']['cbmStoreUrls'] }}</li>
                </ul>
            </div>
        </div>
        </div>
        <div class="row mt-40">
            <div class="col-md-12">
                <div class="main-card">
                    <h4 class="mb-3 fw-semibold">Welcome to {{ @$settings['lookup_welcome_label'] }} Lookup! </h4>
                    <p class="font-16">The information displayed here highlights a seller who is part of our Community Branding Program. While {{ @$settings['lookup_welcome_label'] }} trusts this seller, we are not directly affiliated with them and do not assume responsibility for their products or services. </p>
                </div>
            </div>
            <div class="col-md-12 mt-4">
                <div class="main-card">
                    <button class="btn btn-primary">
                        <span>Learn More</span>
                        <img src="{{ asset('images/arrow-right.png') }}" alt="">
                    </button>
                    <h4 class="mb-3 fw-semibold mt-40">{{ $product['member']['cbmName'] }} is a registered member of {{ @$settings['lookup_welcome_label'] }}'s Branding program</h4>
                </div>
            </div>
        </div>
    @else
        <div class="row">
        <div class="col-md-12">
            <div class="main-card">
                <div class="alert text-warning text-center">No matching product found</div>
            </div>
        </div>
        </div>
    @endif
</section>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
@if($product)
<script>
    $(document).ready(function() {
        $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.slider-nav'
        });
        $('.slider-nav').slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            dots: false,
            arrows: false,
            draggable: false,
            focusOnSelect: true
        });
    });
</script>
@endif
@endsection