{% extends 'stela_control/base.html' %}
{% load hosts %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load crispy_forms_tags %}
{% block language %}
  <!-- ***** Language Start ***** -->
      <div class="select-overlay-stela">
      <small class="mx-2" onclick="activeMenu()">
          {% get_current_language as LANGUAGE_CODE %}
          {% get_available_languages as LANGUAGES %}
          {% get_language_info_list for LANGUAGES as languages %}
          {% for language in languages %}
          {% if language.code == site_data.lang %}
              <img width="30" src="https://emmerutstatic.s3.amazonaws.com/static/img/flags/{{site_data.lang}}.png" alt="">
          {% endif %}
          {% endfor %}
      </small>      
      </div>
      <div class="d-flex btn-overlay-stela">
      <form action="{% url 'set_language' %}" method="post">{% csrf_token %}
          <input name="next" type="hidden" value="{{ redirect_to }}">
          {% get_current_language as LANGUAGE_CODE %}
          {% get_available_languages as LANGUAGES %}
          {% get_language_info_list for LANGUAGES as languages %}
          {% for language in languages %}
              <button type="submit" name="language" class="btn transparent mx-1 p-1" value="{{language.code}}"><img width="30" 
              {% if language.code == "es-ve" %}
                  src="{% static 'img/flags/es-ve.png' %}"
              {% elif language.code == "en" %}
                  src="{% static 'img/flags/en.png' %}"
              {% endif %}  alt=""> ({{ language.code }})
              </button>
          {% endfor %}
      </form>
      </div>
      <script>
      const btnLanguage = document.querySelector(".btn-overlay-stela");


      function activeMenu() {
          console.log(btnLanguage)
          btnLanguage.classList.toggle('btn-hidden')
      }
      </script>
  <!-- ***** Language End ***** -->
{% endblock  %}
{% block content %}  
{% if site_data.company_public %}

{% else %}   
  <script>
    window.location.replace('/console/newcomer')
  </script>
  <style>
    :root {
      --cnvs-heading-color:#566a7f;
    }
  </style>
{% endif %}
      <div class="content-view">
            {% block sidebar %}
              <div class="sidebar-linkzone bg-stela-sidebar closed text-sidebar">
                <div>
                  <div class="logo-stela">
                  </div>
                  <span class="logo_name"></span>
                </div>
                <ul class="nav-links awide stela-links vh-60">
                  <li>
                    <div class="iocn-link">
                      <i class="fa-solid fa-house"></i>
                        <span class="link_name text-light pointer text-left">
                          <a href="{% host_url 'console' host 'stela' %}">{% trans "Home" %}</a> 
                        </span>
                      <i class='bx'></i>
                    </div>
                    <ul class="sub-menu">
                      <li><a href="#">{% trans "Website Required" %}</a></li>
                    </ul>
                  </li> 
                    <li>
                      <div class="iocn-link">
                          <i class="fa-solid fa-at"></i>
                          <span class="link_name text-light pointer text-left">{% trans "Communications" %}</span>
                        <i class='bx bxs-chevron-down arrow' ></i>
                      </div>
                      <ul class="sub-menu">
                        <li><a href="{% host_url 'inbox' host 'stela' %}">{% trans "Whatsapp Business" %}</a></li>
                      </ul>
                      <ul class="sub-menu">
                        <li><a href="{% host_url 'inbox' host 'stela' %}">{% trans "Inbox" %}</a></li>
                      </ul>
                      <ul class="sub-menu">
                        <li><a href="{% host_url 'support' host 'stela' %}">{% trans "Support Center" %}</a></li>
                      </ul>
                    </li>  
                      <li> 
                        <div class="iocn-link">
                            <i class="fas fa-desktop"></i>
                            <span class="link_name text-light pointer text-left">{% trans "Content" %}</span>
                          <i class='bx bxs-chevron-down arrow' ></i>
                        </div>
                        <ul class="sub-menu">
                          <li><a href="{% host_url 'expert' host 'stela' %}">{% trans "PRO-Stela Expert" %}</a></li>
                          <li><a href="{% host_url 'chats' host 'stela' %}">{% trans "PRO-Stela Chat" %}</a></li>  
                          <li><a href="{% host_url 'main-content' host 'stela' %}">{% trans "Site Content Editor" %}</a></li>
                          <li><a href="#">{% trans "Organizer" %}</a></li> 
                        </ul>
                      </li>  
                      <li>
                        <div class="iocn-link">
                            <i class="fa-solid fa-magnifying-glass-chart"></i>
                            <span class="link_name text-light pointer text-left">Marketing</span>
                          <i class='bx bxs-chevron-down arrow' ></i>
                        </div>
                        <ul class="sub-menu">
                          <li><a href="/marketing/business-suite">{% trans "Meta Business Services" %}</a></li>
                          <li><a href="#">{% trans "Google Business" %}</a></li>
                        </ul>
                      </li>
                      <li>
                        <div class="iocn-link">
                            <i class="fas fa-warehouse"></i>
                            <span class="link_name text-light pointer text-left">{% trans "Inventory" %}</span>
                          <i class='bx bxs-chevron-down arrow' ></i>
                        </div>
                        <ul class="sub-menu">
                          <li><a href="{% host_url 'service' host 'stela' %}">{% trans "Services" %}</a></li>
                        </ul>
                        <ul class="sub-menu">
                          <li><a href="{% host_url 'products' host 'stela' %}">{% trans "Products" %}</a></li>
                        </ul>
                      </li>
                      <li>
                        <div class="iocn-link">
                          <i class="fa-solid fa-building-columns"></i>
                            <span class="link_name text-light pointer text-left">{% trans "Finances" %}</span>
                          <i class='bx bxs-chevron-down arrow' ></i>
                        </div>
                        <ul class="sub-menu">
                          <li><a href="{% host_url 'homebrew' host 'stela' %}">{% trans "Payments" %}</a></li>
                          <li><a href="{% host_url 'billing' host 'stela' %}">{% trans "Billings" %}</a></li>
                        </ul>
                      </li>
                      <li>
                        <div class="iocn-link">
                          <i class="fa-solid fa-list"></i>
                            <span class="link_name text-light pointer text-left">{% trans "Operations" %}</span>
                          <i class='bx bxs-chevron-down arrow' ></i>
                        </div>
                        <ul class="sub-menu">
                          <li><a href="{% host_url 'orders_list' host 'stela' %}">{% trans "Orders" %}</a></li>
                          <li class="disabled"><a href="#">{% trans "Reviews" %}</a></li>
                        </ul>
                      </li>
                      <li>
                        <div class="iocn-link">
                            <i class="fas fa-users"></i>
                            <span class="link_name text-light pointer text-left">{% trans "Users" %}</span>
                          <i class='bx bxs-chevron-down arrow' ></i>
                        </div>
                        <ul class="sub-menu">
                          <li><a href="{% host_url 'users' host 'stela' %}">{% trans "Users" %}</a></li>
                        </ul>
                      </li>
                      <li>
                        <div class="profile-details profile-stela">
                          <div class="profile-content">
                            <!--<img src="image/profile.jpg" alt="profileImg">-->
                          </div>
                          <div class="name-job">
                            {% if user.full_name %}
                                <div class="profile_name">{{user.full_name}}</div>
                            {% else %}
                                <div class="profile_name">{{user.username}}</div>
                            {% endif %}
                            <div class="job"> 
                              <a href="/users/{{user.pk}}/" class="text-light" target="_blank">{% trans "Profile" %}</a>
                            </div>
                          </div><a href="{% host_url 'logout' host 'stela' %}"><i class='bx bx-log-out'><small class="oxanium v-line">{% trans "Log Out" %}</small></i></a>
                        </div>
                  </li>
                </ul>
              </div>
            {% endblock  %}
              <div class="home-btn">
                {% block mobile_sidebar %}
                  <div class="row mobile py-3">
                      <div class="col-12">
                        <i id="menu-barzone" class='bx bx-menu' onclick=openMobileSidebar()></i>
                        <span id="stela-line" class="oxanium">{% trans "Stela Menu" %}</span>
                      </div>
                      <div class="close-menu d-none" onclick="closeMenu()">
                        <i class="fa-solid fa-xmark fs-3"></i>
                      </div>
                      {% block menu_formulario %}
                      {% endblock  %}
                  </div>
                {% endblock  %}
                <div class="stela-content business">
                      {% block section %}
                              <div class="row justify-content-between my-4 align-items-center">
                                  <div class="col-md-12 col-lg-5">
                                    {% block title %}
                                      <h1 class="oxanium text-dark ml-4">{% trans "Hello" %}, {{user.username|title }}</h1>
                                    {% endblock  %} 
                                  </div>
                                  <div class="col-lg-7">
                                      {% block side_title %}<h3 class="oxanium fs-6 mt-3 d-flex justify-content-end mx-3">{% trans "Welcome" %}, <b class="ml-1">STELA CONTROL DYNAMIC</b></h3>{% endblock  %} 
                                  </div>
                              </div>
                              {% block section_content %}
                                  <div class="container">
                                      <div class="row">
                                          <div class="col-lg-6">
                                                <div class="row">                                    
                                                    <div class="col-lg-6">
                                                        <div class="card vh-22">
                                                          <div class="card-title row justify-content-between">
                                                              <div class="col-10">
                                                                  <h4 class="fs-6 text-center">{% trans "Traffic Site" %}</h4>
                                                              </div>
                                                              <div class="col-2">
                                                                <div class="dropdown">
                                                                  <button
                                                                      class="btn p-0"
                                                                      type="button"
                                                                      id="orederStatistics"
                                                                      data-bs-toggle="dropdown"
                                                                      aria-haspopup="true"
                                                                      aria-expanded="false"
                                                                  >
                                                                      <i class="bx bx-dots-vertical-rounded"></i>
                                                                  </button>
                                                                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
                                                                      <a class="dropdown-item" href="#">{% trans "Today" %}</a>
                                                                      <a class="dropdown-item" href="">{% trans "Last 15 Days" %}</a>
                                                                      <a class="dropdown-item" href="">{% trans "Last Month" %}</a>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                          </div>
                                                          <div class="card-body p-2 d-flex justify-content-center align-items-center">
                                                              {% if viewscount %}
                                                                  <span class="views-response mx-2 fs-4">{{viewscount}}</span><span>{% trans "Views" %}</span>
                                                              {% else %}
                                                                  <h3 class="fs-5">{% trans "No Views" %}</h3>
                                                              {% endif %}
                                                            
                                                          </div>
                                                        </div>    
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="card vh-22">
                                                              <div class="card-title row justify-content-between">
                                                                  <div class="col-10">
                                                                      <h4 class="fs-6 text-center">{% trans "Sales" %}</h4>
                                                                  </div>
                                                                  <div class="col-2">
                                                                    <div class="dropdown">
                                                                      <button
                                                                          class="btn p-0"
                                                                          type="button"
                                                                          id="orederStatistics"
                                                                          data-bs-toggle="dropdown"
                                                                          aria-haspopup="true"
                                                                          aria-expanded="false"
                                                                      >
                                                                          <i class="bx bx-dots-vertical-rounded"></i>
                                                                      </button>
                                                                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
                                                                          <a class="dropdown-item" href="#">{% trans "Today" %}</a>
                                                                          <a class="dropdown-item" href="">{% trans "Last 15 Days" %}</a>
                                                                          <a class="dropdown-item" href="">{% trans "Last Month" %}</a>
                                                                      </div>
                                                                    </div>
                                                                  </div>
                                                              </div>
                                                              <div class="card-body">
                                                                    {% if sales.get_total > 0 %}
                                                                    
                                                                    {% else %}
                                                                        <h3 class="fs-5">{% trans "You don't have sales yet" %}</h3>
                                                                    {% endif %}
                                                              </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 my-3">
                                                          <a class="btn btn-shappire btn-block fw-bold oxanium" href="https://stelacontroldynamic.com/#media" target="_blank">{% trans "STELA TUTORIALS" %}</a>
                                                    </div>
                                                </div>
                                          </div>
                                          <div class="col-lg-6">
                                            <div class="card">
                                              <div class="card-body p-0">
                                                  <div class="card-title d-flex justify-content-between">
                                                      <h4 class="fs-6 text-center ml-4">{% trans "Linkzone Events" %}</h4>
                                                      <div class="dropdown">
                                                        <button
                                                            class="btn p-0"
                                                            type="button"
                                                            id="orederStatistics"
                                                            data-bs-toggle="dropdown"
                                                            aria-haspopup="true"
                                                            aria-expanded="false"
                                                        >
                                                            <i class="bx bx-dots-vertical-rounded"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
                                                            <a class="dropdown-item" href="">{% trans "Refresh" %}</a>
                                                            <button class="dropdown-item">{% trans "Clear" %}</button>
                                                        </div>
                                                      </div>
                                                  </div>
                                                  <div class="card-text vh-20 p-3">
                                                    {% for alert in events %}
                                                      {% if alert.section == "Cloud Services Down" %}
                                                        <li class="d-flex mb-4 pb-1">
                                                          <div class="avatar flex-shrink-0 me-3">
                                                                <img src="{% static 'img/stelaPayments/icons/unicons/cloud-down.png' %}" alt="User" class="rounded" />
                                                          </div>
                                                          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                            <div class="me-2">
                                                                <small class="text-muted d-block mb-1">{{alert.title}}</small>
                                                                <h6 class="mb-0">{{alert.description}}</h6>
                                                            </div>
                                                          </div>
                                                        </li>
                                                      {% elif alert.section == "Cloud Services Up" %}
                                                        <li class="d-flex mb-4 pb-1">
                                                          <div class="avatar flex-shrink-0 me-3">
                                                                <img src="{% static 'img/stelaPayments/icons/unicons/cloud-up.png' %}" alt="User" class="rounded" />
                                                          </div>
                                                          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                            <div class="me-2">
                                                                <small class="text-muted d-block mb-1">{{alert.title}}</small>
                                                                <h6 class="mb-0">{{alert.description}}</h6>
                                                            </div>
                                                          </div>
                                                        </li>
                                                      {% elif alert.section == "Project Request" %}
                                                        <li class="d-flex mb-4 pb-1">
                                                          <div class="avatar flex-shrink-0 me-3">
                                                                <img src="{% static 'img/stelaPayments/icons/unicons/website.png' %}" alt="User" class="rounded" />
                                                          </div>
                                                          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                            <div class="me-2">
                                                                <small class="text-muted d-block mb-1">{{alert.title}}</small>
                                                                <h6 class="mb-0">{{alert.description}}</h6>
                                                            </div>
                                                            <div class="user-progress d-flex align-items-center gap-1">
                                                              <a class="btn btn-sm btn-shappire" href="/orders"><i class="fa-solid fa-right-to-bracket"></i></a>
                                                            </div>
                                                          </div>
                                                        </li>
                                                      {% endif %}
                                                    {% empty %}
                                                      <div class="d-flex justify-content-center align-items-center vh-12">
                                                            <h5>{% trans "No Events" %}</h5>
                                                      </div>
                                                    {% endfor %}
                                                  </div>
                                              </div>
                                            </div>
                                          </div>
                                      </div>
                                      <div class="row lower-box">
                                        <div class="col-4">
                                            <div class="card">
                                              <div class="card-body">
                                                  <div class="card-title d-flex justify-content-between">
                                                      <h4 class="fs-6 text-center">{% trans "Pending Billing" %}</h4>
                                                      <div class="dropdown">
                                                        <button
                                                            class="btn p-0"
                                                            type="button"
                                                            id="orederStatistics"
                                                            data-bs-toggle="dropdown"
                                                            aria-haspopup="true"
                                                            aria-expanded="false"
                                                        >
                                                            <i class="bx bx-dots-vertical-rounded"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
                                                            <a class="dropdown-item" href="{% host_url 'billing' host 'stela' %}">Stela Billing</a>
                                                            <a class="dropdown-item" href="">{% trans "Refresh" %}</a>
                                                        </div>
                                                      </div>
                                                  </div>
                                                  <div class="card-text">
                                                    {% for bill in billing %}
                                                      <li class="d-flex mb-4 pb-1">
                                                        <div class="avatar flex-shrink-0 me-3">
                                                              <img src="{% static 'img/stelaPayments/icons/unicons/billing.png' %}" alt="User" class="rounded" />
                                                        </div>
                                                        <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                          <div class="me-2">
                                                              <small class="text-muted d-block mb-1">{{bill.recipt.option}}</small>
                                                              <h6 class="mb-0">{{bill.control_id}}</h6>
                                                          </div>
                                                          <div class="user-progress d-flex align-items-center gap-1">
                                                            {% if bill.recipt.status == "Payeed" %}
                                                                  <button class="btn btn-sm btn-success">{% trans "Payeed" %}</button>
                                                            {% else %}
                                                                  <button class="btn btn-sm btn-warning">{% trans "Pending" %}</button>
                                                            {% endif %}     
                                                          </div>
                                                        </div>
                                                      </li>
                                                    {% empty %}
                                                      <div class="d-flex justify-content-center align-items-center vh-20">
                                                            <h5>{% trans "No Billing" %}</h5>
                                                      </div>
                                                    {% endfor %}
                                                  </div>
                                              </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="card">
                                              <div class="card-body">
                                                  <div class="card-title d-flex justify-content-between">
                                                      <h4 class="fs-6">{% trans " New Subscriptors" %}</h4>
                                                      <div class="dropdown">
                                                        <button
                                                            class="btn p-0"
                                                            type="button"
                                                            id="orederStatistics"
                                                            data-bs-toggle="dropdown"
                                                            aria-haspopup="true"
                                                            aria-expanded="false"
                                                        >
                                                            <i class="bx bx-dots-vertical-rounded"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
                                                            <a class="dropdown-item" href="">{% trans "Refresh" %}</a>
                                                        </div>
                                                      </div>
                                                  </div>
                                                  <div class="card-text">
                                                    {% for get in subs %}
                                                      {% if get.is_basic %}
                                                          <li class="d-flex mb-4 pb-1">
                                                            <div class="avatar flex-shrink-0 me-3">
                                                                  <img src="{% static 'img/stelaPayments/icons/unicons/basic_user.png' %}" alt="User" class="rounded" />
                                                            </div>
                                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                              <div class="me-2">
                                                                  <small class="text-muted d-block mb-1">Plan: Stela Basic</small>
                                                                  <h6 class="mb-0">{{get.username}}</h6>
                                                              </div>
                                                              <div class="user-progress d-flex align-items-center gap-1">
                                                                  <a class="btn btn-sm btn-shappire" href="/subscribers-control/{{get.id}}/"><i class="fa-solid fa-right-to-bracket"></i></a>
                                                              </div>
                                                            </div>
                                                          </li>
                                                      {% elif get.is_business %}
                                                          <li class="d-flex mb-4 pb-1">
                                                            <div class="avatar flex-shrink-0 me-3">
                                                                  <img src="{% static 'img/stelaPayments/icons/unicons/business_user.png' %}" alt="User" class="rounded" />
                                                            </div>
                                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                              <div class="me-2">
                                                                  <small class="text-muted d-block mb-1">Plan: Stela Business</small>
                                                                  <h6 class="mb-0">{{get.username}}</h6>
                                                              </div>
                                                              <div class="user-progress d-flex align-items-center gap-1">
                                                                  <a class="btn btn-sm btn-shappire" href="/subscribers-control/{{get.id}}/"><i class="fa-solid fa-right-to-bracket"></i></a>
                                                              </div>
                                                            </div>
                                                          </li>
                                                      {% endif %}
                                                    {% empty %}
                                                        <div class="d-flex justify-content-center align-items-center vh-20">
                                                          <h5>{% trans "No Subscriptors" %}</h5>
                                                        </div>
                                                    {% endfor %}
                                                  </div>
                                              </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                          <div class="card">
                                            <div class="card-body">
                                                <div class="card-title d-flex justify-content-between">
                                                    <h4 class="fs-6 text-center">{% trans "Support Control" %}</h4>
                                                    <div class="dropdown">
                                                      <button
                                                          class="btn p-0"
                                                          type="button"
                                                          id="orederStatistics"
                                                          data-bs-toggle="dropdown"
                                                          aria-haspopup="true"
                                                          aria-expanded="false"
                                                      >
                                                          <i class="bx bx-dots-vertical-rounded"></i>
                                                      </button>
                                                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
                                                          <a class="dropdown-item" href="#">{% trans "Add Stock" %}</a>
                                                          <a class="dropdown-item" href="">{% trans "Refresh" %}</a>
                                                      </div>
                                                    </div>
                                                </div>
                                                <div class="card-text">
                                                  {% for case in support %}
                                                        <li class="d-flex mb-4 pb-1">
                                                          <div class="avatar flex-shrink-0 me-3">
                                                                <img src="{% static 'img/stelaPayments/icons/unicons/support.png' %}" alt="User" class="rounded" />
                                                          </div>
                                                          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                            <div class="me-2">
                                                                <small class="text-muted d-block mb-1">{{case.option}}</small>
                                                                <h6 class="mb-0">{{item.user}}</h6>
                                                            </div>
                                                            <div class="user-progress d-flex align-items-center gap-1">
                                                                {% if case.status == 'Pending' %}
                                                                    <a href="/support-case/{{case.id}}" class="btn btn-danger btn-sm">{% trans "Open" %}</a>
                                                                {% else %}
                                                                    <a href="/support-case/{{case.id}}" class="btn btn-success btn-sm">{% trans "Closed" %}</a>
                                                                {% endif %}
                                                            </div>
                                                          </div>
                                                        </li>
                                                  {% empty %}
                                                      <div class="d-flex justify-content-center align-items-center vh-20">
                                                        <h5>{% trans "No Support" %}</h5>
                                                      </div>
                                                  {% endfor %}
                                                </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                  </div>
                              {% endblock %}
                      {% endblock  %}
                </div>
              </div>
      </div> 
{% endblock  %}

