<template>
    <div>
        <!--  BEGIN NAVBAR  -->
        <div class="header-container fixed-top">
            <header class="header navbar navbar-expand-sm">
                <ul class="navbar-item theme-brand flex-row text-center">
                    <li class="nav-item theme-logo">
                        <router-link to="/">
                            <img
                                src="@/assets/images/logo.png"
                                class="navbar-logo"
                                alt="logo"
                            />
                        </router-link>
                    </li>
                </ul>

                <div class="navbar-item flex-row ms-md-auto">
                    <div
                        class="dropdown nav-item user-profile-dropdown btn-group"
                    >
                        <a
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            class="btn dropdown-toggle btn-icon-only user nav-link"
                        >
                            <p style="color: aliceblue; margin-top: 10px">{{ countTienda }}</p>
                            <svg
                                style="color: #fff"
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-shopping-cart"
                                data-v-5522efca=""
                            >
                                <circle cx="9" cy="21" r="1"></circle>
                                <circle cx="20" cy="21" r="1"></circle>
                                <path
                                    d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"
                                ></path>
                            </svg>
                        </a>
                        <ul
                            class="dropdown-menu dropdown-menu-right"
                            aria-labelledby="ddluser"
                        >
                            <li role="presentation">
                                <router-link to="/carrito/list" class="dropdown-item">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-layers"
                                        data-v-5522efca=""
                                    >
                                        <polygon
                                            points="12 2 2 7 12 12 22 7 12 2"
                                        ></polygon>
                                        <polyline
                                            points="2 17 12 22 22 17"
                                        ></polyline>
                                        <polyline
                                            points="2 12 12 17 22 12"
                                        ></polyline>
                                    </svg>
                                    Mi lista
                                </router-link>
                            </li>
                            <li role="presentation">
                                <router-link to="/ventas/mis-compras" class="dropdown-item">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-clipboard"
                                    >
                                        <path
                                            d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
                                        ></path>
                                        <rect
                                            x="8"
                                            y="2"
                                            width="8"
                                            height="4"
                                            rx="1"
                                            ry="1"
                                        ></rect>
                                    </svg>
                                    Mis compras
                                </router-link>
                            </li>
                            <li role="presentation">
                                <a
                                    v-on:click.stop="limpiar_carrito"
                                    class="dropdown-item center-login"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-trash-2"
                                        data-v-5522efca=""
                                    >
                                        <polyline
                                            points="3 6 5 6 21 6"
                                        ></polyline>
                                        <path
                                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                        ></path>
                                        <line
                                            x1="10"
                                            y1="11"
                                            x2="10"
                                            y2="17"
                                        ></line>
                                        <line
                                            x1="14"
                                            y1="11"
                                            x2="14"
                                            y2="17"
                                        ></line>
                                    </svg>
                                    Limpiar
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div
                        class="dropdown nav-item user-profile-dropdown btn-group"
                    >
                        <a
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            class="btn dropdown-toggle btn-icon-only user nav-link"
                        >
                            <p
                                style="
                                    color: aliceblue;
                                    margin-top: 10px;
                                    margin-right: 10px;
                                "
                            >
                                {{
                                    storeState.current_state.sucursal_name_mode
                                }}
                            </p>
                            <svg
                                style="background-color: #fff"
                                xmlns="http://www.w3.org/2000/svg"
                                height="1em"
                                viewBox="0 0 384 512"
                            >
                                <path
                                    d="M64 48c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16h80V400c0-26.5 21.5-48 48-48s48 21.5 48 48v64h80c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64zM0 64C0 28.7 28.7 0 64 0H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm88 40c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v48c0 8.8-7.2 16-16 16H104c-8.8 0-16-7.2-16-16V104zM232 88h48c8.8 0 16 7.2 16 16v48c0 8.8-7.2 16-16 16H232c-8.8 0-16-7.2-16-16V104c0-8.8 7.2-16 16-16zM88 232c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v48c0 8.8-7.2 16-16 16H104c-8.8 0-16-7.2-16-16V232zm144-16h48c8.8 0 16 7.2 16 16v48c0 8.8-7.2 16-16 16H232c-8.8 0-16-7.2-16-16V232c0-8.8 7.2-16 16-16z"
                                />
                            </svg>
                        </a>
                    </div>
                    <div
                        class="dropdown nav-item user-profile-dropdown btn-group"
                    >
                        <a
                            href="javascript:;"
                            id="ddluser"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            class="btn dropdown-toggle btn-icon-only user nav-link"
                        >
                            <p
                                style="
                                    color: aliceblue;
                                    margin-top: 10px;
                                    margin-right: 10px;
                                "
                            >
                                {{ storeAuth.current_user.name }}
                            </p>
                            <img
                                src="@/assets/images/profile-13.jpeg"
                                alt="avatar"
                            />
                        </a>
                        <ul
                            class="dropdown-menu dropdown-menu-right"
                            aria-labelledby="ddluser"
                        >
                            <li role="presentation">
                                <router-link
                                    to="/users/profile"
                                    class="dropdown-item"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-user"
                                    >
                                        <path
                                            d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                                        ></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                    Perfil
                                </router-link>
                            </li>
                            <li role="presentation">
                                <a
                                    v-on:click.stop="logout"
                                    class="dropdown-item center-login"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-log-out"
                                    >
                                        <path
                                            d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
                                        ></path>
                                        <polyline
                                            points="16 17 21 12 16 7"
                                        ></polyline>
                                        <line
                                            x1="21"
                                            y1="12"
                                            x2="9"
                                            y2="12"
                                        ></line>
                                    </svg>
                                    Cerrar
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>
        </div>
        <!--  END NAVBAR  -->
        <!--  BEGIN NAVBAR  -->
        <div class="sub-header-container">
            <header class="header navbar navbar-expand-sm">
                <a
                    href="javascript:void(0);"
                    class="sidebarCollapse"
                    data-placement="bottom"
                    @click="
                        $store.commit(
                            'toggleSideBar',
                            !$store.state.is_show_sidebar
                        )
                    "
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-menu"
                    >
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                    </svg>
                </a>

                <!-- Portal vue/Teleport for Breadcrumb -->
                <div id="breadcrumb" class="vue-portal-target"></div>
            </header>
        </div>
        <!--  END NAVBAR  -->
        <!--  BEGIN TOPBAR  -->
        <div class="topbar-nav header navbar" role="banner">
            <nav class="topbar">
                <ul class="list-unstyled menu-categories" id="topAccordion">
                    <li class="menu single-menu" v-if="!isUserType('cliente_linea')">
                        <a
                            href="javascript:;"
                            class="dropdown-toggle autodroprown"
                        >
                            <div class="">
                                <router-link to="/">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-home"
                                    >
                                        <path
                                            d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
                                        ></path>
                                        <polyline
                                            points="9 22 9 12 15 12 15 22"
                                        ></polyline>
                                    </svg>
                                    <span>{{ "Inicio" }}</span>
                                </router-link>
                            </div>
                        </a>
                    </li>

                    <li class="menu single-menu" v-if="!isUserType('cliente_linea')">
                        <a
                            href="javascript:;"
                            class="dropdown-toggle autodroprown"
                        >
                            <div class="">
                                <router-link to="/citas/reservar">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-calendar"
                                        data-v-5522efca=""
                                    >
                                        <rect
                                            x="3"
                                            y="4"
                                            width="18"
                                            height="18"
                                            rx="2"
                                            ry="2"
                                        ></rect>
                                        <line
                                            x1="16"
                                            y1="2"
                                            x2="16"
                                            y2="6"
                                        ></line>
                                        <line
                                            x1="8"
                                            y1="2"
                                            x2="8"
                                            y2="6"
                                        ></line>
                                        <line
                                            x1="3"
                                            y1="10"
                                            x2="21"
                                            y2="10"
                                        ></line>
                                    </svg>
                                    <span>{{ "Reservar" }}</span>
                                </router-link>
                            </div>
                        </a>
                    </li>

                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a
                            href="javascript:;"
                            class="dropdown-toggle autodroprown"
                        >
                            <div class="">
                                <router-link to="/clientes/lista">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-users"
                                    >
                                        <path
                                            d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
                                        ></path>
                                        <circle cx="9" cy="7" r="4"></circle>
                                        <path
                                            d="M23 21v-2a4 4 0 0 0-3-3.87"
                                        ></path>
                                        <path
                                            d="M16 3.13a4 4 0 0 1 0 7.75"
                                        ></path>
                                    </svg>
                                    <span>{{ "Clientes" }}</span>
                                </router-link>
                            </div>
                        </a>
                    </li>

                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a
                            href="javascript:;"
                            class="dropdown-toggle autodroprown"
                        >
                            <div class="">
                                <router-link to="/monitor">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-tv"
                                        data-v-5522efca=""
                                    >
                                        <rect
                                            x="2"
                                            y="7"
                                            width="20"
                                            height="15"
                                            rx="2"
                                            ry="2"
                                        ></rect>
                                        <polyline
                                            points="17 2 12 7 7 2"
                                        ></polyline>
                                    </svg>
                                    <span>{{ "Monitor" }}</span>
                                </router-link>
                            </div>
                        </a>
                    </li>

                    <li class="menu single-menu">
                        <a
                            href="javascript:;"
                            class="dropdown-toggle autodroprown"
                        >
                            <div class="">
                                <router-link to="/productos/presentacion">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-box"
                                    >
                                        <path
                                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                        ></path>
                                        <polyline
                                            points="3.27 6.96 12 12.01 20.73 6.96"
                                        ></polyline>
                                        <line
                                            x1="12"
                                            y1="22.08"
                                            x2="12"
                                            y2="12"
                                        ></line>
                                    </svg>
                                    <span>{{ "Tienda" }}</span>
                                </router-link>
                            </div>
                        </a>
                    </li>

                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a
                            href="javascript:;"
                            class="dropdown-toggle autodroprown"
                        >
                            <div class="">
                                <router-link to="/ventas/vender">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign" data-v-5522efca=""><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                                    <span>{{ "Venta" }}</span>
                                </router-link>
                            </div>
                        </a>
                    </li>

                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a href="javascript:;" class="dropdown-toggle">
                            <div class="">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-clipboard"
                                >
                                    <path
                                        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
                                    ></path>
                                    <rect
                                        x="8"
                                        y="2"
                                        width="8"
                                        height="4"
                                        rx="1"
                                        ry="1"
                                    ></rect>
                                </svg>
                                <span>{{ "Inventario" }}</span>
                            </div>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-chevron-down"
                            >
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <ul class="collapse submenu list-unstyled">
                            <li>
                                <router-link to="/inventarios/lista"
                                    >Almacén</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/entradas/lista"
                                >Entradas</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/salidas/lista"
                                >Salidas</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/ventas/lista"
                                    >Ventas</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/cortes-cajas/lista"
                                    >Cortes de cajas</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/Vales/lista"
                                    >Vales</router-link
                                >
                            </li>
                        </ul>
                    </li>

                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a href="javascript:;" class="dropdown-toggle">
                            <div class="">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-clipboard"
                                >
                                    <path
                                        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
                                    ></path>
                                    <rect
                                        x="8"
                                        y="2"
                                        width="8"
                                        height="4"
                                        rx="1"
                                        ry="1"
                                    ></rect>
                                </svg>
                                <span>{{ "Catalogos" }}</span>
                            </div>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-chevron-down"
                            >
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <ul class="collapse submenu list-unstyled">
                            <li class="sub-sub-submenu-list">
                                <a href="javascript:;" class="dropdown-toggle">
                                    Productos
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-chevron-right"
                                    >
                                        <polyline points="9 18 15 12 9 6"></polyline>
                                    </svg>
                                </a>
                                <ul class="collapse list-unstyled sub-submenu">
                                    <li><router-link to="/productos/lista">Lista</router-link></li>
                                    <li><router-link to="/marcas/lista">Marcas</router-link></li>
                                    <li><router-link to="/productos/tipo-tratamiento">Tipo tratamientos</router-link></li>
                                    <li><router-link to="/productos/tipo">Tipo productos</router-link></li>
                                </ul>
                            </li>
                            <li>
                                <router-link to="/tratamientos/lista"
                                    >Tratamientos</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/sucursales/lista"
                                    >Sucursales</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/horarios/lista"
                                    >Horarios</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/bancos/lista"
                                    >Bancos</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/opciones-pago-transferencia/lista"
                                    >Opciones de pago</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/users/lista"
                                    >Usuarios</router-link
                                >
                            </li>
                        </ul>
                    </li>

                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a href="javascript:;" class="dropdown-toggle">
                            <div class="">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-clipboard"
                                >
                                    <path
                                        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
                                    ></path>
                                    <rect
                                        x="8"
                                        y="2"
                                        width="8"
                                        height="4"
                                        rx="1"
                                        ry="1"
                                    ></rect>
                                </svg>
                                <span>{{ "Confirmar" }}</span>
                            </div>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-chevron-down"
                            >
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <ul class="collapse submenu list-unstyled">
                            <li>
                                <router-link to="/citas/confirmar">
                                    Nuevas citas en línea
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/ventas/confirmar">
                                    Ventas en línea
                                </router-link>
                            </li>
                        </ul>
                    </li>
                    <li class="menu single-menu" v-if="!is('Cliente')">
                        <a href="javascript:;" class="dropdown-toggle">
                            <div class="">
                                <svg 
                                    xmlns="http://www.w3.org/2000/svg" 
                                    width="24" 
                                    height="24" 
                                    viewBox="0 0 24 24" 
                                    fill="none" 
                                    stroke="currentColor" 
                                    stroke-width="2" 
                                    stroke-linecap="round" 
                                    stroke-linejoin="round" 
                                    class="feather feather-settings"
                                >
                                    <circle cx="12" cy="12" r="3"></circle>
                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                                </svg>
                                <span>{{ "Configuración" }}</span>
                            </div>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-chevron-down"
                            >
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <ul class="collapse submenu list-unstyled">
                            <li>
                                <router-link to="/configuracion/impresoras"
                                    >Impresoras</router-link
                                >
                            </li>
                            <li>
                                <router-link to="/configuracion/correos"
                                    >Pruebas de Correos</router-link
                                >
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!--  END TOPBAR  -->
        <loading
            v-model:active="isLoading"
            :can-cancel="false"
            :is-full-page="true"
        />
        <button
            id="evento_recargar_tienda"
            type="button"
            v-show="false"
            class="btn btn-black"
            @click="obtener_conteo_tienda"
        ></button>
    </div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";
import { useStore } from "vuex";
import { useAuthStore } from "@/store/AuthStore";
import { useStateStore } from "@/store/StateStore";
import * as AuthRepository from "@/repositories/AuthRepository";
import * as TiendaRepository from "@/repositories/TiendaRepository";
import router from "@/router";

// loading
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/css/index.css";

const isLoading = ref(false);

const storeAuth = useAuthStore();
const storeState = useStateStore();
const store = useStore();
const countTienda = ref(0);
const isUserType = inject('$isUserType');

onMounted(() => {
    toggleMode();
});

const toggleMode = (mode) => {
    window.$appSetting.toggleMode(mode);
};

const obtener_conteo_tienda = async () => {
    try {
        isLoading.value = true;
        const response = await TiendaRepository.getCount();
        countTienda.value = response.data.count;
        isLoading.value = false;
        return response;
    } catch (error) {
        console.log(error);
        isLoading.value = false;
    }
};

const logout = async () => {
    try {
        isLoading.value = true;
        const token = window.localStorage.getItem("token");
        const idToken = token.split("|")[0];
        const response = await AuthRepository.expireTokens(idToken);
        localStorage.removeItem("token");
        location.reload("/");
        isLoading.value = false;
    } catch (error) {
        console.log(error);
        isLoading.value = false;
    }
};

const limpiar_carrito = async () => {
    try {
        isLoading.value = true;
        await TiendaRepository.deleteByUserTienda();
        countTienda.value = 0;
        if ( document.getElementById("evento_recargar_tienda_index")) {
            document.getElementById("evento_recargar_tienda_index").click();
        }
        isLoading.value = false;
        return response;
    } catch (error) {
        console.log(error);
        isLoading.value = false;
    }
};

onMounted(async () => {
    const token = window.localStorage.getItem("token");
    if(token) {
        obtener_conteo_tienda();
    }
});
</script>
