{{--productDetail--}}
@extends('shop::layouts.master')

@section('page_title')
    {{ trim($product->meta_title) != "" ? $product->meta_title : $product->name }}
@stop

@section('seo')
    <meta name="description"
          content="{{ trim($product->meta_description) != "" ? $product->meta_description : str_limit(strip_tags($product->description), 120, '') }}"/>
    <meta name="keywords" content="{{ $product->meta_keywords }}"/>
    <style type="text/css">{!! $product->pdp_description_style !!}</style>
@stop

@section('content-wrapper')
    <product-view
        images="{{json_encode(@$product->getGalleryImages())}}"
    ></product-view>

    <div class="text-center justify-content-center">
        {!! $product->pdp_description !!}
    </div>

    <div class="modal" id="ex1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content text-muted small">
                <!-- Modal body -->
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="row justify-content-center mt-2">
                        <img height="100px" width="100px" loading="lazy"
                             :src="`${baseUrl}/themes/velocity/assets/images/hdfc-pay.png`" alt="hdfc-pay">
                    </div>
                    <h6 class="text-center mt-2 fs-14 text-body">View Plans</h6>
                    <div class="row">
                        <div class="col-12">
                            @if (!empty(@$emiData['emiss']))
                                @foreach(@$emiData['emiss'] as $keyys => $daataas)
                                    <div class="accordion" id="no-cost-emi-accordian">
                                        @if($keyys == "nocostemis")
                                            @foreach($daataas as $key => $emiDatas)
                                                <div class="card">
                                                    <a class="card-link" data-toggle="collapse"
                                                       href="#collapse{{ $loop->index }}">
                                                        <div
                                                            class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1 text-body">
                                                        <span class="fs-12 text-body font-weight-bold">{{$key}}
                                                            @if($key == "HDFC")
                                                                Bank Credit Card
                                                            @endif
                                                        </span>
                                                            <i class="fa fa-caret-down float-right"
                                                               aria-hidden="true"></i>
                                                        </div>
                                                    </a>

                                                    <div id="collapse{{ $loop->index }}" class="collapse"
                                                         data-parent="#no-cost-emi-accordian">
                                                        <div class="card-body bg-white p-2">
                                                            <div class="table-responsive">
                                                                <table
                                                                    class="table table-bordered table-striped table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th>
                                                                            <p> EMI Plan </p>
                                                                        </th>
                                                                        <th>
                                                                            <p> Interest(pa) </p>
                                                                        </th>
                                                                        <th>
                                                                            <p> Discount </p>
                                                                        </th>
                                                                        <th>
                                                                            <p> Total cost </p>
                                                                        </th>
                                                                    </thead>
                                                                    <tbody>
                                                                    </tr>
                                                                    @foreach ($emiDatas as $emiDatasValue)
                                                                                                                                                <tr>
                                                                            <td class="text-center nowrap">
                                                                                <span>₹{{round(($emiDatasValue->monthly_installment / 100))}}</span>
                                                                                <span>x {{$emiDatasValue->tenure_in_month}}</span>
                                                                            </td>
                                                                            <td class="text-center nowrap">
                                                                                <span>₹{{round((@$emiDatasValue->interest_pay_to_bank / 100))}}</span>
                                                                                <span>({{round((@$emiDatasValue->bank_interest_rate / 10000))}}%)</span>
                                                                            </td>
                                                                            <td class="text-center nowrap">
                                                                                <span>₹{{round((@$emiDatasValue->total_offerred_discount_cashback_amount / 100))}}</span>
                                                                            </td>
                                                                            <td class="text-center nowrap">
                                                                                <span>₹{{round($totalAmount)}}</span>
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <p class="fs10">
                                                                <span>{{@$emiDatas[array_key_first($emiDatas)]->ADDITIONAL_CASHBACK}}</span>
                                                                </br>
                                                                <span class="text-bold"><u>Note:</u></span>
                                                                <span> The bank will continue to charge interest on No Cost EMI plans as per existing rates. However, the interest to be charged by the bank will be passed on to you as an upfront discount.</span>
                                                            </p>
                                                            <hr>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                @endforeach
                            @else
                                <p class="text-center"> No EMI Plan Found </p>
                            @endif
                        </div>
                    </div>
                    <h6 class="text-center mt-2 fs-14 text-body">Cashback &amp; No/Low Cost EMI Offers*</h6>
                    <div class="row">
                        <div class="col-12">
                            <ul class="list-group list-group-flush border border-basic mb-3">
                                <li class="list-group-item border-0 p-2">Cashback applicable on:</li>
                                <li class="list-group-item border-0 p-2"><b>HDFC Credit Cards</b> - Applicable on Full
                                    Payment & No/Low Cost EMI
                                </li>
                                <li class="list-group-item border-0 p-2"><b>HDFC Debit Cards</b> - Applicable on No/Low
                                    Cost EMI
                                </li>
                                <li class="list-group-item border-0 p-2">Cashback Offer</li>
                            </ul>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div id="noCostEmiAccordian2">
                                <div class="card">
                                    <a class="card-link" data-toggle="collapse" href="#noCostEmiAccordian2collapseOne">
                                        <div class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1">
                                            <span class="fs-12 text-body font-weight-bold">No/Low Cost EMI</span>
                                            <i class="fa fa-caret-down float-right text-body" aria-hidden="true"></i>
                                        </div>
                                    </a>
                                    <div id="noCostEmiAccordian2collapseOne" class="collapse"
                                         data-parent="#noCostEmiAccordian2">
                                        <div class="card-body bg-white p-2">
                                            <p class="mb-0">
                                                6 months is No-Cost EMI. For higher offers (9,12,18,24 months) interest
                                                is
                                                charged for the balance months.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <a class="collapsed card-link" data-toggle="collapse"
                                       href="#noCostEmiAccordian2collapseTwo">
                                        <div class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1">
                                            <span
                                                class="fs-12 text-body font-weight-bold">How No/Low Cost EMI works</span>
                                            <i class="fa fa-caret-down float-right" aria-hidden="true"></i>
                                        </div>
                                    </a>
                                    <div id="noCostEmiAccordian2collapseTwo" class="collapse"
                                         data-parent="#noCostEmiAccordian2">
                                        <div class="card-body bg-white p-2">
                                            <p class="mb-0">
                                                Interest charged in EMI is given as an upfront discount on payment page.
                                                So if you add EMI for 6 months it will come to the value of product at
                                                checkout.
                                                Payment page -> Select EMI option -> Amount to be paid automatically
                                                reduces by interest amount
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <a class="collapsed card-link" data-toggle="collapse"
                                       href="#noCostEmiAccordian2collapseThree">
                                        <div class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1">
                                            <span class="fs-12 text-body font-weight-bold">Debit Card EMI Eligibility Check</span>
                                            <i class="fa fa-caret-down float-right" aria-hidden="true"></i>
                                        </div>
                                    </a>
                                    <div id="noCostEmiAccordian2collapseThree" class="collapse"
                                         data-parent="#noCostEmiAccordian2">
                                        <div class="card-body bg-white p-2">
                                            <p class="mb-0">HDFC Debit Card - SMS MYHDFC to 5676712 from registered
                                                mobile number
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <a class="collapsed card-link" data-toggle="collapse"
                                       href="#noCostEmiAccordian2collapseFour">
                                        <div class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1">
                                            <span class="fs-12 text-body font-weight-bold">EMI Plans</span>
                                            <i class="fa fa-caret-down float-right" aria-hidden="true"></i>
                                        </div>
                                    </a>
                                    <div id="noCostEmiAccordian2collapseFour" class="collapse"
                                         data-parent="#noCostEmiAccordian2">
                                        <div class="card-body bg-white p-2">
                                            <p class="mb-0">EMI Plans can be checked on payment page before making
                                                the payment.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="ex5">
        <div class="modal-dialog modal-lg">
            <div class="modal-content text-muted small">
                <!-- Modal body -->
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="row">
                        <div class="col-12">
                            <div class="tabs">
                                @if (!empty(@$emiData['emisWithoutPartNoss']))
                                    @foreach(@$emiData['emisWithoutPartNoss'] as $keys => $datas)
                                        @if($keys == "standardplans")

                                            <h6 class="text-center mt-2 fs-14 text-body">Credit Cards</h6>

                                            <div class="accordion" id="cc">
                                                @foreach($datas as $key => $emiDatas)
                                                    <div class="card">
                                                        <div style="cursor: pointer"
                                                             class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1"
                                                             id="cc-heading{{ $loop->index }}" data-toggle="collapse"
                                                             data-target="#cc-collapse{{ $loop->index }}"
                                                             aria-expanded="false"
                                                             aria-controls="cc-collapse{{ $loop->index }}">
                                                            <span
                                                                class="fs-12 text-body font-weight-bold">{{$key}}</span>
                                                            <i aria-hidden="true"
                                                               class="fa fa-caret-down float-right"></i>
                                                        </div>

                                                        <div id="cc-collapse{{ $loop->index }}" class="collapse"
                                                             aria-labelledby="cc-heading{{ $loop->index }}"
                                                             data-parent="#cc">
                                                            <div class="card-body bg-white p-2">
                                                                <div class="table-responsive">
                                                                    <table
                                                                        class="table table-bordered table-striped table-condensed cf">
                                                                        <tbody>
                                                                        <tr>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>
                                                                                <p> EMI Plan </p>
                                                                            </th>
                                                                            <th>
                                                                                <p> Interest(pa) </p>
                                                                            </th>
                                                                            <th>
                                                                                <p> Total cost </p>
                                                                            </th>
                                                                        </tr>
                                                                        @foreach ($emiDatas as $emiDatasValue1)
                                                                                                                                                        <tr>
                                                                                <td class="text-center nowrap">
                                                                                    <span>₹{{round((@$emiDatasValue1->monthly_installment / 100))}}</span>
                                                                                    <span>x {{$emiDatasValue1->tenure_in_month}}</span>
                                                                                </td>
                                                                                <td class="text-center nowrap">
                                                                                    <span>₹{{round((@$emiDatasValue1->interest_pay_to_bank / 100))}}</span>
                                                                                    <span>({{round((@$emiDatasValue1->bank_interest_rate / 10000))}}%)</span>
                                                                                </td>
                                                                                <td class="text-center nowrap">
                                                                                    <span>₹{{round($totalAmount)}}</span>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>

                                                                <p class="fs10">
                                                                    <span class="text-bold">Note: </span>
                                                                    <span>The bank will continue to charge interest on No Cost EMI plans as per existing rates. However, the interest to be charged by the bank will be passed on to you as an upfront discount.</span>
                                                                </p>
                                                                <hr>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                        @if($keys == "debitcard")

                                            <h6 class="text-center mt-2 fs-14 text-body">Debit Cards</h6>
                                            <div class="accordion" id="dc">
                                                @foreach($datas as $key => $emiDatas)
                                                    <div class="card">
                                                        <div style="cursor: pointer"
                                                             class="card-header justify-content-start pl-2 pr-2 pt-1 pb-1"
                                                             id="dc-heading{{ $loop->index }}" data-toggle="collapse"
                                                             data-target="#dc-collapse{{ $loop->index }}"
                                                             aria-expanded="false"
                                                             aria-controls="dc-collapse{{ $loop->index }}">
                                                            <span
                                                                class="fs-12 text-body font-weight-bold">{{$key}}</span>
                                                            <i aria-hidden="true"
                                                               class="fa fa-caret-down float-right"></i>
                                                        </div>

                                                        <div id="dc-collapse{{ $loop->index }}" class="collapse"
                                                             aria-labelledby="dc-heading{{ $loop->index }}"
                                                             data-parent="#dc">
                                                            <div class="card-body bg-white p-2">
                                                                <div class="table-responsive">
                                                                    <table
                                                                        class="table table-bordered table-striped table-condensed cf">
                                                                        <tbody>
                                                                        <tr>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>
                                                                                <p> EMI Plan </p>
                                                                            </th>
                                                                            <th>
                                                                                <p> Interest(pa) </p>
                                                                            </th>
                                                                            <th>
                                                                                <p> Total cost </p>
                                                                            </th>
                                                                        </tr>
                                                                        @foreach ($emiDatas as $emiDataValue2)
                                                                                                                                                        <tr>
                                                                                <td class="text-center nowrap">
                                                                                    <span>₹{{round((@$emiDataValue2->monthly_installment / 100))}}</span>
                                                                                    <span>x {{$emiDataValue2->tenure_in_month}}</span>
                                                                                </td>
                                                                                <td class="text-center nowrap">
                                                                                    <span>₹{{round((@$emiDataValue2->interest_pay_to_bank / 100))}}</span>
                                                                                    <span>({{round((@$emiDataValue2->bank_interest_rate / 10000))}}%)</span>
                                                                                </td>
                                                                                <td class="text-center nowrap">
                                                                                    <span>₹{{round($totalAmount)}}</span>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <p class="fs10">
                                                                    <span class="text-bold">Note: </span>
                                                                    <span>The bank will continue to charge interest on No Cost EMI plans as per existing rates. However, the interest to be charged by the bank will be passed on to you as an upfront discount.</span>
                                                                </p>
                                                                <hr>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    @endforeach
                                @else
                                    <div class="tab">
                                        <input type="checkbox" id="chck12">
                                        <label class="tab-label" for="chck12">
                                            <div id="inemi-bank-icon-grid" class="col-12">
                                                <p id="inemi-bank-name" class="a-size-base a-color-base"> No EMI Plan
                                                    Found </p>
                                            </div>
                                        </label>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="excreddeb">
        <div class="modal-dialog modal-lg">
            <div class="modal-content small">
                <!-- Modal body -->
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="row mt-5">
                        <div class="col-12">
                            <div id="headerEMIDiscountAccordionPDP">
                                <div class="card">
                                    <a class="collapsed card-link text-decoration-none unset-link-color"
                                       data-toggle="collapse" href="#HDFCCardlessEmi">
                                        <div class="card-header">
                                            <b>HDFC Cardless No/Low Cost EMI</b>
                                            <i class="fa fa-caret-down float-right" aria-hidden="true"></i>
                                        </div>
                                    </a>
                                    <div id="HDFCCardlessEmi" class="collapse"
                                         data-parent="#headerEMIDiscountAccordionPDP">
                                        <div class="card-body">
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item">
                                                    This is applicable for HDFC pre-approved loan customers.
                                                </li>
                                                <li class="list-group-item">
                                                    Select HDFC Cardless EMI as Payment Mode on Checkout page.
                                                </li>
                                                <li class="list-group-item">
                                                    EMI Plans & Eligibility can be checked on payment page before making
                                                    the payment.
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <a class="collapsed card-link text-decoration-none unset-link-color"
                                       data-toggle="collapse" href="#EMIZestMoney">
                                        <div class="card-header">
                                            <b>Zest Money Cardless EMI</b>
                                            <i class="fa fa-caret-down float-right" aria-hidden="true"></i>
                                        </div>
                                    </a>
                                    <div id="EMIZestMoney" class="collapse"
                                         data-parent="#headerEMIDiscountAccordionPDP">
                                        <div class="card-body">
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item">
                                                    This is applicable for customers with Zest Money credit limits. To
                                                    get limit visit
                                                    <a href="www.zestmoney.in" target="_blank">www.zestmoney.in</a>
                                                </li>
                                                <li class="list-group-item">
                                                    Select Zest Money as Payment Mode on Checkout page.
                                                </li>
                                                <li class="list-group-item">
                                                    EMI Plans & Eligibility can be checked on payment page before making the payment.
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-center small mt-5">* No-Cost EMI, interest rates, processing fees,
                                downpayment as
                                applicable. T&C Apply</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script defer src="https://cdn.jsdelivr.net/npm/ez-plus-extended@1.0.2/src/jquery.ez-plus.min.js"></script>

    <script type="text/x-template" id="product-view-template">
        <div id="ctm-pdp-page" class="container-fluid">
            @if (isset($product))
                <div id="ctm-product-breadcrum" class="row mb-2">
                    <div class="col-12">
                        {{ Breadcrumbs::render('product', $product) }}
                    </div>
                </div>
            @endif
            <div class="row mt-4">
                <div v-bind:class="[isMobileView ? 'col-12 px-4' : 'col-5 px-5']">
                    <div style="position: sticky; top: 100px">
                        <div class="col-12 media-block">
                            <magnify-image
                                :src="`${currentLargeImageUrl}`"
                                :alt="`${currentAltName}`"
                                v-if="!isMobile() && !isVideo"
                            ></magnify-image>
                            <img
                                height="100%"
                                width="100%"
                                v-if="isMobile() && !isVideo"
                                class="vc-small-product-image"
                                alt="{{$product->name}}_active"
                                :src="`${currentLargeImageUrl}`"/>
                            <video style="max-width: 100%;max-height: 300px;" controls v-if="isVideo" autoplay
                                   poster="{{@$product->getGalleryImages()[0]['large_image_url']}}">
                                <source :src="videoUrl" type="video/mp4">
                                <p>Your browser doesn't support HTML video. Here is a <a :href="videoUrl">link to the
                                        video</a> instead.</p>
                            </video>
                        </div>

                        <div class="col-sm-12">
                            <carousel-component
                                loop="true"
                                timeout="9000"
                                autoplay="false"
                                slides-per-page="4"
                                :id="`product-gallery-carousel`"
                                pagination-enabled="false"
                                navigation-enabled="true"
                                :slides-count="`${images.length}`">
                                @foreach ($product->getGalleryImages() as $index => $thumb)
                                    <slide slot="slide-{{ $index }}">
                                        <li style="list-style-type: none;" @click="changeImage({
                                            largeImageUrl: '{{ $thumb['large_image_url'] }}',
                                            originalImageUrl: '{{ $thumb['original_image_url'] }}',
                                            })"
                                            :class="[
                                                'thumb-frame',
                                                '{{ $index + 1 == 8  ? "" : "mr5"}}',
                                                '{{ $thumb['large_image_url'] }}' == currentLargeImageUrl ? 'active' : '',
                                                ]"
                                            class="border border-light"
                                        >
                                            <img height="100%" width="100%" alt="{{ $product->name.'_'.($index+1)}}"
                                                 src="{{$thumb['small_image_url']}}">
                                        </li>
                                    </slide>

                                    @if($index === 0 && @$product->video->path)
                                                                                <slide slot="slide-{{ $index }}">
                                            <li style="list-style-type: none;" @click="renderVideo()"
                                                :class="[
                                                    'thumb-frame',
                                                    '{{ $index + 1 == 8  ? "" : "mr5"}}',
                                                    isVideo ? 'active' : '',
                                                    ]"
                                                class="border border-light"
                                            >
                                                <img height="100%" width="100%" alt="video-thumb"
                                                     src="{{asset('storage/icons/videoThumbnail.jpg')}}">
                                            </li>
                                        </slide>
                                    @endif
                                @endforeach
                            </carousel-component>
                        </div>
                    </div>
                </div>
                <div class="mt-3" v-bind:class="[isMobileView ? 'col-12' : 'col-6']">
                    <div class="col-12">
                        <h1 class="lead font-weight-bold fs-16">{{ $product->name }}</h1>
                        <div id="ctm-sold-by-imagine" class="mb-2">
                            <img alt="item-image" height="auto" width="150px"
                                 src="{{asset('/storage/configuration/sold-by-imagine.png')}}" alt="cardImage"/>
                        </div>
                    </div>
                    <div class="col-12 mb-2">{!!$product->priceHtml!!}</div>

                    @if($product->hasCashback())
                        <div class="col-12 fs-14 text-body">
                            <i class="text-success fa fa-check-circle-o" aria-hidden="true"></i>
                            {!!@$product->cashback_pdp_offer??'Cashback Offer'!!}
                            <a data-toggle="modal" data-target="#excash"
                               href="javascript:void(0)">View Offers <i
                                    class="fa fa-angle-down"></i></a>
                        </div>
                    @endif
                    @if(@$product->No_Cost_EMI && (round(@$emiData['lowestnocost']) > 0))
                        <div class="col-12  fs-14 text-body">
                            <i class="text-success fa fa-check-circle-o" aria-hidden="true"></i> No Cost EMI
                            starts at ₹{{round(@$emiData['lowestnocost'])}}
                            <a data-toggle="modal" data-target="#ex1" href="javascript:void(0)">
                                View Plans <i class="fa fa-angle-down"></i></a>
                        </div>
                    @endif
                    @if(@$product->Standard_EMI_CC && (round(@$emiData['lowestStandard']) > 0))
                        <div class="col-12  fs-14 text-body">
                            <i class="text-success fa fa-check-circle-o" aria-hidden="true"></i> Standard EMI
                            starts at ₹{{round(@$emiData['lowestStandard'])}} <a
                                data-toggle="modal"
                                data-target="#ex5"
                                href="javascript:void(0)">
                                View
                                Plans <i class="fa fa-angle-down"></i></a>
                        </div>
                    @endif
                    @if(@$product->Standard_EMI_DC && (round(@$emiData['lowestDebit']) > 0))
                        <div class="col-12  fs-14 text-body">
                            <i class="text-success fa fa-check-circle-o" aria-hidden="true"></i> Standard EMI
                            on Debit Card starts at ₹{{round(@$emiData['lowestDebit'])}} <a
                                href="#ex6" rel="modal:open"> Know More <i
                                    class="fa fa-angle-down"></i></a>
                        </div>
                    @endif
                    @if(@$product->No_Cost_EMI_Finance && $product->No_Cost_EMI_Finance_Months > 0)
                        <div class="col-12  fs-14 text-body">
                            <i class="text-success fa fa-check-circle-o" aria-hidden="true"></i> Cardless EMI
                            starts at
                            ₹{{ round(@$product->product_final_price / @$product->No_Cost_EMI_Finance_Months) }}
                            <a data-toggle="modal" data-target="#excreddeb"
                               href="javascript:void(0)"> Learn More <i
                                    class="fa fa-angle-down"></i></a>
                        </div>
                    @endif
                    {{--@if(@$product->Exchange)
                        <div class="col-12">
                            @include ('shop::products.view.buyback')
                        </div>
                    @endif--}}
                    <div class="col-12 mt-2 mb-2 border border-top-0 border-basic"></div>

                    @include('ReusableComponents.addonProducts', ['addonProducts' => @$product->getAddonProducts()])

                    <div class="col-12 mt-3 mb-3 text-center ctm-action-btns">
                        @include ('shop::products.add-to-cart', ['product' => $product])

                        @if ( !$product->haveSufficientQuantity() && !$product->associatedCategory->is_pre_register_active )
                            <notify-me-component
                                user="{{json_encode(auth()->guard('customer')->user())}}"
                                product-id="{{$product->id}}"
                                post-route="{{route('customer.notify_me',$product->id)}}"
                                btn-lable="{{  __('shop::app.products.notify-me-btn') }}"
                                input-one-lable="{{ __('shop::app.checkout.onepage.name') }}"
                                input-two-lable="{{ __('shop::app.checkout.onepage.email') }}"
                                input-three-lable="{{ __('shop::app.checkout.onepage.phone') }}"
                            ></notify-me-component>
                        @endif
                    </div>

                    @if( !$product->haveSufficientQuantity() && @$product->associatedCategory->is_preorder_active)
                        <div class="col-12 mt-2 text-center fs-12">
                            {!! @$product->getPreorderDesc() !!}
                        </div>
                    @endif

                    <div class="col-12 mt-2 text-center">
                        <a rel="noopener"
                           href="https://wa.me/919609870000?text=Get%20the%20best%20offers%20only%20at%20www.theimaginestore.com%0A%0AWhich%20Apple%20products%20would%20you%20like%20to%20buy%3F"
                           target="_blank"
                           class="btn btn-outline-success">
                            Have questions? Talk to our Experts <i class="fa fa-whatsapp"></i>
                        </a>
                    </div>

                    <pincode-checker-component :flag="'PDP'"></pincode-checker-component>
                    <div class="col-12 mt-2 mb-2 border border-top-0 border-basic"></div>
                    @if ($product->short_description)
                        <div id="ctm-prod-short-description" class="col-12 small mt-3">
                            {!! $product->short_description !!}
                        </div>
                    @endif
                </div>
            </div>
            <div class="container mb-4 px-0">
                @if(count($product->getRelatedProducts()))
                    @include('shop::products.view.related-products', ['product', $product->getRelatedProducts()])
                @endif
                @if(count($product->getUpSellingProducts()))
                    @include('shop::products.view.up-sells', ['product', $product->getUpSellingProducts()])
                @endif
                @if(count($product->getCrossSellingProducts()))
                    @include('shop::products.view.cross-sells', ['product', $product->getCrossSellingProducts()])
                @endif
            </div>

            <pdp-modals-component></pdp-modals-component>
        </div>
    </script>

    <script>
        Vue.component('product-view', {
            template: '#product-view-template',
            props: [
                'images'
            ],
            data: function () {
                return {
                    isMobileView: this.$root.isMobile(),
                    images: [],
                    currentLargeImageUrl: '',
                    currentOriginalImageUrl: '',
                    currentAltName: "{{$product->name}}_active",
                    isVideo: false,
                    videoUrl: '{{@$product->video->path}}'
                }
            },
            mounted: function () {
            },
            created: function () {
                this.images = JSON.parse(this.images);
                this.changeImage({
                    largeImageUrl: this.images[0]?.large_image_url,
                    originalImageUrl: this.images[0]?.original_image_url,
                })
            },
            methods: {
                changeImage: function ({largeImageUrl, originalImageUrl}) {
                    this.isVideo = false;
                    this.currentLargeImageUrl = largeImageUrl;

                    this.currentOriginalImageUrl = originalImageUrl;

                    this.$root.$emit('changeMagnifiedImage', {
                        smallImageUrl: this.currentOriginalImageUrl
                    });

                    let productImage = $('.vc-small-product-image');
                    if (productImage && productImage[0]) {
                        productImage = productImage[0];

                        productImage.src = this.currentOriginalImageUrl;
                    }
                },
                renderVideo: function () {
                    this.isVideo = true;
                }
            }
        });
    </script>
    {{ Breadcrumbs::view('ReusableComponents.breadcrum-json-ld', 'product', $product) }}
    {{\App\SEOSchema::view('pdpSchema', $product)}}
    @if(@$product->video->path)
        {{\App\SEOSchema::view('videoSchema', $product)}}
    @endif
@endpush