@extends('site.layouts.app')
@section('title', $product->name)
@section('content')
    <style>
        /* Hide the radio buttons */
        .size_option input {
            display: none;
        }

        /* Style the square-shaped radio buttons */
        .size_option {
            display: inline-block;
            height: 40px;
            text-align: center;
            line-height: 50px;
            margin-right: 10px;
            cursor: pointer;
            border-radius: 8px;
            /* Creates a rounded corner */
            transition: all 0.3s ease;
            /* Smooth transition effect */
        }


        /* Define the style for the selected radio button */
        .size_option input:checked+span {
            color: white;
            /* Apply red color to the selected size */
            border-color: #FF324D;
            background-color: #FF324D;

        }

        .product_size_switch span.active {
            background-color: #fafafa;
            color: black
        }

        /* Hide the radio buttons */
        .color_option input {
            display: none;
        }

        /* Style for the circular button appearance */
        .button-style {
            display: inline-block;
            width: 30px !important;
            height: 30px !important;
            border-radius: 50%;
            /* Make it round */
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            border: 0.5px solid red
        }

        /* Example for a switch label style */
        .switch_label {
            font-weight: bold;
            margin-right: 10px;
        }

        /* Example for the color switch container */
        .product_color_switch {
            margin-top: 5px;
        }

        /* Style for the active (checked) color option */
        .color_option input:checked+.button-style {
            border: 5px white double;
            /* Add border to show selection */
        }
    </style>
    <!-- START SECTION BREADCRUMB -->
    <div class="breadcrumb_section bg_gray page-title-mini">
        <div class="container">
            <!-- STRART CONTAINER -->
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="page-title">
                        <h1>Product Detail</h1>
                    </div>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb justify-content-md-end">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active"> </li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 mb-4 mb-md-0">
                        <div class="product-image">

                            <div class="product_img_box">
                                <img id="product_img" src='{{ asset('uploads/products') . '/' . $product->image }}'
                                    data-zoom-image="{{ asset('uploads/products') . '/' . $product->image }}"
                                    alt="product_img1" />
                                <a href="#" class="product_img_zoom" title="Zoom">
                                    <span class="linearicons-zoom-in"></span>
                                </a>
                            </div>
                            <div id="pr_item_gallery" class="product_gallery_item slick_slider" data-slides-to-show="4"
                                data-slides-to-scroll="1" data-infinite="false">

                                <div class="item">
                                    <a href="#" class="product_gallery_item active"
                                        data-image="{{ asset('uploads/products') . '/' . $product->image }}"
                                        data-zoom-image="{{ asset('uploads/products') . '/' . $product->image }}">
                                        <img src="{{ asset('uploads/products') . '/' . $product->image }}"
                                            alt="product_small_img1" />
                                    </a>
                                </div>
                                @php
                                    $variations = App\Models\ProductVariant::where('product_id', $product->id)->get();

                                @endphp
                                @foreach ($variations as $variation)
                                    <div class="item">

                                        <a href="#" class="product_gallery_item"
                                            data-image="{{ asset('uploads/products/variations') . '/' . $variation->image }}"
                                            data-zoom-image="{{ asset('uploads/products/variations') . '/' . $variation->image }}">
                                            <img src="{{ asset('uploads/products/variations') . '/' . $variation->image }}"
                                                alt="product_small_img2" />
                                        </a>
                                    </div>
                                @endforeach


                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="product_title" data-product="{{ $product->id }}"><a
                                        href="#"></a></h4>
                            </div>
                            <div>
                                <div class="rating_wrap">
                                    <div class="rating">
                                        <div class="product_rate" style="width:80%"></div>
                                    </div> 21
                                </div>

                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between ">
                            <div class="product_price">
                                @php
                                    $discountedPrice = $product->sale_price - $product->sale_price * ($product->discount / 100);
                                @endphp

                                <h2 class="price" id="product_price">${{ number_format($discountedPrice, 2) }}</h2>

                                @if ($product->discount > 0)
                                    <del>${{ number_format($product->sale_price, 2) }}</del>
                                    <div class="on_sale">
                                        <span>{{ $product->discount }}% Off</span>
                                    </div>
                                @endif
                            </div>


                        </div>
                        <div>
                            {{ $product->short_description }}
                        </div>
                        <div class="pr_switch_wrap mt-2">
                            @if ($product->variants)
                                <span class="switch_label">Color</span>


                                <div class="product_color_switch">
                                    @foreach ($variations as $key => $variation)
                                        @php
                                            $color = App\Models\Color::where('id', $variation->color_id)->first();
                                        @endphp
                                        <label class="color_option">
                                            <input type="radio" id="product_color" data-id="{{ $variation->id }}"
                                                onclick="getVariationRecord({{ $variation->id }})" name="color"
                                                value="{{ $variation->id }}">
                                            <span class="button-style" title="{{ $color->name }}"
                                                style="background-color: {{ $color->code }};"></span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                        </div>



                        @if ($product->sizes !== 'null')
                            <div class="pr_switch_wrap mt-2">
                                @php
                                    $sizeIds = json_decode($product->sizes, true);
                                    $sizes = App\Models\Size::whereIn('id', $sizeIds)->get();

                                @endphp

                                <strong class="switch_lable pt-3">Size</strong>
                                <div class="product_size_switch">

                                    @foreach ($sizes as $size)
                                        <label class="size_option">
                                            <input type="radio" name="product_size" value="{{ $size->name }}">
                                            <span>{{ $size->name }}</span>
                                        </label>
                                    @endforeach

                                </div>
                            </div>
                        @endif
                        <div class="pr_detail">

                            <hr />
                            <div class="cart_extra">

                                <div class="cart_btn">
                                    <button class="btn btn-fill-out btn-addtocart btn-cart{{ $product->id }}"
                                        onclick="addToCartFromDetail()" type="button"><i class="icon-basket-loaded"></i>
                                        Add to cart</button>
                                    <a class="add_wishlist" href="#"><i class="icon-heart"></i></a>
                                </div>
                            </div>

                            <hr />


                            <div class="product_share">
                                <span>Share:</span>
                                <ul class="social_icons">

                                    <li><a href="#" target="_blank"><i class="ion-social-facebook"></i></a></li>
                                    <li><a href="#"><i class="ion-social-twitter"></i></a></li>
                                    <li><a href="#"><i class="ion-social-googleplus"></i></a></li>
                                    <li><a href="#"><i class="ion-social-youtube-outline"></i></a></li>
                                    <li><a href="#"><i class="ion-social-instagram-outline"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="large_divider clearfix"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="tab-style3">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="Description-tab" data-bs-toggle="tab"
                                        href="#Description" role="tab" aria-controls="Description"
                                        aria-selected="true">Description</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="Additional-info-tab" data-bs-toggle="tab"
                                        href="#Additional-info" role="tab" aria-controls="Additional-info"
                                        aria-selected="false">Additional info</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="Reviews-tab" data-bs-toggle="tab" href="#Reviews"
                                        role="tab" aria-controls="Reviews" aria-selected="false">Reviews (2)</a>
                                </li>
                            </ul>
                            <div class="tab-content shop_info_tab">
                                <div class="tab-pane fade show active" id="Description" role="tabpanel"
                                    aria-labelledby="Description-tab">
                                    <p>{!! $product->long_description !!}</p>
                                </div>
                                <div class="tab-pane fade" id="Additional-info" role="tabpanel"
                                    aria-labelledby="Additional-info-tab">
                                    {!! $product->additional_information !!}
                                </div>
                                <div class="tab-pane fade" id="Reviews" role="tabpanel" aria-labelledby="Reviews-tab">
                                    <div class="comments">
                                        <h5 class="product_tab_title">2 Review For <span>{{ $product->name }}</span></h5>
                                        <ul class="list_none comment_list mt-4">
                                            <li>
                                                <div class="comment_img">
                                                    <img src="assets/images/user1.jpg" alt="user1" />
                                                </div>
                                                <div class="comment_block">
                                                    <div class="rating_wrap">
                                                        <div class="rating">
                                                            <div class="product_rate" style="width:80%"></div>
                                                        </div>
                                                    </div>
                                                    <p class="customer_meta">
                                                        <span class="review_author">Alea Brooks</span>
                                                        <span class="comment-date">March 5, 2018</span>
                                                    </p>
                                                    <div class="description">
                                                        <p>Lorem Ipsumin gravida nibh vel velit auctor aliquet. Aenean
                                                            sollicitudin, lorem quis bibendum auctor, nisi elit consequat
                                                            ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet
                                                            nibh vulputate</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="comment_img">
                                                    <img src="assets/images/user2.jpg" alt="user2" />
                                                </div>
                                                <div class="comment_block">
                                                    <div class="rating_wrap">
                                                        <div class="rating">
                                                            <div class="product_rate" style="width:60%"></div>
                                                        </div>
                                                    </div>
                                                    <p class="customer_meta">
                                                        <span class="review_author">Grace Wong</span>
                                                        <span class="comment-date">June 17, 2018</span>
                                                    </p>
                                                    <div class="description">
                                                        <p>It is a long established fact that a reader will be distracted by
                                                            the readable content of a page when looking at its layout. The
                                                            point of using Lorem Ipsum is that it has a more-or-less normal
                                                            distribution of letters</p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    @auth

                                        <div class="review_form field_form">
                                            <h5>Add a review</h5>
                                            <form class="row mt-3">
                                                <div class="form-group col-12 mb-3">
                                                    <div class="star_rating">
                                                        <span data-value="1"><i class="far fa-star"></i></span>
                                                        <span data-value="2"><i class="far fa-star"></i></span>
                                                        <span data-value="3"><i class="far fa-star"></i></span>
                                                        <span data-value="4"><i class="far fa-star"></i></span>
                                                        <span data-value="5"><i class="far fa-star"></i></span>
                                                    </div>
                                                </div>
                                                <div class="form-group col-12 mb-3">
                                                    <textarea required="required" placeholder="Your review *" class="form-control" name="message" rows="2"></textarea>
                                                </div>

                                                <div class="form-group col-12 mb-3">
                                                    <button type="submit" class="btn btn-fill-out" name="submit"
                                                        value="Submit">Submit Review</button>
                                                </div>
                                            </form>
                                        </div>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="small_divider"></div>
                        <div class="divider"></div>
                        <div class="medium_divider"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="heading_s1">
                            <h3>Releted Products</h3>
                        </div>
                        <div class="releted_product_slider carousel_slider owl-carousel owl-theme" data-margin="20"
                            data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
                            @foreach ($relatedproducts as $key => $product)
                                <div class="item">
                                    <div class="product">
                                        <div class="product_img">

                                            <a href="{{ route('product.detail', $product->slug) }}">
                                                @if (file_exists(public_path() . '/uploads/products/' . $product->image))
                                                    <img src="{{ asset('uploads/products') . '/' . $product->image }}"
                                                        alt="">
                                                @else
                                                    <img src="{{ asset('noimage.png') }}" alt="">
                                                @endif

                                            </a>
                                            <div class="product_action_box">
                                                <ul class="list_none pr_action_btn">
                                                    <li class="add-to-cart"><a href="javascript:void(0)"
                                                            onclick="addToCart(`{{ $product->id }}`)"
                                                            class="btn-cart{{ $product->id }}"><i
                                                                class="icon-basket-loaded"></i>
                                                            Add To Cart</a></li>


                                                    <li><a href="#"><i class="icon-heart"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="product_info">
                                            <h6 class="product_title"><a
                                                    href="{{ route('product.detail', $product->slug) }}">{{ $product->name }}</a>
                                            </h6>
                                            <div class="product_price">
                                                @php
                                                    $discountedPrice = $product->sale_price - $product->sale_price * ($product->discount / 100);
                                                @endphp

                                                <span class="price">${{ number_format($discountedPrice, 2) }}</span>

                                                @if ($product->discount > 0)
                                                    <del>${{ number_format($product->sale_price, 2) }}</del>
                                                    <div class="on_sale">
                                                        <span>{{ $product->discount }}% Off</span>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="rating_wrap">
                                                <div class="rating">
                                                    <div class="product_rate" style="width:80%"></div>
                                                </div>
                                                <span class="rating_num">(21)</span>
                                            </div>
                                            <div class="pr_d esc">
                                                <p>