@extends('layouts.app')
@section('meta.title')
    <title>{{($seo_data != "")?$seo_data->metaTitle:""}}</title>
@endsection
@section('meta.description')
    <meta name="description" content="{{($seo_data != "")?$seo_data->metaDescription:""}}">
@endsection
@section('meta.keywords')
    <meta name="keywords" content="{{($seo_data != "")?$seo_data->metaKeyWords:""}}">
@endsection

@section('custom-css')
    <link rel="stylesheet" type="text/css" href="{{ asset('slick/slick.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('slick/slick-theme.css') }}">

    <style>
        @media (min-width: 320px) and (max-width: 480px) {
            .menu-restaurant-icon {
                width: 280% !important;
            }
        }

        .menu-summary-header {
            margin-top: -50px;
            padding: 20px;
            background: white;
            border-radius: 25px;
            box-shadow: 0px 2px 0px 1px lightgray;
        }

        .special-offer {
            border-radius: 5px;
            width: 7rem;
            text-align: center;
            padding: 3px;
            color: green;
            background: lightgreen;
        }

        .search-input#search-input {
            font-family: FontAwesome !important;
            width: 100% !important;
            padding: 2.5rem;
            border-radius: 25px;
            margin-top: 1rem;
        }

        .menu-container {
            background: white;
        }

        .slider {
            margin: 25px auto !important;
        }

        .slick-disabled {
            display: none !important;
        }

        figcaption > a.activeMenuCategory {
            color: green !important;
        }

        figcaption > a {
            padding: 0 10px;
        }

        figcaption > a:focus {
            outline: none !important;
        }

        .menu-categories-slider .slick-slide:not(.slick-active) {
            outline: none;
            opacity: 1;
        }

        .hiddenMenuCategories {
            display: none;
        }

        .shownMenuCategory {
            display: block;
        }

        .showAllCategories {
            display: block !important;
        }

        .quantity-field, .button-minus, .button-plus, .button-minus-cart, .button-plus-cart, .quantity-field-cart {
            border: 1px solid #eeeeee;
            box-sizing: border-box;
            margin: 0;
            outline: none;
            padding: 10px;
        }

        .button-minus, .button-plus, .button-minus-cart, .button-plus-cart {
            -webkit-appearance: button;
            cursor: pointer;
            color: green;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .input-group {
            clear: both;
            margin: 15px 0;
            position: relative;
        }

        .input-group .button-minus, .input-group .button-plus {
            background-color: #eeeeee;
            min-width: 4rem;
            width: auto;
            transition: all 300ms ease;
        }

        .input-group .button-minus,
        .input-group .button-plus {
            font-weight: bold;
            height: 4rem;
            padding: 0;
            width: 4rem;
            position: relative;
        }

        .input-group .quantity-field {
            position: relative;
            height: 4rem;
            left: -6px;
            text-align: center;
            width: 6rem;
            display: inline-block;
            font-size: 13px;
            margin: 0 0 5px;
            resize: vertical;
        }

        .input-group .button-minus-cart, .input-group .button-plus-cart {
            background-color: #eeeeee;
            min-width: 3rem;
            width: auto;
            transition: all 300ms ease;
        }

        .input-group .button-minus-cart,
        .input-group .button-plus-cart {
            font-weight: bold;
            height: 3rem;
            padding: 0;
            width: 3rem;
            position: relative;
        }

        .input-group .quantity-field-cart {
            position: relative;
            height: 3rem;
            left: -6px;
            text-align: center;
            width: 4rem;
            display: inline-block;
            font-size: 13px;
            margin: 0 0 5px;
            resize: vertical;
        }

        .button-plus, .button-plus-cart {
            left: -13px;
        }

        .menu-categories-nav {
            cursor: pointer;
        }

        .quantity-field {
            -moz-appearance: textfield;
            -webkit-appearance: none;
        }

        .slick-track {
            display: flex;
        }

        span.cart-item-name {
            font-size: 12px;
        }

        .minimum-order {
            text-align: center;
            padding-bottom: 5px;
        }

        .minimum-order-passed {
            border-bottom: 2px solid green;
        }

        .collapse#restaurant-coupon {
            display: none !important;
        }
        .collapse.in#restaurant-coupon {
            display: flex !important;
        }

        .order-details-text {
            width: 50rem;
            margin: -4rem 0 -7rem -7rem;
        }

        .shopping-cart-btn {
            cursor: pointer;
            background: #42CD69;
            width: 100%;
            border: unset;
            outline: unset;
            padding: 2rem 6rem;
            text-align: left;
            display: flex;
            align-items: center;
        }

        .shopping-cart-btn > img {
            height: 2.5rem;
        }

        .shopping-cart-btn > span {
            color: white;
            margin-left: 1rem;
            font-size: 25px;
            font-weight: bolder;
        }

        .menuContainerTopMargin {
            margin-top: 8.3rem;
        }

        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin .5s linear infinite; /* Safari */
            animation: spin .5s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        html {
            scroll-behavior: smooth;
        }
    </style>
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}"/>

    <div class="menu-header"
         style="background: url('{{$restaurant->photoUrl}}') no-repeat; ">
    </div>
    <div class="menu-container">
        <div class="container ">
            <button onclick="topFunction()" id="topBtn" title="Go to top"><i class="fa fa-angle-up"></i></button>
            <div class="row menu-summary-header">
                <div class="col-md-6 col-xs-12">
                    <span class="delivery-title">
                        <div class="row">
                            <div class="col-md-12 flex justify-flex-start">
                                <span>
                                    {{$restaurant->restaurantName}}
                                </span>
                                @if(Session::has('authenticated') && Session::get('authenticated') == true)
                                    <ul class="menu-heart" style="padding-left: 1rem; margin-top: 0 !important;">
                                    <li class="list-unstyled single-order-detail-rate">
                                        <i
                                                id="{{$restaurant->restaurantID}}"
                                                class="fa {{ $restaurant->favourite == false ? "fa-heart-o" : "fa-heart" }}"
                                                data-once="{{ $restaurant->favourite == false ? 0 : 1 }}"
                                                onclick="fillHeart({{$restaurant->restaurantID}});"
                                                style="font-size: 2.5rem; cursor: pointer;color: #ff1149;"
                                                aria-hidden="true">
                                        </i>
                                    </li>
                                </ul>
                                @endif
                            </div>
                        </div>
                    </span>
                    <div class="flex justify-flex-start mt-4">
                        <p class="single-order-detail-rate">
                            @php
                                if(isset($restaurant_categories)){
                                    foreach ($restaurant_categories as $restaurantCategory){
                                        $sep = (next($restaurant_categories))  ?  ", " : " ";
                                        echo $restaurantCategory->categoryName.$sep;
                                    }
                                }
                            @endphp
                        </p>
                        @if(isset($restaurant->averageRate))
                            <h4 class="text-gray" style="margin-top: .3rem !important; margin-right: 10px">
                                &nbsp; {{ round($restaurant->averageRate, 1) }} &middot;
                                <span class="fa fa-star"></span> ({{$restaurant->ratesNo}})
                            </h4>
                        @endif
                        @if($firstDiscount)
                            <div class="special-offer">
                                -{{  $country->currency->isSymbolAfterAmount ? round($firstDiscount, $country->currency->decimalPlaces) . ' ' . $country->currency->symbol : $country->currency->symbol . ' ' . round($firstDiscount, $country->currency->decimalPlaces) }}
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="col-md-2 col-sm-4 col-xs-12 text-center">
                        <div class="ellipse outer-ellipse">
                            <div class="ellipse inner-ellipse">
                                <p class="ellipse-content pt-3 flex flex-column justify-center align-items-center text-center">
                                    <span class="time">{{$restaurant->deliveryTime}}</span>
                                    <span class="unit">Min</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-10 col-sm-8 col-xs-12">
                        <div class="col-md-12">
                            <img src="{{asset('images/search.png')}}" class="form-control-left-icon" style="margin-top: 1.8rem; margin-left: 2.5rem"/>
                            <input id="search-input" class="form-control search-input" style="padding-left: 5rem" placeholder="Kërko në menu">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="col-md-7 col-xs-12 menu-categories-container">
                <div class="flex justify-center">
                    <div class="loader" hidden></div>
                </div>
                @if(isset($restaurant->menuCategories))
                    <div class="row">
                        <div class="col-md-12 menu-nav-tabs mw-100">
                            <ul class="nav nav-tabs item-categories-tab">
                                <section class="menu-categories-slider slider">
                                    @foreach($restaurant->menuCategories as $menuCategory)
                                        <figcaption class="figure-caption single-order-detail-title text-center" style="margin: auto 0">
                                            <a href="#menu-{{$menuCategory->id}}" class="menu-categories-nav {{$loop->first ? 'activeMenuCategory' : ''}}"
                                               data-menu-category-id="{{$menuCategory->id}}">{{ $menuCategory->categoryName }}</a>
                                        </figcaption>
                                    @endforeach
                                </section>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-xs-12">
                            <div class="new-restaurant-cont main-div-to-hide">
                                <div class="tab-content">
                                    <input type="text" class="form-control" id="restaurant-id"
                                           value="{{$restaurant->restaurantID}}" style="visibility: hidden;">
                                    <!--Panel 1-->
                                    <div class="tab-pane active" id="rest-menu" role="tabpanel" data-spy="scroll"
                                         data-target=".scrollspy">
                                        <div class="row">
                                            <div class="col-md-12 col-xs-12">
                                                @if($banner)
                                                    <article class="profile-order discount-div" style="margin-bottom: 3rem; margin-right: -2rem">
                                                        <div class="row">
                                                            <div class="col-md-2">
                                                                <img style="max-height: 80px" src="{{$banner->url}}">
                                                            </div>
                                                            <div class="col-md-10 single-restaurant-desc">
                                                                <h3>{{$banner->title}}</h3>
                                                                <p>{{$banner->description}}</p>
                                                            </div>
                                                        </div>
                                                    </article>
                                                @endif
                                                @if(isset($restaurant->menuCategories))
                                                    @foreach($restaurant->menuCategories as $menuCategory)
                                                        <div class="menu-categories-data"
                                                             id="menu-{{$menuCategory->id}}">
                                                            @foreach($menuCategory->menuItems as $menuItem)
                                                                <div class="row ct-row menu-item-divs" data-searchable="{{$menuItem->itemName}}" id="menu-item-div-{{$menuItem->id}}">
                                                                    <div @if($menuItem->image != '') class="col-lg-9 col-md-9 col-xs-9"
                                                                         id="text-of-menu"
                                                                         @else class="col-md-12 col-xs-12" @endif>
                                                                        <input type="hidden"
                                                                               value="{{$menuItem->id}}"
                                                                               class="item-id">
                                                                        <div class="single-order-detail-title">
                                                                            <h5>{{$menuItem->itemName}}</h5>
                                                                            <p>{{$menuItem->itemDescription }}</p>

                                                                            <div class="price-div">
                                                                                @if($menuItem->oldPrice > $menuItem->itemPrice && round($menuItem->oldPrice) != 0)
                                                                                    <span style="text-decoration: line-through">
                                                                                        {{  $country->currency->isSymbolAfterAmount ? round($menuItem->oldPrice, $country->currency->decimalPlaces) . ' ' . $country->currency->symbol : $country->currency->symbol . ' ' . round($menuItem->oldPrice, $country->currency->decimalPlaces) }}
                                                                                    </span>
                                                                                    &nbsp;&nbsp;
                                                                                    <span class="price" style="color: green">
                                                                                        {{  $country->currency->isSymbolAfterAmount ? round($menuItem->itemPrice, $country->currency->decimalPlaces) . ' ' . $country->currency->symbol : $country->currency->symbol . ' ' . round($menuItem->itemPrice, $country->currency->decimalPlaces) }}
                                                                                    </span>
                                                                                @else
                                                                                    <span class="price">
                                                                                        {{  $country->currency->isSymbolAfterAmount ? round($menuItem->itemPrice, $country->currency->decimalPlaces) . ' ' . $country->currency->symbol : $country->currency->symbol . ' ' . round($menuItem->itemPrice, $country->currency->decimalPlaces) }}
                                                                                    </span>
                                                                                @endif
                                                                            </div>
                                                                            <div class="input-group">
                                                                                <input type="button" value="-" id="decrement-{{$menuItem->id}}"  style="z-index: 2" class="remove-from-cart button-minus" data-field="quantity">
                                                                                <input disabled id="quantity-field-{{$menuItem->id}}"  style="z-index: 1" type="number" step="1" max="" value="0" name="quantity" class="quantity-field">
                                                                                <input type="button" value="+" id="increment-{{$menuItem->id}}"  style="z-index: 2" class="button-plus" data-field="quantity">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @if($menuItem->image != '')
                                                                        <div class="col-lg-3 col-md-3 col-xs-3">
                                                                            <img src="{{str_replace(' ','%20', $menuItem->image)}}"
                                                                                 class="menu-restaurant-icon" width="85"
                                                                                 height="80"
                                                                                 style="width: 120%;border-radius: 5px;"
                                                                                 alt="{{$menuItem->itemDescription}}"
                                                                                 title="{{$menuItem->itemName}}"
                                                                            >
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade " id="rest-info" role="tabpanel">
                                        <h3 class="menu-tab-title"> Më shumë informacion
                                            për {{$restaurant->restaurantName}}</h3>
                                        <p class="restaurant-desc">
                                            {{$restaurant->description}}
                                        </p>
                                        <p class="restaurant-desc">  {{$restaurant->address}}, Albania</p>
                                        <br>
                                        <h4> Orari i hapjes</h4>
                                        <table class="table table-responsive">
                                            <tbody>
                                            <tr>
                                                <td>E Hënë</td>
                                                <td>{{$restaurant->monday}}</td>
                                            </tr>
                                            <tr>
                                                <td>E Martë</td>
                                                <td>{{$restaurant->tuesday}}</td>
                                            </tr>
                                            <tr>
                                                <td>E Mërkurë</td>
                                                <td>{{$restaurant->wednesday}}</td>
                                            </tr>
                                            <tr>
                                                <td>E Enjte</td>
                                                <td>{{$restaurant->thursday}}</td>
                                            </tr>
                                            <tr>
                                                <td>E Premte</td>
                                                <td>{{$restaurant->friday}}</td>
                                            </tr>
                                            <tr>
                                                <td>E Shtunë</td>
                                                <td>{{$restaurant->saturday}}</td>
                                            </tr>
                                            <tr>
                                                <td>E Dielë</td>
                                                <td>{{$restaurant->sunday}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="no-items-div" hidden>
                        <p class="col-md-12 col-xs-12 menu-offer theme-color">
                            <span class="col-md-8 col-xs-8">Nuk gjenden produkte me këtë emër!</span>
                        </p>
                    </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-4 col-xs-12">
                @include('partials.orderSummary', ['restaurant' => $restaurant, 'showMinimumOrder' => true])
            </div>

                @else
                    <div style="height: 400px"></div>
                @endif
        </div>
    </div>

    <!-- Modal of allergic part-->
    <div class="modal fade" id="alergic-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close outline-none" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Informacion mbi alergjitë dhe intolerancat e ushqimit
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        Nëse keni alergji ose intolerance të ushqimit që mund të dëmtojnë shëndetin tuaj, ju lutemi
                        të kontaktoni direkt me restorantin para se të vendosni porosinë (mund të kërkoni ndihmë
                        përmes bisedës online ose duke dërguar një email tek info@baboon.al).
                    </p>
                    <br>
                    <p>
                        Gjithashtu ju rekomandojmë që të kontaktoni restorantin edhe pas dërgimit të porosisë për të
                        konfirmuar kërkesat tuaja.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default outline-none" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <!--Modal of set address-->
    <div class="modal fade" id="set-address-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Shkruani adresën e dërgimit
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        Ne duhet të kontrollojmë nëse ky restorant mund të ofrojë dërgesa pranë zonës ku ju
                        dëshironi
                    </p>
                    <div class="input-group">
                        <input type="text" class="form-control" id="search-location" name="location"
                               placeholder="Vendos adresën e saktë ku ndodhesh">
                        <span class="input-group-btn">
                        <button class="btn btn btn-secondary search-button" type="button">Kërko</button>
                    </span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <!-- Modal check order -->
    <div class="modal" id="check-order-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close outline-none" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Porosia juaj nuk mund të kryhet
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        Porosia juaj duhet të kalojë vlerën e minimumit te porosisë
                        prej {{$restaurant->minimumorder}} L !
                    </p>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default outline-none" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

    <!-- Modal for closed restaurants -->
    <div class="modal" id="closed-restaurant-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close outline-none" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Porosia juaj nuk mund të kryhet
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        @php

                            $today = date("l");

                            $dayOfWeek = date("l", strtotime($today));

                        switch ($dayOfWeek){
                         case 'Monday':
                            $open = substr($restaurant->monday,0,5);
                            break;

                         case 'Tuesday':
                            $open = substr($restaurant->tuesday,0,5);
                            break;
                         case 'Wednesday':
                            $open = substr($restaurant->wednesday,0,5);
                            break;
                         case 'Thursday':
                            $open = substr($restaurant->thursday,0,5);
                            break;
                         case 'Friday':
                            $open = substr($restaurant->friday,0,5);
                            break;
                         case 'Saturday':
                            $open = substr($restaurant->saturday,0,5);
                            break;
                         case 'Sunday':
                            $open = substr($restaurant->sunday,0,5);
                            break;
                        default:
                            $open = explode('-',$restaurant->monday)[0];
                        }


                        @endphp
                        Restoranti është i mbyllur në këtë orë ! Ai hapet në orën {{ ($open)}}.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default outline-none" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal" id="error-order-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close outline-none" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        Porosia juaj nuk mund të kryhet
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        Porosia juaj nuk mund te kryhet ne kete moment! Ju lutem porosisni perseri me vone !
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default outline-none" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('custom-js')
    <script src="{{asset('slick/slick.js')}}" type="text/javascript" charset="utf-8"></script>

    <script>

        let orderItems = null;

        orderItems = '' ;

        if (orderItems) {
            orderItems.forEach(function (item) {
                $('#quantity-field-' + item.id).val(item.quantity).css('background', 'lightgreen')
            })
        }

        $(".menu-categories-slider").slick({
            slidesToShow: 6,
            focusOnSelect: false,
            variableWidth: true,
            infinite: false,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                }
            ],
            prevArrow: "<button type='button' class='slick-prev pull-left'><img src='{{asset('images/arrow-left.png')}}' /></button>",
            nextArrow: "<button type='button' class='slick-next pull-right'><img src='{{asset('images/arrow-right.png')}}' /></button>"
        });

        $(document).ready(function () {

            $('a[href*="#"]')
                .not('[href="#"]')
                .not('[href="#0"]')
                .click(function(event) {
                    if (
                        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                        &&
                        location.hostname == this.hostname
                    ) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length) {
                            event.preventDefault();
                            $('html, body').animate({
                                scrollTop: target.offset().top - 150
                            });
                        }
                    }
                });

            function debounce(func, wait, immediate) {
                var timeout;
                return function() {
                    var context = this, args = arguments;
                    var later = function() {
                        timeout = null;
                        if (!immediate) func.apply(context, args);
                    };
                    var callNow = immediate && !timeout;
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                    if (callNow) func.apply(context, args);
                };
            };

            let oldSearch = '';

            $('#search-input').on('keyup', debounce(function (e) {
                let currentValue = e.target.value.toUpperCase();
                let menuTabs = $('.menu-nav-tabs');
                let menuCategoriesData = $('.menu-categories-data');
                let menuItemDivs = $('.menu-item-divs');
                let menuContainer = $('.menu-categories-container');
                let loader = $('.loader');
                let mainDivToHide = $('.main-div-to-hide');
                let noItemsDiv = $('.no-items-div');
                let discountDiv = $('.discount-div');

                if (currentValue === oldSearch) {
                    return;
                }

                if (oldSearch === '') {
                    loader.addClass('menuContainerTopMargin');
                } else {
                    loader.removeClass('menuContainerTopMargin');
                }

                oldSearch = currentValue;
                menuTabs.hide();

                mainDivToHide.hide();
                loader.show();
                let itemsShownCounter = 0;
                setTimeout(function() {
                    mainDivToHide.show();
                    if (discountDiv.data('should-display') == 1) {
                        discountDiv.hide();
                    }
                    if (currentValue === '') {
                        menuTabs.show();
                        if (discountDiv.data('should-display') == 1) {
                            discountDiv.show();
                        }
                        menuContainer.removeClass('menuContainerTopMargin');
                        menuCategoriesData.removeClass('showAllCategories');
                        menuItemDivs.each((index, itemDiv) => {
                            $(itemDiv).show()
                        })
                        loader.hide();
                        return;
                    }
                    menuContainer.addClass('menuContainerTopMargin');
                    menuItemDivs.hide();
                    menuItemDivs.each((index, itemDiv) => {
                        if ($(itemDiv).data('searchable').toUpperCase().includes(currentValue) || $(itemDiv).data('searchable').replace(/ë/g, 'e').toUpperCase().includes(currentValue) || $(itemDiv).data('searchable').replace(/ç/g, 'c').toUpperCase().includes(currentValue)) {
                            $(itemDiv).show();
                            itemsShownCounter++;
                        }
                    })

                    menuCategoriesData.addClass('showAllCategories');
                    loader.hide();

                    if (! itemsShownCounter) {
                        noItemsDiv.show();
                    } else {
                        noItemsDiv.hide();
                    }
                }, 300)
            }, 200));

            let menuCategoriesNav = $('.menu-categories-nav');
            menuCategoriesNav.on('click', function () {
                // menuCategoriesNav.removeClass('activeMenuCategory');
                // let selectedMenuCategoryId = $(this).data('menu-category-id')

                // let displayedMenuCategory = $('.menu-categories-data.shownMenuCategory');

                // if (displayedMenuCategory.attr('id') != selectedMenuCategoryId) {
                //     displayedMenuCategory.addClass('hiddenMenuCategories').removeClass('shownMenuCategory')
                // }

                // let newSelected = $('.menu-categories-data.hiddenMenuCategories#' + selectedMenuCategoryId)
                //
                // newSelected.addClass('shownMenuCategory').removeClass('hiddenMenuCategories')

                // $(this).addClass('activeMenuCategory')
            });

            var h = $(window).height(), w = $(window).width();
            if (w < 650) {
                $('.menu-cat-list-angle').show();
                $('#menu-category').addClass('collapse');

            } else {
                $('#menu-category').removeClass('collapse');
                $('.menu-cat-list-angle').hide();
            }
            $(window).resize(function () {

                var nh = $(window).height(), nw = $(window).width();
                // compare the corresponding variables.
                h = nh;
                w = nw; // update h and w;
                if (w < 650) {
                    $('.menu-cat-list-angle').show();
                    $('#menu-category').addClass('collapse');

                } else {
                    $('#menu-category').removeClass('collapse');
                    $('.menu-cat-list-angle').hide();
                }
            });


            let item;

            $('.button-plus').on('click manuallyAdded', function () {
                console.log('entered here')
                item = {
                    id: parseInt($(this).parent().parent().parent().children(':first-child').val()),
                    name: $(this).parent().parent().find("h5").text(),
                    price: parseInt($(this).parent().parent().find(".price-div").find('.price').text())
                };

                if (checkIfExistsInCart(item.name.replace(/\s/g, '')) === false) {
                    $(createItem(item)).appendTo($('.cart-item-container')).hide().show(500);
                } else {
                    changeItemQuantity(item.id, 'increment');
                }

                calculateTotal();
                createSession();

                var min_order = parseInt({{$restaurant->minimumorder}});
                var total = parseInt($('#cart-total').text());

                moveProgressBar(total > min_order)
            });

            $('.button-minus').on('click', function () {
                item = {
                    id: parseInt($(this).parent().parent().parent().children(':first-child').val()),
                    name: $(this).parent().parent().find("h5").text(),
                    price: parseInt($(this).parent().parent().find(".price-div").find('.price').text())
                };

                if (checkIfExistsInCart(item.name.replace(/\s/g, '')) === false) {
                    return;
                }

                changeItemQuantity(item.id, 'decrement');
                calculateTotal();
                createSession();

                var min_order = parseInt({{$restaurant->minimumorder}});
                var total = parseInt($('#cart-total').text());

                moveProgressBar(total > min_order)
            });

            $('.cart-tab').on('click', '.button-minus-cart', function () {

                let id = $(this).data('item-id');
                changeItemQuantity(id, 'decrement');

                calculateTotal();
                createSession();

                let cartItems = $('.cart-item-list').length;

                if (!cartItems) {
                    $('#cart-total').text(0 + 'L');
                    clearSession();
                }

                var min_order = parseInt({{$restaurant->minimumorder}});
                var total = parseInt($('#cart-total').text());

                moveProgressBar(total > min_order)
            });

            $('.cart-tab').on('click', '.button-plus-cart', function () {
                let id = $(this).data('item-id');
                changeItemQuantity(id, 'increment');
                createSession();
                calculateTotal();

                var min_order = parseInt({{$restaurant->minimumorder}});
                var total = parseInt($('#cart-total').text());

                moveProgressBar(total > min_order)
            });
        });

        function clearSession() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                method: "POST",
                url: '{{route('session.clear')}}',
                success: function (msg) {

                    console.log('test');
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        }

        function calculateTotal() {
            let prices = [];
            let quantity = [];
            var sum = 0;
            var tot = 0;
            Array.from(document.getElementsByClassName('cart-item-tot-price')).forEach(function (item) {
                prices.push(parseInt(item.innerHTML));
            });
            Array.from(document.getElementsByClassName('quantity-field-cart')).forEach(function (item) {
                quantity.push(parseInt($(item).val()));
            });

            //prices.forEach((price) => {sum += price});
            for ($i = 0; $i < prices.length; $i++) {
                sum += (prices[$i] * quantity[$i]);
            }


            //ToDo
            let discount = parseInt(document.getElementById('cart-sconto').innerHTML);
            let delivery_cost = parseInt(document.getElementById('cart-del-cost').innerHTML);
            let total = sum - discount + delivery_cost;

            let totalVal = `${total.toFixed('{{$country->currency->decimalPlaces}}')}`;
            let sumVal = `${sum.toFixed('{{$country->currency->decimalPlaces}}')}`;

            if (parseInt('{{$country->currency->isSymbolAfterAmount}}') == 1) {
                sumVal += ' {{$country->currency->symbol}}'
                totalVal += ' {{$country->currency->symbol}}'
            } else {
                sumVal = ' {{$country->currency->symbol}}' + sumVal
                totalVal = ' {{$country->currency->symbol}}' + totalVal
            }

            $('#cart-subtotal').text(sumVal);
            $('#cart-total').text(totalVal);
            $('#customer-tot-price').text(totalVal);
            $('#basket-price').text(totalVal);
            $('#basket-quantity').text(prices.length);
        }

        function checkIfExistsInCart(name) {
            "use strict";
            let items = [];
            Array.from(document.getElementsByClassName('cart-item-name')).forEach(function (item) {
                items.push(item.getAttribute("data-name"));
            });

            if (items.includes(name))
                return true;

            return false;
        }

        function changeItemQuantity(itemId, action) {
            let quantity = $(`#quantity-field-${itemId}`);
            let cartQuantity = $(`#quantity-field-cart-${itemId}`);

            const currentQuantity = parseInt(quantity.val());

            if (action === 'increment') {
                quantity.val(currentQuantity + 1);
                cartQuantity.val(currentQuantity + 1);
            } else if (action === 'decrement') {
                quantity.val(currentQuantity - 1);
                cartQuantity.val(currentQuantity - 1);
                if (parseInt(quantity.val()) === 0) {
                    quantity.css('background', '#FAFAFA')
                    $('#cart-item-list-' + itemId).remove();
                }
            }
        }

        function createItem(item) {

            let priceSpan = `${item.price.toFixed('{{$country->currency->decimalPlaces}}')}`;
            let priceVal = '';
            if (parseInt('{{$country->currency->isSymbolAfterAmount}}') == 1) {
                priceVal = priceSpan + ' {{$country->currency->symbol}}'
            } else {
                priceVal = '{{$country->currency->symbol}}' + priceSpan
            }


            var div = $('<div class="row cart-item-list text-center" id="cart-item-list-' + item.id + '"></div>');
            var col5 = $('<div class="col-xs-5"></div>');
            var name = $(`<span class="cart-item-name" data-name="${item.name.replace(/\s/g, '')}">${item.name}</span>`);
            var price = $(`<div class="col-xs-3"><span class="cart-item-tot-price">${priceVal}</span></div>`);
            var input_id = $(`<input type="hidden" value="${item.id}" class="cart-input-id">`);

            let leftDiv = `
                <div class="col-xs-4" style="margin: unset; padding: unset">
                    <div class="input-group" style="margin: unset; padding: unset">
                        <input data-item-id="${item.id}" type="button" value="-" class="button-minus-cart">
                        <input disabled id="quantity-field-cart-${item.id}" type="number" step="1" max="" value="1" name="quantity" class="quantity-field-cart">
                        <input data-item-id="${item.id}" type="button" value="+" class="button-plus-cart">
                    </div>
                </div>
            `

            col5.append(name);
            col5.append(input_id);
            div.append(leftDiv);
            div.append(col5);
            div.append(price);

            $('#quantity-field-' + item.id).val(1).css('background', 'lightgreen')

            return div;
        }

        function createSession() {
            var isOpen = `{{$restaurant->isOpen}}`;
            var restaurantID = `{{$restaurant->restaurantID}}`;
            var restaurantName = `{{$restaurant->restaurantName}}`;
            var logo = `{{$restaurant->logo}}`;
            var min_order = parseInt({{$restaurant->minimumorder}});
            var total = parseInt($('#cart-total').text());
            var subtotal = parseInt($('#cart-subtotal').text());
            var description = $('#sent-restaurant-comment').val();
            var transportCost = parseInt($('#cart-del-cost').text());
            var deliveryTime = parseInt(`{{$restaurant->deliveryTime}}`);
            var businessLat = {{$restaurant->latitude}};
            var businessLong = {{$restaurant->longitude}};

            if (!isOpen) {
                $('#closed-restaurant-modal').modal('show');
            } else {
                var items_id = [];
                var items_quantity = [];
                var items_name = [];
                var items_price = [];
                Array.from(document.getElementsByClassName('cart-input-id')).forEach(function (item) {
                    items_id.push(item.value);
                });
                Array.from(document.getElementsByClassName('quantity-field-cart')).forEach(function (item) {
                    items_quantity.push(parseInt($(item).val()));
                });
                Array.from(document.getElementsByClassName('cart-item-name')).forEach(function (item) {
                    items_name.push(item.innerHTML);
                });
                Array.from(document.getElementsByClassName('cart-item-tot-price')).forEach(function (item) {
                    items_price.push(parseInt(item.innerHTML));
                });

                var items_elements = [];
                for (var i = 0; i < items_id.length; i++) {

                    items_elements.push({
                        "id": items_id[i],
                        "quantity": items_quantity[i],
                        "name": items_name[i],
                        "price": items_price[i]
                    });

                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    method: "POST",
                    url: '{{route('checkout.save-order')}}',
                    data: {
                        restaurantID: restaurantID,
                        restaurantName: restaurantName,
                        logo: logo,
                        total: total,
                        subtotal: subtotal,
                        items: items_elements,
                        description: description,
                        transportCost: transportCost,
                        deliveryTime: deliveryTime,
                        minimumOrder: min_order,
                        latitude: businessLat,
                        longitude: businessLong,
                    },
                    dataType: "json",
                    success: function (msg) {
                        if (msg.success) {
                            //console.log($('.cart-item-container').val());
                            //console.log(msg.items);
                            if (msg.session == 'set') {
                                // window.location.href = '{{route("address.index")}}';
                            }

                        }
                    },
                    error: function (msg) {
                        //console.log(msg);
                        // $('#error-order-modal').modal('show');
                    }
                });

            }

        }

        $('#shopping-cart-btn').click(function () {

            var isOpen = `{{$restaurant->isOpen}}`;
            var restaurantID = `{{$restaurant->restaurantID}}`;
            var restaurantName = `{{$restaurant->restaurantName}}`;
            var logo = `{{$restaurant->logo}}`;
            var min_order = parseInt({{$restaurant->minimumorder}});
            var total = parseInt($('#cart-total').text());
            var subtotal = parseInt($('#cart-subtotal').text());
            var description = $('#sent-restaurant-comment').val();
            var transportCost = parseInt($('#cart-del-cost').text());
            var deliveryTime = parseInt(`{{$restaurant->deliveryTime}}`);
            var businessLat = {{$restaurant->latitude}};
            var businessLong = {{$restaurant->longitude}};

            if (total < min_order) {

                $('#check-order-modal').modal('show');
            } else if (!isOpen) {
                $('#closed-restaurant-modal').modal('show');
            } else {
                var items_id = [];
                var items_quantity = [];
                var items_name = [];
                var items_price = [];
                Array.from(document.getElementsByClassName('cart-input-id')).forEach(function (item) {
                    items_id.push(item.value);
                });
                Array.from(document.getElementsByClassName('quantity-field-cart')).forEach(function (item) {
                    items_quantity.push(parseInt($(item).val()));
                });
                Array.from(document.getElementsByClassName('cart-item-name')).forEach(function (item) {
                    items_name.push(item.innerHTML);
                });
                Array.from(document.getElementsByClassName('cart-item-tot-price')).forEach(function (item) {
                    items_price.push(parseInt(item.innerHTML));
                });

                var items_elements = [];
                for (var i = 0; i < items_id.length; i++) {

                    items_elements.push({
                        "id": items_id[i],
                        "quantity": items_quantity[i],
                        "name": items_name[i],
                        "price": items_price[i]
                    });

                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    method: "POST",
                    url: '{{route('checkout.save-order')}}',
                    data: {
                        restaurantID: restaurantID,
                        restaurantName: restaurantName,
                        logo: logo,
                        total: total,
                        subtotal: subtotal,
                        items: items_elements,
                        description: description,
                        transportCost: transportCost,
                        deliveryTime: deliveryTime,
                        minimumOrder: min_order,
                        latitude: businessLat,
                        longitude: businessLong,
                        isOpen: isOpen,
                    },
                    dataType: "json",
                    success: function (msg) {
                        if (msg.success) {
                            //console.log($('.cart-item-container').val());
                            //console.log(msg.items);
                            if (msg.session == 'set') {
                                window.location.href = '{{route("address.index")}}';
                            } else {
                                window.location.href = '{{route("create.profile")}}';
                            }
                        }
                    },
                    error: function (msg) {
                        //console.log(msg);
                        $('#error-order-modal').modal('show');
                    }
                });

            }

        });

        function moveProgressBar(display = false) {
            if (!{{$restaurant->minimumorder}}) {
                return;
            }
            var elem = document.getElementsByClassName("minimum-order")[0];

            if (display) {
                elem.innerHTML = 'Super! Sapo plotësove minimumin e porosisë!';
                $(elem).addClass("minimum-order-passed");
                return;
            }
            elem.innerHTML = 'Ju nuk e keni kaluar akoma minimumin e porosisë prej {{ $country->currency->isSymbolAfterAmount ? round($restaurant->minimumorder, $country->currency->decimalPlaces) . ' ' . $country->currency->symbol : $country->currency->symbol . ' ' . round($restaurant->minimumorder, $country->currency->decimalPlaces) }}';
            $(elem).removeClass("minimum-order-passed");
        }

        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("topBtn").style.display = "block";
            } else {
                document.getElementById("topBtn").style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

    </script>
    <script>
        function fillHeart(id) {
            if ($('#' + id).attr("data-once") == 0) {
                $('#' + id).removeClass("fa fa-heart-o fa-3x").addClass("fa fa-heart fa-3x");
                $('#' + id).attr("data-once", 1);
                $.ajax({
                    type: "GET",
                    url: '{{route("add-favourite-restaurant")}}',
                    data: {restaurantID: id}
                }).done(function (msg) {
                    console.log(msg);
                });
            } else {
                $('#' + id).removeClass("fa fa-heart fa-3x").addClass("fa fa-heart-o fa-3x");
                $('#' + id).attr("data-once", 0);
                $.ajax({
                    type: "GET",
                    url: '{{route("delete-favourite-restaurant")}}',
                    data: {restaurantID: id}
                }).done(function (msg) {
                    console.log(msg);
                });
            }
        }
        $('#apply-discount-code').click(function () {
            const customer_input_text = $('#coupon-value').val().trim();
            const restaurant_id = $('#restaurant-id').val();

            if (customer_input_text === '') {
                $('#coupon-value').css('border-color', '#F44336');
            } else {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    type: "POST",
                    url: '