{{--<div class="pageMask"></div>--}}



<style>
    .header {

    }

    .info-boxes .mobile-only {
        display: none!important;
    }
</style>

<header class="header test">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>



    <div class="container-fluid">
        <div class="row">
            @php
                $specialOfferBlock =  App\Modules\CStore\SpecialOfferBlock\Models\SpecialOfferBlock::where('id', 1)->where('active', 1)->first();
            @endphp
            @if(isset($specialOfferBlock) && $specialOfferBlock->from_date && \Carbon\Carbon::now()->greaterThanOrEqualTo($specialOfferBlock->from_date))
                <script>


                    $(document).ready(function () {

                        $(".cancel-prom").on('click', function (e) {
                            e.preventDefault();
                            var now = new Date();
                            var time = now.getTime();
                            var expireTime = time + 1000 * 3600 * 24; // 24 godziny
                            now.setTime(expireTime);
                            document.cookie = "rejectedOffer=true;expires=" + now.toGMTString() + ";path=/";
                            $("#specialOfferBlock").hide();
                            $('.mainView').css('padding-top', '115px');
                            $('.header').css('padding-top', '20px');
                        });

                        if (document.cookie.indexOf("rejectedOffer=true") != -1) {
                            $("#specialOfferBlock").hide();
                            $('.mainView').css('padding-top', '115px');
                            $('.header').css('padding', '20px 0 0 0;');
                        } else {
                            $("#specialOfferBlock").show();
                            $('.mainView').css('padding-top', '150px');
                            $('.header').css('padding', '0px');

                        }
                    });
                </script>
                <style>
                    .prom {
                        display: block;
                        background: #fd512c !important;
                        width: 110%;
                        font-size: 1em;
                        padding: 0.5em 0;
                        text-align: center;
                        color: #fff;
                        z-index: 99998;
                        box-shadow: 0 1px 1em rgba(0, 0, 0, .2);
                    }

                    .cancel-prom {
                        color: #fff;
                        position: absolute;
                        right: 0;
                        margin-right: 20px;
                    }
                </style>

                <div class="prom" id="specialOfferBlock" style="display: none;">
                        <span>
                                 <a href="{{ $specialOfferBlock->link }}" style="color: #fff;">
                            {!! $specialOfferBlock->title  !!} - {!! strip_tags($specialOfferBlock->description)!!}
                                           </a>
                            <a href="#" class="cancel-prom">Odrzuć</a>
                        </span>
                </div>
            @endif
        </div>
        <div class="row no-gutters">
            <div style="width: auto; padding-right: 15px;" class="col hamburger">
                <a class="hamburger"><span class="fa fa-bars"></span></a>
            </div>
            <div class="col">
                <div class="logo">
                    <a href="/">
                        <img src="{{ c_options()->get('logo', 'template') ? asset('images/' . c_options()->get('logo', 'template')) : c_template()->image('logo.svg') }}"
                             alt="SklepBaterie.pl">
                    </a>
                    <style>
                        .logo {
                            max-width: 630px !important;
                            padding-right: 0 !important;
                            width: 100%;
                            display: inline-flex;
                            justify-content: space-between;
                        }

                        @media (max-width: 1849px) {
                            .lat-15 {
                                display: none !important;
                            }

                            .logo {
                                max-width: 540px !important;
                            }
                        }

                        @media (max-width: 1700px) {
                            #opinie {
                                display: none !important;
                            }
                        }

                        @media (max-width: 1199px) {
                            #opinie {
                                display: inline-block !important;
                                position: absolute !important;
                                right: -10px;
                                left: unset !important;
                                width: 60px !important;
                            }

                            #opinie img {
                                width: 100px !important;
                            }

                            #opinie img:nth-of-type(2) {
                                display: none !important;
                            }
                        }

                        @media (min-width: 768px) {
                        }
                    </style>
                    <div id="opinie" style="display: inline-block">
                        <img style="width: 90px; display: inline-block; object-fit: contain;" src="/ceneo_3.png">
                        <img style="width: 90px; display: inline-block; object-fit: contain;" src="/ceneo_1.png">
                        <img class="lat-15" style="width: 90px; display: inline-block; object-fit: contain;"
                             src="/15latczarne.png">
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="search">
                    <form action="{{ route('start') }}" method="get" class="searchForm">
                        <input required type="text" id="searchQuery" name="searchQuery"
                               placeholder="{{ c_trans('Wpisz czego szukasz...') }}">
                        <div class="border"></div>
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>

{{--                    <script>--}}
{{--                        var route = '{{ route('search::product::autocomplete')}}';--}}

{{--                        $(document).ready(function () {--}}

{{--                            var searchQuery = $("#searchQuery");--}}
{{--                            $('#searchQuery').typeahead({--}}
{{--                                minLength: 3,--}}
{{--                                autoSelect: false,--}}
{{--                                items: 15,--}}
{{--                                openLinkInNewTab: false,--}}
{{--                                source: function (query, process) {--}}
{{--                                    if (query.length > 3) {--}}
{{--                                        return $.get(route, {--}}
{{--                                            t: query--}}
{{--                                        }, function (data) {--}}
{{--                                            return process(data);--}}
{{--                                        });--}}
{{--                                    }--}}
{{--                                }--}}
{{--                            });--}}
{{--                        });--}}
{{--                    </script>--}}
                </div>
            </div>
            <div class="col">
                <div class="phone">
                    <div class="title">{{ c_trans('Infolinia') }}</div>
                    <div class="content">
                        <a href="tel:{{ preg_replace('/\s+/', '', c_template()->option('phone', '+48 22 599 44 99')) }}">
                            {{ c_template()->option('phone', '+48 22 599 44 99') }}
                        </a>
                    </div>
                </div>
            </div>

            {{--            <div class="col">--}}
            {{--                <div class="lang">--}}
            {{--                    <div class="dropdown onHover">--}}
            {{--                        <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">--}}
            {{--                            PL--}}
            {{--                        </a>--}}
            {{--                        <div class="dropdown-menu dropdown-menu-left noHide" aria-labelledby="dropdownMenuLink">--}}
            {{--                            <div class="columns">--}}
            {{--                                <div class="columnLang">--}}
            {{--                                    <div class="inputRow">--}}
            {{--                                        <input type="radio" id="lang1" name="lang" checked="" value="PL">--}}
            {{--                                        <label for="lang1"><span></span>polski - PL</label>--}}
            {{--                                    </div>--}}
            {{--                                    <div class="inputRow">--}}
            {{--                                        <input type="radio" id="lang2" name="lang" value="EN">--}}
            {{--                                        <label for="lang2"><span></span>angielski - EN</label>--}}
            {{--                                    </div>--}}
            {{--                                    <div class="inputRow">--}}
            {{--                                        <input type="radio" id="lang3" name="lang" value="DE">--}}
            {{--                                        <label for="lang3"><span></span>niemiecki - DE</label>--}}
            {{--                                    </div>--}}
            {{--                                </div>--}}
            {{--                                <div class="columnCurrency">--}}
            {{--                                    <div class="inputRow">--}}
            {{--                                        <input type="radio" id="currency1" name="currency" checked="">--}}
            {{--                                        <label for="currency1"><span></span>PLN</label>--}}
            {{--                                    </div>--}}
            {{--                                    <div class="inputRow">--}}
            {{--                                        <input type="radio" id="currency2" name="currency">--}}
            {{--                                        <label for="currency2"><span></span>EUR</label>--}}
            {{--                                    </div>--}}
            {{--                                    <div class="inputRow">--}}
            {{--                                        <input type="radio" id="currency3" name="currency">--}}
            {{--                                        <label for="currency3"><span></span>GBR</label>--}}
            {{--                                    </div>--}}
            {{--                                </div>--}}
            {{--                            </div>--}}
            {{--                        </div>--}}
            {{--                        <div class="hideShadow"></div>--}}
            {{--                    </div>--}}
            {{--                </div>--}}
            {{--            </div>--}}

            {{--            @if(request()->ip() == '178.235.177.221')--}}
            <div class="col">
                <style>

                    .ct-topbar__list {
                        margin-bottom: 0px;
                    }

                    .ct-language__dropdown {
                        padding-top: 8px;
                        max-height: 0;
                        overflow: hidden;
                        position: absolute;
                        top: 110%;
                        left: -3px;
                        -webkit-transition: all 0.25s ease-in-out;
                        transition: all 0.25s ease-in-out;
                        width: 100px;
                        text-align: center;
                        padding-top: 0;
                        z-index: 200;
                    }

                    .ct-language__dropdown li {
                        background: #222;
                        padding: 5px;
                    }

                    .ct-language__dropdown li a {
                        display: block;
                    }

                    .ct-language__dropdown li:first-child {
                        padding-top: 10px;
                        border-radius: 3px 3px 0 0;
                    }

                    .ct-language__dropdown li:last-child {
                        padding-bottom: 10px;
                        border-radius: 0 0 3px 3px;
                    }

                    .ct-language__dropdown li:hover {
                        background: #444;
                    }

                    .ct-language__dropdown:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        margin: auto;
                        width: 8px;
                        height: 0;
                        border: 0 solid transparent;
                        border-right-width: 8px;
                        border-left-width: 8px;
                        border-bottom: 8px solid #222;
                    }

                    .ct-language {
                        position: relative;
                        padding: 10px 0;
                    }

                    .ct-language:hover .ct-language__dropdown {
                        max-height: 200px;
                        padding-top: 8px;
                    }

                    .list-unstyled {
                        padding-left: 0;
                        list-style: none;
                    }

                    .lang-select {
                        display: block;
                        width: 30px;
                    }

                </style>
                <div class="lang" style="padding: 0 10px 0 10px; display: -webkit-inline-box;">
                    <a href="#googtrans(pl|pl)" class="lang-pl lang-select" data-lang="pl"><img width="30"
                                                                                                src="https://upload.wikimedia.org/wikipedia/commons/4/40/Flag_of_Poland_2.svg"
                                                                                                alt="POLAND"></a>
                    <a href="#googtrans(pl|uk)" class="lang-ukr lang-select" data-lang="uk"
                       style="margin-left: 5px; margin-right: 10px;"><img width="30"
                                                                          src="https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Ukraine.svg"
                                                                          alt="UKRAINE"></a>
                </div>
            </div>
            {{--            @endif--}}

            <div class="col">
                <div class="login">
                    <div class="dropdown onHover">
                        <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="false"
                           aria-expanded="false">
                            <span class="title">{{ c_trans('Witaj') }}</span>
                            @if (auth()->check())
                                <span class="content">{{ auth()->user()->name }}</span>
                            @else
                                <span class="content">{{ c_trans('Zaloguj się') }}</span>
                            @endif
                        </a>
                        <div class="dropdown-menu dropdown-menu-left noHide" aria-labelledby="dropdownMenuLink">
                            @if (auth()->check())
                                <ul class="links">
                                    <li><a href="{{ route('account::edit') }}">{{ c_trans('Moje konto') }}</a></li>
                                    <li>
                                        <a href="{{ route('account::addresses::list') }}">{{ c_trans('Moje adresy') }}</a>
                                    </li>
                                    <li>
                                        <a href="{{ route('account::invoices::list') }}">{{ c_trans('Moje dane faktury') }}</a>
                                    </li>
                                    <li><a href="{{ route('orders::history') }}">{{ c_trans('Moje zakupy') }}</a></li>
                                    <li><a href="{{ route('account::urls') }}">{{ c_trans('Linki użytkownika') }}</a>
                                    </li>
                                    <li><a href="{{ route('account::password') }}">{{ c_trans('Zmień hasło') }}</a></li>
                                    <li><a href="{{ route('logout') }}">{{ c_trans('Wyloguj się') }}</a></li>
                                </ul>
                            @else
                                <div class="loginRow">
                                    <a class="btn btn-black fullWidth"
                                       href="{{ route('login') }}">{{ c_trans('Zaloguj się') }}</a>
                                </div>
                                <div class="registerRow">
                                    <a href="{{ route('register') }}">{{ c_trans('Nie masz konta? Zarejestruj się') }}</a>
                                </div>
                            @endif
                        </div>
                        <div class="hideShadow"></div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div style="padding-right:4px;padding-left:4px;border-left: solid 1px #e1e1e1;">
                    @currencySelect()
                </div>
            </div>
            <div class="col">
                <div style="border-left: solid 1px #e1e1e1; padding: 0 20px; line-height: 18px; width: 180px;">
                    <svg style="margin: 10px 5px 0 0; vertical-align: top;" xmlns="http://www.w3.org/2000/svg"
                         width="24" height="24" viewBox="0 0 24 24">
                        <path d="M0 0h24v24H0z" fill="none"/>
                        <path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z"/>
                    </svg>
                    <a style="display: inline-block; width: 105px; padding: 12px 0;"
                       href="{{ route('ProductsRepository::index') }}">
                        <span style="font-size: 18px;" class="title">{{ c_trans('Przechowalnia') }}</span>
                        <span style="font-size: 15px;"
                              class="content">{{ c_trans('Produkty: ') . count(session('products_repository') ?: []) }}</span>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="cart cartListMini">
                    @include('Orders::client.layouts.ajax.mini')
                </div>
            </div>
            <div class="col">
                <div style="padding-right: 0;" class="order">
                    <a class="btn btn-primary" href="{{ route('shopcart::list') }}">{{ c_trans('Zamawiam') }}</a>
                </div>
            </div>
            {{--            <div class="col">--}}
            {{--                <div class="order">--}}
            {{--                    <a style="font-size: 12px !important; padding: 10px;" class="btn btn-secondary" href="{{ route('ProductsRepository::index') }}">{{ c_trans('Przechowalnia') }}</a>--}}
            {{--                </div>--}}
            {{--            </div>--}}
        </div>
    </div>
</header>
<div class="filterButton">
    <div class="filterButtonContainer">
        <a class="slideUp">{{c_trans('Rozwiń filtry')}}</a>
        <a class="slideDown">{{c_trans('Zwiń filtry')}}</a>
        <span class="fa fa-sort"></span>
    </div>
</div>


@if (isset($product) && !empty($product))
    <header class="productTabsHeader">
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    @if ($product->productAttributesMatrix->isNotEmpty())
                        <div class="tabLinkColumn specification">
                            <div class="tabLink">
                                <span class="fa fa-cog"></span>
                                <div class="title">{{ c_trans('Specyfikacja') }}</div>
                            </div>
                        </div>
                    @endif
                    @if($product->c('getExistsLanguageColumnValue', 'description'))
                        <div class="tabLinkColumn description">
                            <div class="tabLink">
                                <span class="fa fa-pencil"></span>
                                <div class="title">{{ c_trans('Opis') }}</div>
                            </div>
                        </div>
                    @endif
                    @if(\App\Core\Modules\Shipments\Models\Shipment::cs('getAvailableShipments', collect([$product])))
                        <div class="tabLinkColumn shipment">
                            <div class="tabLink">
                                <span class="fa fa-truck"></span>
                                <div class="title">{{ c_trans('Koszty wysyłki') }}</div>
                            </div>
                        </div>
                    @endif
                    @if($product->productsManufacturer !== null && ($warranty = $product->productsManufacturer->warranty))
                        <div class="tabLinkColumn warranty">
                            <div class="tabLink">
                                <span class="fa fa-file"></span>
                                <div class="title">{{ c_trans('Warunki gwarancji') }}</div>
                            </div>
                        </div>
                    @endif
                    @if (isset($linkedProducts) && $linkedProducts->count())
                        <div class="tabLinkColumn linked">
                            <div class="tabLink">
                                <span class="fa fa-link"></span>
                                <div class="title">{{ c_trans('Inni zamawiali również') }}</div>
                            </div>
                        </div>
                    @endif
                    @if (isset($recommendedProducts) && $recommendedProducts->count())
                        <div class="tabLinkColumn recommended">
                            <div class="tabLink">
                                <span class="fa fa-star"></span>
                                <div class="title">{{ c_trans('Polecane') }}</div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </header>
@endif

@push('footScripts')
    <script>
        var product_search_url = "{{ route('search::product::without::category') }}",
            categories_url = "{{ route('categories::show') }}",
            product_search_filters_url = '{{ route('product::ajax::search::filters', '%s') }}',
            product_search_results_url = '{{ route('product::ajax::search::filter', ['%c', '%p', '%l', '%s']) }}',
            product_url = '{{ route('product::ajax', '%s') }}',
            shopcart_url = '{{ route('shopcart::added') }}',
            search_manufacturers_list = '{{ route('product::ajax::search::manufacturers', '%s') }}';
        shopcart_mini_url = '{{ route('shopcart::mini') }}';
        shopcart_remove_url = '{{ route('shopcart::remove') }}';

        selected_currency_code = '{{ $currentCurrencyCode }}';

        window.cstore.search_autocomplete_url = '{{ route('search::product::autocomplete')}}';


        $('.searchForm').submit(function (e) {
            e.preventDefault();
            console.log($(this).find('input').val())

            var query = "",
                searchQuery = $(this).find('input').val();

            if (searchQuery && searchQuery.length > 0) {
                query += 'search?t=' + encodeURIComponent(searchQuery.replace('', ''));
            }

            if (query.length == 0) {
                query = 'search';
            }

            query = encodeURI(query);

            url = product_search_url.replace('search', query);
            if (query.length > 0) {
                window.location.href = url;
            }
        });
    </script>
@endpush