{% extends "layouts/app.twig" %}

{% block title %}{{ __('Dashboard') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Dashboard') }}
                </h2>
              </div>
              <!-- Page title actions -->
              <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                  {% if roles == 0 %}<span class="d-none d-sm-inline">
                    <a href="{{route('reports')}}" class="btn btn-pink">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697" /><path d="M18 14v4h4" /><path d="M18 11v-4a2 2 0 0 0 -2 -2h-2" /><path d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M8 11h4" /><path d="M8 15h3" /></svg>
                      {{ __('View Reports') }}
                    </a>
                  </span>{% endif %}
                  <a href="{{route('createDomain')}}" class="btn btn-primary d-none d-sm-inline-block">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                    {{ __('Create new domain') }}
                  </a>
                  <a href="{{route('createDomain')}}" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Create new domain') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="row row-deck row-cards">
              <div class="col-12">
                <div class="row row-cards">
                  {% if registrars %}
                  <div class="{% if minimum_data == 'false' %}col-sm-6 col-lg-3{% else %}col-sm-4 col-lg-4{% endif %}">
                    <a class="card card-link" href="{{route('listDomains')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-primary text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4"></path><path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4"></path><path d="M12.5 3a16.989 16.989 0 0 1 1.828 4"></path><path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4"></path><path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4"></path><path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4"></path><path d="M2 10l1 4l1.5 -4l1.5 4l1 -4"></path>   <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4"></path><path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ domains }} {{ __('Domains') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>{% if minimum_data == 'false' %}
                  <div class="col-sm-6 col-lg-3">
                    <a class="card card-link" href="{{route('listContacts')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-secondary text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z"></path><path d="M10 16h6"></path><path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M4 8h3"></path><path d="M4 12h3"></path><path d="M4 16h3"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ contacts }} {{ __('Contacts') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>{% endif %}
                  <div class="{% if minimum_data == 'false' %}col-sm-6 col-lg-3{% else %}col-sm-4 col-lg-4{% endif %}">
                    <a class="card card-link" href="{{route('listHosts')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-green text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0"></path><path d="M12 3c1.333 .333 2 2.333 2 6s-.667 5.667 -2 6"></path><path d="M12 3c-1.333 .333 -2 2.333 -2 6s.667 5.667 2 6"></path><path d="M6 9h12"></path><path d="M3 19h7"></path><path d="M14 19h7"></path><path d="M12 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M12 15v2"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ hosts }} {{ __('Hosts') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="{% if minimum_data == 'false' %}col-sm-6 col-lg-3{% else %}col-sm-4 col-lg-4{% endif %}">
                    <a class="card card-link" href="{{route('registrars')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-azure text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13a3 3 0 1 0 0 -6a3 3 0 0 0 0 6z"></path><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path><path d="M6 20.05v-.05a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v.05"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ registrars }} {{ __('Registrars') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="col-lg-6 col-xl-4">
                    <div class="card">
                      <div class="card-body">
                        <h3 class="card-title">{{ __('Last 7 Days: Domain Registrations') }}</h3>
                        <div id="last-7-days"></div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-6 col-xl-4">
                    <div class="card">
                      <div class="card-body">
                      <h3 class="card-title">{{ __('Top Registrars by Domains') }}</h3>
                        <div id="top-registrars"></div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-6 col-xl-4">
                    <div class="card">
                      <div class="card-body">
                      <h3 class="card-title">{{ __('Support Tickets: Last Week') }}</h3>
                        <div id="support-tickets"></div>
                      </div>
                    </div>
                  </div>
                  {% else %}
                  <div class="{% if minimum_data == 'false' %}col-sm-4 col-lg-4{% else %}col-sm-6 col-lg-6{% endif %}">
                    <a class="card card-link" href="{{route('listDomains')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-primary text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4"></path><path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4"></path><path d="M12.5 3a16.989 16.989 0 0 1 1.828 4"></path><path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4"></path><path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4"></path><path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4"></path><path d="M2 10l1 4l1.5 -4l1.5 4l1 -4"></path>   <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4"></path><path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ domains }} {{ __('Domains') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>{% if minimum_data == 'false' %}
                  <div class="col-sm-4 col-lg-4">
                    <a class="card card-link" href="{{route('listContacts')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-secondary text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z"></path><path d="M10 16h6"></path><path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M4 8h3"></path><path d="M4 12h3"></path><path d="M4 16h3"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ contacts }} {{ __('Contacts') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>{% endif %}
                  <div class="{% if minimum_data == 'false' %}col-sm-4 col-lg-4{% else %}col-sm-6 col-lg-6{% endif %}">
                    <a class="card card-link" href="{{route('listHosts')}}">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col-auto">
                            <span class="bg-green text-white avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0"></path><path d="M12 3c1.333 .333 2 2.333 2 6s-.667 5.667 -2 6"></path><path d="M12 3c-1.333 .333 -2 2.333 -2 6s.667 5.667 2 6"></path><path d="M6 9h12"></path><path d="M3 19h7"></path><path d="M14 19h7"></path><path d="M12 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M12 15v2"></path></svg>
                            </span>
                          </div>
                          <div class="col">
                            <div class="h1 mt-3">
                              {{ hosts }} {{ __('Hosts') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  {% endif %}
                  <div class="col-12 col-md-6 mt-5">
                    <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">{{ __('Recent Domains') }}</h3>
                      </div>
                      <div class="table-responsive">
                        <table class="table table-vcenter card-table table-striped">
                          <thead>
                            <tr>
                              <th>{{ __('Name') }}</th>
                              <th>{{ __('Creation Date') }}</th>
                            </tr>
                          </thead>
                          <tbody>
                          {% if latest_domains|length > 0 %}
                            {% for domain in latest_domains %}
                              <tr>
                                <td><a href="/domain/view/{{ domain.name }}">{{ domain.name }}</a></td>
                                <td class="text-secondary">{{ domain.crdate }}</td>
                              </tr>
                            {% endfor %}
                          {% else %}
                            <tr><td colspan="2">{{ __('No Data') }}</td></tr>
                          {% endif %}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-md-6 mt-5">
                    <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">{{ __('Recent Support Tickets') }}</h3>
                      </div>
                      <div class="table-responsive">
                        <table class="table table-vcenter card-table table-striped">
                          <thead>
                            <tr>
                              <th>{{ __('Subject') }}</th>
                              <th>{{ __('Status') }}</th>
                              <th>{{ __('Priority') }}</th>
                            </tr>
                          </thead>
                          <tbody>
                          {% if tickets|length > 0 %}
                            {% for ticket in tickets %}
                              <tr>
                                <td><a href="/ticket/{{ ticket.id }}">{{ ticket.subject|length > 30 ? (ticket.subject|slice(0, 30) ~ '…') : ticket.subject }}</a></td>
                                <td class="text-secondary">{{ __(ticket.status) }}</td>
                                <td class="text-secondary">{{ __(ticket.priority) }}</td>
                              </tr>
                            {% endfor %}
                          {% else %}
                            <tr><td colspan="3">{{ __('No Data') }}</td></tr>
                          {% endif %}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
    {% if registrars %}
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var dates = JSON.parse('{{ dates|raw }}');
        var counts = JSON.parse('{{ counts|raw }}');
        
        var labels = JSON.parse('{{ labels|raw }}');
        var series = JSON.parse('{{ series|raw }}');
        
        var labels3 = JSON.parse('{{ labels3|raw }}');
        var answeredData = JSON.parse('{{ answeredData|raw }}');
        var unansweredData = JSON.parse('{{ unansweredData|raw }}');
    
          window.ApexCharts && (new ApexCharts(document.getElementById('last-7-days'), {
              chart: {
                  type: "bar",
                  fontFamily: 'inherit',
                  height: 240,
                  parentHeightOffset: 0,
                  toolbar: {
                      show: false,
                  },
                  animations: {
                      enabled: false
                  },
              },
              plotOptions: {
                  bar: {
                      columnWidth: '50%',
                  }
              },
              dataLabels: {
                  enabled: false,
              },
              fill: {
                  opacity: 1,
              },
              series: counts.some(count => count > 0) ? [{
                name: "Domain Registrations",
                data: counts
              }] : [],
              tooltip: {
                  theme: 'dark'
              },
              grid: {
                  padding: {
                      top: -20,
                      right: 0,
                      left: -4,
                      bottom: -4
                  },
                  strokeDashArray: 4,
              },
              xaxis: {
                  labels: {
                      padding: 0,
                  },
                  tooltip: {
                      enabled: false
                  },
                  axisBorder: {
                      show: false,
                  },
                  type: 'category',
                  categories: dates,
              },
              yaxis: {
                  labels: {
                      padding: 4,
                      formatter: function (value) {
                        return value;
                      }
                  },
              },
              noData: {
                text: "No data available",
                align: 'center',
                verticalAlign: 'middle',
                style: {
                  color: '#888',
                  fontSize: '14px',
                  fontFamily: 'inherit'
                }
              },
              colors: [tabler.getColor("primary")],
              legend: {
                  show: false,
              },
          })).render();

          window.ApexCharts && (new ApexCharts(document.getElementById('top-registrars'), {
              chart: {
                  type: "donut",
                  fontFamily: 'inherit',
                  height: 245,
                  sparkline: {
                      enabled: true
                  },
                  animations: {
                      enabled: false
                  },
              },
              fill: {
                  opacity: 1,
              },
              series: series.some(val => val > 0) ? series : [],
              labels: labels,
              tooltip: {
                  theme: 'dark'
              },
              grid: {
                  strokeDashArray: 4,
              },
              noData: {
                text: "No data to display",
                align: 'center',
                verticalAlign: 'middle',
                style: {
                  color: '#888',
                  fontSize: '14px',
                  fontFamily: 'inherit'
                }
              },
              colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
              legend: {
                  show: true,
                  position: 'bottom',
                  markers: {
                      width: 10,
                      height: 10,
                      radius: 100,
                  },
                  itemMargin: {
                      horizontal: 8,
                      vertical: 8
                  },
              },
              tooltip: {
                  fillSeriesColor: false
              },
          })).render();

          window.ApexCharts && (new ApexCharts(document.getElementById('support-tickets'), {
              chart: {
                  type: "bar",
                  fontFamily: 'inherit',
                  height: 240,
                  parentHeightOffset: 0,
                  toolbar: {
                      show: false,
                  },
                  animations: {
                      enabled: false
                  },
                  stacked: true,
              },
              plotOptions: {
                  bar: {
                      columnWidth: '50%',
                  }
              },
              dataLabels: {
                  enabled: false,
              },
              fill: {
                  opacity: 1,
              },
              series: (answeredData.some(val => val > 0) || unansweredData.some(val => val > 0)) ? [
                { name: "Answered", data: answeredData },
                { name: "Pending", data: unansweredData }
              ] : [],
              tooltip: {
                  theme: 'dark'
              },
              grid: {
                  padding: {
                      top: -20,
                      right: 0,
                      left: -4,
                      bottom: -4
                  },
                  strokeDashArray: 4,
              },
              xaxis: {
                  labels: {
                      padding: 0,
                  },
                  tooltip: {
                      enabled: false
                  },
                  axisBorder: {
                      show: false,
                  },
                  type: 'category',
                  categories: labels3,
              },
              yaxis: {
                  labels: {
                      padding: 4,
                      formatter: function (value) {
                        return value;
                      }
                  },
              },
              noData: {
                text: "No support ticket data available",
                align: 'center',
                verticalAlign: 'middle',
                style: {
                  color: '#888',
                  fontSize: '14px',
                  fontFamily: 'inherit'
                }
              },
              colors: [tabler.getColor("primary"), tabler.getColor("red")],
              legend: {
                  show: false,
              },
          })).render();
      });
    </script>
    {% endif %}
{% endblock %}