<body onload="Crc()" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

    <header>
        <div id="Biz" class="w3-container w3-center">
            <script id="Biz-template" type="text/x-handlebars-template">
                <div class="w3-row-padding">
                <div class="w3-col s12 m2 l4 w3-margin-top">
                </div>
                <div class="w3-col s12 m8 l4">
                    <div class="w3-animate-opacity">
                        <img class="w3-card-4 w3-margin-bottom w3-circle" src="{{cells.Avatar}}" alt="{{cells.Type}} - {{cells.City}}" style="width:100px; margin-top: 4px; border: 1px solid black;">
                        <p style="margin-top: 0px; margin-bottom: 0px;"><b>{{cells.Type}} - {{cells.City}}</b></p>
                        <div class="w3-row" style="margin-top: 12px; margin-bottom: 4px;">
                            <a class="w3-button w3-card w3-circle w3-black w3-hover-black w3-hover-shadow w3-ripple" style="padding: 2px 10px; margin-left: 4px; margin-right: 4px;" href="{{cells.Walink}}"><i><span class="ic--baseline-whatsapp text-shadow-custom" style="margin-top: 8px;"></span></i></a>
                            <a class="w3-button w3-card w3-circle w3-black w3-hover-black w3-hover-shadow w3-ripple" style="padding: 2px 10px; margin-left: 4px; margin-right: 4px;" href="{{cells.Iglink}}"><i><span class="hugeicons--instagram text-shadow-custom" style="margin-top: 8px;"></span></i></a>
                            <a class="w3-button w3-card w3-circle w3-black w3-hover-black w3-hover-shadow w3-ripple" style="padding: 2px 10px; margin-left: 4px; margin-right: 4px;" href="{{cells.Maplink}}"><i><span class="ph--map-pin text-shadow-custom" style="margin-top: 8px;"></span></i></a>
                            <a class="w3-button w3-card w3-circle w3-black w3-hover-black w3-hover-shadow w3-ripple" style="padding: 2px 10px; margin-left: 4px; margin-right: 4px;" href="{{cells.Phonelink}}"><i><span class="ph--phone-light text-shadow-custom" style="margin-top: 8px;"></span></i></a>
                        </div>
                    </div>
                </div>
                <div class="w3-col s12 m2 l4 w3-margin-top">
                </div>
            </div>
            </script>
        </div>
    </header>


    <div class="w3-container w3-center">

        <div class="w3-row-padding">

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category1" style="margin-left: 8px;"></b>
                </div>

                <div id="Content1" class="accordion_content w3-padding-small">
                    <script id="Content1-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category2" style="margin-left: 8px;"></b>
                </div>

                <div id="Content2" class="accordion_content w3-padding-small">
                    <script id="Content2-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category3" style="margin-left: 8px;"></b>
                </div>

                <div id="Content3" class="accordion_content w3-padding-small">
                    <script id="Content3-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category4" style="margin-left: 8px;"></b>
                </div>

                <div id="Content4" class="accordion_content w3-padding-small">
                    <script id="Content4-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

        </div>

        <div class="w3-row-padding section">

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category5" style="margin-left: 8px;"></b>
                </div>

                <div id="Content5" class="accordion_content w3-padding-small">
                    <script id="Content5-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category6" style="margin-left: 8px;"></b>
                </div>

                <div id="Content6" class="accordion_content w3-padding-small">
                    <script id="Content6-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category7" style="margin-left: 8px;"></b>
                </div>

                <div id="Content7" class="accordion_content w3-padding-small">
                    <script id="Content7-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

            <div class="w3-col s12 m6 l3">
                <div
                    class="accordion w3-button w3-black w3-card w3-block w3-padding-small w3-round-large w3-animate-opacity w3-hover-black w3-hover-shadow text-shadow-custom">
                    <b id="Category8" style="margin-left: 8px;"></b>
                </div>

                <div id="Content8" class="accordion_content w3-padding-small">
                    <script id="Content8-template" type="text/x-handlebars-template">
                        <div class="w3-cell-row simpleCart_shelfItem" style="margin-top: 8px;">
                            <div class="w3-cell w3-cell-top" style="width: 25%;">
                                <img src="{{cells.Image}}" class="w3-card w3-round-large item_image" style="margin-bottom: 4px;" alt="{{cells.Product}}" width="80" height="80">
                                <br>
                                <b class="w3-round-xlarge text-shadow-custom item_price">
                                    ${{cells.Price}}
                                </b>
                            </div>
                            <div class="w3-cell w3-cell-top" style="width: 75%; margin-top: 0px;">
                                <b class="item_name">
                                    {{cells.Product}}
                                </b>
                                <details>
                                <summary class="w3-border w3-hover-border-black w3-round-large" style="margin-top: 4px; margin-bottom: 4px;">Descripción</summary>
                                    <p class="item_description description">
                                    {{cells.Description}}
                                    </p>
                                </details>
                                <a href="javascript:;" onclick="showNotification('Ordenado!', 'success', 'top-center')"
                                    class="w3-button w3-light-grey w3-card w3-ripple w3-padding-small w3-round-large w3-hover-black w3-hover-shadow text-shadow-custom item_add"
                                    style="margin-top: 6px; width: 60%; margin-left: 1.6px;">
                                    <b>
                                        ORDENAR
                                    </b>
                                </a>
                            </div>
                        </div>
                    </script>
                </div>
            </div>

        </div>

    </div>


    <div class="w3-container">
        <button id="CartShow" onclick="document.getElementById('modal01').style.display='block'"
            class="w3-button w3-green w3-card-4 w3-padding-small w3-round-large w3-animate-zoom w3-hover-green">
            <b><span class="simpleCart_total text-shadow-custom" style="font-size: larger;">$0</span></b> <br> <b><span class="text-shadow-custom">VER ORDEN</span></b>
        </button>

        <div id="modal01" class="w3-modal w3-center modal w3-round-large">
            <div class="w3-modal-content w3-animate-top w3-card-4 w3-round-large">
                <header class="w3-container" style="background-color: #000000; color: #ffffff; border-radius: 8px 8px 0px 0px;">
                    <span onclick="document.getElementById('modal01').style.display='none'"
                        class="w3-button w3-display-topright w3-red w3-round-large w3-xlarge"><b>&times;</b></span>
                    <h3><b>ORDEN</b></h3>
                </header>
                <div id="ItemsList" class="w3-container simpleCart_items w3-round-large">
                </div>
                <footer style="background-color: #000000;">

                    <div class="w3-row">
                        <div class="w3-col s6 m6 l6">
                            <p class="w3-text-white">
                                <b>
                                    Elemento(s):
                                    <br>
                                    <span id="ItemsCount"
                                        class="simpleCart_quantity w3-green w3-padding-small w3-round-xlarge w3-text-white text-shadow-custom">
                                        0
                                    </span>
                                </b>
                            </p>
                        </div>
                        <div class="w3-col s6 m6 l6">
                            <p class="w3-text-white">
                                <b>
                                    Subtotal:
                                    <br>
                                    <span id="ItemsMoney"
                                        class="simpleCart_total w3-green w3-padding-small w3-round-xlarge w3-text-white text-shadow-custom">
                                        $0
                                    </span>
                                </b>
                            </p>                            
                        </div>
                    </div>

                    <div class="w3-container w3-text-white w3-padding w3-left-align" style="margin-top: -16px;">
                        <fieldset class="w3-round">
                            <legend><b>Tipo de Orden</b></legend>
                            <input class="w3-radio" type="radio" id="Table" name="Order_Type" value="MESA">
                            <label for="Table">En el Lugar (On place)</label>
                            <br>
                            <input class="w3-radio" type="radio" id="Delivery" name="Order_Type" value="ENTREGAR"
                                style="margin-top: 16px;" checked>
                            <label for="Delivery">Entregar (Delivery)</label>
                            <br>
                            <input class="w3-radio" type="radio" id="Pickup" name="Order_Type" value="LLEVAR"
                                style="margin-top: 16px;">
                            <label for="Pickup">Llevar (Pick up)</label>
                        </fieldset>
                    </div>

                    <div class="w3-container w3-center">
                        <div class="w3-row-padding w3-padding" style="margin-top: 16px;">
                            <input class="w3-round" name="UserName" id="UserName" type="text"
                                placeholder="Nombre y Apellido (Necesario)" style="width: 100%;">
                        </div>

                        <div class="w3-row-padding w3-padding" style="margin-top: 16px;">
                            <textarea class="w3-round" name="UserNotes" id="UserNotes" cols="30" rows="3"
                                placeholder="Notas Adicionales (Opcional)"
                                style="width: 100%; resize: none;"></textarea>
                        </div>
                    </div>

                    <div class="w3-container">
                        <div class="w3-row-padding">
                            <a onclick="Ply()" class="w3-button w3-margin w3-round w3-ripple w3-green-custom text-shadow-custom">
                                <b>
                                    <span class="material-symbols--check"></span>
                                    ENVIAR ORDEN
                                </b>
                            </a>

                            <a onclick="Cln()" class="w3-button w3-red w3-margin w3-round w3-ripple w3-hover-red text-shadow-custom simpleCart_empty">
                                <b>
                                    <span class="material-symbols--delete-outline"></span>
                                    BORRAR ORDEN
                                </b>
                            </a>
                        </div>
                        <div class="w3-row-padding">
                            <a href="https://whatsbusiness.app" class="w3-margin w3-text-white" style="text-decoration: none;"><b>whatsbusiness.app</b></a>
                        </div>
                    </div>

                    <br>

                    <div class="w3-container w3-margin w3-hide">
                        <textarea name="" id="Order" cols="" rows="" style="width: 100%; resize: none;">

                        </textarea>
                    </div>

                    <div class="w3-container" style="font-size: 1px;">
                        <p id="Message"></p>
                    </div>

                </footer>

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


    <div id="Footer" class="w3-panel w3-padding-small w3-center">
        <p>
            <a href="https://whatsbusiness.app/" style="text-decoration: none;"><b>WhatsBusiness</b></a> es propiedad privada © 2023. Todos los derechos reservados. Se prohíbe la copia total o parcial.
        </p>
        <p>
            Made with <span class="mdi--heart"></span> and <span class="devicon--rust"></span> by Combito
        </p>
        <br>
    </div>

    <a id="TopBtn" class="w3-btn w3-light-grey w3-text-dark-gray w3-card" onclick="TopF()"><b>TOP</b></a>

    <script>
        const positions = ['top-center', 'top-right', 'top-left'];
        positions.forEach(position => {
            const container = document.createElement('div');
            container.className = `notification-container ${position}`;
            document.body.appendChild(container);
        });

        function showNotification(message, type = 'info', position = 'top-center', duration = 1000) {

            const notification = document.createElement('div');
            notification.className = `notification ${type} w3-animate-opacity`;

            const messageContent = document.createElement('div');
            messageContent.textContent = message;

            const closeButton = document.createElement('span');
            closeButton.className = 'close-btn';
            closeButton.innerHTML = '×';
            closeButton.onclick = () => removeNotification(notification);

            notification.appendChild(messageContent);
            notification.appendChild(closeButton);

            const container = document.querySelector(`.notification-container.${position}`);
            container.appendChild(notification);

            setTimeout(() => {
                if (notification.parentElement) {
                    notification.classList.add('w3-animate-opacity');
                    setTimeout(() => removeNotification(notification), 1000);
                }
            }, duration);

            return notification;
        }

        function removeNotification(notification) {
            notification.classList.add('w3-animate-opacity');
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.parentElement.removeChild(notification);
                }
            }, 100);
        }
    </script>

    <script>
        let Number = "18459037580";
        let CustUrl = "https://t.ly/pedroscafe.co";
    </script>

    <script src="rs/jquery.rs"></script>
    <script src="rs/cart.rs"></script>
    <script src="rs/hand.rs"></script>
    <script src="rs/rock.rs"></script>
    <script src="app.rs"></script>

</body>