<x-main.header />

<main>
    <section class="tank  tank-1">
        <div class="container">
            <div class="row pt-5 justify-content-center pt-5 g-4">
                <div class="sencond-men">
                    <h3 class="theme-h3">BEST SELLER</h3>

                </div>
                @foreach($products as $key => $pro)
            <div class="col-lg-4 col-12">
                <div class="custome-card">
                    <a href="{{ url('/product_detail'.$pro->product_id) }}" class="extra-1">
                        <div class="oush">
                            <img src="{{ asset('storage/images/'.$pro->product_image) }}" class="img-fluid  image-main"
                                alt="img">
                            <img src="{{ asset('storage/images/'.$pro->product_back_image) }}" class="img-fluid roling" alt="img">

                        </div>
                    </a>
                    <div class="head-fone">
                        <div class="floxi">
                            <h4><a href="{{ url('/product_detail'.$pro->product_id) }}">{{ $pro->product_front_title }}</a></h4>
                            <p>${{ $pro->product_origional_price }}</p>
                        </div>
                        <div class="cup-tea">
                            @if($pro->prosize)
                            <ul>
                                @foreach($pro->prosize as $key => $psize)
                                <li class="pop">
                                    @php
                                        $pro_size = DB::select("SELECT * FROM `product_sizes` WHERE `product_id`= $pro->product_id && `size_id` = $psize->size_id");
                                    @endphp
                                    @foreach($pro_size as $key => $pro_size)
                                    <input name="prd-1" id="size-{{$pro_size->product_id}}-{{ $pro_size->size_id }}" type="radio" value="{{ $pro_size->size_id }}" checked>
                                    <label for="size-{{$pro_size->product_id}}-{{ $pro_size->size_id }}">
                                        <span class="color-block"> {{ $psize->size }}</span>
                                    </label>
                                    @endforeach
                                </li>
                                @endforeach
                            </ul>
                            @endif
                            @if($pro->procolor)
                            <div class="color-radio-container">
                                <ul>
                                    @foreach($pro->procolor as $key => $pcolor)
                                    <li>
                                        @php
                                            $color_img = DB::select("SELECT * FROM `color_images` WHERE `product_id` = $pro->product_id && `color_id` = $pcolor->color_id");
                                        @endphp
                                        @foreach($color_img as $key => $pcimage)
                                        <input data-imgmain="{{ asset('storage/images/'.$pcimage->color_front_image) }}"
                                            data-imgrolling="{{ asset('storage/images/'.$pcimage->color_back_image) }}" type="radio"
                                            id="color-{{$pcimage -> product_id}}-{{$pcimage -> color_id}}" name="color" value="red" check>
                                        <label for="color-{{$pcimage -> product_id}}-{{$pcimage -> color_id}}" class="color-radio red" style="background-color: {{$pcolor -> color_code}};" id="red-1"></label>
                                        @endforeach
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                            <a href="{{ url('/product_detail'.$pro->product_id) }}" id="card_addCart">
                                add to cart
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

            </div>
        </div>
    </section>
</main>

<x-main.footer />