<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
<%
    local fs = require "luci.openclash"
    local plugin_version = fs.oc_version()
%>
  <script src="/luci-static/resources/openclash/js/oc-icons.js?v=<%=plugin_version%>"></script>
</head>

<body>
<fieldset class="cbi-section">
<table width="100%"><tr><td>
<div class="oc">
    <div class="oix-main-container">
        <div class="center">
            <div id="card" class="card">
                <div id="additional" class="additional">
                    <div class="user-card">
                        <div class="img">
                            <img id="oix_logo" src="/luci-static/resources/openclash/img/oixcloud.png" loading="lazy" title="oixCloud" alt="oixCloud" onerror="return imgerrorfuns(this,this.src)" onclick="return show_more()" />
                        </div>
                    </div>
                    <div class="more-info" id="more_info">
                        <h1>oixCloud</h1>
                        <div class="coords" id="oix_it">
                            <%:Simple & trustworthy%>
                        </div>
                    </div>
                </div>
                <div class="general">
                    <h1 id="oix-plan"></h1>
                    <div class="oix-announcement" id="oix-announcement" style="display: none;">
                        <div id="oix-announcement-banner" class="oix-announcement-banner">
                            <div class="oix-megaphone-container">
                                <svg id="oix-megaphone" width="15" height="15"><use href="#oc-icon-megaphone"/></svg>
                            </div>
                            <div id="oix-announcement-content" class="oix-announcement-content"></div>
                        </div>
                    </div>
                    <div class="oix-info">
                        <div class="oix-info-left">
                            <div>
                                <p>
                                    <span class="oix-title" title="<%:Plan Expiration Time%>"><%:Plan Expiration Time%>:</span><span class="oix-result" id="oix-plantime" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="oix-title" title="<%:Account Balances%>"><%:Account Balances%>:</span><span class="oix-result" id="oix-money" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="oix-title" title="<%:Aff Balances%>"><%:Aff Balances%>:</span><span class="oix-result" id="oix-affmoney" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="oix-title" title="<%:Account Integral%>"><%:Account Integral%>:</span><span class="oix-result" id="oix-integral" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                            </div>
                        </div>

                        <div class="oix-info-center">
                            <div>
                                <p>
                                    <span class="oix-title" title="<%:Today Used%>"><%:Today Used%>:</span><span class="oix-result2" id="oix-today-used" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="oix-title" title="<%:Plan Used%>"><%:Plan Used%>:</span><span class="oix-result2" id="oix-used" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="oix-title" title="<%:Plan Unused%>"><%:Plan Unused%>:</span><span class="oix-result2" id="oix-unused" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="oix-title" title="<%:Plan Traffic%>"><%:Plan Traffic%>:</span><span class="oix-result2" id="oix-traffic" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                            </div>
                        </div>

                        <div class="oix-info-right">
                            <div class="oix-btn-container">
                                <input type="button" class="btn" value="<%:Checkin%>" onclick="return oix_checkin_btn(this)">
                            </div>
                        </div>
                    </div>
                    <div class="more">
                        <p>Powered by <a class="myip-footer" onclick="return web_oix()" href="javascript:void(0);">oixcloud.com</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</td></tr></table>
</fieldset>

<script type="text/javascript">//<![CDATA[
  var oix_plan = document.getElementById('oix-plan');
  var oix_plantime = document.getElementById('oix-plantime');
  var oix_money = document.getElementById('oix-money');
  var oix_affmoney = document.getElementById('oix-affmoney');
  var oix_today_used = document.getElementById('oix-today-used');
  var oix_used = document.getElementById('oix-used');
  var oix_unused = document.getElementById('oix-unused');
  var oix_traffic = document.getElementById('oix-traffic');
  var oix_integral = document.getElementById('oix-integral');
  var oix_checkin = document.getElementById('oix-checkin');
  var obj = document.getElementById("additional");
  var card = document.getElementById("card");
  var oix_it = document.getElementById("oix_it");
  var more_info = document.getElementById("more_info");
  var oix_logo = document.getElementById("oix_logo");
  var oix_container = document.getElementById("oix-announcement");
  var oix_banner = document.getElementById("oix-announcement-banner");
  var oix_content = document.getElementById("oix-announcement-content");
  var showmore=1;

  document.addEventListener('DOMContentLoaded', function() {
      DarkModeDetector.init();
      obj.classList.remove('collapsed');
      obj.classList.add('expanded');
  });

  XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "oix_info")%>', null, function(x, status) {
    if (x && x.status == 200 && status.result != "error") {
        oix_plan.innerHTML = status.result.plan;
        oix_plantime.innerHTML = status.result.plan_time;
        oix_plantime.title = status.result.plan_time;
        oix_money.innerHTML = status.result.money;
        oix_money.title = status.result.money;
        oix_affmoney.innerHTML = status.result.aff_money;
        oix_affmoney.title = status.result.aff_money;
        oix_today_used.innerHTML = status.result.today_used;
        oix_today_used.title = status.result.today_used;
        oix_used.innerHTML = status.result.used;
        oix_used.title = status.result.used;
        oix_unused.innerHTML = status.result.unused;
        oix_unused.title = status.result.unused;
        oix_traffic.innerHTML = status.result.traffic;
        oix_traffic.title = status.result.traffic;
        oix_integral.innerHTML = status.result.integral;
        oix_integral.title = status.result.integral;

        if (status.result.announcement && status.result.announcement.content != "") {
            oix_plan.style.display = 'none';
            loadOixAnnouncement(status.result.announcement.date + ": " + status.result.announcement.content);
        }
        show_info();
    }
    else {
        show_less();
    }
  });

  XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "oix_info")%>', null, function(x, status) {
    if (x && x.status == 200 && status.result != "error") {
        oix_plan.innerHTML = status.result.plan;
        oix_plantime.innerHTML = status.result.plan_time;
        oix_plantime.title = status.result.plan_time;
        oix_money.innerHTML = status.result.money;
        oix_money.title = status.result.money;
        oix_affmoney.innerHTML = status.result.aff_money;
        oix_affmoney.title = status.result.aff_money;
        oix_today_used.innerHTML = status.result.today_used;
        oix_today_used.title = status.result.today_used;
        oix_used.innerHTML = status.result.used;
        oix_used.title = status.result.used;
        oix_unused.innerHTML = status.result.unused;
        oix_unused.title = status.result.unused;
        oix_traffic.innerHTML = status.result.traffic;
        oix_traffic.title = status.result.traffic;
        oix_integral.innerHTML = status.result.integral;
        oix_integral.title = status.result.integral;
        if (showmore != 0) {
            show_info();
        }
        else {
            show_less();
      }
    }
    else {
        show_less();
    }
  });

  function loadOixAnnouncement(content) {
    if (!oix_container || !oix_banner || !oix_content) return;

    var result = content.replace(/<[^>]*>/g, ' ');
    result = result.replace(/\s+/g, ' ').trim();

    if (!result) {
        oix_container.style.display = 'none';
        return;
    }

    oix_container.style.display = 'flex';

    var oixAnimator = new AnnouncementAnimator({
        bannerElement: oix_banner,
        contentElement: oix_content,
        announcements: [result],
        isRandomTips: false,
        loopDelay: 2000,
    });

    oixAnimator.init();

    window.addEventListener('beforeunload', function() {
        oixAnimator.destroy();
    });

    setTimeout(function() {
        oix_plan.style.display = 'block';
        oix_container.style.display = 'none';
        oixAnimator.destroy();
    }, 1000 * 60);
  }

  function oix_checkin_btn(btn)
  {
    XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "oix_checkin")%>', null, function(x, status) {
      if ( x && x.status == 200 && status.result != "error") {
        if (status.result.ret == 200) {
          alert("<%:oixCloud Checkin Successful, Result:%>\n\n"+
          status.result.data.checkin);
        }
        else if (status.result.msg) {
          alert("<%:oixCloud Checkin Failed, Result:%>\n\n"+
          status.result.msg);
        }
        else {
          alert("<%:oixCloud Checkin Failed! Please Check And Try Again...%>")
        }
      }
      else {
        alert("<%:oixCloud Checkin Failed! Please Check And Try Again...%>")
      }
    });
  }

  function web_oix()
  {
    url='http://bit.ly/oixcloud-register';
    window.open(url);
  }

  function show_more()
  {
    if (obj.classList.contains('expanded')) {
      show_info();
      showmore = 1;
    }
    else {
      if (oix_plan.innerHTML != "") {
        show_less();
        showmore = 0;
      }
      else {
        web_oix();
      }
    }
  }

  function show_less()
  {
    if (!obj.classList.contains('expanded')) {
      obj.classList.add('expanded');
      obj.classList.remove('collapsed');
    }

    var rdmdl = Math.floor(Math.random() * 6) + 1;
    if (rdmdl == 1) {
      oix_it.innerHTML = '<%:Simple & trustworthy%>';
    }
    if (rdmdl == 2) {
      oix_it.innerHTML = '<%:Cross-platform Support%>';
    }
    if (rdmdl == 3) {
      oix_it.innerHTML = '<%:Global Acceleration Network%>';
    }
    if (rdmdl == 4) {
      oix_it.innerHTML = '<%:Easy to Use%>';
    }
    if (rdmdl == 5) {
      oix_it.innerHTML = '<%:Intelligent Shunting%>';
    }
    if (rdmdl == 6) {
      oix_it.innerHTML = '<%:Perfect Technical Support%>';
    }
  }

  function show_info()
  {
    if (!obj.classList.contains('collapsed')) {
      obj.classList.add('collapsed');
      obj.classList.remove('expanded');
    }
  }

  function imgerrorfuns(imgobj,imgSrc)
  {
    setTimeout(function(){
        imgobj.src=imgSrc;
    },1000*10);
  }

//]]></script>
</html>