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/index.html.twig */
class __TwigTemplate_674e45476bbabd318d6ace4b0df858fd795529b5974daa6979c9db7c2d1df7a1 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\">
                <img src=\"/images/mixchief-no-label-trans.png\" alt=\"Logo\">
                <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>
                <p class=\"delivery-notice\"><em>We currently only offer delivery services to Victoria Island, Ikoyi, and Lekki Phase 1. Stay tuned for updates as we plan to expand our delivery locations soon. We apologize for any inconvenience.</em></p>
            </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/index.html.twig";
    }

public function isTraitable()
    {
        return false;
    }

public function getDebugInfo()
    {
        return array (  209 => 108,  195 => 100,  189 => 97,  184 => 95,  179 => 92,  171 => 89,  168 => 88,  166 => 87,  153 => 86,  149 => 85,  145 => 83,  136 => 80,  129 => 79,  125 => 78,  53 => 9,  49 => 8,  45 => 7,  37 => 1,);
    }

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