<?php session_start(); ?>

<?php include('php/conexion.php'); ?>

<?php include('template/header.php'); ?>

<?php CheckBD($db) ?>

<?php if (CheckSesion($_SESSION, 'emailUser') == false ) { header("Location:login.php"); } ?>

    <div class="container">

        <!-- CABECERA LOGO -->
        <header>
            <div class="menu-logo">
                <div class="menu-logo-izq">
                    <a class="a-lines" href="#">
                        <button onclick="MostrarOcultarMenu()" id="btn-menu" class="menu-toggle">☰</button>
                        <!--<img class="lines" src="asset/lines.svg" width="30px" alt="">            -->
                    </a>
                </div>
                <div class="menu-logo-item menu-logo-cen">
                    <h1>BROWNIO</h1>
                </div>
                <div class="menu-logo-item menu-logo-dch">
                    <a class="a-salir" href="#" id="botonSalir">
                        <img class="logout" src="asset/log_out.svg" width="30px" alt="">
                        <span>Salir</span>
                    </a>

                    <a class="a-opc" href="#">
                        <img class="opciones" src="asset/settings4.svg" width="20px" alt="">
                        <span>Opciones</span>
                    </a>
                    <a class="a-moon" id="btn-dark" href="#">
                        <img class="moon" src="asset/moon.svg" width="20px" alt="">
                        <span>Dark mode</span>
                    </a>
                </div>
            </div>
        </header>

        <!-- MENU PRINCIPAL -->
        <div class="menu-horizontal">

            <div id="flecha-izq" class="flechas">
                <button>
                    < </button>
            </div>

            <div class="cont-menu-horiz" id="menu-hz">

                <div class="menu-horiz-item">
                    <a href="#" id="btnClientes">Clientes</a>
                </div>

            </div>

            <div id="flecha-dch" class="flechas">
                <button>></button>
            </div>
        </div>

        <!-- CONTENIDO -->
        <main id="main-1" class="solo-main">

            <!-- BARRA OPCIONES LATERAL IZQ -->
            <aside id="nav-1" class="ocultar">

                <!-- MENU ELEMENTOS -->
                <div class="menu-elementos div-sticky">
                    <div class="busqueda">
                        <button id="btnClientesBusq">BUSCAR</button>
                        <input type="text" id="inputBusqueda">
                        <div class="nav-arrow-b">
                            <a href="#" id="busq-flecha">
                                <img src="asset/arrow-down.svg" alt="" width="15px">
                            </a>
                        </div>
                    </div>
                    <div class="busqueda-avanzada ocultar-subnivel" id="busq-avanz">
                        <div class="form-busq-av">
                            <label>
                                <input type="checkbox" id="cbox1" value="first_checkbox" />
                                tipo 1
                            </label>
                            <label>
                                <input type="checkbox" id="cbox1" value="first_checkbox" />
                                tipo 2
                            </label>
                            <label>
                                <input type="checkbox" id="cbox1" value="first_checkbox" />
                                tipo 3
                            </label>
                            <label>
                                <input type="checkbox" id="cbox1" value="first_checkbox" />
                                tipo 4
                            </label>
                        </div>
                    </div>
                </div>

                <!-- LISTA ELEMENTOS -->
                <nav class="nav-lateral" id="nav-izq-1">
                    <ul id="lista-clientes" class="listaClientes">
                        <!-- 
                
                este contenido se rellena con una
                api fetch de main.js

             -->

                    </ul>
                </nav>

            </aside>

            <!-- CONTENIDO PRINCIPAL -->
            <div class="content-main">
                <div class="cabecera-main div-sticky " id="cabecera_cliente">
                    <!--

                este contenido se rellena con una
                api fetch de main.js


              -->
                </div>

                <div class="contenido-main">

                    <div class="cliente-datos-1">
                        <div class="clientes-datos-titulo">
                            <h2>Datos del Cliente</h2>
                        </div>
                        <div id="clientesDatos">
                            <!--

                este contenido se rellena con una
                api fetch de main.js


              -->
                        </div>
                        <div class="clientes-a">
                            <a href="#" id="modificarCliente">
                                Modificar
                                <div style="display: none;" id=""></div>
                            </a>
                        </div>

                    </div>

                    <div class="cliente-datos-1">
                        <div class="clientes-datos-titulo">
                            <h2>Contactos del Cliente</h2>
                        </div>

                        <div class="contacto-item">
                            <div>Miguel - 68764050</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>
                        <div class="contacto-item">
                            <div>Felipe - 68764050</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>
                        <div class="contacto-item">
                            <div>Antonio - 68764050</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>

                        <div class="clientes-a">
                            <a href="#">
                                Añadir
                            </a>
                        </div>
                    </div>

                    <div class="cliente-datos-1">
                        <div class="clientes-datos-titulo">
                            <h2>Acciones del Cliente</h2>
                        </div>

                        <div class="contacto-item">
                            <div>Llamada Telefonica - 15/01/2024</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>
                        <div class="contacto-item">
                            <div>Reunión Online - 20/01/2024</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>
                        <div class="contacto-item">
                            <div>Reunión - 30/01/2024</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>
                        <div class="contacto-item">
                            <div>Envio presupuesto - 5/02/2024</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>
                        <div class="contacto-item">
                            <div>Aceptación Presupuesto - 10/02/2024</div>
                            <div class="contacto-item-opc">
                                <a href="#">
                                    <img class="pencil" src="asset/pencil.svg" width="12px" alt="Modificar">
                                </a>
                                <a href="#">
                                    <img class="garbage" src="asset/garbage.svg" width="12px" alt="Borrar">
                                </a>
                            </div>
                        </div>

                        <div class="clientes-a">
                            <a href="#">
                                Añadir
                            </a>
                        </div>

                    </div>

                </div>
            </div>

        </main>

        <!-- FOOTER -->
        <footer>
            <p>footer</p>
        </footer>


        <!-- MODAL -->
        <div class="modal1" id="modal1">
            <div class="modal1-content">
                <div class="modal-titulo" id="modal1Titulo">
                    Formulario
                </div>
                <form action="">
                    <fieldset>
                        <label for="nombre">Nombre</label>
                        <input type="text" name="" id="modal-nombre">
                    </fieldset>
                    <fieldset>
                        <label for="direccion">Dirección</label>
                        <input type="text" name="" id="modal-direccion">
                    </fieldset>
                </form>
                <button class="guardar" id="guardarCliente">
                    Guardar
                    <div class="display:none" id=""></div>
                </button>
                <button class="close" id="cerrarModal">
                    Cerrar
                </button>
            </div>
        </div>


    </div>

    <script src="style.js" defer></script>

    <script src="main.js" type="module" defer></script>
    <script src="func.js" defer></script>

    <script>
    </script>
</body>

</html>