<!DOCTYPE html>
<html lang="es">

<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">
    <title>La lista de la comprar</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <link rel="stylesheet" href="includes/css.css">

    <link rel="apple-touch-icon" sizes="57x57" href="./apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="./android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href=".favicon-16x16.png">
    <link rel="manifest" href="./manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="./ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

</head>

<body>
    <?php
    if (!empty($_COOKIE['usuario']) && is_file('../../usuarios/' . $_COOKIE['usuario'] . '.txt') == true) {
    ?>

        <ons-splitter>
            <ons-splitter-side id="menu" side="left" width="220px" collapse>
                <ons-page>
                    <ons-list>
                        <ons-list-item onclick="fn.load('home.html')">
                            <div class="left">
                                <ons-icon icon="fa-home" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Inicio
                            </div>
                        </ons-list-item>

                        <ons-list-item onclick="fn.load('listacompra.html')">
                            <div class="left">
                                <ons-icon icon="fa-shopping-cart" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Lista Compra
                            </div>
                        </ons-list-item>

                        <ons-list-item onclick="fn.load('listatareas.html')">
                            <div class="left">
                                <ons-icon icon="fa-tools" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Tareas
                            </div>
                        </ons-list-item>

                        <ons-list-item onclick="window.location = '/listacompra.html';">
                            <div class="left">
                                <ons-icon icon="fa-calendar-check" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Agenda
                            </div>
                        </ons-list-item>

                        <ons-list-item onclick="window.location = '/listacompra.html';">
                            <div class="left">
                                <ons-icon icon="fa-user-clock" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Horarios
                            </div>
                        </ons-list-item>

                        <ons-list-item onclick="window.location = '/listacompra.html';">
                            <div class="left">
                                <ons-icon icon="fa-address-book" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Contactos
                            </div>
                        </ons-list-item>

                        <ons-list-item onclick="window.location = './includes/desconectar.php';">
                            <div class="left">
                                <ons-icon icon="fa-sign-out-alt" class="list-item__icon"></ons-icon>
                            </div>
                            <div class="center">
                                Salir
                            </div>
                        </ons-list-item>

                    </ons-list>
                </ons-page>
            </ons-splitter-side>



            <ons-splitter-side class="menu_filter" id="menu_filter_lista_compra" side="right" width="250px" page="./filter_lista_compra.html" collapse></ons-splitter-side>
            <!-- SISTEMAS DE FILTRADO
        <ons-splitter-side class="menu_filter" id="menu_filter_avisos" side="right" width="250px" page="/mobile/pages/ventas/avisos/sidebar_filter.html" collapse></ons-splitter-side>
        <ons-splitter-side class="menu_filter" id="menu_filter_partes_de_trabajo" side="right" width="250px" page="/mobile/pages/ventas/partes_de_trabajo/sidebar_filter.html" collapse></ons-splitter-side>
        <ons-splitter-side class="menu_filter" id="menu_filter_facturas" side="right" width="250px" page="/mobile/pages/ventas/facturas/sidebar_filter.html" collapse></ons-splitter-side>
        -->

            <ons-splitter-content>
                <ons-navigator id="myNavigator" page="./home.html" animation="slide"></ons-navigator>
            </ons-splitter-content>
        </ons-splitter>

        <script src="./includes/js.js"></script>
        <script src="./includes/compra.js"></script>
        <script src="./includes/tareas.js"></script>

    <?php
    } else {
    ?>

        <ons-page>
            <div style="text-align: center; margin: auto;">
                <img src="imagenes/portada.jpeg" style="max-width: 100%;">
            </div>
            <?php
            if (!empty($_GET['error'])) {
                echo "<div style='text-align: center; margin-top: 30px; color: red;'><ons-icon spin icon='fa-exclamation-circle'></ons-icon> Parece que el usuario NO existe en nuestro sistema o se ha producido un error!!</div>";
            }
            ?>
            <form action="./includes/logear.php" method="post" autocomplete="off">
                <div style="text-align: center; margin-top: 30px; padding: 50px;">

                    <div class='registro'>
                        <input type='email' id='mail' name="mail" value='' placeholder="email" required></input>
                        <label for='producto'>Email</label>
                    </div>
                    <div class='registro'>
                        <input type='password' id='pass' name="pass" value='' placeholder="pass" required></input>
                        <label for='producto'>Pass</label>
                    </div>
                    <p style="margin-top: 30px;">
                        <input type="submit" id="enviar" style="display: none;">
                        <ons-button onclick="$('#enviar').click();">
                            <ons-icon icon="fa-sign-in-alt"></ons-icon> Entrar
                        </ons-button>
                    </p>
                    <p style="margin-top: 50px;">
                        <a href='alta.php'>Date de Alta</a>
                    </p>
                </div>
            </form>
        </ons-page>
    <?php } ?>
</body>

</html>