@extends('ecommerce.layouts.index')

@section('headers-scripts')

    @isset($response['product']['meta_data'])
        <meta name="description" content="{{ $response['product']['meta_data']}}">
        <meta property="og:description" content="{{ isset($metaData['en']['about_us']) ? $metaData['en']['about_us']  : ''}}">
        <meta name="twitter:description" content="{{ $response['product']['meta_data']}}">
    @endisset

    <meta property="og:site_name" content="{{ $metaData['en']['title']}}">
    <meta property="og:title" content="{{$response['product']['name'] }}">
    <meta property="og:type" content="product">
    <meta property="og:image:secure_url" content="{{isset($response['images'][0]) ? $response['images'][0] : ''}}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="628">
    <meta name="twitter:site" content="{{ $metaData['en']['title']}} ">
    <meta name="twitter:title" content="{{$response['product']['name'] }}">
    @forEach( $response['currencies'] as $currency )
        <meta property="og:price:currency" content="{{$currency['label']}}">
    @endforEach
    <meta property="og:price:amount" content="{{ number_format($response['product']['price'], 2)}}">

    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Product",
            "name": "{{$response['product']['name'] }}",
            "description": "{{ $response['product']['meta_data']}}",
            "image": "{{isset($response['images'][0]) ? $response['images'][0] : ''}}",
            "offers": {
            "@type": "Offer",
            "price": "{{ number_format($response['product']['price'], 2)}}",
            "priceCurrency": "EGP"}
        }
    </script>

@endsection

@section('title')
    {{ $response['product']['meta_data']}} - {{ $response['category']}}  - {{ $metaData['en']['title']}}
@endsection

<script>
    console.log('response' , @json($response))
</script>

@section('content')
<div class="product-page-wrapper">
    <div class="nav-dekstop">
        @include('ecommerce.components.inner-header' , ['categories' => $response['categories'] , 'url' => $response['url']])
    </div>
    <div class="nav-mobile">
        @include('ecommerce.components.inner-header-mobile' ,  ['categories' => $response['categories'] , 'url' => $response['url']])
    </div>
    <div class="product-page"  id="productBlade" v-cloak>
        <div class="pop-up" v-if="showModal">
            @include('ecommerce.components.productModal')
        </div>
        <div class=" fixed-bar mt-4 p-4">
            <div :class="[contactUsUrl ? 'order-now-mobile' : 'w-100']" >
                <button @click="addSelectedProduct()" class="add-to-cart-mobile"
                :style="{'background-color' : CTAColor , 'border-style' : 'none' }">
                    @{{locale['add_to_cart']}}
                </button>
            </div>
            <div class="contact-icon-contatiner" v-if="contactUsUrl">
                <a :href="contactUsUrl" target="_blank">
                    <svg class="contact-icon" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.0835 15.5417C14.0689 15.5417 15.5619 15.5417 16.489 14.6138C17.4168 13.6868 17.4168 12.1937 17.4168 9.20834C17.4168 6.22296 17.4168 4.72988 16.489 3.80283C15.5619 2.875 14.0689 2.875 11.0835 2.875H7.91683C4.93145 2.875 3.43837 2.875 2.51133 3.80283C1.5835 4.72988 1.5835 6.22296 1.5835 9.20834C1.5835 12.1937 1.5835 13.6868 2.51133 14.6138C3.02829 15.1316 3.721 15.3604 4.75016 15.4609"
                            stroke="rgb(62, 112, 193)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9.5 9.2085V9.60432" stroke="rgb(62, 112, 193)" stroke-width="2" stroke-linecap="round" />
                        <path d="M6.3335 9.2085V9.60432" stroke="rgb(62, 112, 193)" stroke-width="2" stroke-linecap="round" />
                        <path d="M12.667 9.2085V9.60432" stroke="rgb(62, 112, 193)" stroke-width="2" stroke-linecap="round" />
                        <path
                            d="M11.0836 15.5415C10.1051 15.5415 9.0269 15.9373 8.04285 16.448C6.4611 17.2689 5.67023 17.6798 5.28073 17.4178C4.89123 17.1565 4.96485 16.345 5.1129 14.7229L5.14615 14.354"
                            stroke="rgb(62, 112, 193)" stroke-width="2" stroke-linecap="round" />
                    </svg>
                </a>
            </div>
        </div>
        <div class=" arrows-container">
            <button class="thumbnails-arrows" @click="nextImage()">
                <svg  viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg" class="thumbnail-arrow">
                    <path  d="M1 7L7 1L13 7" stroke="#2C2E42" :stroke-opacity=" endIndex < response.images.length-1 ? 1 : 0.3 " stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    </path>
                </svg>
            </button>
        </div>
        <div class="displays-section mt-2">
            <div class="product-card dynamic-width" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
                <div class="thumbnails-container">
                    <div>
                        <div v-for="(image, index) in response.images" :key="index">
                            <div class="thumbnail-container" v-if="index >= startIndex && index <= endIndex">
                                <img
                                class="thumbnail"
                                :src="image"
                                :alt="image"
                                @click="selectedImage = image "
                                @load="thumbnailLoaded(index)"
                                v-on:error="thumbnailLoaded(index)"
                                :id="'img-thumbnail'+index"
                                />
                                <div class="skeleton-thumbnail" v-if="thumbnailLoader"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-card-image">
                    <img
                        class="img-preview"
                        :src="!selectedImage ? response.images[currentImageIndex] : selectedImage"
                        :alt="response.product.name"
                        v-if="response.images.length"
                        @click=" selectedImagePopup = response.images[currentImageIndex]  ,showModal = true"
                        @load="productImageLoaded"
                        v-on:error="productImageLoaded"
                        id="productImage"
                        />
                    <span class="skeleton-image" v-if="imageLoader"></span>
                </div>
            </div>
            <div class="pagination mx-auto">
                <span class="pagination-bullet"
                :class="index === currentImageIndex ? 'active-bullet' : 'disabled-bullet'"
                v-for=" (pagination , index) in response.images "></span>
            </div>
            <div class="dynamic-width product-data">
                <div class="skeleton-text w-25" v-if="localLoader"></div>
                <div class="product-description">@{{ locale[@json($response['product']['name'])]}}</div>
                <div class="product-price mt-1" v-if="!isEmptyObject(selectedAttrs) && !localLoader">
                    <span v-if="selectedAttrs.discount.is_valid">
                        @{{ globalCurrencyConversion(parseFloat(selectedAttrs.discount.amount).toFixed(2)) }} &nbsp;@{{locale['egp']}}
                        <span class="product-discount">
                            @{{ globalCurrencyConversion(parseFloat(selectedAttrs.price).toFixed(2)) }} &nbsp;@{{locale['egp']}}
                        </span>
                    </span>
                    <span v-else>
                        @{{ globalCurrencyConversion(parseFloat(selectedAttrs.price).toFixed(2)) }} &nbsp;@{{locale['egp']}}
                    </span>
                </div>
                <div class="product-price mt-1" v-else>
                    <div v-if="!localLoader">
                        <span v-if="response.product.discount.is_valid">
                            @{{ globalCurrencyConversion(parseFloat(response.product.discount.amount).toFixed(2)) }} &nbsp;@{{locale['egp']}}
                            <span class="product-discount">
                                @{{ globalCurrencyConversion(parseFloat(response.product.price).toFixed(2)) }} &nbsp;@{{locale['egp']}}
                            </span>
                        </span>
                        <span v-else>
                            @{{ globalCurrencyConversion(parseFloat(response.product.price).toFixed(2)) }} &nbsp;@{{locale['egp']}}
                        </span>
                    </div>
                </div >
                <div class="stock-status">
                    <div class="skeleton-text w-25" v-if="localLoader"></div>
                    <span class="availability" v-else>@{{locale['availability']}} &nbsp; : </span>&nbsp;
                    <span class="in-stock" v-if="checkStock">@{{locale['in_stock']}}</span>
                    <span class="out-of-stock"
                    :class="outOfStockAnimation ? 'out-of-stock-animation' : ''"
                    v-else>@{{locale['out_of_stock']}}</span>
                </div>
                @if($response['product']['variance_type'] == 3 )
                <div class="d-flex justify-content-start flex-column" v-if="!localLoader">
                        <div class="variances-section " :key="variancesKey">
                            <div class="mb-1 mt-1 d-flex justify-content-start">@{{attributes[0]}} :</div>
                            <div class=" options-container">
                            <button
                                v-for="(group ,index) in groups"
                                :key="index"
                                class="attr mt-1"
                                @click="
                                resetErrors(),
                                firstSelected = true,
                                selectedGroup = group,
                                variancesKey = variancesKey +1,
                                secondSelected = false,
                                thirdSelected = false,
                                selectedSecond = null,
                                selectedThird = null,
                                createSecondAttribute(group),
                                selectedAttributes(group),
                                checkVarianceStock()
                                "
                                :disabled="disabledFirsts.includes(group)"
                                :style=" (selectedGroup === group && !disabledFirsts.includes(group)) ? {'color' : CTAColor , 'border' : '2px solid' + CTAColor} : {'border' : ' 2px solid #d0d0d0'}">
                                @{{group}}
                            </button>
                            </div>
                            <div class="mb-1 mt-1 d-flex justify-content-start" v-if="secondGroup.length">@{{attributes[1]}} :</div>
                            <div class=" options-container">
                            <button v-for="(second ,index) in secondGroup" :key="index"
                            class="attr mt-1"
                            @click="
                            resetErrors(),
                            secondSelected = true,
                            selectedThird = null,
                            thirdSelected = false,
                            selectedSecond = second,
                            createThirdAttr(second, selectedGroup),
                            selectedAttributes(second),
                            checkVarianceStock()
                            "
                            :disabled="disabledSeconds.includes(second)"
                            :style=" (selectedSecond === second && !disabledSeconds.includes(second) ) ? {'color' : CTAColor , 'border' : '2px solid' + CTAColor} : {'border' : '2px solid #d0d0d0'}">@{{second}}</button>
                            </div>
                            <div class="mb-1 mt-1 d-flex justify-content-start" v-if="thirdGroup.length">@{{attributes[2]}} :</div>
                            <div class=" options-container">
                            <button class="attr mt-1" v-for="(third ,index) in thirdGroup" :key="index"
                            @click="
                            resetErrors(),
                            selectedThird = third,
                            thirdSelected = true,
                            selectedAttributes(third),
                            checkVarianceStock()
                            "
                            :disabled="disabledThirds.includes(third)"
                            :style=" (selectedThird === third && !disabledThirds.includes(third) ) ? {'color' : CTAColor , 'border' : '2px solid' + CTAColor} : {'border' : '2px solid #d0d0d0'}">@{{third}}</button>
                            </div>
                        </div>
                </div>
                <div v-else>
                    <div class="skeleton-boxes-container">
                        <div class="skeleton-box" v-for="box in 1" :key="box"></div>
                    </div>
                    <div class="skeleton-text w-25"></div>
                    <div class="skeleton-boxes-container">
                        <div class="skeleton-box" v-for="box in 2" :key="box"></div>
                    </div>
                    <div class="skeleton-text w-25"></div>
                    <div class="skeleton-boxes-container">
                        <div class="skeleton-box" v-for="box in 3" :key="box"></div>
                    </div>
                </div>
                @endif
                @if($response['product'] && $response['product']['apply_to_ecommerce'] == 1 && $response['product']['active'] == 1)
                <div class="mt-2 d-flex justify-content-start">@{{locale['quantity']}} : </div>
                        <div class="mt-1 options-container">
                        <button class="qty-btn"
                        :disabled=" selectedQuantity == 1"
                        @click=" decrement() "> - </button>
                        <span class="selected-qty"> @{{selectedQuantity}} </span>
                        <button class="qty-btn"
                        @click=" increment() "
                        > + </button>
                        </div>
                        <div class="error mt-1 d-flex justify-content-start" v-if="error.options"> *@{{locale['please_select_option']}}</div>
                        <div class="error mt-1 d-flex justify-content-start" v-if="error.sold_out"> @{{locale['product_is_sold_out']}}</div>
                    <div class="d-flex justify-content-start mt-3">
                        <button class="add-to-cart-btn p-2" @click="addSelectedProduct()"
                                :style="{'border' : '1px solid' + CTAColor , 'color' : CTAColor}">@{{locale['add_to_cart']}}</button>
                        <button class="buy-now-btn p-2" @click="addSelectedProduct(1)"
                                :style="[ !isMobile ? {'background-color' : CTAColor } :  {'border' : '1px solid' + CTAColor , 'color' : CTAColor}] ">@{{locale['buy_now']}}</button>
                    </div>
                @endif
                <div class="d-flex justify-content-start mt-2">
                    <span class="share-text">@{{locale['share']}}  </span>
                    <span class="d-flex justify-content-start">
                        <svg class="social-media-icon mx-1" viewBox="0 0 25 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M17.8002 14.4323L16.7932 13.4254C16.5185 13.1507 16.1388 13.013 15.7522 13.0478C15.3653 13.0825 15.0164 13.2854 14.795 13.6045L14.4442 14.11C13.9672 14.025 13.0444 13.7845 12.3994 13.1394C11.7541 12.4941 11.5136 11.5709 11.4288 11.0946L11.9344 10.7438C12.2535 10.5223 12.4565 10.1734 12.4911 9.78649C12.5258 9.39959 12.3881 9.02018 12.1135 8.74557L11.1065 7.73865C10.7019 7.33404 10.092 7.23748 9.58881 7.49821C8.7065 7.95533 8.12693 8.81218 7.95667 9.91092C7.67935 11.701 8.50693 13.8129 10.1164 15.4224C11.5201 16.8261 13.3058 17.635 14.927 17.635C15.1648 17.635 15.399 17.6176 15.6278 17.5822C16.7267 17.412 17.5835 16.8323 18.0406 15.9501C18.0406 15.9501 18.0406 15.9501 18.0406 15.9501C18.3013 15.4468 18.2047 14.8369 17.8002 14.4323ZM17.0161 15.4192C16.6528 16.1204 15.9646 16.3623 15.4512 16.4419C14.0398 16.6604 12.266 15.9401 10.9323 14.6065C9.59868 13.2728 8.87824 11.4991 9.09689 10.0876C9.17638 9.57419 9.41841 8.88603 10.1196 8.52273C10.1386 8.51293 10.1596 8.50815 10.1809 8.50815C10.22 8.50815 10.2603 8.52429 10.2906 8.55453L11.2975 9.5615C11.3393 9.60339 11.3447 9.65097 11.3417 9.68351C11.3388 9.71609 11.3252 9.76196 11.2765 9.79573L10.4811 10.3476C10.3148 10.463 10.2211 10.6573 10.2343 10.8593C10.2393 10.9356 10.3706 12.7424 11.5834 13.9552C12.7963 15.1682 14.6031 15.2995 14.6794 15.3044C14.8813 15.3174 15.0757 15.2239 15.1911 15.0576L15.743 14.2622C15.7767 14.2136 15.8226 14.1999 15.8552 14.197C15.8878 14.194 15.9353 14.1994 15.9773 14.2412L16.9842 15.2481C17.031 15.2949 17.0441 15.3653 17.0161 15.4192Z"
                            fill="#2C2E42" fill-opacity="0.6" stroke="#2C2E42" stroke-opacity="0.6"
                            stroke-width="0.3" />
                        <path
                            d="M19.7679 5.78261C17.9735 3.98819 15.5878 3 13.0501 3C10.5125 3 8.12677 3.98819 6.33239 5.78257C4.8073 7.30766 3.83912 9.32607 3.60607 11.466C3.38575 13.489 3.82543 15.5482 4.84549 17.2937L3.85549 20.9884C3.80212 21.1875 3.85905 21.3999 4.00485 21.5457C4.15058 21.6914 4.3631 21.7484 4.56208 21.695L8.25677 20.7051C9.70789 21.5531 11.3759 22 13.0596 22C13.4011 22 13.7433 21.9816 14.0845 21.9444C16.2244 21.7114 18.2429 20.7432 19.7679 19.2181C21.5623 17.4237 22.5505 15.038 22.5505 12.5004C22.5505 9.96276 21.5623 7.577 19.7679 5.78261ZM18.952 18.4022C16.1936 21.1605 11.9569 21.6507 8.64905 19.5943C8.55672 19.5369 8.45107 19.5073 8.34438 19.5073C8.29444 19.5073 8.24426 19.5138 8.19509 19.527L5.22868 20.3218L6.02356 17.3555C6.06483 17.2014 6.04045 17.037 5.95625 16.9015C3.89976 13.5936 4.38997 9.35684 7.14827 6.5985C10.4026 3.34423 15.6977 3.34423 18.952 6.5985C22.2063 9.85277 22.2063 15.1479 18.952 18.4022Z"
                            fill="#2C2E42" fill-opacity="0.6" stroke="#2C2E42" stroke-opacity="0.6"
                            stroke-width="0.3" />
                        </svg>
                        <svg class="social-media-icon mx-1" viewBox="0 0 25 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M19.5664 6.65406V6.65606V6.65406ZM9.06341 17.9971C9.08741 17.9971 9.11341 17.9981 9.13741 18.0001C14.8324 17.9631 18.2314 13.6121 18.2314 9.40606C18.2314 9.02406 18.4274 8.77706 18.6014 8.55806C18.7594 8.35806 19.0044 8.05006 19.2224 7.60606C18.4294 7.59806 17.7214 7.24606 17.3094 6.76406C16.8784 6.30306 16.2594 6.02106 15.5914 6.00106C14.9474 5.97506 14.2904 6.22306 13.8024 6.68606C13.1524 7.30306 12.8744 8.23406 13.0764 9.11406L13.3374 10.2531L12.1714 10.3351C9.15541 10.5611 7.06541 9.27006 5.63041 7.93406C5.63641 9.95406 6.30741 12.6491 9.35741 14.3871L10.3154 14.9331L9.67841 15.8341C9.01541 16.7731 8.01741 17.3721 7.00141 17.7551C7.67241 17.9151 8.36241 17.9971 9.05041 17.9971H9.06241H9.06341ZM9.06341 20.0001C9.03741 20.0001 9.00941 19.9991 8.98341 19.9971C7.38041 19.9861 5.77241 19.6131 4.32841 18.9141C3.78541 18.6501 3.47841 18.0721 3.56541 17.4721C3.65341 16.8651 4.11941 16.3891 4.72341 16.2911C5.76841 16.1191 6.63541 15.8131 7.26341 15.4041C3.38641 12.5051 3.48841 8.16506 3.73941 6.32706C3.81341 5.78906 4.19641 5.34006 4.71441 5.18306C5.24041 5.02306 5.78541 5.18306 6.14541 5.59206C7.68141 7.33306 9.21641 8.20806 11.0164 8.34106C11.0684 7.17606 11.5644 6.05306 12.4254 5.23506C13.3024 4.40206 14.4494 3.96606 15.6534 4.00206C16.8584 4.03906 17.9764 4.54706 18.8004 5.43206C18.8844 5.52806 19.1984 5.70206 19.5774 5.53206C20.0744 5.30906 20.6394 5.38306 21.0514 5.72706C21.4624 6.06806 21.6374 6.60506 21.5094 7.12806C21.1864 8.45906 20.5484 9.31706 20.2264 9.72806C20.0584 14.8331 15.9104 20.0001 9.06341 20.0001Z"
                        fill="#2C2E42" fill-opacity="0.6" />
                        </svg>
                        <svg class="social-media-icon mx-1" viewBox="0 0 25 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M10.5508 20H12.5508V13.8C12.5508 13.247 12.9978 12.8 13.5508 12.8H15.7908L16.2358 11.2H13.5508C12.9978 11.2 12.5508 10.753 12.5508 10.2V7.5C12.5508 6.452 13.4478 5.6 14.5508 5.6H16.5508V4H14.5508C12.3448 4 10.5508 5.57 10.5508 7.5V10.2C10.5508 10.753 10.1038 11.2 9.55078 11.2H7.55078V12.8H9.55078C10.1038 12.8 10.5508 13.247 10.5508 13.8V20ZM13.5508 22H9.55078C8.99778 22 8.55078 21.553 8.55078 21V14.8H6.55078C5.99778 14.8 5.55078 14.353 5.55078 13.8V10.2C5.55078 9.647 5.99778 9.2 6.55078 9.2H8.55078V7.5C8.55078 4.468 11.2418 2 14.5508 2H17.5508C18.1038 2 18.5508 2.447 18.5508 3V6.6C18.5508 7.152 18.1038 7.6 17.5508 7.6H14.5508V9.2H17.5508C17.8628 9.2 18.1578 9.347 18.3468 9.595C18.5358 9.844 18.5978 10.167 18.5148 10.468L17.5148 14.067C17.3948 14.5 16.9998 14.8 16.5508 14.8H14.5508V21C14.5508 21.553 14.1038 22 13.5508 22Z"
                            fill="#2C2E42" fill-opacity="0.6" />
                        </svg>
                        <svg class="social-media-icon mx-1" viewBox="0 0 25 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M9.55093 16H7.76093C5.65493 16 3.75493 14.465 3.56793 12.366C3.35493 9.996 5.22393 8 7.55093 8H9.55093C10.1029 8 10.5509 7.553 10.5509 7C10.5509 6.447 10.1029 6 9.55093 6H7.75993C4.71093 6 1.98993 8.187 1.60193 11.211C1.13293 14.869 3.98293 18 7.55093 18H9.55093C10.1029 18 10.5509 17.553 10.5509 17C10.5509 16.447 10.1029 16 9.55093 16ZM8.55093 12C8.55093 12.553 8.99893 13 9.55093 13H15.5509C16.1029 13 16.5509 12.553 16.5509 12C16.5509 11.447 16.1029 11 15.5509 11H9.55093C8.99893 11 8.55093 11.447 8.55093 12ZM17.31 6.0002C20.377 6.0002 23.129 8.1972 23.504 11.2422C23.953 14.8882 21.109 18.0002 17.551 18.0002H15.551C14.999 18.0002 14.551 17.5532 14.551 17.0002C14.551 16.4472 14.999 16.0002 15.551 16.0002H17.551C19.878 16.0002 21.747 14.0042 21.534 11.6342C21.347 9.5352 19.447 8.0002 17.34 8.0002H15.551C14.999 8.0002 14.551 7.5532 14.551 7.0002C14.551 6.4472 14.994 6.0002 15.8 6.0002H17.31Z"
                            fill="#2C2E42" fill-opacity="0.6" />
                        </svg>
                    </span>
                </div>
            </div>
        </div>
        <div class=" arrows-container">
            <button  class="thumbnails-arrows mt-2" @click="prevImage()">
                <svg  viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg" class="thumbnail-arrow">
                    <path data-v-aa660598="" d="M1 1L7 7L13 1" stroke="#2C2E42" stroke-width="2" :stroke-opacity="startIndex !== 0 ? 1 : 0.3" stroke-linecap="round" stroke-linejoin="round">
                    </path>
                </svg>
            </button>
        </div>
        <div class="mb-5 mt-5 product-info">
            <div class="description-container">
                <span class="info-des" @click="isSelected = 'descreption'"
                    :style="[isSelected == 'descreption' ?
                    {'color' : CTAColor,'border-bottom' : '2px solid' + CTAColor
                    } : '']">
                    @{{locale['description']}}
                </span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span class="info-des" @click="isSelected = 'Information'"
                    :style="[isSelected == 'Information' ? {'color' : CTAColor,'border-bottom' : '2px solid' + CTAColor
                } : '']">
                    @{{locale['information']}}
                </span>
            </div>
            <div   v-show="isSelected == 'descreption'">
                <div class="mt-3 text-muted"
                    v-html=" locale[response.product.long_description]">
                </div>
            </div>
            <div class="mt-3 " v-show="isSelected == 'Information'">
                <div class="options-container" v-if="groups.length">
                    <span class="info-attr" v-if="attributes[0]">@{{ attributes[0]}} : </span>
                    <span class="attr-value" v-for="(v, index) in groups" :key="index">
                        @{{ v }}
                        <span v-if="index < groups.length - 1">, </span>
                    </span>
                </div>
                <div class="options-container" v-if="secondGroup.length">
                    <span class="info-attr" v-if="attributes[1]">@{{ attributes[1] }} : </span>
                    <span class="attr-value" v-for="(v, index) in secondGroup" :key="index">
                        @{{ v }}
                        <span v-if="index < secondGroup.length - 1">, </span>
                    </span>
                </div>
                <div class="options-container" v-if="thirdGroup.length">
                    <span class="info-attr" v-if="attributes[2]">@{{ attributes[2] }}: </span>
                    <span class="attr-value" v-for="(v, index) in thirdGroup" :key="index">
                        @{{ v }}
                        <span v-if="index < thirdGroup.length - 1">, </span>
                    </span>
                </div>
                <div class="options-container">
                    <span class="info-attr"> @{{locale['description']}} : </span>
                    <span class="attr-value ml-2"
                        v-html="locale[response['product']['meta_data']]"></span>
                </div>
            </div>
        </div>
        <div class="related-products-wrapper">
            <div class="d-flex justify-content-start">
                <h5 class="mb-5">@{{locale['related_products']}}</h5>
            </div>
            <div class=" swiper-container lg-container-height product-swiper-container">
                @include('ecommerce.components.swiper-wrapper')
            </div>
        </div>
    </div>
    @include('ecommerce.components.footer' , ['categories' => $response['categories'] , 'url' => $response['url'], 'footerScripts' => $footerScripts])
</div>

@endsection

@section('scripts')

    <script>
        const productInstance = Vue.createApp({
            data() {
                return {
                    selectedImage :null,
                    selectedImagePopup : null,
                    contactUsUrl : null,
                    isSelected : 'descreption',
                    response: @json($response) ,
                    startIndex : 0,
                    endIndex : 3 ,
                    selectedQuantity : 1 ,
                    selectedGroup : null,
                    selectedSecond : null,
                    selectedThird : null,
                    firstSelected : false,
                    secondSelected : false,
                    thirdSelected : false,
                    groups : [],
                    secondGroup : [],
                    thirdGroup  :[],
                    variancesKey : 1 ,
                    selectedAttrs  : {},
                    error: {
                        sold_out: false,
                        options: false,
                        second_option: false,
                        third_option: false
                    },
                    defaultWarehouseID : 1,
                    currentImageIndex: 0,
                    touchStartX: null,
                    isMobile: window.innerWidth > 700 ? false : true,
                    locale : {},
                    language : localStorage.getItem('lang'),
                    CTAColor:localStorage.getItem('coloring') ? JSON.parse(localStorage.getItem('coloring') || '[]').CTAButtons : '#000',
                    activeSection : {
                        'color' : this.CTAColor,
                        'border-bottom' : '2px solid' + this.CTAColor
                    },
                    showModal  : false,
                    zoomLevel: 1,
                    isAppReady: false,
                    category : {},
                    swipers : [],
                    localLoader : true,
                    imageLoader : true,
                    thumbnailLoader : true,
                    productImgLoaded : false,
                    outOfStockAnimation : false,
                    variancesWithNoStock : [],
                    disabledFirsts : [],
                    disabledSeconds : [],
                    disabledThirds : [],
                    simpleQuantity : null
                };
            },
            created(){
                this.getProductCategory()
                this.getDefaultWarehouseId()
                this.getContactUs()
                this.getTranslations()
                document.addEventListener('click' , this.outFocus)
            },
            mounted(){
                this.isAppReady = false
                this.createSwiperInstance()
                window.addEventListener('keydown', this.handleKeyDown);
                this.response.images.forEach((img,index) =>{
                    this.toggleProductImage('img-thumbnail'+index , this.thumbnailLoader)
                })
                this.toggleProductImage('productImage' , this.imageLoader)
                this.createViewContentEvent()

            },
            destroyed(){
                document.removeEventListener('click' , this.outFocus)
                },
            computed :{
                checkStock(){
                    if(this.isEmptyObject(this.selectedAttrs)) {
                        return this.response.variances[0].quantity.some(qty => {
                            return qty.location_id == this.defaultWarehouseID && qty.quantity > 0;
                        });
                    }
                    else{
                        if(this.selectedAttrs.quantity > 0) return true
                    }
                },
                attributes(){
                    let attributes = []
                    this.response.variances.forEach(variance => {
                        if (!attributes.includes(variance.first_attribute)) {
                            attributes.push(variance.first_attribute)
                        }
                        if (!attributes.includes(variance.second_attribute)) {
                            attributes.push(variance.second_attribute)
                        }
                        if (!attributes.includes(variance.third_attribute)) {
                            attributes.push(variance.third_attribute)
                        }
                    })
                    return attributes
                }
            },
            methods: {
                createAtToCartEvent(productDetails){
                    fbq('track', 'AddToCart' , productDetails);
                },
                createViewContentEvent(){
                    if (typeof fbq === 'function') {
                        fbq('track', 'ViewContent', {
                           content_name: this.response.product.name,
                           content_ids: [this.response.product.id],
                           content_type: 'product',
                       });
                    }
                },
                checkVarianceStock(){
                    let hasThirdAttr = this.response.variances[0].third_attribute ? true : false
                    let hasSecondAttr = this.response.variances[0].second_attribute ? true : false

                    this.disabledSeconds = []
                    this.disabledFirsts = []
                    this.disabledThirds = []

                    if(hasThirdAttr){
                        if(this.thirdGroup.length){
                            this.thirdGroup.forEach(third=>{
                            let obj = { group : this.selectedGroup , second : this.selectedSecond , third}
                                for (const item of this.variancesWithNoStock) {
                                    if(this.shallowEqual(obj , item)) {
                                        this.disabledThirds.push(third)
                                    }
                                }
                            })
                            if(this.disabledThirds.length === this.thirdGroup.length){
                                this.disabledSeconds.push(this.selectedSecond)
                                if(this.disabledSeconds.length === this.secondGroup.length) this.disabledFirsts.push(this.selectedGroup)
                            }
                        }
                    }
                    else if(hasSecondAttr){
                        if(this.secondGroup.length){
                            this.secondGroup.forEach(second=>{
                            let obj = { group : this.selectedGroup , second , third : null}
                                for (const item of this.variancesWithNoStock) {
                                    if(this.shallowEqual(obj , item)) {
                                        if(!this.disabledSeconds.includes(second)) this.disabledSeconds.push(second)
                                    }
                                }
                            })
                            if(this.disabledSeconds.length === this.secondGroup.length) this.disabledFirsts.push(this.selectedGroup)
                        }
                    }
                else{
                    this.groups.forEach(group=>{
                        let obj = { group : group , second : null , third : null}
                            for (const item of this.variancesWithNoStock) {
                                if(this.shallowEqual(obj , item)) {
                                    if(!this.disabledFirsts.includes(group)) this.disabledFirsts.push(group)
                                }
                            }
                    })
                }

                },
                getVarianceWithZeroStock(){
                    this.response.variances.forEach(v=>{
                        v.quantity.forEach( qty => {
                        if( qty.location_id == this.defaultWarehouseID ){
                            if(qty.quantity < 1) this.variancesWithNoStock.push({
                                group : v.first_attribute_value,
                                second : v.second_attribute_value,
                                third : v.third_attribute_value
                            })
                        }
                        })
                    })
                },
                shallowEqual(obj1, obj2) {
                    const keys1 = Object.keys(obj1);
                    const keys2 = Object.keys(obj2);

                    if (keys1.length !== keys2.length) {
                        return false;
                    }

                    for (let key of keys1) {
                        if (!obj2.hasOwnProperty(key) || obj1[key] !== obj2[key]) {
                            return false;
                        }
                    }

                    return true;
                },
                getDefaultWarehouseId(){
                    axios.get('/api/default-warehouse').then(res=>{
                        this.defaultWarehouseID = res.data.data.id
                        this.checkSimpleQty()
                        this.getVarianceWithZeroStock()
                        if(this.response.product.variance_type === 3) {
                            this.createGroup()
                        }
                    }).catch(err=>{
                        console.log('err' , err)
                    })
                },
                checkStockLogic(){
                    if(this.isEmptyObject(this.selectedAttrs)) {
                        return this.response.variances[0].quantity.some(qty => {
                            return qty.location_id == this.defaultWarehouseID && qty.quantity > 0;
                        });
                    }
                    else{
                        if(this.selectedAttrs.quantity> 0) return true
                    }
                },
                showImg(imgId , skeletonId){
                    const img = document.getElementById(imgId)
                    img.style.display = 'block'
                    const loader = document.getElementById(skeletonId)
                    loader.style.display = 'none'
                },
                productImageLoaded(){
                    this.imageLoader = false
                    this.toggleProductImage('productImage' , this.imageLoader)
                },
                thumbnailLoaded(index , loader){
                    this.thumbnailLoader = false
                    this.toggleProductImage('img-thumbnail'+index , this.thumbnailLoader)
                },
                toggleProductImage(element , loader){
                        const img = document.getElementById(element)
                        if(img){
                            if(loader) img.style.display = 'none'
                        else img.style.display = ''
                        }
                },
                getProductCategory(){
                    let id = this.response.product.category_id
                    axios.get(`/api/swiper-category/${id}`).then(res => {
                        this.category = res.data.data
                        this.$nextTick(() => {
                            this.createSwiperInstance()
                        });
                    }).catch(err =>{
                        console.log('err' , err)
                    })
                },
                productLink(id){
                var path = window.location.href;
                var pathParts = path.split('/');
                var link = pathParts[0]+'//'+ pathParts[2]+'/product/'+ id
                return link
                },
                createSwiperInstance(){
                const swiperInstance = new Swiper('.product-swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    breakpoints: {
                        1200: {
                            slidesPerView: 5,
                            spaceBetween: 10,
                        },
                        1053: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                        500: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        52: {
                            slidesPerView: 2,
                            spaceBetween: 10,
                        },
                    },
                })
                this.swipers.push(swiperInstance);
                },
                outFocus(e){
                    let body = this.$refs.backdrop
                    let target = e.target
                    if(target == body){
                        this.showModal = false
                        this.zoomLevel = 1
                    }
                },
                emitEvent() {
                    window.eventBus.emit('custom-event', 'Data from Component A');
                },
                handleKeyDown(event) {
                    if (event.key === '+' || event.key === 'Add') {
                        this.zoomIn();
                    } else if (event.key === '-' || event.key === 'Subtract') {
                        this.zoomOut();
                    }
                },
                zoomIn() {
                    this.zoomLevel += 0.1;
                },
                zoomOut() {
                    if (this.zoomLevel > 1) {
                        this.zoomLevel -= 0.1;
                    }
                },
                getContactUs() {
                    axios.get('/api/settings/contact-us').then(res => {
                        this.contactUsUrl = res.data.data.url
                    })
                },
                getTranslations(){
                    if(!localStorage.getItem('lang')) this.language = 'en'
                    axios.get('/api/translation').then(res=>{
                        this.locale = this.language === 'en' ? res.data.data.en : res.data.data.ar
                        Object.assign(this.locale, this.localTranslationKeys())
                        this.localLoader = false
                    }).catch(err=>{
                        console.log('err' , err)
                    })
                },
                localTranslationKeys(){
                    if(this.language === 'en' )
                    return { 'in_stock' : 'In stock' ,
                            'availability' : 'Availability' ,
                            'out_of_stock' : 'Out of stock' ,
                            'quantity' :'Quantity' ,
                            'add_to_cart' :'ADD TO CART' ,
                            'buy_now' :'BUY NOW',
                            'please_select_option' : 'Please select option',
                            'product_is_sold_out' : 'Product is sold out',
                            'share' : 'Share' ,
                            'description' : 'Description',
                            'information' : 'Information',
                            'related_products' : 'Related products',
                            'egp' :"EGP"
                        }
                    else return { 'in_stock' : 'متاح' ,
                            'availability' : 'التوفر' ,
                            'out_of_stock' : 'غير متاح' ,
                            'quantity' :'الكمية' ,
                            'add_to_cart' :'أضافة الي عربة التسوق' ,
                            'buy_now' :'اشتر الآن',
                            'please_select_option' : 'برجاء تحديد اختيار',
                            'product_is_sold_out' : 'المنتج غير متاح',
                            'share' : 'مشاركة' ,
                            'description' : 'الوصف ',
                            'information' : 'المعلومات',
                            'related_products' : 'منتجات متعلقة',
                            'egp' : 'جنيه'
                        }
                },
                globalCurrencyConversion(price){
                if(localStorage.getItem('currency_exchange_rate')){
                    return price * localStorage.getItem('currency_exchange_rate');
                    // if (localStorage.getItem('label')){
                    //     this.globalSetCurrency(localStorage.getItem('label'))
                    // }else{
                    //     this.globalGetDefaultCurrency()
                    // }
                }else{
                    this.globalGetDefaultCurrency(price)
                }
                },
                globalGetDefaultCurrency(price){
                    let lang = localStorage.getItem('lang');

                    axios.get(`/api/default-currency/${lang}`).then( res => {
                        localStorage.setItem('currency_name', res.data.data.currency_name)
                        localStorage.setItem('currency_symbol', res.data.data.currency_symbol)
                        localStorage.setItem('currency_exchange_rate', res.data.data.currency_exchange_rate)
                        localStorage.setItem('currency_label', res.data.data.currency_label)
                        return price * localStorage.getItem('currency_exchange_rate');
                    })
                },
                getGlobalCurrencySymbol() {
                    if (localStorage.getItem('currency_symbol')) {
                        return localStorage.getItem('currency_symbol')
                        // this.globalGetDefaultCurrency()
                    }
                },
                redirect(){
                    var path = window.location.href;
                    var pathParts = path.split('/');
                    const cartURL = pathParts[0]+'//'+ pathParts[2] + '/cart'
                    window.location.href = cartURL
                },
                CSRF(){
                    var csrfToken = $('meta[name="csrf-token"]').attr('content');
                    return csrfToken
                },
                globalGetCartKey() {
                    return localStorage.getItem('key')
                },
                globalSetCartKey(key) {
                    localStorage.setItem('key', key)
                },
                globalSetCart(cart) {
                    localStorage.setItem('cart', JSON.stringify(cart))
                    window.eventBus.emit('update-cart', cart);
                },
                globalSetCartGrandTotal(cartGrandTotal) {
                    localStorage.setItem('cartGrandTotal', cartGrandTotal)
                },
                globalClearCart() {
                    localStorage.removeItem('key');
                    localStorage.removeItem('cart');
                },
                validateProduct(){
                    this.outOfStockAnimation = false
                    this.resetErrors()
                    if(this.isEmptyObject(this.selectedAttrs) && this.response.product.variance_type === 3)
                    {
                        this.error.options = true
                        return false
                    }
                    else return true
                },
                addSelectedProduct(buynow){
                    if(this.validateProduct()){
                        if(this.checkStockLogic()){

                            let productId = this.response.product.variance_type === 3 ? this.selectedAttrs.product_id : this.response.product.id
                            let additional = { variance_id: this.response.product.variance_type === 3 ? this.selectedAttrs.variance_id : this.response.variances[0].id}

                            this.globalAddProduct(productId , this.selectedQuantity , additional , buynow)
                        }
                        else{
                            this.outOfStockAnimation = true
                            setTimeout(() => {
                                this.outOfStockAnimation = false
                            }, 1000);
                        }
                    }
                },
                globalAddProduct(productId, quantity, additional = {} , buyNow= false , fromEcomm = false ) {
                    let data = {
                        'product_id': productId,
                        'quantity': quantity,
                        'additional': additional,
                    }
                    if (this.globalGetCartKey()) data.key = this.globalGetCartKey()
                    axios.post('/api/shopping-cart/add-product', data, {
                        headers: {
                            'X-CSRF-TOKEN': this.CSRF(),
                            "Authorization": "Bearer " + $('meta[name="auth-token"]').attr('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(res => {
                        if (res.data.key) {

                            if (typeof fbq === 'function') {
                                var productDetails = {
                                content_name: this.response.product.name ,
                                content_ids: [productId],
                                content_type: 'product',
                                value: this.response.product.price,
                                currency: 'EGP'
                                }

                                this.createAtToCartEvent(productDetails)
                            }

                            this.globalSetCartKey(res.data.key)
                            this.globalSetCart(res.data.cart)
                            this.globalSetCartGrandTotal(res.data.cartGrandTotal)
                        }
                        else {
                            this.globalClearCart()
                        }
                        // this.$root.$emit('updateCart')
                        if(!buyNow){
                            this.showToast()
                        }
                        else{
                            this.redirect()
                        }
                        $('html, body').animate({scrollTop: 0}, 'fast');
                        }).catch(err => {
                            // if(fromEcomm){
                            //     if (err.response.data.message === "Product is Out Of Stock") {
                            //         this.$root.$emit('showEcommerceAlert', {
                            //             alertContent: err.response.data.message,
                            //             color: 'danger',
                            //         })
                            //         $('html, body').animate({scrollTop: 0}, 'fast');
                            //         setTimeout(() => {
                            //             if (confirm('Do You want to be notified when product is available ?')) {
                            //                 this.globalNotifyMe(err.response.data.data)
                            //             }
                            //         }, 500);
                            //         // location.reload()
                            //     }
                            // }
                        })
                },
                showToast(){
                    Swal.fire({
                        icon: 'success',
                        title: 'Product added successfully to cart',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000
                    });
                },
                nextImage(){
                    if( this.endIndex < this.response.images.length-1 ){
                        this.startIndex = this.startIndex + 1
                        this.endIndex = this.endIndex +1
                    }
                },
                prevImage(){
                    if( this.startIndex !== 0 ){
                        this.startIndex = this.startIndex - 1
                        this.endIndex = this.endIndex - 1
                    }
                },
                createGroup(){
                    this.response.variances.forEach(v => {
                        if (!this.groups.includes(v.first_attribute_value)) {
                            this.groups.push(v.first_attribute_value)
                        }
                    })
                    if(this.groups.length == 1 ){
                        this.firstSelected = true
                        this.selectedGroup = this.groups[0]
                        this.createSecondAttribute(this.groups[0])
                        this.selectedAttributes(this.groups[0])
                    }
                    if(!this.response.variances[0].second_attribute) this.checkVarianceStock()
                },
                createSecondAttribute(attr) {
                    this.secondGroup = []
                    this.response.variances.forEach(variance => {
                        if (variance.first_attribute_value == attr && !this.secondGroup.includes(variance.second_attribute_value) && variance.second_attribute_value != null) {
                            this.secondGroup.push(variance.second_attribute_value)
                        }
                    })
                    if(this.secondGroup.length == 1){
                        this.secondSelected = true
                        this.selectedThird = null
                        this.thirdSelected = false
                        this.selectedSecond = this.secondGroup[0]
                        this.createThirdAttr(this.secondGroup[0], this.selectedGroup)
                        this.selectedAttributes(this.secondGroup[0])
                        this.checkVarianceStock()
                    }
                },
                createThirdAttr(secondAttr, firstattr) {
                    this.thirdGroup = []
                    this.response.variances.forEach(variance => {
                        if (variance.second_attribute_value == secondAttr && variance.first_attribute_value == firstattr && !this.thirdGroup.includes(variance.third_attribute_value) && variance.third_attribute_value != null) {
                            this.thirdGroup.push(variance.third_attribute_value)
                        }
                    })
                    if(this.thirdGroup.length == 1){
                        this.selectedThird = this.thirdGroup[0]
                        this.selectedAttributes(this.selectedThird)
                        this.thirdSelected = true
                    }
                },
                selectedAttributes(attr) {
                    this.selectedQuantity = 1
                    this.selectedAttrs = {}
                    if (attr == this.selectedGroup && this.secondGroup.length == 0 ) {
                        this.response.product.variances.forEach(v => {
                            if (v.first_attribute_value == attr) {
                                this.setSelectedAttrObj(v.product_id , v.id , v.quantity , v.price  , v.discount)
                            }
                        })
                    }
                    else if (attr == this.selectedSecond && this.thirdGroup.length == 0 ) {
                        this.response.product.variances.forEach(v => {
                            if (v.first_attribute_value == this.selectedGroup && v.second_attribute_value == attr) {
                                this.setSelectedAttrObj(v.product_id , v.id , v.quantity , v.price , v.discount)
                            }
                        })
                    }
                    else if (attr == this.selectedThird) {
                        this.response.product.variances.forEach(v => {
                            if (v.first_attribute_value == this.selectedGroup && v.second_attribute_value == this.selectedSecond && v.third_attribute_value == attr) {
                                this.setSelectedAttrObj(v.product_id , v.id , v.quantity ,  v.price , v.discount)
                            }
                        })
                    }
                },
                setSelectedAttrObj(product_id , variance_id , quantity , price  , discount){
                    let finalQty = null
                    quantity.forEach( qty => {
                        if( qty.location_id == this.defaultWarehouseID ){
                            finalQty = qty.quantity
                        }
                    })
                    this.selectedAttrs = {
                        product_id,
                        variance_id,
                        quantity : finalQty ,
                        price,
                        discount : discount ? discount : { is_valid : false},
                        selected_qty : this.selectedQuantity
                    }
                },
                increment() {
                    this.resetErrors()
                    if( !this.isEmptyObject(this.selectedAttrs)){
                        if(this.selectedQuantity < this.selectedAttrs.quantity){
                            this.selectedQuantity = this.selectedQuantity + 1;
                            this.selectedAttrs['selected_qty'] = this.selectedQuantity
                        }
                        else{
                            this.error.sold_out = true
                        }
                    }
                    else if ( this.response.product.variance_type === 1  ){
                        if( this.selectedQuantity < this.simpleQuantity)
                        this.selectedQuantity = this.selectedQuantity + 1;
                        else this.error.sold_out = true
                    }
                    else{
                        this.error.options = true
                    }
                },
                checkSimpleQty(){
                    const matchingQty = this.response.variances[0].quantity.find(qty => {
                        return qty.location_id === this.defaultWarehouseID;
                    })
                    this.simpleQuantity = matchingQty.quantity
                },
                decrement() {
                    this.resetErrors()
                    if (this.selectedQuantity > 1 && !this.isEmptyObject(this.selectedAttrs)) {
                        this.selectedQuantity = this.selectedQuantity - 1;
                        this.selectedAttrs['selected_qty'] = this.selectedQuantity
                    }
                    else if ( this.selectedQuantity > 1 ){
                        this.selectedQuantity = this.selectedQuantity - 1;
                    }
                },
                resetErrors(){
                    this.error = {
                        sold_out: false,
                        options: false,
                        second_option: false,
                        third_option: false
                    }
                },
                isEmptyObject(obj){
                    return Object.keys(obj).length === 0
                },
                onTouchStart(event) {
                    if(this.isMobile){
                        this.touchStartX = event.touches[0].clientX;
                    }
                },
                onTouchMove(event) {
                    if(this.isMobile){
                        if (this.touchStartX !== null) {
                            const deltaX = event.touches[0].clientX - this.touchStartX;
                            if (deltaX > 15 && this.currentImageIndex > 0) {
                                this.currentImageIndex--;
                                this.touchStartX = null;
                            } else if (deltaX < -15 && this.currentImageIndex < this.response.images.length - 1) {
                                this.currentImageIndex++;
                                this.touchStartX = null;
                            }
                        }
                    }
                },
                onTouchEnd() {
                    if(this.isMobile) this.touchStartX = null;
                },
                globalGetCustomerCart() {
                    if ($('meta[name="auth-token"]').attr('content')) {
                        axios.get('/api/customer/cart').then(res => {
                            if (res.data.key) {
                                this.globalSetCartKey(res.data.key)
                                this.globalSetCart(res.data.cart)
                                this.globalSetCartGrandTotal(res.data.cart_grand_total)
                            }
                            else {
                            this.globalEmptyCart()
                            this.globalClearCart()
                    }
                    this.$root.$emit('updateCart')
                    })
                    }
                },
            }
        });

        productInstance.mount('#productBlade');
    </script>
@endsection
@section('sub-styles')
    <style>
        [v-cloak] {
            display: none;
        }
        .text-muted{
            max-width: fit-content;
        }
        .arrows-container{
            padding: 1%;
            display: flex;
            justify-content: flex-start;
        }
        .skeleton-text{
            height: 0.4rem;
            margin-top: 0.4rem;
            border-radius: 3px;
            animation: skeleton-loading 1s linear infinite alternate;
        }
        .skeleton-box{
            border-radius: 4px;
            white-space: nowrap;
            width: 5rem;
            height: 2rem;
            padding: 5px 10px;
            animation: skeleton-loading 1s linear infinite alternate;
        }
        .skeleton-boxes-container{
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            margin-bottom: 10px;
            margin-top: 10px
        }
        .skeleton-image{
            width: 100%;
            height: 100%;
            border-radius: 28.8px;
            animation: skeleton-loading 1s linear infinite alternate;
        }
        .skeleton-thumbnail{
            height: 95%;
            width: 95%;
            border-radius: 13px;
            animation: skeleton-loading 1s linear infinite alternate;
        }
        @keyframes skeleton-loading {
            0% {
                background-color: hsl(200, 20%, 70%);
            }
            100% {
                background-color: hsl(200, 20%, 95%);
            }
        }
        .product-page-wrapper {
            box-sizing: border-box;
            overflow: hidden;
        }
        .related-products-wrapper{
            padding: 20px
        }
        .product-page{
            padding: 20px;
            margin-top : 40px;
            position: relative;
        }
        .swiper-container {
        position: relative;
        }
        .options-container{
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            max-width : 95vw;
            flex-wrap: wrap;
        }
        .displays-section{
            display: flex;
            justify-content: space-between
        }
        .thumbnails-arrows-container {
            width: 10%;
        }
        .thumbnails-arrows {
            background-color: transparent;
            border-style: none
        }
        .thumbnail-arrow {
            width: 14px;
            height: 8px
        }
        .dynamic-width{
            width: 49%
        }
        .thumbnails-container{
            width: 20%;
            display: flex;
            justify-content: center;
        }
        .product-card-image{
            width: 80%;
            display: flex;
            aspect-ratio:1/2;
            max-height: 500px;
            justify-content: center;
            align-items: center;
            padding: 2%;
            border-radius: 32px;
            border: none;
            box-shadow: 0px 0px 13.711044311523438px 0px rgba(51, 51, 51, 0.05);
        }
        .img-preview {
            max-width: 100%;
            max-height: 100%;
            border-radius: 28.8px;
            transition: transform .2s;
        }
        .img-preview:hover{
            -ms-transform: scale(1.5);
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        .product-description {
            font-weight: 500;
            font-size: 16px;
            color: black;
            display: flex;
            justify-content: flex-start
        }
        .disabled-arrow{
            color: #2c2e42b2;
            color: #2C2E42;
        }
        .active-arrow{

        }
        .product-price{
            font-weight: 600;
            font-size: 27px;
            color: black;
            display: flex;
            justify-content: flex-start
        }
        .stock-status{
            font-weight: 400;
            font-size: 12px;
            display: flex;
            justify-content: flex-start
        }
        .availability{
            color: #343a40;
        }
        .status{
            color :rgba(5, 170, 71, 1)
        }
        .out-of-stock-animation{
            animation: shake 1s ease
        }
        @keyframes shake {
            0% {
                transform: translateX(0);
                font-weight: 500
            }
            25% {
                transform: translateX(-4px);
            }
            50% {
                transform: translateX(4px);
            }
            75% {
                transform: translateX(-4px);
            }
            100% {
                transform: translateX(0);
                font-weight: 400
            }
        }
        .add-to-cart-btn{
            color: rgb(62, 112, 193);
            border : 2px solid rgb(62, 112, 193);
            height: 48px;
            width: 12.5rem;
            border-radius: 10px;
            background-color: transparent;
            font-size:12px;
            font-weight: 600
        }
        .buy-now-btn{
            width: 12.5rem;
            border-radius: 10px;
            background-color: rgb(62, 112, 193);
            border-style: none;
            color: white;
            height: 48px;
            font-size: 12px;
            font-weight: bold;
            margin-left:2%;
            margin-right:2%;
        }
        .buy-now-btn:active{
            opacity: 0.5 !important ;
        }
        .info-des {
            border: 1px solid;
            font-weight: bold;
            width: 90px;
            height: 30px;
            max-width: fit-content;
            background-color: transparent;
            border-style: none;
            font-size: 14px;
            margin-bottom: -2px
        }
        .info-des,.social-media-icon,.thumbnail:hover {
            cursor: pointer
        }
        .description-container {
            display: flex;
            justify-content: flex-start;
            border-bottom: 2px solid rgb(236, 236, 238);
        }
        .product-card{
            display: flex;
            justify-content: space-between
        }
        .thumbnail-container{
            width: 112px;
            height: 112px;
            display: flex;
            justify-content: center;
            margin-bottom:10px
        }
        .thumbnail{
            max-height: 100%;
            max-width: 100%;
            border-radius: 13px
        }
        .thumbnails-arrows{
            width: 10%;
        }
        .qty-btn{
            border: 1px solid rgb(204, 204, 204);
            border-radius: 4px;
            text-align: center;
            padding: 4px 9px;
            background-color: transparent;
            font-size: 18px;
            font-weight: 400
        }
        .selected-qty{
            padding: 5px 0;
        }
        .attr{
            border-radius: 4px;
            white-space: nowrap;
            max-width:fit-content;
            max-height: fit-content;
            background-color:transparent;
            padding: 5px 10px;
        }
        .active-attr{
            border : 2px solid rgb(62, 112, 193)
        }
        .disabled-attr{
            border: 2px solid #d0d0d0;
        }
        .error{
            font-size: 12px;
            color: #e65d5d;
            font-weight: 600
        }
        .out-of-stock {
            color: red
        }
        .in-stock {
            color: rgba(5, 170, 71, 1)
        }
        .attr-value {
            color: black;
            font-size: 14px
        }
        .info-attr{
            font-weight: 400;
            color: #3c4b64;
            font-size: 14px
        }
        .social-media-icon {
            width: 22px;
            height: 22px
        }
        .share-text{
            font-size: 12px
        }
        .pagination,.fixed-bar,.nav-mobile{
            display: none
        }
        .pop-up{
            display: none
        }
        .product-discount{
            font-weight:500;
            font-size:13px;
            color:#afb0b7;
            text-decoration: line-through;
        }
        @media screen and (max-width:700px){
            .pop-up{
                display: block
            }
            .fixed-bar {
                position: fixed;
                box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.08);
                bottom: 0px;
                left: 0px;
                right: 0px;
                z-index: 9999;
                background-color: white;
                display: flex;
                justify-content: space-between;
                align-items: center
            }
            .product-page{
                padding: 0
            }
            .product-card-image{
                width: 100%
            }
            .thumbnails-container,.thumbnails-arrows,.nav-dekstop{
                display: none
            }
            .nav-mobile{
                display: block
            }
            .dynamic-width{
                width: 100%
            }
            .displays-section{
                flex-direction: column
            }
            .product-card{
                justify-content: center;
                margin-bottom: 20px;
                margin-top: 55px
            }
            .add-to-cart-btn{
                display: none
            }
            .buy-now-btn{
                border-color: rgb(62, 112, 193);
                color: rgb(62, 112, 193);
                background-color: transparent;
                border: 2px solid;
                width: 100%;
                margin: 0
            }
            .product-data,.product-info{
                padding: 20px
            }
            .img-preview:hover{
            -ms-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            }
            .product-card-image img {
                transition: transform 0.3s ease-in-out; /* Adjust duration and timing function as needed */
            }
            .pagination{
                display: flex;
                justify-content: space-between;
                width: fit-content;
            }
            .pagination-bullet{
                border-radius:50%;
                width:8px;
                height:8px;
                margin: 3px
            }
            .active-bullet{
                background-color: #787575;
            }
            .disabled-bullet{
                background-color: #d0d0d0;
            }
            .order-now-mobile{
                width: 80%
            }
            .contact-icon {
                width: 30px;
                height: 30px
            }
            .add-to-cart-mobile{
                border: 1px solid rgb(62, 112, 193);
                border-radius: 10px;
                color: white;
                width: 100%;
                padding: 10px;
                background-color: rgb(62, 112, 193)
            }
            .add-to-cart-mobile:active{
                opacity: 0.7 !important
            }
            .contact-icon-contatiner {
                width: 15%;
                height: 54px;
                border-radius: 10px;
                box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.15);
                display: flex;
                align-items: center;
                justify-content: center
            }
        }

    </style>
@endsection