@extends('layouts.app')

@section('title')
Buy {{ $item->name }} | {{ $item->brand->name }} | Best Discount Available
@endsection

@section('head')
    <style>
        #review_view {
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        video{
            vertical-align: middle;
        }
        .video-container {
            display: inline-block;
        }
    </style>
@endsection

@section('content')
    <section class="pt-3 pb-3 bg-white ">
        <div class="container-fluid mt-3 mt-lg-5 mt-sm-5 mt-md-5">
            <div class="row d-flex justify-content-center mb-5 pt-sm-5">
                <div class="col-lg-12 col-12">
                    <div class="card border-0">
                        <div class="row position-relative ">
                            <div class="col-lg-6 col-12 ">
                                <div class="p-3 bread-crem">
                                    <p>
                                        <a href="/">HOME</a>
                                        / <a
                                            href="{{ route('search.by-category', $item->category) }}">{{ $item->category->name }}</a>
                                        / {{ $item->name }}
                                    </p>
                                </div>

                                <div class="images p-3">
                                    <div class="text-center pb-4  ">
                                        <div class="img-zoom-container">
                                            @if (!empty($variants[0]->image))

                                                <img class="demo-trigger img-fluid"
                                                     style="max-width: 100%;max-height:340px;object-fit: contain;"
                                                     id="main-image"
                                                     src="{{ asset('storage/' . $variants[0]->image) }}"
                                                     data-zoom="{{ asset('storage/' . $variants[0]->image) }}"
                                                     alt="Variant Image"/>
                                                    <video autoplay loop  controls  class="demo-trigger img-fluid vedio d-none"
                                                        style="max-width: 100%;height: 150px;object-fit: contain;min-width:min(320px, 90vw)"
                                                        id="main-video"
                                                        src="{{ asset('storage/' . $item->image) }}"
                                                        data-zoom="{{ asset('storage/' . $item->image) }}"
                                                        alt="Variant Image" controlslist="nodownload"
                                                        ></video>
                                                     <p class="detail"></p>
                                            @else
                                                @if(!empty($item->image))
                                                    
                                                    @if($img_ext == "mp4")

                                                        <video   autoplay loop  controls  class="demo-trigger img-fluid vedio"
                                                            style="max-width: 100%;height: 150px;object-fit: contain;min-width:min(320px, 90vw)"
                                                            id="main-video"
                                                            src="{{ asset('storage/' . $item->image) }}"
                                                            data-zoom="{{ asset('storage/' . $item->image) }}"
                                                            alt="Variant Image"
                                                            ></video>

                                                            <img class="demo-trigger img-fluid image d-none"
                                                        style="max-width: 100%;max-height:340px;object-fit: contain;"
                                                        id="main-image"
                                                        src="{{ asset('storage/' . $item->image) }}"
                                                        data-zoom="{{ asset('storage/' . $item->image) }}"
                                                        alt="Variant Image"/>
                                                        <p class="detail"></p>
                                                    @else

                                                    <img class="demo-trigger img-fluid image"
                                                        style="max-width: 100%;max-height:340px;object-fit: contain;"
                                                        id="main-image"
                                                        src="{{ asset('storage/' . $item->image) }}"
                                                        data-zoom="{{ asset('storage/' . $item->image) }}"
                                                        alt="Variant Image"/>
                                                        <video autoplay loop  controls  class="demo-trigger img-fluid vedio d-none"
                                                            style="max-width: 100%;height: 150px;object-fit: contain;"
                                                            id="main-video"
                                                            src="{{ asset('storage/' . $item->image) }}"
                                                            data-zoom="{{ asset('storage/' . $item->image) }}"
                                                            alt="Variant Image"
                                                            ></video>
                                                            <p class="detail"></p>
                                                    @endif
                                                @else

                                                    <video autoplay loop  controls  class="demo-trigger img-fluid vedio d-none"
                                                        style="max-width: 100%;height: 150px;object-fit: contain;"
                                                        id="main-video"
                                                        src="{{ asset('storage/' . $item->image) }}"
                                                        data-zoom="{{ asset('storage/' . $item->image) }}"
                                                        alt="Variant Image" controlslist="nodownload"
                                                        ></video>
                                                    <img class="demo-trigger img-fluid image d-none"
                                                        style="max-width: 100%;max-height:340px;object-fit: contain;"
                                                        id="main-image"
                                                        src="{{ asset('storage/' . $item->image) }}"
                                                        data-zoom="{{ asset('storage/' . $item->image) }}"
                                                        alt="Variant Image"/>
                                                        <p class="detail"></p>
                                                @endif
                                            @endif
                                        </div>
                                    </div>



                                    <div class="thumbnail text-center">
                                        @if (!empty($variants[0]->image))
                                            <img onclick="change_image(this)" class="image"
                                                 src="{{ asset('storage/' . $variants[0]->image) }}" width="100"
                                                 id="product-image" alt="Variant Image">
                                        @endif

                                        @if(!empty($item->image))
                                            
                                            @if($ext == "mp4")
                                            <div class="video-container" onclick="change_image(this.querySelector('video'))">
                                                <video  style="pointer-events: none;"  onclick="change_image(this)" width="100" class="vedio" src="{{ asset('storage/' . $item->image) }}"  alt="Variant Image" controls></video>
                                            </div>
                                            @else
                                                <img  class="image" onclick="change_image(this)" src="{{ asset('storage/' . $item->image) }}" width="100" alt="Variant Image">
                                            @endif
                                        @else
                                            <img  class="image" onclick="change_image(this)" src="{{ asset('storage/' . $item->image) }}" width="100" alt="Variant Image">
                                        @endif

                                        @if (!empty($item->image1))
                                        
                                            @if($ext1 == "mp4")
                                            <div class="video-container" onclick="change_image(this.querySelector('video'))">
                                                <video style="pointer-events: none;"  onclick="change_image(this)" class="vedio" width="100"  src="{{ asset('storage/' . $item->image1) }}" controls></video>
                                            </div>
                                            @else
                                                <img onclick="change_image(this)" class="image" src="{{ asset('storage/' . $item->image1) }}" width="100" alt="Variant Image">
                                            @endif

                                        @endif

                                        @if (!empty($item->image2))

                                        
                                            @if($ext2 == "mp4")
                                                <div class="video-container" onclick="change_image(this.querySelector('video'))">
                                                    <video style="pointer-events: none;"  onclick="change_image(this)" class="vedio" width="100"  src="{{ asset('storage/' . $item->image2) }}" ></video>
                                                </div>
                                            @else
                                                <img onclick="change_image(this)" class="image" src="{{ asset('storage/' . $item->image2) }}" width="100" alt="Variant Image">
                                            @endif

                                            @endif
                                        @if (!empty($item->image3))

                                        
                                            @if($ext3 == "mp4")
                                            <div class="video-container" onclick="change_image(this.querySelector('video'))">
                                                <video style="pointer-events: none;"    onclick="change_image(this)" class="vedio"width="100"  src="{{ asset('storage/' . $item->image3) }}" controls></video>
                                                </div>
                                                @else
                                                <img onclick="change_image(this)" class="image" src="{{ asset('storage/' . $item->image3) }}" width="100" alt="Variant Image">
                                            @endif

                                        @endif
                                    </div>
                                </div>

                            </div>

                            <div class="col-lg-6 brands border-0 itemritside">
                                <div class=" p-4 ">
                                    <div class="mt-1 mb-3">
                                        <span class="text-uppercase smallbrandupr mb-2">{{ $item->brand->name }}</span>
                                        <div class="share-button sharer col-12" style="display: block;">
                                            <button type="button" class="gumsharess share-btn ">
                                                <i class="fa fa-share-alt" aria-hidden="true"></i>
                                            </button>
                                            <div class="social top center networks-5 ">
                                                <!-- Facebook Share Button -->
                                                <a class="fbtn share facebook"
                                                   href="https://www.facebook.com/sharer/sharer.php?u=<URL>&t=<BhNU>"
                                                   onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
                                                   title="Share On Facebook"><i class="fab fa-facebook-f"></i></a>

                                                <!-- whatsapp Share Button -->
                                                <a class="fbtn share pinterest"
                                                   href="whatsapp://send?text={{ request()->url() }}"
                                                   data-action="share/whatsapp/share" title="Share On Whatsapp"><i
                                                        class="fab fa-whatsapp"></i></a>
                                                <!-- insta Share Button -->
                                                <a class="fbtn share insta" href="#####" title="Share On Instagram"><i
                                                        class="fab fa-instagram"></i></a>


                                                <!-- copy Share Button -->
                                                <a class="clipboard fbtn share twitter" href="#####"
                                                   title="COPY LINK"><i
                                                        class="fas fa-link"></i></a>

                                                <!-- <a class="fbtn share twitter" onclick="myFunction()" title="COPY LINK"><i class="fas fa-link" id="copy_link"></i></a> -->

                                                <input type="text" class="d-none" id="myInput"
                                                       value="{{ request()->url() }}"/>

                                            </div>
                                        </div>


                                        <h2 class="item-name-view mt-2">{{ $item->name }}<span
                                                id="title_size">{{ !empty($variants[0]->type) ? $variants[0]->type : '' }}</span>
                                        </h2>
                                        <!-- <span class="text-uppercase text-muted  mt-3 mb-3">Model:  {{ $item->model }} <span class="fw-bold m-3"> | </span> <span class="text-uppercase text-muted brand" id="sku">SKU:  @if ($variants->count() > 0)
                                            {{ $variants[0]->sku }}
                                        @endif
                                        </span> </span> -->
                                        <div class="ssw-stars ssw-stars-large ">
                                            <div class="align-items-center product">
                                                @php
                                                    $totalRating = $item->reviews_count;
                                                @endphp
                                                @foreach (range(1, 5) as $i)
                                                    @if ($totalRating > 0)
                                                        @if ($totalRating > 0.5)
                                                            <i class="fas fassas-yellow fa-star"></i>
                                                        @else
                                                            <i class="far fa-star"></i>
                                                        @endif
                                                    @else
                                                        <i class="far fa-star"></i>
                                                    @endif

                                                                                                        @endforeach
                                                <span class="text-uppercase text-muted brand" id="totalreview"
                                                      style="font-size: 10px;">{{ $item->reviews_count }} reviews</span>
                                                <strong class="text-uppercase text-muted brand sku" id="sku"
                                                        style="font-size: 10px;">SKU: {{ $item->code }}</strong>
                                            </div>

                                        </div>
                                        <hr>

                                        <div class="price align-items-center mt-3">
                                            @if ($variants->count() > 0)
                                                @php
                                                    $save_price = $variants[0]->mrp - $variants[0]->price;
                                                    $save = 100 - ($variants[0]->price / $variants[0]->mrp) * 100;
                                                    $save = (int) $save;
                                                @endphp
                                                <div>

                                                    <!-- <i class="fas fa-rupee-sign mrp-cut"></i><span
                                                        class="mrp-cut home-bc"
                                                        id="mrp"> {{ $variants[0]->mrp }}</span> <i
                                                        class="fas fa-rupee-sign px-2"></i><span class="act-price mb-0"
                                                                                                 id="price"
                                                                                                 style=" line-height: 1; font-size: 1.8rem; font-weight: 500; color: var(--txt-body); margin-right: 8px; ">{{ $variants[0]->price }}</span>
                                                    <span class="home-bc h6">You Save: </span><i
                                                        class="fas discount-percentage fa-rupee-sign"></i><span
                                                        class="discount-percentage"
                                                        id="save_price">{{ $save_price }}</span>
                                                </div> -->
                                                <div><span style="font-size: 18px;color: #c7d1df;">MRP:</span>
                                                  <span class="mrp-cut" id="mrp"> {{ $variants[0]->mrp }}</span> Our Offer Price : <span class="act-price mb-0" id="price" style=" line-height: 1; font-size: 1.8rem; font-weight: 500; color: var(--txt-body); margin-right: 8px; ">₹{{ $variants[0]->price }}</span>
                                                </div>
                                                <div class="mt-3">
                                                  <div class="home-bc h5">You Save: <i class="fas discount-percentage fa-rupee-sign"></i><span class="home-bc h5" id="save_price">{{ $save_price }}</span>  </div>


                                                </div>
                                            @else
                                                @php

                                                    $save_price = $item->price - $item->sale_price;
                                                    $save = 100 - ($item->sale_price / $item->price) * 100;
                                                    $save = (int) $save;
                                                @endphp
                                                <div><span style="font-size: 18px;color: #c7d1df;">MRP:</span>
                                                    <span class="mrp-cut"> {{ $item->price }}</span> Our Offer Price :
                                                    <span class="act-price mb-0" id="price"
                                                          style=" line-height: 1; font-size: 1.8rem; font-weight: 500; color: var(--txt-body); margin-right: 8px; ">₹{{ $item->sale_price }}</span>
                                                </div>
                                                <div class="mt-3">
                                                    <div class="home-bc h5">You Save: <span
                                                            class="home-bc h5">₹{{ $save_price }}</span> <span
                                                            class="h5 ">({{ $save }}% OFF)</span></div>


                                                </div>
                                            @endif
                                            {{-- <p class="fw-bold farkhe">In Stock</span> </p> --}}
                                            <p class="mt-2 delivery-date">Inclusive of all taxes</p>
                                        </div>

                                    </div>

                                    <div class="row mt-2">
                                        {{-- <p class="small"> SKU: <span class="">{{ $item->code }}</span> </p>  --}}

                                        <p style="font-style: oblique;">Manufactured by: <span
                                                style="font-style: oblique;">
                                                {{ !empty($item->manufactured_by) ? $item->manufactured_by : $item->brand->name }}</span>
                                        </p>
                                        @if (!empty($item->features))
                                            <p style="font-style: oblique;">Features & Details: <span
                                                    style="font-style: oblique;">
                                                    {{ $item->features }}</span></p>
                                        @endif
                                        {{--                                        @if (!empty($item->expiry_date))--}}
                                        {{--                                            <p style="font-style: oblique;">Expiry Date: <span--}}
                                        {{--                                                    style="font-style: oblique;">--}}
                                        {{--                                                    {{ $item->expiry_date }}</span></p>--}}
                                        {{--                                        @endif--}}
                                    </div>
                                    <div class="row mt-2">
                                        @if ($size_variants->count() > 0)
                                            <div class="col-lg-12 product-quantity">
                                                <p class="fw-bold">Size </p>
                                                <select class="selectpicker form-control1-1" id="product_size"
                                                        name="product_size"
                                                        onchange="change_size(this,{{ $item->price }})">
                                                    @foreach ($size_variants as $size)
                                                        {{-- <span class="size-button" id="variant_size">{{ $size->type }}</span> --}}
                                                        <option value="{{ $size->id }}"
                                                                @if (!empty($size_variants[0]->type)) @if ($size_variants[0]->type == $size->type) selected @endif
                                                            @endif>{{ $size->type }}</option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        @endif

                                        <!-- <div class="col-lg-4 product-quantity">
                                                              <p class="fw-bold">Quantity </p>
                                                                <div class="quantity quantity-2 YK-quantity">
                                                                    <span class="decrease" onclick="decreaseQty(this, '75|3|83|')">
                                                                    <i class="fas fasu fa-minus"></i></span>
                                                                    <input class="qty-input no-focus YK-qty" data-page="product-view" title="Available Quantity" type="text" id="quantity" value="1" readonly="">
                                                                    <span class="increase" onclick="increaseQty(this, '75|3|83|')"> <i class="fas fasu fa-plus"></i></span>
                                                                </div>
                                                              </div> -->

                                        @if ($size_variants->count() > 0)
                                            <input type="hidden" id="variant_id"
                                                   value="{{ $size_variants[0]->id }}"/>
                                            <input type="hidden" id="item_id"
                                                   value="{{ $item->id }}"/>

                                            {{-- <div class="col-12 text-left">
                                            <p class="fw-bold">Variant</p>

                                            <div class=" " id="color_div">
                                                  @foreach ($color_variants as $color)
                                                     <span class="color-box" id="color_span{{ $color->id }}" style="background: {{ $color->variant_name }}" onclick="color_save({{ $color->id }},this)"></span>
                                                   @endforeach
                                          </div></div> --}}

                                        @endif


                                        {{-- <div class="col-lg-3 product-quantity mt-4">
                                          <div class="quantity qttty quantity-2 YK-quantity mb-2">
                                              <span class="decrease" onclick="decreaseQty(this, '75|3|83|')">
                                              <i class="fas fasu fa-minus"></i></span>
                                              @if (!\Cart::session(cartSessionId()->get($item->id))
                                                <input class="qty-input no-focus YK-qty" data-page="product-view" title="Available Quantity" type="text" id="quantity" value="1" readonly="">
                                              @else
                                                <input class="qty-input no-focus YK-qty" data-page="product-view" title="Available Quantity" type="text" id="quantity" value="{{ \Cart::session(cartSessionId())->get($item->id)->quantity }}" readonly="">
                                              @endif
                                              <span class="increase" onclick="increaseQty(this, '75|3|83|')"> <i class="fas fasu fa-plus"></i></span>
                                          </div>
                                        </div>
                                        <div class="col-lg-5 cart mt-4 align-items-center">

                                                @if (!\Cart::session(cartSessionId())->get($item->id))

                                                  <button id="add" class="  add2bagbtn text-uppercase mr-1 px-3 text-left" onclick="add_cart({{ $item->id }},1)">Add to Basket <i class="fas fa-shopping-bag add2bagbtnicon "></i></button>
                                                  <button id="added" type="button" disabled class="  add2bagbtn text-uppercase mr-1 px-3 d-none  text-left" disabled>Added to Basket <i class="fas fa-shopping-bag add2bagbtnicon "></i></button>
                                              @else
                                                  <button type="button" disabled class="add2bagbtn text-uppercase mr-1 px-3 text-left" disabled>Added to Basket <i class="fas fa-shopping-bag add2bagbtnicon "></i></button>
                                              @endif

                                    </div> --}}
                                      <div class="mobile-stick-add-cart">


                                          @if ($item->stock_alert_qty <= 0)
                                            <div class="col-lg-2 pe-2 pt-2 pb-2 out-of-stock">
                                                <button class="icon-product cartredis-no" type="button"
                                                        style=" background: red;">Out of Stock
                                                </button>

                                            </div>
                                            <div class="col-lg-2 pe-2 pt-2 pb-2  notify" style="padding-left:5px;">
                                                <button class="btn btn-info" type="button"
                                                        onclick="notify_me('{{ $item->id }}')"
                                                        style=" background: #0772ba;color:white"
                                                        title="Notify Me When Avaiable">Notify Me
                                                </button>
                                            </div>

                                            <div
                                                class="col-lg-3 col pe-2 pt-2 pb-2 cart-btn d-none"
                                                id="cart-{{ $item->id }}">
                                                <button class="icon-product cartredis" type="button"
                                                        style=" border: 0;"
                                                        onclick="add_cart_new({{ $item->id }},{{ $size_variants->count() ? 1: 2 }})">
                                                    <i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to Cart
                                                </button>
                                            </div>

                                        @else

                                              @if ($size_variants->count() > 0)