{% extends 'layouts/backend_base.jinja2' %}

{% block header %}
            {% if current_supervisor_user.is_authenticated %}
            <div data-notify="container"
            class="alert switch-back-bar col-xs-11 col-sm-10 col-md-10 col-lg-8 alert-warning alert-with-icon" data-notify-position="top-center"
            role="alert">
                <i class="material-icons" data-notify="icon">error</i>
                    <span data-notify="message">
                    Hi <strong>{{ current_supervisor_user.firstname | default(current_user.first_name|default('') + ' ' +
                    current_user.last_name|default('')) }}</strong>,
                    you are logged in as
                    <strong>{{ current_user.firstname }} {{current_user.lastname }}
                    </strong>
                    </span>
                    <a href="{{ url_for('user.switch_back') }}">
                        <button type="button" class="switch-back-button btn btn-light-blue" aria-hidden="true">
                            Switch back
                        </button>
                    </a>
            </div>
            {% endif %}
            {% if current_user.is_authenticated and current_user.is_viewing_partnership %}
            <div data-notify="container"
            class="alert switch-back-bar col-xs-11 col-sm-10 col-md-10 col-lg-8 alert-warning alert-with-icon" data-notify-position="top-center"
            role="alert">
                <i class="material-icons" data-notify="icon">error</i>
                    <span data-notify="message">
                    Hi <strong>{{ current_user.firstname + ' ' + current_user.lastname }}</strong>,
                    you are acting on behalf of <strong>{{ current_user.get_user_viewing_partnership_account_name }}</strong>
                    </span>
                    <a href="{{ url_for('partnership.switch_back') }}">
                        <button type="button" class="switch-back-button btn btn-light-blue" aria-hidden="true">
                            Switch back
                        </button>
                    </a>
            </div>
            {% endif %}
            <nav class="navbar navbar-transparent navbar-absolute
                {% if current_supervisor_user.is_authenticated %} navbar-custom-position
                {% elif current_user.is_authenticated and current_user.is_viewing_partnership %} navbar-custom-position
                {% endif %}">
                <div class="container-fluid">
                    <div class="navbar-minimize">
                        <button id="minimizeSidebar" class="btn btn-round btn-light-blue btn-fill btn-just-icon">
                            <i class="material-icons visible-on-sidebar-regular">more_vert</i>
                            <i class="material-icons visible-on-sidebar-mini">view_list</i>
                        </button>
                    </div>
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"> {% block heading %}{% endblock %} </a>
                    </div>
                </div>
            </nav>
{% endblock %}

{% block footer %}
<footer class="footer">
                <div class="container-fluid">
                    <nav class="pull-left">
                        <ul>
                          <!--  <li>
                                <a href="{{ url_for('page.faq') }}">
                                    FAQ
                                </a>
                            </li> -->
                            <li>
                                <li><a href="{{ url_for('issue.support') }}">
                                    Support
                                </a>
                            </li>
                            <li>
                                <a href="{{ url_for('page.privacy') }}">
                                    Privacy Policy
                                </a>
                            </li>
                            <li>
                                <a href="{{ url_for('page.terms') }}">
                                    Terms of Service
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <p class="copyright pull-right">
                        &copy;
                        <script>
                            document.write(new Date().getFullYear())
                        </script>
                        Copyright &copy; <span id="year-copy"></span>
                        <a href="http://buyercall.com/" target="_blank">BuyerCall</a>, powered with passion
                    </p>
                </div>
            </footer>
{% endblock %}
{% block notifications %}
    {{ flash.render() }}
    {{ billing.card_expiring_warning() }}
    {{ billing.subscription_expiring_warning() }}
    {{ billing.subscription_expiring_error() }}
{% endblock %}

{% block scripts %}
<!-- Load and execute javascript code used for leads page -->
{% endblock %}
{% block pagescripts %}
<script>
// The weekly call performance line chart
    new Chartist.Line('#callLineChart', {

    // Our labels and three data series
      labels:  [{% for item in monthly_labels %}
                    "{{item}}",
                {% endfor %}],
      series: [
        [{% for item in monthly_data_points %}
            {{item}},
        {% endfor %}],
        [{% for item in monthly_answered_data_points %}
            {{item}},
        {% endfor %}],
        [{% for item in monthly_missed_data_points %}
            {{item}},
        {% endfor %}]
      ]
      },
      {
    // We are setting a few options for our chart and override the defaults
      // Set hight of the chart
        height: 400,
      // Don't draw the line chart points
      showPoint: true,
      // Disable line smoothing
      lineSmooth: false,
      // X-Axis specific configuration
      axisX: {
        // We can disable the grid for this axis
        showGrid: true,
        // and also don't show the label
        showLabel: true,
        labelInterpolationFnc: function skipLabels(value, index, labels) {
          if(labels.length > 15) {
            return index % 2  === 0 ? value : null;
          } else {
            return value;
          }
        }
      },
      // Y-Axis specific configuration
      axisY: {
        // Lets offset the chart a bit from the labels
        low: 0,
        offset: 60,
        // The label interpolation function enables you to modify the values
        // used for the labels on each axis. Here we are converting the
        // values into million pound.
        labelInterpolationFnc: function(value) {
          return value;
        },
        onlyInteger: true
      }
    });

// Weekly call source pie chart
    var sum = function(a, b) { return a + b };
    var data = {
        series: [{% for item in monthly_source_data_points %}
                {{item}},
                {% endfor %}]
    };
    new Chartist.Pie('#callSourcePieChart', data,
    {
        width: '100%',
        height: '100%',
        donut: true,
        labelInterpolationFnc: function(value) {
            return Math.round(value / data.series.reduce(sum) * 100) + '%';
      }
    });

// Weekly agent calls Horizontal Bar chart
    new Chartist.Bar('#agentBarChart', {
      labels: [{% for item in agent_labels %}
      "{{item}}",
      {% endfor %}],
      series: [
        [{% for item in agent_leads %}
        {{item}},
        {% endfor %}]
      ]
    }, {
        seriesBarDistance: 10,
        // Set height of the chart
        height: 300,
        reverseData: true,
        horizontalBars: true,
        axisX: {
            onlyInteger: true,
        },
        axisY: {
            offset: 115,
        }
    });
</script>
{% endblock %}