@extends('layouts.website_layout')
@section('meta_title', $product->meta_title)
@section('meta_description', $product->meta_description)
@section('banner_image', "library/".$product->product_thumbnail)
@section('canonical_tag', "$product_category->category_url_slug/$product->product_url_slug")
@section('content')
<main>
    <div class="container-fluid productDetails">
        <div class="row">
            <div class="col-12 productDetails__breadcrumb">
                <ul>
                    <li>
                        <a href="{{url('/')}}">Home</a>
                    </li>
                    <li>
                        <a href="{{url('/')}}/{{$product_category->category_url_slug}}">{{$product_category->category_name}}</a>
                    </li>
                    <li>
                        {{$product->product_name}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="row productDetails__section"> 
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 productDetails__section__image">
                <div class="row productDetails__section__image__slider mobile-block">
                    <div class="productDetails__section__image__slider__inner owl-carousel owl-theme" id="product_slider">
                        <div class="productDetails__section__image__slider__inner__item">
                            <img loading="lazy" src="{{url('/')}}/assets/images/library/{{$product->product_thumbnail}}" alt="{{$product->product_name}}" class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="row desktop-flex">
                    <div class="col-12 col-sm-12 col-md-2 col-lg-2 productDetails__section__image__list">
                        <ul class="productDetails__section__image__list__block">
                            <li>
                                <img loading="lazy" src="{{url('/')}}/assets/images/library/{{$product->product_thumbnail}}" alt="{{$product->product_name}}" class="img-fluid">
                            </li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-10 col-lg-10 productDetails__section__image__view">
                        <div class="productDetails__section__image__view__block">
                            @if(!empty($account_id))
                            <div class="productCategory__listing__block__product__favorites add_to_wishlist @if(in_array($product->id, $favourites)) whishlisted @endif" data-id="{{$product->id}}">
                                <span><i class="fa fa-heart-o" aria-hidden="true"></i></span>
                            </div>
                            @else
                            <div class="productCategory__listing__block__product__favorites" onclick="window.location.href='{{url('/')}}/wishlist-login/{{$product->id}}'">
                                <span><i class="fa fa-heart-o" aria-hidden="true"></i></span>
                            </div>
                            @endif
                            <a class="gallery_active_image" href="{{url('/')}}/assets/images/library/{{$product->product_thumbnail}}" data-lightbox="product-view">
                                <img loading="lazy" src="{{url('/')}}/assets/images/library/{{$product->product_thumbnail}}" alt="{{$product->product_name}}" class="img-fluid">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="product_id" value="{{$product->id}}">
            <input type="hidden" id="product_variant_id">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 productDetails__section__info">
                <div class="productDetails__section__info__title">
                    <h1 class="bold-heading">{{$product->product_name}}</h1>
                    <h2 class="bold-heading product_variant_price"></h2>
                </div>
                <div class="productDetails__section__info__description">
                    <p class="paragraph">{{$product->product_description}}</p>
                </div>
                <div class="productDetails__section__info__variations size_variation_ft d-none size_attribute_block light_variation sunlight_tag_list_block">
                    <div class="size_variation_ft_inner">
                        <div class="productDetails__section__info__variations__title">
                            <h3 class="bold-heading size_title_label sunlight_tag_list"></h3>
                        </div>
                    </div>
                    @if(!empty($product->product_pdf_name) && !empty($product->product_pdf))
                    <div class="light_variation_right">
                        <span class="regular-heading" data-toggle="modal" data-target="#sunGuideModal"><span class="icon"></span> Sun Guide </span>
                    </div>
                    @endif
                </div>
                @php
                $i = 0;
                @endphp
                @foreach($attributes as $attribute_row)
                @if($attribute_row->id == 2)
                <div class="productDetails__section__info__variations color_variation @if(empty($i)) light_variation @endif">
                    <div class="color_variation_inner">
                        <div class="productDetails__section__info__variations__title">
                            @if(count($attribute_values_array[$attribute_row->id]) > 1)
                            <h3 class="bold-heading">{{$attribute_row->attribute_name}}: </h3>
                            @else
                            @foreach($attribute_values_array[$attribute_row->id] as $attribute_value_row)
                            <h3 class="bold-heading">{{$attribute_row->attribute_name}}: {{$attribute_value_row['product_attribute_value']}}</h3>
                            @endforeach
                            @endif
                        </div>
                        @if(count($attribute_values_array[$attribute_row->id]) > 1)
                        <ul class="color_variation_inner_list attribute_list">
                            @php
                            $i = 0;
                            @endphp
                            @foreach($attribute_values_array[$attribute_row->id] as $attribute_value_row)
                            @php
                            $background_colour_code_array = explode('&', $attribute_value_row['product_attribute_value_alias']);
                            $background_colour_code_one = $background_colour_code_array[0];
                            @endphp

                                                        <li data-attribute-id="{{$attribute_row->id}}" title="{{$attribute_value_row['product_attribute_value']}}" data-primary-color="{{$background_colour_code_one}}" data-secondary-color="{{$background_colour_code_two}}" data-id="{{$attribute_value_row['product_attribute_value_id']}}" data-title="{{$attribute_row->attribute_name}}" data-value="{{$attribute_value_row['product_attribute_value']}}" class="@if(empty($i)) auto_select_attr @endif"></li>
                            @php
                            $i++;
                            @endphp
                            @endforeach
                        </ul>
                        @else
                        <ul class="size_variation_ft_inner_list attribute_list">
                            @foreach($attribute_values_array[$attribute_row->id] as $attribute_value_row)
                            <li data-attribute-id="{{$attribute_row->id}}" title="{{$attribute_value_row['product_attribute_value']}}" style="background:{{$attribute_value_row['product_attribute_value_alias']}}" data-id="{{$attribute_value_row['product_attribute_value_id']}}" class="auto_select_attr selected" data-title="{{$attribute_row->attribute_name}}" data-value="{{$attribute_value_row['product_attribute_value']}}"></li>
                            @endforeach
                        </ul>
                        @endif
                        <div class="error">
                            <span id="{{$attribute_row->attribute_url_slug}}_err"></span>
                        </div>
                    </div>
                </div>
                @else
                <div class="productDetails__section__info__variations size_variation_ft @if(count($attributes) > 1 && $attribute_row->id == 1 && $product_variants->count() > 1) d-none size_attribute_block @endif @if(empty($i)) light_variation @endif">
                    <div class="size_variation_ft_inner">
                        <div class="productDetails__section__info__variations__title">
                            @if(count($attribute_values_array[$attribute_row->id]) > 1)
                            <h3 class="bold-heading @if(count($attributes) > 1 && $attribute_row->id == 1 && $product_variants->count() > 1) size_title_label @endif">{{$attribute_row->attribute_name}}: </h3>
                            @else
                            @foreach($attribute_values_array[$attribute_row->id] as $attribute_value_row)
                            <h3 class="bold-heading @if(count($attributes) > 1 && $attribute_row->id == 1 && $product_variants->count() > 1) size_title_label @endif">{{$attribute_row->attribute_name}}: {{$attribute_value_row['product_attribute_value_alias']}}</h3>
                            @endforeach
                            @endif
                        </div>
                        @if(count($attribute_values_array[$attribute_row->id]) > 1)
                        <ul class="size_variation_ft_inner_list attribute_list">
                            @foreach($attribute_values_array[$attribute_row->id] as $attribute_value_row)
                            <li data-attribute-id="{{$attribute_row->id}}" title="{{$attribute_value_row['product_attribute_value_alias']}}" data-value="{{$attribute_value_row['product_attribute_value_alias']}}" data-id="{{$attribute_value_row['product_attribute_value_id']}}" data-title="{{$attribute_row->attribute_name}}" data-value="{{$attribute_value_row['product_attribute_value_alias']}}" data-original-value="{{$attribute_value_row['product_attribute_value']}}"><span>{{$attribute_value_row['product_attribute_value']}}</span></li>
                            @endforeach
                        </ul>
                        @else
                        <ul class="size_variation_ft_inner_list attribute_list">
                            @foreach($attribute_values_array[$attribute_row->id] as $attribute_value_row)
                            <li data-attribute-id="{{$attribute_row->id}}" title="{{$attribute_value_row['product_attribute_value_alias']}}" data-value="{{$attribute_value_row['product_attribute_value_alias']}}" data-id="{{$attribute_value_row['product_attribute_value_id']}}" class="auto_select_attr selected" data-title="{{$attribute_row->attribute_name}}" data-value="{{$attribute_value_row['product_attribute_value_alias']}}" data-original-value="{{$attribute_value_row['product_attribute_value']}}"><span>{{$attribute_value_row['product_attribute_value']}}</span></li>
                            @endforeach
                        </ul>
                        @endif
                        <div class="error">
                            <span id="{{$attribute_row->attribute_url_slug}}_err"></span>
                        </div>
                    </div>
                    @if(empty($i) && !empty($product->product_pdf_name) && !empty($product->product_pdf))
                    <div class="light_variation_right">
                        <span class="regular-heading" data-toggle="modal" data-target="#sunGuideModal"><span class="icon"></span> Sun Guide </span>
                    </div>
                    @endif
                </div>
                @endif
                @php
                $i++;
                @endphp
                @endforeach
                <div class="productDetails__section__info__buy">
                    @if(in_array($current_city, $category_cities))
                    <a class="add_to_cart show_pointer">{{$product->product_add_to_cart_button}}</a>
                    @endif
                    <p class="paragraph product_not_available d-none text-center">Product Not Available</p>
                    <p class="paragraph out_of_stock d-none text-center">Out of Stock</p>
                </div>
                <div class="productDetails__section__info__pincode">
                    @if(empty($current_city))
                    <h5>Check delivery availability in your city. <span data-toggle="modal" data-target="#choose_city">Choose City.</span></h5>
                    @elseif(!in_array($current_city, $category_cities))
                    <h5>Not available in {{$current_city}}. <span data-toggle="modal" data-target="#choose_city">Change City.</span></h5>
                    @elseif(in_array($current_city, $category_cities))
                    <h5>Available in {{$current_city}}. <span data-toggle="modal" data-target="#choose_city">Change City.</span></h5>
                    @endif
                </div>
                <div class="productDetails__section__info__deliveryinfo">
                    <h6 class="bold-heading">Free Delivery</h6>
                    <h6 class="bold-heading">GST included</h6>
                </div>

                
                <div class="productDetails__section__info__details">
                    <ul class="productDetails__section__info__details__accordian">
                        <li class="productDetails__section__info__details__accordian__list mobile">
                            <div class="productDetails__section__info__details__accordian__list__title">
                                <h5 class="bold-heading">Description</h5>
                            </div>
                            <div class="productDetails__section__info__details__accordian__content">
                                <p class="paragraph">{{$product->product_description}}</p>
                            </div>
                        </li>
                        @if(!empty($product->product_size_guide))
                        <li class="productDetails__section__info__details__accordian__list product_variant_size_guide_description d-none">
                            <div class="productDetails__section__info__details__accordian__list__title">
                                <h5 class="bold-heading">Size details</h5>
                            </div>
                            <div class="productDetails__section__info__details__accordian__content">
                                <p class="paragraph product_variant_size_guide_description_text"></p>
                                <div class="productDetails__section__info__details__accordian__content__sizedetail" data-toggle="modal" data-target="#sizeModal">
                                    <img loading="lazy" src="{{url('/')}}/assets/images/details/ruler.svg" alt="Size details" class="img-fluid">
                                    <span>Size guide</span>
                                </div>
                            </div>
                        </li>
                        @endif
                        @foreach($product_sections as $product_section_row)
                        <li class="productDetails__section__info__details__accordian__list variant_sections product_variant_id_{{$product_section_row->product_variant_id}} d-none">
                            <div class="productDetails__section__info__details__accordian__list__title">
                                <h5 class="bold-heading">{{$product_section_row->section_title}}</h5>
                            </div>
                            <div class="productDetails__section__info__details__accordian__content">
                                <p class="paragraph">{!!nl2br($product_section_row->section_content)!!}</p>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @if(!empty($related_products->count()))
        <div class="container-fluid interior simillar_product pb-5">
            <div class="row custom_row interior__title">
                <div class="col-12 text-center"> 
                    <h2 class="bold-heading">You might like these</h2>
                </div>
            </div>
            <div class="row custom_row interior__section">
                <div class="interior__section__slider owl-carousel similar__product owl-theme d-block" id="similar_products_slider">
                    @foreach($related_products as $related_product_row)
                    <div class="interior__section__slider__item">
                        <div class="interior__section__slider__item__img">
                            <a href="{{url('/')}}/{{$related_product_row->product_category_url_slug}}/{{$related_product_row->product_url_slug}}">
                                <img loading="lazy" src="{{url('/')}}/assets/images/library/{{$related_product_row->product_thumbnail}}" alt="{{$related_product_row->product_name}}" class="img-fluid">
                            </a>
                        </div>
                        <div class="interior__section__slider__item__caption">
                            <a href="{{url('/')}}/{{$related_product_row->product_category_url_slug}}/{{$related_product_row->product_url_slug}}">
                            <h3 class="bold-heading details_font_size">{{$related_product_row->product_name}}</h3></a>
                        </div>
                        <div class="interior__section__slider__item__price">
                            <h3 class="bold-heading details_font_size"><span>₹</span> {{$related_product_row->cheapest_variant_price}}</h3> 
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>
</main>
@if(!empty($product->product_size_guide))
<!-- Size Modal -->
<div class="modal fade" id="sizeModal" tabindex="-1" aria-labelledby="sizeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img loading="lazy" src="{{url('/')}}/assets/pdfs/{{$product->product_size_guide}}" alt="Size Guide" class="img-fluid">
            </div>
        </div>
    </div>
</div>
<!-- Size Modal End-->
@endif
@if(!empty($product->product_pdf))
<!-- Sun Giude Modal -->
<div class="modal fade" id="sunGuideModal" tabindex="-1" aria-labelledby="sunGuideModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img loading="lazy" src="{{url('/')}}/assets/pdfs/{{$product->product_pdf}}" alt="Size Guide" class="img-fluid">
            </div>
        </div>
    </div>
</div>
<!-- Sun Giude Modal End-->
@endif
<div class="modal fade" id="add_to_cart_alert"  data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body pincode__body">
                <div class="pincode__body__inner">
                    <div class="pincode__heading">
                        <p class="paragraph pop_up_alert">Added to your bag</p>
                    </div>
                    <div class="pincode__body__inner__footer text-center">
                        <a href="{{url('/')}}/{{$product_category->category_url_slug}}">Back to the shop</a>
                        <a href="{{url('/')}}/checkout">Checkout</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection