Elep

<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* Default/shop.html.twig */
class __TwigTemplate_df8b418f5dcc3696c71a7564fe089f094b21475eeb3abc188f86dbdad26b0a4d extends Template
{
    private $source;
    private $macros = [];

public function __construct(Environment $env)
    {
        parent::__construct($env);

$this->source = $this->getSourceContext();

$this->parent = false;

$this->blocks = [
        ];
    }

protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        // line 1
        echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <link rel=\"stylesheet\" href=\"";
        // line 7
        echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("css/main.css"), "html", null, true);
        echo "\">
    <link rel=\"stylesheet\" href=\"";
        // line 8
        echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("css/mixchief.css"), "html", null, true);
        echo "\">
    <link rel=\"shortcut icon\" href=\"";
        // line 9
        echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("images/mixchief-logo.png"), "html", null, true);
        echo "\">
    <title>MixChief</title>
</head>
<body>
    
    <script async src=\"https://www.googletagmanager.com/gtag/js?id=G-KPSXVH4FDP\"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

gtag('config', 'G-KPSXVH4FDP');
    </script>

<div class=\"shopping-cart\">
        <img src=\"/images/shopping.svg\" alt=\"shopping-cart\">
    </div>
    <div class=\"order-items\">
        <div class=\"order-items-inner\">
            <div class=\"order-items-header\">
                <h3>Order Items</h3>
                
            </div>
            <div class=\"order-items-body\">
                <div class=\"order-items-list\">
                    
                </div>
                
            </div>
            <div class=\"order-items-footer\">
                <div class=\"order-items-total\">
                    <div class=\"order-items-total-inner\">
                        <div class=\"order-items-total-label\">
                            Total
                        </div>
                        <div class=\"order-items-total-price\">
                            &#x20A6;0
                        </div>
                    </div>
                </div>
                <div class=\"order-actions\">
                    <a href=\"#\" class=\"clear-items\" onclick=\"clearItems()\">Clear Items</a>
                    <a href=\"/checkout\" class=\"button btn-circle order-checkout-btn\">Checkout</a>
                </div>
            </div>
        </div>
    </div>
    <header style=\"position: relative;\">
        <div class=\"header-content\">
            <div class=\"header-content---inner\">
                <a href=\"/\"><img src=\"/images/mixchief-no-label-trans.png\" alt=\"Logo\"></a>
                <h1>MixChief</h1>
                <p>Every drink tells a story.</p>
                <p>Contact us on <a href=\"tel:+2348133277306\">08133277306</a> if you have any questions</p>
                ";
        // line 65
        echo "            </div>
        </div>

</header>
    <div class=\"tab\">
        
        <section class=\"place-menu\">
            <div class=\"search-filters\">
                <a href=\"#all\" class=\"button btn-circle filter-category active\" data-attr=\"all\">
                    All
                </a>
                ";
        // line 78
        $context['_parent'] = $context;
        $context['_seq'] = twig_ensure_traversable(($context["categories"] ?? null));
        foreach ($context['_seq'] as $context["_key"] => $context["category"]) {
            // line 79
            echo "                    <a href=\"#";
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 79), "html", null, true);
            echo "\" class=\"button btn-circle filter-category\" data-attr=\"";
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 79), "html", null, true);
            echo "\">
                        ";
            // line 80
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 80), "html", null, true);
            echo "
                    </a>
                ";
        }
        $_parent = $context['_parent'];
        unset($context['_seq'], $context['_iterated'], $context['_key'], $context['category'], $context['_parent'], $context['loop']);
        $context = array_intersect_key($context, $_parent) + $_parent;
        // line 83
        echo "            </div>
            <div class=\"place-menu-items\" id=\"drinks-container\">
                ";
        // line 85
        $context['_parent'] = $context;
        $context['_seq'] = twig_ensure_traversable(($context["items"] ?? null));
        foreach ($context['_seq'] as $context["_key"] => $context["item"]) {
            // line 86
            echo "                    <div class=\"place-menu-item-container drink-item\" data-category=\"";
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["item"], "category", [], "any", false, false, false, 86), "name", [], "any", false, false, false, 86), "html", null, true);
            echo "\" data-id=\"";
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "id", [], "any", false, false, false, 86), "html", null, true);
            echo "\" data-name=\"";
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 86), "html", null, true);
            echo "\" data-image=\"";
            ((twig_get_attribute($this->env, $this->source, $context["item"], "img", [], "any", false, false, false, 86)) ? (print (twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "img", [], "any", false, false, false, 86), "html", null, true))) : (print ("")));
            echo "\" data-price=\"";
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "sellingPrice", [], "any", false, false, false, 86), "html", null, true);
            echo "\">
                        ";
            // line 87
            if (twig_get_attribute($this->env, $this->source, $context["item"], "img", [], "any", false, false, false, 87)) {
                // line 88
                echo "                            <div class=\"drink-img\">
                                <img src=\"";
                // line 89
                echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "img", [], "any", false, false, false, 89), "html", null, true);
                echo "\" alt=\"";
                echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 89), "html", null, true);
                echo " image\" />
                            </div>
                        ";
            }
            // line 92
            echo "                        <div class=\"place-menu-item review-wrapper\">
                            <div class=\"name-price\">
                                <div class=\"place-menu-name drink-name\">
                                    ";
            // line 95
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "name", [], "any", false, false, false, 95), "html", null, true);
            echo "
                                </div>
                                <div class=\"place-menu-price\">&#x20A6;";
            // line 97
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "sellingPrice", [], "any", false, false, false, 97), "html", null, true);
            echo "</div>
                            </div>
                            <div class=\"place-menu-description\" style=\"padding-bottom: 5px;\">
                                ";
            // line 100
            echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["item"], "description", [], "any", false, false, false, 100), "html", null, true);
            echo "
                            </div>
                            <div class=\"order-button\">
                                <button class=\"button btn-circle btn-sm addToOrder\">Add to Order</button>
                            </div>
                        </div>
                    </div>
                ";
        }
        $_parent = $context['_parent'];
        unset($context['_seq'], $context['_iterated'], $context['_key'], $context['item'], $context['_parent'], $context['loop']);
        $context = array_intersect_key($context, $_parent) + $_parent;
        // line 108
        echo "            </div>
        </section>
    </div>
    <script>
        // document.querySelector('.filter-drinks').addEventListener('keyup', filterItems)

document.addEventListener('DOMContentLoaded', function(e) {
            calculateTotal();

if (window.location.hash) {
                let hash = window.location.hash.substring(1);
                // ucfirst hash
                hash = hash.charAt(0).toUpperCase() + hash.slice(1);
                const el = document.querySelector(`[data-attr=\"\${hash}\"]`)
                if (el) {
                    filterItems(el)
                    el.scrollIntoView({behavior: \"smooth\", block: \"center\", inline: \"nearest\"});
                }
            }
        })

function clearItems() {
            localStorage.setItem('items', JSON.stringify({}))
            showCart();
            return false
        }

document.querySelector('.shopping-cart').addEventListener('click', showCart)

document.querySelector('.shopping-cart').addEventListener('mouseover', showCart)

const capitalize = (str) => 
            str ? str.split(\" \").map(word => {
                if (typeof word != \"string\") return word;
                else return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
            }).join(\" \") : '';

function drinkTemplate(drink, i, place_slug) {

function closeOrderList() {
            document.querySelector('.order-items').classList.remove('active');
        }

document.querySelectorAll('.addToOrder').forEach(orderButton => {
            orderButton.addEventListener('click', addToOrder)
        })

const orderItemTemplate = (orderItem) => `
            <div class=\"order-item\">
                <div class=\"order-left\">
                    <div class=\"order-item-name\">\${orderItem.name}</div>
                    <div class=\"order-item-price\">\${orderItem.price}</div>
                </div>
                <div class=\"order-right\">
                    <div class=\"order-item-quantity\">\${orderItem.quantity}</div>
                    <button class=\"delete-item\" onclick=\"deleteOrderItem(\${orderItem.id})\"><img src=\"/images/delete.svg\" /></button>
                </div>
            </div>
        `

function deleteOrderItem(id) {
            const orderItems = JSON.parse(localStorage.getItem('items'));
            delete orderItems[id];
            localStorage.setItem('items', JSON.stringify(orderItems))
            showCart();
        }

let count = 1;

var timeoutId;

function calculateTotal(orderItems) {
            if (orderItems) {
                return Object.keys(orderItems).reduce((acc, curr) => {
                    return acc + (orderItems[curr].price * orderItems[curr].quantity)
                }, 0);
            } else {
                return 0;
            }
        }

// document.querySelectorAll('.place-menu-items .place-menu-item').forEach(item => {
        //     item.addEventListener('click', e => {
        //         e.preventDefault();
        //         console.log('a')
        //         const index = item.dataset.id;
        //         const drink = cocktails.find(drink => drink.id == parseInt(index));
        //         orderItems.push(drink);
        //         document.querySelector('.order-items-list').innerHTML = orderItems.map((item, i) => orderItemTemplate(item, i)).join(\"\");
        //         document.querySelector('.order-items').classList.add('active');
        //         // scroll to bottom
        //         document.querySelector('.order-items-body').scrollTop = document.querySelector('.order-items-list').scrollHeight;
        //         setTimeout(() => {
        //             document.querySelector('.order-items').classList.remove('active');
        //         }, 3000)
        //     })
        // })

// function filterItems(e) {
        //     const inp = e.target.value;
        //     filteredItems = [...cocktails].filter(item => item.name.toLowerCase().includes(inp.toLowerCase()));
        //     document.getElementById('drinks-container').innerHTML = filteredItems.map((cocktail, i) => drinkTemplate(cocktail, i)).join(\"\")
        // }

// document.getElementById('drinks-container').innerHTML = cocktails.map((cocktail, i) => drinkTemplate(cocktail, i)).join(\"\")

document.querySelectorAll('.filter-category').forEach(catButton => {
            catButton.addEventListener('click', () => filterItems(catButton))
        })

public function getTemplateName()
    {
        return "Default/shop.html.twig";
    }

public function isTraitable()
    {
        return false;
    }

public function getDebugInfo()
    {
        return array (  210 => 108,  196 => 100,  190 => 97,  185 => 95,  180 => 92,  172 => 89,  169 => 88,  167 => 87,  154 => 86,  150 => 85,  146 => 83,  137 => 80,  130 => 79,  126 => 78,  111 => 65,  53 => 9,  49 => 8,  45 => 7,  37 => 1,);
    }

public function getSourceContext()
    {
        return new Source("", "Default/shop.html.twig", "/var/www/html/mixchief_app/templates/Default/shop.html.twig");
    }
}