@extends('front.layout.app')
@section('title', 'Product Detail')
@section('extra-css')
    <style>
        span.previous-price {
            text-decoration: line-through;
            font-weight: 100;
            color: black !important;
        }

        .all-products {
            height: 200px;
            background-position: center;
            object-fit: contain;
        }

        .invalid-feedback strong {
            font-size: 12px !important;
            color: #dc3545 !important;
        }
    </style>
@endsection
@section('content')
    <section class="main">
        <div class="container">

            <div class="row">
                @include('front.partials.product-detail-sidemenu')

                <div class="col-md-9 col-sm-12">
                    @if(Session::has('success'))
                        <div class="alert alert-success">{{Session::get('success')}}</div>
                    @endif
                    <div id="alertMessage" class="alert alert-danger" style="display: none"></div>

                    <ul class="list-inline">
                        <li><a href="{{route('products')}}">Shop</a></li>
                        | {!! categoriesForProductDetail($product->category_id) !!}

                        {{--                        <li><a href="{{url('products')}}?category={{$product->category->category_slug ?? '#'}}">{{$product->category->name ?? ''}}</a></li>--}}
                        {{--                        | <li><a href="{{url('products')}}?category={{$product->sub_category->category_slug ?? '#'}}">{{$product->sub_category->name ?? ''}}</a></li>--}}

                        |
                        <li class="active">{{$product->product_name ?? ''}}</li>

                    </ul>

                    <h1 class="product-name">{{$product->product_name ?? ''}}</h1>
                    <span>Running into an issue ? <a href="{{route('contact')}}">Contact Us</a></span>

                    <div class="sec1 boxmainnew">
                        <div class="row">
                            <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 showimages">
                                <div class="exzoom hidden" id="exzoom">
                                    <div class="exzoom_img_box">
                                        <ul class='exzoom_img_ul'>
                                            <li><img src="{{ productImage($product->product_image) }}"
                                                     alt="{{ $product->product_tag ?? 'product' }}"/></li>
                                            @foreach($product->product_images as $product_image)
                                                <li><img src="{{ productImage(@$product_image->product_images) }}"
                                                         alt="{{ $product->product_tag ?? 'product' }}"/></li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="exzoom_nav"></div>
                                    <p class="exzoom_btn">
                                        <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
                                        <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 right-part">
                                <div class="mag-eg-el-wrap img-thumbnail" style="height:auto;width:auto">
                                    <div style="height: 300px; width: 300px">
                                        <div mag-zoom="outer" class="mag-eg-el"
                                             style="float: right;position:relative;overflow:hidden;">
                                            <img src="storage/media/20191008053744.jpg"/>
                                        </div>
                                    </div>
                                </div>
                                <h4 class="pricebox" id="price_box">Price:
                                    ${{$product->product_current_price ?? 0.00}}</h4>
                                <span class="product-id">Product ID : {{$product->id}}</span>
                                <span class="product-rating">
                                    @for($i=1; $i<=5; $i++)
                                        @if($i <= round($productReviewsCalc['avgRating']))
                                            <i class="fa fa-star checked"></i>
                                        @else
                                            <i class="fa fa-star-o"></i>
                                        @endif
                                    @endfor
                                </span>

                                <span class="rate-of-average">{{$productReviewsCalc['avgRating'] ?? 0}} out of 5</span>
                                <span class="reviews-total">
                                    <a href="#reviews">({{$productReviewsCalc['totalReviews'] ?? 0}} review)</a>
                                </span>
                                <div class="boxmainnew">
                                    <div class="row">

                                        <form action="{{ url('cart/store', $product->id) }}" method="POST"
                                              id="addToCartForm">
                                            <div class="row">
                                                @csrf
                                                @if($multipleDiscPrice == true && $multipleAddPrice == true)
                                                    @if((isset($product->customize) && $product->customize == 1) || (isset($product->customize_charges) && $product->customize_charges == 1))
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <select name="option_type" id="option_type"
                                                                    class="form-control">
                                                                <option value="">Select Type</option>
                                                                @if(isset($product->customize_charges) && $product->customize_charges == 1)
                                                                    <option value="0">Blank, Select Quantity & Save:
                                                                    </option>
                                                                @endif
                                                                <option
                                                                    value="{{$product->customize_charges == 1 ? 1 : 0}}">@if(isset($product->customize) && $product->customize == 1)
                                                                        Customize,
                                                                    @endif Select Quantity & Save:
                                                                </option>
                                                            </select>
                                                        </div>
                                                    @endif
                                                @endif
                                                @if(isset($product->customize) && $product->customize == 1)
                                                    @php $display = 'none' @endphp
                                                @else
                                                    @php $display = 'block' @endphp
                                                @endif

                                                @if($product->customize_charges == 1)
                                                    <div style="display:{{$display}}"
                                                         class="@if($display == 'block') {{'active'}} @endif option_types col-md-12 col-sm-12 col-xs-12"
                                                         id="option_type_1">
                                                        <div class="quantity_radio form-group row ">
                                                            <div class="col-md-12 col-sm-12 col-xs-12">
                                                                <label class="quantity" id="optionTypeLabel_1">
                                                                    @if(isset($product->customize) && $product->customize == 1)
                                                                        Customize,
                                                                    @endif Select Quantity & Save:
                                                                </label>
                                                                @foreach($product->product_quantities as $product_quantity)
                                                                    @php
                                                                        $quantityCustomizeCharge = $product_quantity->quantity ?? 1;

                                                                        if ($product_quantity->additional_price_customize != 0){
                                                                            $quantityCustomizeCharge .= '('.$product_quantity->additional_price_customize.')';
                                                                        }
                                                                    @endphp
                                                                    <div class="radio">
                                                                        <input type="radio"
                                                                               style="margin-left: 0 !important;"
                                                                               name="options[{{$product->id}}]"
                                                                               value="{{$product_quantity->quantity}}"
                                                                               data-value="{{($product_quantity->additional_price_customize)}}"
                                                                               data-label="{{$quantityCustomizeCharge ?? 1}}"
                                                                               id="option-40565-value-86294"
                                                                               @if($loop->first) checked @endif>

                                                                        <label
                                                                            for="option-40565-value-86294">{{$quantityCustomizeCharge ?? 1}}</label>
                                                                    </div>
                                                                @endforeach

                                                            </div>
                                                        </div>
                                                    </div>
                                                    @php $display = 'none' @endphp
                                                @endif

                                                @if($multipleDiscPrice)
                                                    <div style="display:{{$display}}"
                                                         class="@if($display == 'block') {{'active'}} @endif option_types col-md-12 col-sm-12 col-xs-12"
                                                         id="option_type_0">
                                                        <div class="quantity_radio form-group row ">
                                                            <div class="col-md-12 col-sm-12 col-xs-12">
                                                                <label class="quantity" id="optionTypeLabel_0">
                                                                    @if(isset($product->customize) && $product->customize == 1)
                                                                        Customize,
                                                                    @endif Select Quantity & Save:
                                                                </label>
                                                                @foreach($product->product_quantities as $product_quantity)
                                                                    @php
                                                                        $quantityDiscText = $product_quantity->quantity ?? 1;
                                                                        if($product_quantity->price > 0){
                                                                            $quantityDiscText .= '(-'.(float)$product_quantity->price.')';
                                                                        }
                                                                    @endphp
                                                                    <div class="radio">
                                                                        <input type="radio"
                                                                               style="margin-left: 0 !important;"
                                                                               name="options[{{$product->id}}]"
                                                                               value="{{$product_quantity->quantity}}"
                                                                               data-value="{{($product_quantity->price==0.00) ? '' : '-'.$product_quantity->price}}"
                                                                               data-label="{{$quantityDiscText ?? 1}}"
                                                                               id="option-40565-value-86294"
                                                                               @if($loop->first) checked @endif>

                                                                        <label
                                                                            for="option-40565-value-86294">{{$quantityDiscText ?? 1}}</label>
                                                                    </div>
                                                                @endforeach

                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif


                                                @foreach($product->productOptions as $option)

                                                    @if ($option->type == 'dropdown' && $option->name == 'Folder Colors:')
                                                        <div style="" class="col-md-12 col-sm-12 col-xs-12">
                                                            <div class="product-variants-select form-group row "
                                                                 style="display: block;">
                                                                <label class="col-md-12 col-sm-12 col-xs-12"
                                                                       for="option-{{$option->id}}">{{removeColon($option->name)}}
                                                                    :</label>

                                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                                    @if($option->type == 'dropdown')
                                                                        {{--                                                                        <select name="option[{{$option->id}}]"--}}
                                                                        {{--                                                                                id="option" class="form-control option"--}}
                                                                        {{--                                                                                style="width: 50%">--}}
                                                                        {{--                                                                            <option value="">Choose an option</option>--}}
                                                                        {{--                                                                            @foreach($option->productOptionValues as $optionValue)--}}
                                                                        {{--                                                                                <option--}}
                                                                        {{--                                                                                    value="{{$optionValue->label}}">{{$optionValue->label}}</option>--}}
                                                                        {{--                                                                            @endforeach--}}
                                                                        {{--                                                                        </select>--}}

                                                                        <select name="option[]"
                                                                                id="optionVariation"
                                                                                class="form-control option variation-option"
                                                                                style="width: 50%">
                                                                            <option value="">Choose an option</option>
                                                                            @foreach($option->productOptionValues as $optionValue)
                                                                                <option
                                                                                    data-option-id="{{$optionValue->id}}"
                                                                                    data-option-price="{{$optionValue->price}}"
                                                                                    value="{{$optionValue->label}}">{{$optionValue->label}}</option>
                                                                            @endforeach
                                                                        </select>

                                                                    @elseif($option->type == 'multiple_select')
                                                                    @elseif($option->type == 'range')
                                                                    @else
                                                                        @foreach($option->productOptionValues as $optionValue)
                                                                            <input type="{{$option->type}}"
                                                                                   name="option[{{$optionValue->id}}]"
                                                                                   class="form-control option"
                                                                                   style="width: 50%">
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                                @if(isset($product->customize) && $product->customize == 1)
                                                    <div style="" class="col-md-12 col-sm-12 col-xs-12 ml-4 mt-3">
                                                        <div class="product-variants-select form-group row customizer"
                                                             style="display: block">
                                                            <label class="col-md-12 col-sm-12 col-xs-12">
                                                                CUSTOMIZE
                                                            </label>

                                                            <div class="col-sm-8 zindex">
                                                                <div class="checkbox">
                                                                    <label for="option-42401-value-90651">
                                                                        <input type="checkbox" name="options[customize]"
                                                                               value="1" id="option-42401-value-90651">

                                                                        Please click on checkbox to customize
                                                                    </label>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif

                                                {{--Varaitaion OPTION SECTION--}}

                                                @foreach($product->productOptions as $option)
                                                    @if ($option->type != 'dropdown' || $option->name != 'Folder Colors:')
                                                        <div style="" class="col-md-12 col-sm-12 col-xs-12">
                                                            <div class="product-variants-select form-group row "
                                                                 style="display: block;">
                                                                <label class="col-md-12 col-sm-12 col-xs-12"
                                                                       for="option-{{$option->id}}">{{removeColon($option->name)}}
                                                                    :</label>
                                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                                    @if($option->type == 'dropdown')
                                                                        {{--                                                                        <select name="option[{{$option->id}}]"--}}
                                                                        {{--                                                                                id="option" class="form-control option"--}}
                                                                        {{--                                                                                style="width: 50%">--}}
                                                                        {{--                                                                            <option value="">Choose an option</option>--}}
                                                                        {{--                                                                            @foreach($option->productOptionValues as $optionValue)--}}
                                                                        {{--                                                                                <option--}}
                                                                        {{--                                                                                    value="{{$optionValue->label}}">{{$optionValue->label}}</option>--}}
                                                                        {{--                                                                            @endforeach--}}
                                                                        {{--                                                                        </select>--}}
                                                                        <select name="option[]"
                                                                                id="optionVariation"
                                                                                class="form-control option variation-option"
                                                                                style="width: 50%">
                                                                            <option value="">Choose an option</option>
                                                                            @foreach($option->productOptionValues as $optionValue)
                                                                                <option
                                                                                    data-option-price="{{$optionValue->price}}"
                                                                                    data-option-id="{{$optionValue->id}}"
                                                                                    value="{{$optionValue->label}}">{{$optionValue->label}}</option>
                                                                            @endforeach
                                                                        </select>

                                                                    @elseif($option->type == 'multiple_select')
                                                                    @elseif($option->type == 'range')
                                                                    @else
                                                                        @foreach($option->productOptionValues as $optionValue)
                                                                            <input type="{{$option->type}}"
                                                                                   name="option[{{$optionValue->id}}]"
                                                                                   class="form-control option"
                                                                                   style="width: 50%">
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach

                                                @php $minOrder = 1;
                                                    if(!empty($product->product_quantities[0])){
                                                        $minOrder = $product->product_quantities[0]->quantity;
                                                        if (strpos($minOrder, '-')){
                                                            $minOrder = explode('-', $minOrder);
                                                            $minOrder = $minOrder[0];
                                                        }
                                                    }
                                                @endphp
                                                <div class="col-md-12 showQty" style="">
                                                    <input type="hidden" name="product_id" value="{{$product->id}}">
                                                    <input type="number" class="form-control" id="quantity"
                                                           placeholder="Quantity" name="qty" required=""
                                                           min="{{$minOrder}}" value="{{$minOrder}}">
                                                </div>
                                                <div class="col-md-12">
                                                    {{--<button id="add-to-cart" class="btn bg-red">--}}
                                                    {{--<a href="cart.php">--}}
                                                    {{--Add to Cart--}}
                                                    {{--</a>--}}
                                                    {{--</button>--}}
                                                    {{--                                                    @if ($product->product_qty > 0)--}}
                                                    <input type="hidden" name="cart_price" id="cart_price" value="0">
                                                    <button type="button" id="add-to-cart" class="btn bg-red">Add to
                                                        Cart
                                                    </button>

                                                    {{--                                                    @endif--}}

                                                    <p id="min_order" data-value="{{$minOrder??1}}">Min
                                                        Order: {{$minOrder ??  1}} / -</p>
                                                    <p id="final_price">{{($product->product_current_price) ?? 0.00}}</p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 col-xs-12">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row w-100">
                    <div class="col-12">
                        <div class="boxmainnew">
                            <div class="row">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Close main container -->

        <section classs="product-description">
            <div class="desc-head">
                <div class="container">
                    <h4>Description</h4>
                </div>
            </div>


            <div class="container">
                <div id="description" class="sec2">
                    <p><span style="font-size: 10pt;"></span></p>
                    {!! $product->description ?? '' !!}
                    {{-- <ul style="list-style-type: disc;">
                        <li><span style="font-size: 10pt;">Size: 12-1/4" x 9-1/2"</span></li>
                        <li><span style="font-size: 10pt;">Embossed score lines for labels</span></li>
                        <li>Thumbcut<span style="font-size: 10pt;"> for quick opening and access</span></li>
                        <li>ull<span style="font-size: 10pt;"> and 3/4 sized pockets offer easy access from </span>top<span style="font-size: 10pt;"> and are closed on 3 sides to securely contain contents</span></li>
                        <li><span style="font-size: 10pt;">50 Box</span></li>
                    </ul> --}}
                </div>
            </div>
        </section>
        <div class="desc-head" id="reviews">
            <div class="container">
                <h4>Product Reviews</h4>
            </div>
        </div>
        @if(!Auth::check())
            <div class="container">
                <div class="row">
                    <div class="col py-4">
                        <p><a href="{{url('login')}}">Login</a> or <a href="{{url('register')}}">Register</a> to write
                            the first review.</p>
                    </div>
                </div>
            </div>
        @else
            <div class="container">
                <div class="row">
                    <div class="col py-4">
                        <div id="reviews" class="reviews tab-pane fade in clearfix ">
                            <div class="row">
                                <div class="col-lg-4 col-md-5">
                                    <div class="rating">
                                        <div class="average-rating clearfix">
                                            <div class="average">
                                                <span>{{$productReviewsCalc['totalReviews'] ?? 0}}</span>
                                            </div>
                                            <span class="product-rating">
                                            @for($i=1; $i<=5; $i++)
                                                    @if($i <= round($productReviewsCalc['avgRating']))
                                                        <i class="fa fa-star checked"></i>
                                                    @else
                                                        <i class="fa fa-star-o"></i>
                                                    @endif
                                                @endfor
                                        </span>
                                            <span class="rate-of-average">
                                            {{$productReviewsCalc['avgRating'] ?? 0}} out of 5
                                        </span>
                                        </div>
                                        <div class="rating-bars-wrapper clearfix">
                                            <div class="rating-bar">
                                                <span class="rating-label">5 star</span>
                                                <div class="progress">
                                                    <div class="progress-bar"
                                                         style="width: {{$productReviewsCalc['fiveStarReview']??0}}%"></div>
                                                </div>
                                                <span class="rating-percentage">{{$productReviewsCalc['fiveStarReview']??0}}%</span>
                                            </div>
                                            <div class="rating-bar">
                                                <span class="rating-label">4 star</span>
                                                <div class="progress">
                                                    <div class="progress-bar"
                                                         style="width: {{$productReviewsCalc['fourStarReview']??0}}%"></div>
                                                </div>
                                                <span class="rating-percentage">{{$productReviewsCalc['fourStarReview']??0}}%</span>
                                            </div>
                                            <div class="rating-bar">
                                                <span class="rating-label">3 star</span>
                                                <div class="progress">
                                                    <div class="progress-bar"
                                                         style="width: {{$productReviewsCalc['threeStarReview']??0}}%"></div>
                                                </div>
                                                <span class="rating-percentage">{{$productReviewsCalc['threeStarReview']??0}}%</span>
                                            </div>
                                            <div class="rating-bar">
                                                <span class="rating-label">2 star</span>
                                                <div class="progress">
                                                    <div class="progress-bar"
                                                         style="width: {{$productReviewsCalc['twoStarReview']??0}}%"></div>
                                                </div>
                                                <span class="rating-percentage">{{$productReviewsCalc['twoStarReview']??0}}%</span>
                                            </div>
                                            <div class="rating-bar">
                                                <span class="rating-label">1 star</span>
                                                <div class="progress">
                                                    <div class="progress-bar"
                                                         style="width: {{$productReviewsCalc['oneStarReview']??0}}%"></div>
                                                </div>
                                                <span class="rating-percentage">{{$productReviewsCalc['oneStarReview']??0}}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-7">

                                    @forelse($productReviews as $productReview)
                                        <div class="user-review clearfix review">
                                            <p class="rev">{{$productReview->author ?? ''}}</p>
                                            <p class="itl">{{$productReview->created_at->diffForHumans() ?? ''}}</p>

                                            @for($i=1; $i<=5; $i++)
                                                @if($i <= round($productReview->rating))
                                                    <span class="fa fa-star checked"></span>
                                                @else
                                                    <span class="fa fa-star-o"></span>
                                                @endif
                                            @endfor
                                            <p>{{$productReview->description ?? ''}}</p>
                                            <div class="pull-right"></div>
                                        </div>
                                    @empty
                                        <h3>There are no Reviews for this product</h3>
                                    @endforelse

                                    <div class="review-form clearfix">
                                        @if(Session::has('success'))
                                            <div class="alert alert-success">{!! Session::get('success') !!}</div>
                                        @endif
                                        @if(Session::has('warning'))
                                            <div class="alert alert-warning">{!! Session::get('warning') !!}</div>
                                        @endif
                                        <form method="POST" action="{{route('shop.addReview', $product->id)}}"
                                              class="clearfix">
                                            @csrf
                                            <h3>Add a Review</h3>
                                            <span>
                                            Your Rating
                                            <span class="rating-required">*</span>
                                        </span>
                                            <div class="clearfix"></div>
                                            <fieldset class="rating @error('rating') is-invalid @enderror">
                                                <input type="radio" id="star-5" name="rating" value="5">
                                                <label class="full" for="star-5" data-toggle="tooltip" title=""
                                                       data-original-title="5 star"></label>
                                                <input type="radio" id="star-4" name="rating" value="4">
                                                <label class="full" for="star-4" data-toggle="tooltip" title=""
                                                       data-original-title="4 star"></label>
                                                <input type="radio" id="star-3" name="rating" value="3">
                                                <label class="full" for="star-3" data-toggle="tooltip" title=""
                                                       data-original-title="3 star"></label>
                                                <input type="radio" id="star-2" name="rating" value="2">
                                                <label class="full" for="star-2" data-toggle="tooltip" title=""
                                                       data-original-title="2 star"></label>
                                                <input type="radio" id="star-1" name="rating" value="1">
                                                <label class="full" for="star-1" data-toggle="tooltip" title=""
                                                       data-original-title="1 star"></label>
                                            </fieldset>
                                            @error('rating')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                            <div class="clearfix"></div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group ">
                                                        <label for="reviewer-name">
                                                            Name<span>*</span>
                                                        </label>
                                                        <input type="text" name="reviewer_name"
                                                               class="form-control @error('reviewer_name') is-invalid @enderror"
                                                               id="reviewer-name"
                                                               value="{{old('reviewer_name') ?? Auth::user()->name}}">
                                                        @error('reviewer_name')
                                                        <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                     </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group ">
                                                        <label for="comment">
                                                            Your Review<span>*</span>
                                                        </label>
                                                        <textarea name="comment"
                                                                  class="form-control @error('comment') is-invalid @enderror"
                                                                  id="comment" cols="30"
                                                                  rows="10">{{old('comment')}}</textarea>
                                                        @error('comment')
                                                        <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                {{--<input type="hidden" name="rating" id="rating" value="0">--}}
                                                <div class="clearfix"></div>
                                                <button type="submit" class="btn btn-primary review-submit"
                                                        data-loading="">
                                                    Add Review
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif


    </section>

    @if (count($mightAlsoLike))
        <section class="product-description">
            <div class="desc-head">
                <div class="container">
                    <h4>Products You May Like</h4>
                </div>
            </div>
            <div class="container">

                <div class="row">

                    <div class="col">

                        @foreach($mightAlsoLike as $relatedProduct)
                            <div class="col-md-6">
                                <div class="boxxx">
                                    <img
                                        src="{{productImage($relatedProduct->product_image ?? '') ?? 'placeholder.png'}}"
                                        class="img-fluid">
                                    <a href="{{$relatedProduct->slug??'#'}}">
                                        <h4>{{$relatedProduct->product_name ?? ''}}</h4></a>
                                    <span>${{$relatedProduct->product_current_price ?? 0.00}}</span>
                                </div>
                            </div>
                        @endforeach

                    </div>

                </div>

            </div>

        </section>
    @endif

    <!-- open container again -->
    <div class="container">
        <div class="row">


        </div>
    </div>

@endsection
@section('extra-js')
    <script>

        var is_customize = curr_index = 0;


        $("#add-to-cart").on('click', function () {
            let valid = validateQty();
            if (valid === true) {
                $("#addToCartForm").submit();
            }
        });

        function validateQty() {
            $("#alertMessage").css('display', 'none')
            let currentQty = parseInt($("#quantity").val());
            let minQty = parseInt($("#quantity").attr('min'));
            if (currentQty < minQty) {
                $("#alertMessage").css('display', 'block').empty().append('Quantity can not be less than ' + minQty)
                return false;
            } else {
                return true;
            }
        }


        function validateAddToCart() {
            if ($("#option_type").val() == "") {
                // $("#add-to-cart").attr("disabled", true);
            } else {
                // $("#add-to-cart").attr("disabled", false);

            }

        }

        $(document).ready(function () {

            validateAddToCart();
            //console.log("iscustomize"+is_customize);
            $('.product-variants-select').each(function (index, item) {

                if (is_customize) {
                    $(item).parent().hide();
                    $(item).hide();
                } else {
                    $(item).parent().show();
                    $(item).show();
                }
                // console.log("iscustomize"+is_customize);
                if ($($(item).children('label')[0]).text().toLowerCase().trim() == 'customize') {
                    $(item).addClass('customizer');
                    $(item).parent().addClass('ml-4 mt-3');
                    $(item).find('.col-sm-8').addClass('zindex');
                    $(item).find('input[type=checkbox]').on('click', function () {
                        $('.product-variants-select').each(function (index, item1) {
                            if (index > curr_index) {
                                $(item1).parent().toggle();
                                $(item1).toggle();

                            }
                        });

                    });
                    curr_index = index;
                    is_customize = 1;
                }
            });

            $('.fancybox-thumbs').fancybox({
                prevEffect: 'none',
                nextEffect: 'none',

                closeBtn: false,
                arrows: false,
                nextClick: true,
            });

            // $("#option_type").prop("selectedIndex", 1);
            // $("#option_type").trigger("change");

        });

        $(".mag-eg-el").mouseover(function () {
            $(".mag-eg-el-wrap").show(100);
        });

        $(".mag-eg-el").mouseout(function () {
            $(".mag-eg-el-wrap").hide(100);
        });

        //var price = parseFloat('80.0000');
        var price = parseFloat($("#final_price").html());
        var min_qty = parseInt($("#min_order").data('value'));
        $("#final_price").html("$" + ((price * min_qty).toFixed(2)));
        $("#final_price_number").val((price * min_qty).toFixed(2));

        if (!price_variation) {
            var price_variation = '';
        }
        if (!prices) {
            var prices = '';
        }


        // $("[name='qty']").change(function () {
        // var totalPrice = getPriceForProduct(price_variation,prices,$(this).val(),price).toFixed(2);
        // var update_price = totalPrice / $(this).val();
        // $("#price_box").html('Price: $'+update_price.toFixed(2));
        // $("#final_price").html("$"+totalPrice);
        // $("#final_price_number").val(totalPrice);
        // });

        $('#option_type').on('change', function () {
            if ($(this).val() == '') {
                $('.showQty').hide();
            }
            let type = $(this).val();
            $("#optionTypeLabel_" + type).text($('#option_type option:selected').text());
            $('.option_types').removeClass('active');
            $('.option_types').hide();

            $('#option_type_' + type).show();
            $('.showQty').show();
            $('#option_type_' + type).addClass('active');

            calculatePrice($("[name='qty']").val());

            if ($(this).val() == "") {
                toastr.error("Please select type", "Error");
                // $("#add-to-cart").attr("disabled", true);
            } else {
                // $("#add-to-cart").attr("disabled", false);

            }

        });

        $("#atcform").on('submit', function (e) {
            e.preventDefault();
            // console.log($("#option_type").val());
            if ($("#option_type").val() == "") {
                toastr.error("Please select type", "Error");
                return false;
            } else {
                $.ajax({
                    url: $("#atcform").attr('action'),
                    type: 'post',
                    data: $("#atcform").serializeArray(),
                    success: function (response) {
                        //console.log(response);
                        window.location.href = "../cart.html";
                    },
                })
            }

        });


        function calculatePrice(qty) {

            var subtotal = Number(getPriceForProduct(price_variation, prices, qty, price));
            var update_price = subtotal / qty;

            current_qty = qty;
            let isChecked = false;

            $('div.active > .quantity_radio input[type=radio]').get().reverse().map(function (item, index) {

                if (isChecked)
                    return;

                if (typeof $(item).data('label') === 'number')
                    var getquantity = $(item).data('label');
                else
                    var getquantity = $(item).data('label').split('(')[0];
                getquantity += '';
                var qtyArr = getquantity.split('-');
                var is_range = qtyArr.length > 1;
                //console.log(is_range, qtyArr, getquantity);
                if (is_range) {
                    // console.log(getquantity, qtyArr, is_range, qtyArr[0], qtyArr[1] );
                    let from = qtyArr[0].replace("/[^A-Za-z0-9]/g", "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
                    // console.log(from);
                    let to = qtyArr[1].replace("/[^A-Za-z0-9]/g", "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
                    // console.log(to);
                    if (current_qty >= Number(from.trim()) && current_qty <= Number(to.trim()) && isChecked == false) {
                        doThis(current_qty);
                    }
                } else {
                    getquantity = getquantity.replace("/[^A-Za-z0-9]/g", "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
                    if (current_qty >= Number(getquantity) && isChecked == false) {
                        doThis(current_qty);
                    }
                }


                function doThis(current_qty) {
                    $('.quantity_radio input[type=radio]').prop('checked', false);
                    $(item).prop('checked', true);
                    //console.log($(item));
                    var price = Number($(item).data('value'));
                    //console.log(price, subtotal);
                    subtotal += (current_qty * price);
                    isChecked = true;

                }
            });

            var optionValue = $('#optionVariation option:selected');
            var optionPrice = parseFloat(optionValue.data('option-price')) || 0;
            var optionTotalPrice = optionPrice * qty;

            var total = parseFloat(subtotal.toFixed(2));
            var totalPrice = total + optionTotalPrice;
            $("#final_price").html("$" + totalPrice);
            $("#final_price_number").val(total);
        }

        $("[name='qty']").on('keyup', function () {
            calculatePrice($(this).val());
        });


    </script>
@endsection

@section('scripts')

    <script>
        $(document).ready(function () {

            $('.variation-option').on('change', function () {
                var selectedOption = $(this).find('option:selected');
                var optionId = selectedOption.data('option-id');
                var optionPrice = selectedOption.data('option-price');
                $(this).attr('name', 'option[' + optionId + ']');

                if (optionPrice != null) {
                    var quantityInput = document.getElementById('quantity');
                    var quantity = parseFloat($('#quantity').val()) || 1;

                    calculatePrice(quantity);
                }

            });
        });
    </script>

    {{--    <script>--}}
    {{--        $(document).ready(function () {--}}
    {{--            $('.variation-option').on('change', function () {--}}
    {{--                var selectedOption = $(this).find('option:selected');--}}
    {{--                var optionId = selectedOption.data('option-id');--}}
    {{--                var optionPrice = parseFloat(selectedOption.data('option-price')) || 0;--}}

    {{--                var currentPriceText = $('#final_price').text().replace(/[^0-9.-]/g, ''); // Remove any non-numeric characters--}}
    {{--                var currentPrice = parseFloat(currentPriceText) || 0;--}}
    {{--                alert(currentPrice);--}}
    {{--                var newPrice = currentPrice + optionPrice;--}}

    {{--                $("#final_price").text(newPrice.toFixed(2)); // Use toFixed to format the number to 2 decimal places--}}
    {{--                $(this).attr('name', 'option[' + optionId + ']');--}}
    {{--            });--}}
    {{--        });--}}


    {{--    </script>--}}

    {{-- <script>
         $(document).ready(function () {
             $('body').on('change', '#option', function () {
                 if ($(this).val() !== "") {
                     // $('#option-42401-value-90651').prop('checked', true);
                     // $('#option-42401-value-90651').trigger('change');
                     if ($('#option-42401-value-90651').prop('checked') == false) {
                         $('#option-42401-value-90651').click();
                     }
                 }
             });
         });
     </script>--}}
@endsection