@extends('layouts.base')
@section('content')
    <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": "{{$product->name}}",
            "description": "{{('Get great numbers on your social profiles.')}}",
            "brand": {
                "@type": "Brand",
                "name": "{{config('app.name')}}"
            },
            "review": {
                "@type": "Review",
                "reviewRating": {
                    "@type": "Rating",
                    "ratingValue": "4",
                    "bestRating": "5"
                },
                "author": {
                    "@type": "Person",
                    "name": "Petr"
                }
            },
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "4.8",
                "reviewCount": "18"
            },
            "offers": {
                "@type": "AggregateOffer",
                "offerCount": "{{count($packs)}}",
                "lowPrice": "{{$packs->first()->price}}",
                "highPrice": "{{$packs->last()->price}}",
                "priceCurrency": "EUR"
            }
        }
    </script>
    <style>
        .nadpisek {
            font-size: 40px !important;
        }

        @media only screen and (max-width: 998px) {
            .nadpisek {
                font-size: 32px !important;
            }

            .shapes-container {
                display: none;
            }

            .non-mob {
                display: none;
            }

            .mob-marg {
                margin-top: 30px !important;
            }

            .choose-block {
                padding: 30px 20px !important;
            }

            .chosed {
                font-size: 16px !important;
            }

            .non-chosed {
                font-size: 16px !important;
            }
        }

        .round {
            border-radius: 50%;
            background-color: white;
            box-shadow: 0px 10px 30px 0px rgb(1 1 64 / 8%);
            width: 80px;
            height: 80px;
            text-align: center;
            margin: 0 auto;
            font-size: 40px;
            color: #ff603c;
            font-weight: 600;
            line-height: 80px;
            margin-bottom: 25px;
        }

        .app-landing-2-header .animation-shape.shape-triangle div {
            background-color: #ff603c;
        }

        .product-heading {
            line-height: 22px;
            color: #7b7d86;
            display: inline-block;
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 10px;
            background: #edeef3;
            padding: 5px 13px;
            font-weight: 600;
            border-radius: 16px;
            text-transform: uppercase;
        }

        .product-h2 {
            font-weight: 600;
            line-height: 1.13;
            font-size: 32px;
            color: #313336;
        }

        .product-h2 strong {
            color: #ff603c;
            font-weight: 600;
        }

        @media (min-width: 768px) {

            section [class^="container"],
            .section [class^="container"] {
                padding-top: 50px;
                padding-bottom: 90px;
            }
        }

        .pricing-block {
            width: 300px;
            cursor: grab;
            background-color: white;
            padding: 25px 12px;
        }

        .pricing-block .pricing-cover {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            transition: 0.2s;
        }

        .pricing-block:hover .pricing-cover {
            box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        }

        .pricing-header {
            padding: 20px 10px;
            color: #3a4250;
        }

        .pricing-block .number {
            font-size: 35px;
            font-weight: 700;
        }

        .pricing-block .type {
            margin-top: -10px !important;
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
        }

        .pricing-price {
            background-color: #FFE5E0;
            width: 100%;
            padding: 15px 15px;
            color: #3a4250;
            font-weight: 700;
            font-size: 42px;
        }

        .pricing-points {
            padding: 25px;
            padding-top: 17px;
            padding-bottom: 5px;
            font-weight: 500;
            color: #3a4250;
            font-size: 17px;
            text-align: left;
        }

        ul {
            list-style-type: none;
            padding-left: 15px;
        }

        .pricing-points li {
            margin-top: 8px;
        }



        .cart-obal {
            max-width: 640px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 6px 6px rgb(0 0 0 / 4%), 0 0 42px rgb(0 0 0 / 4%);
            padding: 40px;
            margin: 0 auto;
        }

        .cart-obal h2 {
            text-align: center;
            font-weight: 700;
            font-size: 38px;
            color: #322f3b;
            margin-bottom: 0;
        }

        hr {
            outline: 0;
            height: 1px;
            background: #eaeaea;
            border-top: 0px solid #eaeaea;
            opacity: 1 !important;
            margin: 40px 0;
        }

        .progress {
            background-color: #efefef;
            height: 6px;
        }

        .bar {
            background: #efefef;
        }

        .value {
            height: 6px;
            background: #fc591e;
        }

        .form-control {
            font-family: 'Source Sans Pro', sans-serif;
            display: block;
            height: 56px;
            width: 100%;
            padding: 15px 16px 16px 53px;
            line-height: 24px;
            outline: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            font-size: 18px !important;
            text-align: left;
            font-weight: 400;
            color: #000 !important;
            box-sizing: border-box;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .form-control.active,
        .form-control:focus {
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .input-icon {
            z-index: 100;
            pointer-events: none;
            margin: 0;
            position: absolute;
            top: 18px;
            left: 17px;
            width: 20px;
        }

        .form-group {
            position: relative;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        .selector {
            position: relative;
            font-size: 18px;
            color: #000;
            font-weight: 400;
        }

        .selector strong {
            font-weight: 600;
        }

        .selector>button.form-control {
            position: relative;
            margin-bottom: 6px;
            padding-right: 56px;
            background-color: white;
        }


        .selector .alt:last-child {
            margin-left: 0;
        }

        .selector .alt {
            margin-left: 10px;
            float: right;
            font-size: 17px;
            font-weight: 600;
            color: #000;
            text-align: right;
        }

        .selector>button.form-control:after {
            content: "";
            position: absolute;
            top: 25px;
            right: 18px;
            width: 0;
            height: 0;
            border-color: #464b4d transparent transparent;
            border-style: solid;
            border-width: 6px 5px 0;
        }

        .selector .dropdown-stylized {
            position: absolute;
            margin: 0;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 100%;
            left: 0;
            right: 0;
        }

        .dropdown-stylized a:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .dropdown-stylized a {
            position: relative;
            padding: 12px 22px;
            box-sizing: border-box;
            display: block;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
            width: 100%;
            font-size: 16px;
            line-height: 22px;
            background-color: #fff;
            transition: background-color .15s ease-in-out;
        }

        .dropdown-stylized a:hover {
            background-color: #e9e9e9;
        }

        .dropdown-stylized a:after {
            content: "";
            display: block;
            position: absolute;
            height: 1px;
            background: #dfdfdf;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .choose-block {
            margin: 20px auto;
            max-width: 550px;
            padding: 30px 40px;
            border-radius: 10px;
            border: 1px solid #EDEDED;
        }

        .trigger {
            box-shadow: 0px 10px 30px 0px rgb(1 1 64 / 8%);
            border-radius: 8px;
            text-align: left;
            max-width: 350px;
            padding: 8px;
            position: relative;
            font-weight: 400;
            color: #000;
            margin: 25px auto;
            vertical-align: middle;
        }

        .trigger span#fire {
            background: blanchedalmond;
        }

        .trigger span {
            padding: 5px 7px;
            border-radius: 5px;
            position: relative;
            font-size: 23px;
            margin-right: 5px;
        }

        .trigger>span>img {
            width: 25px;
            margin-bottom: 4px;
        }

        .price-text {
            color: #323436;
            font-weight: 500;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid #e5e5e5;
        }

        .price-text img {
            width: 25px;
            height: 25px;
        }


        .non-chosed {
            border: 3px solid #f6f6f8;
            border-radius: 5px;
            background: #fff;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
        }

        .price-text p {
            margin-top: 4px;
            margin-bottom: 0px;
        }

        .chosed {
            border: 3px solid #ff603c;
            border-radius: 5px;
            background: #ff603c;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
            color: white;
        }

        .features-list {
            margin-top: 30px !important;
            font-size: 16px;
            line-height: 25px;
            font-weight: 400;
            color: black;
        }

        .features-list li {
            margin-bottom: 14px;
        }

        .text-orange {
            color: #ff553c;
        }
    </style>
    <section style="">
        <div class="container" style="text-align:center;">
            <h1 class="product-heading">{{ $product->h1nadpis }}</h1>
            <h2 class="product-h2">{!! $product->h2nadpis !!}</h2>
            <p style="font-weight:400; max-width:600px; color: rgba(71, 71, 71, 0.9); font-size:16px; margin:0 auto;">
                {!! $product->popis !!}</p>
            <div>
                <div>
                    <input type="hidden" name="pack_id" id="pack_id" value="{{ $packs->first()->id }}">
                    <input type="hidden" name="pack_id1" id="pack_id1" value="{{ $packs->first()->id }}">
                    <div class="trigger" style="width:fit-content; margin:auto; margin-top:15px; display:none;">
                        <span id="fire"><img title="objednávky" src="{{ url('/img/fire-icon.png') }}"
                                alt="objednávky"></span>
                        <span style="font-size:16px; font-weight:500; top:-2px;">{{ __('ONLY TODAY 40% OFF') }}</span>
                    </div>

                    <style>
                        .plan-checked {
                            border-color: #ff553c !important;
                            background-color: #ff553c;
                        }

                        .plan-check {
                            position: absolute;
                            bottom: 10px;
                            right: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 25px;
                            height: 25px;
                            border: 2px solid #d3d3d3;
                            border-radius: 10px;
                        }

                        .new-design {

                            padding: 30px 20px;
                            margin: auto;
                            width: 550px;
                            max-width: 94%;
                            border-radius: 10px;
                            border: 1px solid #EDEDED;
                            background: #fff;
                            box-shadow: 0px 0px 10px 0px #f1f1f1;
                            padding-top: 35px;
                            margin-top: 15px;
                            font-family: 'Inter', sans-serif;
                        }

                        .nav-item {
                            padding: 0 5px 10px;
                        }

                        .nav-link12 {
                            border: 0;
                            cursor: pointer;
                            color: inherit;
                            border-bottom: 1px solid transparent;
                            margin-bottom: -1px;
                            transition: .3s border-color;
                            font-weight: 400;
                            display: block;
                            text-decoration: none;
                            border-radius: 8px;
                            background: #f5f8fa;
                            color: #181818 !important;
                            padding: 15px 10px;
                            width: 90px;
                        }

                        .nav-link12 h3 {
                            margin-bottom: 0px;
                            font-size: 19px;
                            font-weight: 700;
                            white-space: nowrap;
                        }

                        .nav-link12 p {
                            margin-bottom: 0;
                            font-size: 14px;
                            margin-top: 0px;
                            white-space: nowrap;
                        }

                        .active-nav {
                            background: #fb5343;
                            color: #ffffff !important;
                        }

                        .active-nav h3 {
                            color: white !important;
                        }

                        .new-features {
                            margin: auto;
                            width: 550px;
                            max-width: 94%;
                            margin-top: 20px;
                            background: #f9f9f9;
                            padding: 1.5em 1.8em;
                            border-radius: 1.6rem;
                            font-weight: 500;
                            font-size: 15px;
                            text-align: left;
                            color: #313336;
                            line-height: 1.55;
                        }

                        .new-features>ul {
                            display: flex;
                            flex-wrap: wrap;
                            list-style: none;
                            margin: -0.5rem;
                        }

                        .new-features>ul>li {
                            width: 50%;
                            position: relative;
                            padding: 0.5rem 0.5rem 0.5rem 2.4rem;
                        }

                        @media (max-width: 767px),
                        screen and (max-width: 812px) and (orientation: landscape) {
                            .new-features>ul>li {
                                width: 100%;
                            }
                        }

                        .new-features span {
                            position: absolute;
                            top: 0.3rem;
                            left: 0;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            width: 1.7rem;
                            height: 1.7rem;
                            background-color: rgba(255, 85, 60, .1);
                            border-radius: 50%;
                        }

                        .svg-icon {
                            display: inline-block;
                            position: relative;
                            font-size: 0;
                            line-height: 0;
                            text-indent: -4004px;
                            vertical-align: top;
                        }
                    </style>

                    <div class="choose-block" style="box-shadow: 0px 0px 10px 0px #f1f1f1;">
                        <div
                            style="font-size:22px; font-family:'Source Sans Pro'; text-align:center; margin-bottom:8px; margin-left:2px; font-weight:700; color:#303435;">
                            Vyberte počet:</div>
                        <div class="form-group mb-3">
                            <i class="input-icon {{ $product->icon }}"
                                style="color: #ff553c; font-size:20px; left:23px;"></i>
                            <div class="selector dropdown">
                                <input type="hidden" name="plan" value="112">
                                <button type="button" class="form-control dropdown-toggle" data-bs-display="static"
                                    data-bs-toggle="dropdown"><strong class="amount">{{ $packs->first()->amount }}</strong>
                                    {{ $product->product_name }}<span class="alt price-flw"
                                        style="font-size:19px; font-weight:700;">{{ number_format($packs->first()->price,2,",") }}€</span></button>
                                <div class="dropdown-menu dropdown-stylized animate slideIn">
                                    @foreach ($packs as $p)
                                        <a href="#" data-id="{{ $p->id }}" data-price="{{ $p->price }}"
                                            data-amount="{{ $p->amount }}" data-old="{{ $p->old_price }}"
                                            class="package-selector"><span
                                                class="desc"><strong>{{ $p->amount }}</strong>
                                                {{ $product->product_name }}</span><span class="alt"><span
                                                    style="text-decoration: line-through; color:red; font-size:15px; font-weight:400;">{{ number_format($p->old_price, 2, ",") }}€</span> {{ number_format($p->price,2,",") }}€</span></a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div
                            style="font-size:18px; margin-top:25px; margin-bottom:8px; margin-left:2px; margin-right:2px; font-weight:400; color:#303435; display:flex; justify-content:space-between;">
                            <div>Váš balíček</div>
                            <input type="hidden" name="pack_id" id="pack_id" value="{{ $packs->first()->id }}">
                        </div>
                        <div class="price-text">
                            <div style="text-decoration: line-through; font-size:14px;" id="old-price">
                                {{ number_format($packs->first()->old_price, 2, ",") }} €</div>
                            <div style="margin-top:-5px; font-size:31px; font-weight:600;"><span
                                    id="price-shower">{{ number_format($packs->first()->price, 2, ",") }}</span><span
                                    style="font-size:27px; margin-left:3px;">€</span></div>
                            <div class="d-flex" style="justify-content: center; margin-top:-7px;">
                                <div style="margin-right:5px;"><svg width="21" height="20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.1" x="0.633" y="0.115" width="19.48" height="19.48"
                                            rx="9.74" fill="#23CF87"></rect>
                                        <path
                                            d="M9.524 15.168 4.176 11.04 5.7 9.246l3.22 2.486 4.713-7.19 2.054 1.221-6.163 9.404Z"
                                            fill="#23CF87"></path>
                                    </svg></div>
                                <div class="flex-col" style="font-size:15px; margin-top:3px;"><span
                                        class="buy-form-alt__saved">Dnes ušetríte
                                        <strong class="price-saved"
                                            style="color:#1fb174;">{{ number_format($packs->first()->old_price - $packs->first()->price, 2, ",") }}
                                            €</strong></span></div>
                            </div>
                        </div>
                        <ul style="padding-left:20px; margin:0 auto; text-align:left;" class="features-list">
                            <div class="row" style="width:auto; margin:0 auto;">
                                <div class="col-md-6">
                                    <li style="display:flex; justify-content: left;">
                                        <div><svg style="margin-right:10px;" height="20" viewBox="0 0 17 14"
                                                fill="none" xmlns="http://www.w3.org/2000/svg" width="20">
                                                <path
                                                    d="M10.192 4.924 3.17.399a1.572 1.572 0 0 0-.854-.255c-.3 0-.594.088-.853.255-.26.167-.475.408-.624.697-.15.29-.229.619-.229.953v9.05c0 .335.079.663.229.953.15.29.365.53.624.697.26.168.554.256.853.256.3 0 .594-.088.854-.255l7.023-4.526c.26-.167.476-.407.626-.697.15-.29.229-.618.229-.953 0-.334-.079-.663-.23-.953-.15-.29-.365-.53-.625-.697Z"
                                                    fill="#FF6B00"></path>
                                                <path
                                                    d="M16.059 4.926 9.001.4A1.563 1.563 0 0 0 7.475.295 1.737 1.737 0 0 0 6.84.81c-.173.225-.296.49-.36.776l4.349 2.788c.347.223.636.543.837.93.2.386.307.824.307 1.27 0 .446-.106.885-.307 1.27-.2.387-.49.708-.837.93l-4.35 2.788c.065.286.188.552.36.776.173.224.39.4.634.516a1.564 1.564 0 0 0 1.527-.104l7.058-4.522c.261-.167.478-.407.629-.697.15-.29.23-.619.23-.954 0-.334-.08-.663-.23-.953-.15-.29-.368-.53-.629-.698Z"
                                                    fill="#FF6B00"></path>
                                            </svg>
                                        </div>
                                        <div style="flex-grow:1; margin-top:2px;">Dodanie do 30 sekúnd</div>
                                    </li>
                                    <li style="display:flex; justify-content: left;">
                                        <div><svg style="margin-right:10px;" width="20" height="20"
                                                viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M17.031 5.05v.382a.949.949 0 0 1-.303.694.907.907 0 0 1-.707.234H16a.904.904 0 0 1-.582-.304.943.943 0 0 1-.234-.624V5.05c0-.664-.257-1.3-.716-1.77a2.42 2.42 0 0 0-1.73-.733h-.16a2.42 2.42 0 0 0-1.73.733 2.531 2.531 0 0 0-.717 1.77v1.395a31.469 31.469 0 0 0-1.846-.148V5.046c.001-1.163.453-2.278 1.257-3.1A4.248 4.248 0 0 1 12.576.657h.159c.564 0 1.123.113 1.644.334.521.22.995.544 1.394.952a4.4 4.4 0 0 1 .931 1.425c.216.533.327 1.104.327 1.68Zm-3.728 4.185v6.72c0 .23-.078.452-.221.628a.957.957 0 0 1-.562.34l-.584.112a27.412 27.412 0 0 1-10.413 0l-.584-.113a.957.957 0 0 1-.562-.339.996.996 0 0 1-.22-.628v-6.72c-.001-.229.077-.451.22-.628a.957.957 0 0 1 .562-.339l.086-.016c3.77-.729 7.64-.729 11.41 0l.086.016c.22.043.419.163.562.34.142.176.22.398.22.627Zm-4.164 1.788-.479-.49a.425.425 0 0 0-.59-.007l-1.976 1.787-.918-.735a.423.423 0 0 0-.57.036l-.477.49a.446.446 0 0 0-.02.598l1.677 1.984a.43.43 0 0 0 .322.148.423.423 0 0 0 .322-.148l2.723-3.052a.445.445 0 0 0-.014-.608v-.003Z"
                                                    fill="#17CA80"></path>
                                            </svg> </div>
                                        <div style="flex-grow:1; margin-top:2px;">Nepotrebujeme heslo</div>
                                    </li>


                                </div>
                                <div class="col-md-6">
                                    <li style="display:flex; justify-content: left;">
                                        <div><svg style="margin-right:10px;" width="20" height="20"
                                                viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M4.029 1.979c1.49 0 2.697 1.464 2.697 3.272 0 1.808-1.208 3.273-2.697 3.273-1.49 0-2.698-1.465-2.698-3.273S2.54 1.98 4.029 1.98ZM10.501 1.979c1.765 0 3.196 1.653 3.196 3.692 0 2.04-1.43 3.692-3.196 3.692-1.765 0-3.195-1.653-3.195-3.692 0-2.04 1.43-3.692 3.195-3.692ZM10.498 10.286c2.479 0 4.546 1.586 5.022 3.693H5.477c.476-2.107 2.543-3.693 5.021-3.693ZM17.348 2.901c1.513 0 2.74 1.24 2.74 2.77 0 1.529-1.227 2.769-2.74 2.769-1.512 0-2.739-1.24-2.739-2.77s1.227-2.769 2.74-2.769ZM17.269 9.364c2 0 3.633 1.635 3.732 3.692h-4.503a5.876 5.876 0 0 0-1.889-2.535 3.655 3.655 0 0 1 2.66-1.157ZM4.265 9.364c1.19 0 2.265.442 3.04 1.156-.954.643-1.708 1.518-2.159 2.536H0C.113 11 1.98 9.364 4.265 9.364Z"
                                                    fill="#4198FF"></path>
                                            </svg> </div>
                                        <div style="flex-grow:1; margin-top:2px;">Najvyššia kvalita</div>

                                    </li>
                                    <li style="display:flex; justify-content: left;">
                                        <div><svg style="margin-right:10px;" width="20" height="20"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="m10.271 6.581-2.438.136.42-5.195C8.31.656 7.132.25 6.655 1.008l-6.25 9.415c-.393.569.083 1.326.784 1.3l2.439-.136-.42 5.195c-.085.866 1.12 1.272 1.597.514l6.251-9.416c.393-.595-.084-1.353-.785-1.299Z"
                                                    fill="#FF603C"></path>
                                            </svg> </div>
                                        <div style="flex-grow:1; margin-top:2px;">Nezmiznú vám
                                        </div>
                                    </li>

                                </div>
                            </div>
                        </ul>
                        <div style="padding:10px 20px; margin-top:10px;">
                            <div style="border-top: 1px solid #efeff2;"></div>
                        </div>
                        <div
                            style="text-align:center; padding-bottom:10px; padding-left:30px; padding-right:30px; padding-top:25px;">

                            <button type="submit" data-id="" class="btn btn-alternate btn-rounded buy-btn"
                                style="color:white; font-size:16px; font-weight:600; background-color:#ff603c; padding: 13px 22px; width:100%; border-radius:8px;">Pokračovať</button>


                        </div>
                    </div>

                </div>
            </div>
        </div>

    </section>
    <script>
        // Set the date we're counting down to
        var countDownDate = new Date("Mar 4, 2022 19:59:25").getTime();
        countdown();
        // Update the count down every 1 second
        var x = setInterval(countdown, 1000);

        function countdown() {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance / (1000 * 60 * 60)));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("cas-slevy").innerHTML = hours + "h " +
                minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("cas-slevy").innerHTML = "Sleva končí dnes o půlnoci";
            }
        }
    </script>
    <x-review-count />

    <x-kroky />

    <x-faq />

    <x-reasons />

    <x-review-block />
    <section style="padding-top:30px; padding-bottom:0px; border-top:1px solid #EDEDED;">
        <div class="container">
            <div class="gap-y align-items-center text-center header-main">
                <h5 class="product-heading">{{ __('Our thinking') }}</h5>
                <h2 class="bold" style="font-size:34px;">{{ $product->article_nadpis }}</h2>
            </div>
            <div style="font-size:17px; max-width:1000px; margin:0 auto;">
                {!! $product->seo_article !!}
            </div>
        </div>
    </section>

    <x-footer-buy />
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {

            $(".select-pack").click(function() {
                $(".select-pack").not(this).children().removeClass("active-nav");
                $(this).children().addClass("active-nav");
                var old_price = $(this).data("old");
                var price = $(this).data("price");
                $("#pack_id").val($(this).data("id"));
                $(".price-flw").html($(this).data("price").toFixed(2).replace('.', ',') + "€");
                $(".amount").html($(this).data("amount"));
                $("#price-shower").html($(this).data("price").toFixed(2).replace('.', ','));
                $(".price-saved").html(Number(old_price - price).toFixed(2).replace('.', ',') + "€");
                $("#old-price").html(Number(old_price).toFixed(2).replace('.', ',') + "€");
            });

            $("#reviewForm").on('submit', function(e) {
                e.preventDefault();
                $(".send-review").attr("disabled", "disabled");
                var name = $("#prezdivka").val();
                var email = $("#email").val();
                var rating = $("input[name=rating]:checked").val();
                var textarea = $("#rate-text").val();

                $.ajax({
                    url: "/submit-review",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        name: name,
                        email: email,
                        rating: rating,
                        textarea: textarea,
                    },
                    success: function(response) {
                        $(".review-sent").show().delay(3000).fadeOut();
                        $(".send-review").removeAttr("disabled");
                        $("#prezdivka").val("");
                        $("#email").val("");
                        $("#rate-text").val("");
                    },
                });
            });

            $(".buy-btn").click(function() {
                var pack = $("#pack_id").val();
                $.ajax({
                    url: '/uniCart',
                    data: {
                        pack_id: pack
                    },
                    type: "GET",
                    success: function(data) {
                        window.location.href = data;
                    }
                });
            });

            $(".write-review-btn1").click(function() {
                $(".review-form").toggle();
                var text = $(this).text();
                $(this).text(
                    text == "Napsat recenzi" ? "Zrušit" : "Napsat recenzi");
            });

            $('.reviews').slick({
                centerMode: false,
                speed: 150,
                swipe: true,
                dots: true,
                arrows: false,
                slidesToShow: 3,
                focusOnSelect: false,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1
                    }
                }]
            });

            $(".package-selector").click(function() {
                event.preventDefault();
                var old_price = parseInt($(this).data("old"));
                var price = parseInt($(this).data("price"));
                $("#pack_id").val($(this).data("id"));
                $(".price-flw").html($(this).data("price").toFixed(2).replace('.', ',') + "€");
                $(".amount").html($(this).data("amount"));
                $("#price-shower").html($(this).data("price").toFixed(2).replace('.', ','));
                $(".price-saved").html((old_price - price).toFixed(2).replace('.', ',') + "€");
                $("#old-price").html(old_price.toFixed(2).replace('.', ',') +
                "€");
            });

            $('.cenik').slick({
                dots: false,
                arrows: false,
                centerMode: false,
                variableWidth: true,
                infinite: false,
                speed: 150,
                swipe: true,
                focusOnSelect: false
            });
        });
    </script>
@endsection