{% extends "cms/materialpro/base.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ '/libs/apexcharts/dist/apexcharts.css' }}" />
{% endblock %}

{% block content %}
<div class="container-fluid">
  <!-- Breadcrumb -->
  <div class="row">
    <div class="col-lg-12">
      <div class="card bg-primary-subtle border-0">
        <div class="card-body py-4">
          <h3 class="mb-1 fw-semibold">欢迎回来，管理员 👋</h3>
          <p class="text-muted mb-0">杭州艾瑞浮环保科技有限公司 · CMS 管理后台</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Stats Cards -->
  <div class="row mb-4">
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="round rounded bg-primary-subtle d-inline-block">
              <i data-feather="file-text" class="text-primary feather-lg"></i>
            </div>
            <div class="ms-3">
              <h4 class="mb-0">{{ page_count }}</h4>
              <p class="text-muted mb-0">页面总数</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="round rounded bg-danger-subtle d-inline-block">
              <i data-feather="mail" class="text-danger feather-lg"></i>
            </div>
            <div class="ms-3">
              <h4 class="mb-0">{{ inquiry_new }}</h4>
              <p class="text-muted mb-0">待处理需求</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="round rounded bg-success-subtle d-inline-block">
              <i data-feather="image" class="text-success feather-lg"></i>
            </div>
            <div class="ms-3">
              <h4 class="mb-0">{{ media_count }}</h4>
              <p class="text-muted mb-0">媒体文件</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="round rounded bg-warning-subtle d-inline-block">
              <i data-feather="users" class="text-warning feather-lg"></i>
            </div>
            <div class="ms-3">
              <h4 class="mb-0">{{ customer_count }}</h4>
              <p class="text-muted mb-0">注册客户</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Row -->
  <div class="row mb-4">
    <div class="col-lg-8">
      <div class="card">
        <div class="card-header d-flex align-items-center">
          <h4 class="card-title mb-0">需求趋势</h4>
          <div class="ms-auto">
            <select class="form-select form-select-sm" style="width:auto">
              <option>最近7天</option>
              <option>最近30天</option>
            </select>
          </div>
        </div>
        <div class="card-body">
          <div id="chart" class="apex-wrapper"></div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title mb-0">行业分布</h4>
        </div>
        <div class="card-body">
          <div id="pie-chart" class="apex-wrapper"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Data Table: Recent Inquiries -->
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header d-flex align-items-center">
          <h4 class="card-title mb-0">最新需求询价</h4>
          <a href="/admin/inquiries/" class="btn btn-sm btn-primary ms-auto">
            查看全部 <i class="ti-arrow-right"></i>
          </a>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover align-middle">
              <thead>
                <tr>
                  <th>#</th>
                  <th>公司名称</th>
                  <th>联系人</th>
                  <th>行业类型</th>
                  <th>电话</th>
                  <th>状态</th>
                  <th>提交时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {% for inq in recent_inquiries %}
                <tr>
                  <td>{{ inq.id }}</td>
                  <td>{{ inq.company or '-' }}</td>
                  <td>{{ inq.contact_name or '-' }}</td>
                  <td>
                    <span class="badge bg-primary-subtle text-primary">
                      {{ inq.industry }}
                    </span>
                  </td>
                  <td>{{ inq.phone or '-' }}</td>
                  <td>
                    {% if inq.status == 'pending' %}
                    <span class="badge bg-danger">待处理</span>
                    {% elif inq.status == 'processing' %}
                    <span class="badge bg-warning">处理中</span>
                    {% elif inq.status == 'quoted' %}
                    <span class="badge bg-info">已报价</span>
                    {% elif inq.status == 'won' %}
                    <span class="badge bg-success">已成交</span>
                    {% else %}
                    <span class="badge bg-secondary">{{ inq.status }}</span>
                    {% endif %}
                  </td>
                  <td>{{ inq.created_at[:16] if inq.created_at else '-' }}</td>
                  <td>
                    <a href="/admin/inquiries/{{ inq.id }}/" class="btn btn-sm btn-outline-primary">
                      <i data-feather="eye" class="feather-sm"></i>
                    </a>
                  </td>
                </tr>
                {% else %}
                <tr>
                  <td colspan="8" class="text-center text-muted py-4">
                    暂无数据 · <a href="/inquiry/">查看前台询价表单</a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="row mt-4">
    <div class="col-lg-12">
      <h5 class="mb-3 fw-semibold">快捷操作</h5>
      <div class="row g-3">
        <div class="col-sm-6 col-lg-3">
          <a href="{{ url_for('mp.mp_pages') }}" class="text-decoration-none">
            <div class="card border-start border-primary border-4 h-100">
              <div class="card-body text-center py-4">
                <i data-feather="file-plus" class="text-primary feather-lg mb-2"></i>
                <h6 class="mb-0">新建页面</h6>
              </div>
            </div>
          </a>
        </div>
        <div class="col-sm-6 col-lg-3">
          <a href="{{ url_for('mp.mp_media') }}" class="text-decoration-none">
            <div class="card border-start border-success border-4 h-100">
              <div class="card-body text-center py-4">
                <i data-feather="upload-cloud" class="text-success feather-lg mb-2"></i>
                <h6 class="mb-0">上传媒体</h6>
              </div>
            </div>
          </a>
        </div>
        <div class="col-sm-6 col-lg-3">
          <a href="{{ url_for('mp.mp_nav_editor') }}" class="text-decoration-none">
            <div class="card border-start border-warning border-4 h-100">
              <div class="card-body text-center py-4">
                <i data-feather="menu" class="text-warning feather-lg mb-2"></i>
                <h6 class="mb-0">编辑导航</h6>
              </div>
            </div>
          </a>
        </div>
        <div class="col-sm-6 col-lg-3">
          <a href="{{ url_for('mp.mp_settings') }}" class="text-decoration-none">
            <div class="card border-start border-info border-4 h-100">
              <div class="card-body text-center py-4">
                <i data-feather="settings" class="text-info feather-lg mb-2"></i>
                <h6 class="mb-0">系统设置</h6>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  // ── 需求趋势图 ──
  var options = {
    chart: { type: 'area', height: 280, fontFamily: 'inherit', toolbar: { show: false } },
    series: [
      { name: '需求数', data: [12, 8, 15, 22, 18, 25, 20, 28, 24, 30, 26, 32] }
    ],
    xaxis: {
      categories: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    },
    colors: ['#5b7fff'],
    fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.45, opacityTo: 0.05 } },
    stroke: { curve: 'smooth', width: 2 },
    dataLabels: { enabled: false },
    grid: { borderColor: '#f1f1f1', padding: { left: 10, right: 10 } }
  };
  var el = document.querySelector('#chart');
  if (el && typeof ApexCharts !== 'undefined') {
    new ApexCharts(el, options).render();
  }

  // ── 行业饼图 ──
  var pieOptions = {
    chart: { type: 'donut', height: 280 },
    series: [44, 26, 15, 10, 5],
    labels: ['油气田', '工业废水', '市政污水', '水产养殖', '其他'],
    colors: ['#5b7fff','#01c0c8','#8c54ff','#2ecc71','#e74c3c'],
    legend: { position: 'bottom' },
    dataLabels: { enabled: false }
  };
  var pieEl = document.querySelector('#pie-chart');
  if (pieEl && typeof ApexCharts !== 'undefined') {
    new ApexCharts(pieEl, pieOptions).render();
  }

  // DataTable 初始化
  if (typeof $.fn.DataTable !== 'undefined') {
    $('.table').DataTable({ language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh.json' }, pageLength: 10 });
  }
});
</script>
{% endblock %}