{% extends 'layout/base.html' %}

{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
    :root {
        --primary-color: #4e54c8;
        --text-dark: #222;
        --text-medium: #555;
        --text-light: #888;
        --bg-light: #f9fafc;
        --card-bg: #ffffff;
        --border-color: #e0e0e0;
        --shadow-light: rgba(0, 0, 0, 0.05);
        --shadow-medium: rgba(0, 0, 0, 0.1);
    }
  
    :root.dark-mode {
        --text-dark: #f1f1f1;
        --text-medium: #d1d1d1;
        --text-light: #aaa;
        --bg-light: #1e1e2f;
        --card-bg: #2b2b3c;
        --border-color: #444;
        --shadow-light: rgba(255, 255, 255, 0.05);
        --shadow-medium: rgba(255, 255, 255, 0.1);
    }

    body {
        background-color: var(--bg-light);
        color: var(--text-dark);
        font-family: 'Roboto', sans-serif;
        transition: background-color 0.3s, color 0.3s;
    }

    .container-fluid {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
    }

    .toggle-dark-btn {
        background-color: transparent;
        color: var(--text-dark);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 6px 10px;
        transition: all 0.3s ease;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .toggle-dark-btn:hover {
        background-color: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }

    .panel-header h2 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-dark);
        display: flex;
        align-items: center;
    }

    .panel-header h2 i {
        font-size: 1.8rem;
        margin-right: 12px;
        color: var(--primary-color);
    }

    .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 25px;
        margin-bottom: 40px;
    }

    .stat-card {
        background: var(--card-bg);
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 6px 20px var(--shadow-light);
        transition: all 0.3s ease;
        border: 1px solid var(--border-color);
        color: var(--text-dark);
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px var(--shadow-medium);
    }

    .stat-card h6 {
        font-size: 1rem;
        color: var(--text-medium);
        margin-bottom: 10px;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    .stat-card h6 i {
        font-size: 1.2rem;
        margin-right: 8px;
        color: var(--primary-color);
    }

    .stat-card h4 {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-top: 10px;
    }

    .section-title {
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 25px;
        display: flex;
        align-items: center;
    }

    .section-title i {
        font-size: 1.4rem;
        margin-right: 10px;
        color: var(--primary-color);
    }

    .company-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--card-bg);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px var(--shadow-light);
        border: 1px solid var(--border-color);
    }

    .company-table th, .company-table td {
        padding: 16px 25px;
        text-align: left;
        font-size: 15px;
        color: var(--text-dark);
    }

    .company-table th {
        background-color: var(--bg-light);
        font-weight: 600;
        color: var(--text-medium);
        border-bottom: 1px solid var(--border-color);
    }

    .company-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
    }

    .company-table tbody tr:last-child {
        border-bottom: none;
    }

    .company-table tbody tr:hover {
        background-color: #f5f5f7;
    }

    .view-link {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .view-link:hover {
        text-decoration: underline;
        color: #3b42a8;
    }

    .view-link i {
        margin-left: 5px;
        font-size: 1.1em;
        transition: margin-left 0.2s ease;
    }

    .view-link:hover i {
        margin-left: 8px;
    }

    .stat-set {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.stat-set.active {
  display: grid;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.no-task-message {
  animation: fadeInBounce 1s ease;
}

.wave-emoji {
  font-size: 3rem;
  display: inline-block;
  animation: waveHand 2s infinite;
  transform-origin: 70% 70%;
}

/* Fade in for the message container */
.animate-fade-in {
  animation: fadeIn 1s ease-in-out both;
}

/* Bounce in for message text */
.animate-bounce-in {
  animation: bounceIn 1s ease both;
}

/* Waving keyframes */
@keyframes waveHand {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* Fade in effect */
@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bounce in effect */
@keyframes bounceIn {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.no-task-text {
  color: #6c757d; /* Bootstrap's muted color */
}

/* Dark mode fix (adjust as per your class toggle system) */
body.dark-mode .no-task-text {
  color: #ddd;
}

</style>

<div class="container-fluid px-4">
    <div class="panel-header d-flex justify-content-between align-items-center mb-3">
    <h2 class="m-0">
        {% if current_user.role == 'admin' %}
            <i class="bi bi-speedometer2"></i> Admin Dashboard
        {% elif current_user.role == 'operator' %}
            <i class="bi bi-folder2-open"></i> Operator Panel
        {% elif current_user.role == 'accounts' %}
            <i class="bi bi-clipboard-data"></i> Auditor Panel
        {% elif current_user.role == 'ca' %}
            <i class="bi bi-clipboard-data"></i> CA Panel
        {% endif %}
    </h2>
    <button id="darkModeToggle" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-moon-fill"></i>
    </button>
</div>

    <!-- 🔀 Toggle Button -->
       {% if current_user.role in ['admin', 'accounts'] %}
<div class="d-flex justify-content-end mb-3">
  <button id="toggleStatsBtn" class="btn btn-primary btn-sm">
    <i class="bi bi-shuffle"></i> Switch to Day-wise
  </button>
</div>
{% endif %}
<!-- 📊 TOTAL Stats Grid -->
<div id="totalStats" class="stat-grid stat-set active">
  {% if current_user.role == 'admin' %}
    <div class="stat-card">
      <h6><i class="bi bi-people-fill"></i> Total Users</h6>
      <h4>{{ total_users }}</h4>
    </div>
  {% endif %}
  {% if current_user.role in ['admin', 'accounts', 'operator'] %}
  <div class="stat-card">
    <h6><i class="bi bi-upload"></i> Uploaded Documents</h6>
    <h4>{{ total_uploaded or 0 }}</h4>
  </div>

  <div class="stat-card">
    <h6><i class="bi bi-check2-square"></i> Audited Documents</h6>
    <h4>{{ total_audited or 0 }}</h4>
  </div>
  {% endif %}
  {% if current_user.role == 'admin' %}
    <div class="stat-card">
      <h6><i class="bi bi-buildings"></i> Total Companies</h6>
      <h4>{{ companies|length }}</h4>
    </div>
  {% endif %}

  {% if current_user.role in ['admin', 'accounts'] %}
    <div class="stat-card">
      <h6><i class="bi bi-hourglass-split"></i> Pending Audits</h6>
      <h4>{{ total_pending }}</h4>
    </div>

    <div class="stat-card">
      <h6><i class="bi bi-arrow-repeat"></i> Reupload Documents</h6>
      <h4>{{ total_reupload or 0 }}</h4>
    </div>
  {% endif %}
</div>

<!-- 📅 DAY-WISE Stats Grid -->
<div id="dayStats" class="stat-grid stat-set">
  {% if current_user.role == 'admin' %}
    <div class="stat-card">
      <h6><i class="bi bi-people-fill"></i> Users Today</h6>
      <h4>{{ today_users }}</h4>
    </div>
  {% endif %}

  <div class="stat-card">
    <h6><i class="bi bi-upload"></i> Uploaded Today</h6>
    <h4>{{ today_uploaded or 0 }}</h4>
  </div>

  <div class="stat-card">
    <h6><i class="bi bi-check2-square"></i> Audited Today</h6>
    <h4>{{ today_audited or 0 }}</h4>
  </div>

  {% if current_user.role in ['admin', 'accounts'] %}
    <div class="stat-card">
      <h6><i class="bi bi-hourglass-split"></i> Pending Today</h6>
      <h4>{{ today_pending }}</h4>
    </div>

    <div class="stat-card">
      <h6><i class="bi bi-arrow-repeat"></i> Reupload Today</h6>
      <h4>{{ today_reupload or 0 }}</h4>
    </div>
  {% endif %}
</div>

    <div class="section-title mt-5">
    <i class="bi bi-buildings"></i> Company List
</div>

{% if companies|length > 0 %}
  <div class="row g-3">
    {% for company in companies %}
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="stat-card d-flex flex-column align-items-center text-center">
        <div class="mb-3">
          <i class="bi bi-building" style="font-size: 2.5rem;"></i>
        </div>
        <h5 class="mb-2">{{ company.name }}</h5>
        <a class="view-link mt-auto" href="{{ url_for('uploader.uploader_years', company_id=company.id) }}">
          View Details <i class="bi bi-arrow-right-short"></i>
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
{% else %}
 <div class="no-task-message text-center py-5 animate-fade-in">
    <div class="wave-emoji">👋</div>
    <h5 class="mt-3 animate-bounce-in no-task-text">There is no task assigned today</h5>
  </div>
{% endif %}
<!-- {% if current_user.role in ['admin', 'accounts'] %}
    <!-- Chart Section -->
    <!-- <div class="row mt-5">
        <div class="col-md-6">
            <div class="card p-3">
                <h5 class="text-center">Daily Upload vs Audit</h5>
                <canvas id="dailyChart"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card p-3">
                <h5 class="text-center">Hourly Upload vs Audit</h5>
                <canvas id="hourlyChart"></canvas>
            </div>
        </div>
    </div> -->
 <!-- {% endif %} -->
    {% if current_user.role == 'accounts' %}
<div class="card mt-4">
  <div class="card-header">
    <h5 class="mb-0">Pending Documents for Audit</h5>
  </div>
  <div class="card-body table-responsive">
    <table id="pending-docs-table" class="table table-bordered table-hover align-middle">
  <thead class="table-light">
    <tr>
      <th>#</th>
      <th>Company</th>
      <th>Action</th>
      <th>Operator</th>
      <th>Uploaded At</th>
    </tr>
  </thead>
  <tbody>
    {% for doc in pending_docs %}
    <tr>
      <td>{{ loop.index }}</td>
      <td>{{ doc.company.name }}</td>
      <td>
        {# EXPENSE DOCUMENTS #}
        {% if doc.__tablename__ == 'expenses' %}
          {% if doc.month_id %}
            <a href="{{ url_for('uploader.uploader_subcategory_documents',
                                company_id=doc.company_id,
                                year_id=doc.sub_category.category.year.id,
                                category_id=doc.sub_category.category.id,
                                month_id=doc.month_id,
                                subcategory_id=doc.sub_category_id) }}"
               class="btn btn-sm btn-success d-inline-flex align-items-center gap-1" target="_blank">
              <i class="bi bi-check-circle-fill"></i> Go to Verify
            </a>
          {% else %}
            <span class="text-danger">No Month</span>
          {% endif %}

        {# PURCHASE DOCUMENTS #}
        {% elif doc.__tablename__ == 'purchase' %}
          {% if doc.month_id and doc.folder and doc.folder.month and doc.folder.month.category and doc.folder.month.category.year %}
            <a href="{{ url_for('uploader.upload_purchase_document',
                                company_id=doc.company_id,
                                year_id=doc.folder.month.category.year.id,
                                category_id=doc.folder.month.category.id,
                                month_id=doc.month_id,
                                company_folder_id=doc.folder.id) }}"
               class="btn btn-sm btn-success d-inline-flex align-items-center gap-1" target="_blank">
              <i class="bi bi-check-circle-fill"></i> Go to Verify
            </a>
          {% else %}
            <span class="text-danger">Missing Month or Folder</span>
          {% endif %}

        {# SALES DOCUMENTS #}
        {% elif doc.doc_type == 'sales' %}
          {% if doc.month_id and doc.folder and doc.folder.year %}
            <a href="{{ url_for('uploader.upload_sales_document',
                                company_id=doc.company_id,
                                year_id=doc.folder.year.id,
                                category_id=doc.folder.id,
                                month_id=doc.month_id) }}"
               class="btn btn-sm btn-success d-inline-flex align-items-center gap-1" target="_blank">
              <i class="bi bi-check-circle-fill"></i> Go to Verify
            </a>
          {% else %}
            <span class="text-danger">Missing Month or Category</span>
          {% endif %}

        {# BANKING DOCUMENTS #}
        {% elif doc.doc_type == 'banking' %}
          {% if doc.month_id and doc.folder and doc.folder.year %}
            <a href="{{ url_for('uploader.upload_banking_document',
                                company_id=doc.company_id,
                                year_id=doc.folder.year.id,
                                category_id=doc.folder.id,
                                month_id=doc.month_id) }}"
               class="btn btn-sm btn-success d-inline-flex align-items-center gap-1" target="_blank">
              <i class="bi bi-check-circle-fill"></i> Go to Verify
            </a>
          {% else %}
            <span class="text-danger">Missing Month or Category</span>
          {% endif %}

        {# UNKNOWN DOC TYPE #}
        {% else %}
          <span class="text-muted">N/A</span>
        {% endif %}
      </td>
      <td>{{ doc.user.name }}</td>
      <td>{{ doc.created_at.strftime('%d-%m-%Y %I:%M %p') if doc.created_at else '-' }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
  </div>
</div>
{% endif %}

</div>

<!-- Chart JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
const dailyCtx = document.getElementById('dailyChart').getContext('2d');
const hourlyCtx = document.getElementById('hourlyChart').getContext('2d');

// Daily Bar Chart
new Chart(dailyCtx, {
  type: 'bar',
  data: {
    labels: {{ daily_data | map(attribute='date') | list | tojson }},
    datasets: [
      {
        label: 'Uploaded',
        data: {{ daily_data | map(attribute='uploaded') | list | tojson }},
        backgroundColor: '#4e9bff'
      },
      {
        label: 'Audited',
        data: {{ daily_data | map(attribute='audited') | list | tojson }},
        backgroundColor: '#7ee787'
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Daily Upload vs Audit'
      },
      tooltip: {
        mode: 'index',
        intersect: false
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        suggestedMax: 120,  // Adjust if higher expected
        ticks: {
          stepSize: 10
        },
        title: {
          display: true,
          text: 'Documents'
        }
      },
      x: {
        title: {
          display: true,
          text: 'Date'
        }
      }
    }
  }
});

// Hourly Line Chart
new Chart(hourlyCtx, {
  type: 'line',
  data: {
    labels: {{ hourly_data | map(attribute='hour') | list | tojson }},
    datasets: [
      {
        label: 'Uploaded',
        data: {{ hourly_data | map(attribute='uploaded') | list | tojson }},
        borderColor: '#ffb347',
        backgroundColor: '#ffb34733',
        fill: true,
        tension: 0.3
      },
      {
        label: 'Audited',
        data: {{ hourly_data | map(attribute='audited') | list | tojson }},
        borderColor: '#da70d6',
        backgroundColor: '#da70d633',
        fill: true,
        tension: 0.3
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Hourly Upload vs Audit'
      },
      tooltip: {
        mode: 'index',
        intersect: false
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        suggestedMax: 120,
        ticks: {
          stepSize: 10
        },
        title: {
          display: true,
          text: 'Documents'
        }
      },
      x: {
        title: {
          display: true,
          text: 'Hour (24h)'
        }
      }
    }
  }
});
</script>
<script>
  $(document).ready(function () {
    $('#pending-docs-table').DataTable({
      order: [[0, 'desc']], // 🔁 Order by first column (index) descending
      pageLength: 25
    });
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const toggleBtn = document.getElementById('darkModeToggle');
    const icon = toggleBtn.querySelector('i');
    const root = document.documentElement;

    // Set initial mode
    const darkModeEnabled = localStorage.getItem('darkMode') === 'enabled';
    if (darkModeEnabled) {
      root.classList.add('dark-mode');
      icon.classList.replace('bi-moon-fill', 'bi-brightness-high-fill');
    }

    toggleBtn.addEventListener('click', () => {
      root.classList.toggle('dark-mode');
      const isDark = root.classList.contains('dark-mode');
      localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
      icon.classList.toggle('bi-moon-fill', !isDark);
      icon.classList.toggle('bi-brightness-high-fill', isDark);
    });
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const toggleBtn = document.getElementById('toggleStatsBtn');
    const totalStats = document.getElementById('totalStats');
    const dayStats = document.getElementById('dayStats');

    let isDayView = false;

    toggleBtn.addEventListener('click', function () {
      isDayView = !isDayView;

      totalStats.classList.toggle('active', !isDayView);
      dayStats.classList.toggle('active', isDayView);

      toggleBtn.innerHTML = isDayView
        ? '<i class="bi bi-shuffle"></i> Switch to Total'
        : '<i class="bi bi-shuffle"></i> Switch to Day-wise';
    });
  });
</script>

{% endblock %}