@extends('front.layout.app')
@section('title', 'Product Page')
@section('content')
{{-- @dd($find->colour_ids) --}}
<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="Proreview">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="productNav">
                    <div class="swiper mySwiper2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{ $find->getFirstMediaUrl('product_image') }}" alt="Main Product Image" />
                            </div>
                            @foreach ($find->getMedia('product_gallery_images') as $file)
                            <div class="swiper-slide">
                                <img src="{{ $file->getUrl() }}" alt="Product Image" />
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div thumbsSlider="" class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{ $find->getFirstMediaUrl('product_image') }}" class="img-fluid"
                                    alt="Main Product Image" />
                            </div>
                            @foreach ($find->getMedia('product_gallery_images') as $file)
                            <div class="swiper-slide">
                                <img src="{{ $file->getUrl() }}" class="img-fluid" alt="Product Image" />
                            </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 productSIDE">
                <form action="{{ route('cart.add', $find->id) }}" method="POST">
                    @csrf
                    <div class="prodtl-txt">
                        <h2>{{ $find->name }}</h2>
                        {{-- <div class="rating-box">
                            <div class="rating-container">
                                <input type="radio" name="rating" value="5" id="star-5"> <label
                                    for="star-5">★</label>
                                <input type="radio" name="rating" value="4" id="star-4"> <label
                                    for="star-4">★</label>
                                <input type="radio" name="rating" value="3" id="star-3"> <label
                                    for="star-3">★</label>
                                <input type="radio" name="rating" value="2" id="star-2"> <label
                                    for="star-2">★</label>
                                <input type="radio" name="rating" value="1" id="star-1"> <label
                                    for="star-1">★</label>
                            </div>
                            <span>(62)</span>
                        </div> --}}
                        <ul class="stckst">
                            <li><span>Price:</span>${{ $find->price }}</li>
                        </ul>
                        <p>
                            {{ $find->description }}.</a>
                        </p>
                        <ul class="stckst flex-column justify-content-start align-items-start">

                            <li><span>Status:</span>In Stock</li>


                            {{-- <li><span>Status:</span>In Stock</li> --}}
                            <li><span>Glass :</span>
                                {{-- 16 oz ombré --}}
                                {{ implode(', ', $colourNames) }}
                            </li>
                            <li>
                                <select id="related_products" name="colour" class="form-control">

                                    @foreach ($colors as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </li>
                            {{-- <li><span>Glass Cans :</span>16 oz iridescent (blue, pink, purple,red)</li> --}}
                        </ul>
                        <div class="quantitySec">
                            <h4>Quantity</h4>
                            <ul>
                                <li>
                                    <div class="num-block">
                                    <div class="number numAdd">
                                        <span class="minus">-</span>
                                        <input class="in-num" type="text"

                                               name="quantity"
                                               id="quantity" value="1">
                                        <span class="plus">+</span>
                                    </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="cardbutton">
                                <button class="themeBtn themeBtn1" type="submit">Add To Cart</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection