<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">new</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 />