{% extends "base.html" %}

{% block title %}대시보드 - First Garden POS{% endblock %}

{% block extra_css %}
<link href="{{ url_for('static', filename='css/dashboard.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="tab-pane fade show active" id="dashboard-panel" role="tabpanel">
    <!-- 통계 카드 -->
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="stat-card okpos-product">
                <h3>OKPOS 상품별</h3>
                <div class="stat-value" id="okpos-product-count">-</div>
                <div class="stat-label">총 데이터</div>
                <div class="stat-label" id="okpos-product-days">-</div>
                <div class="stat-date" id="okpos-product-date">최종: -</div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="stat-card okpos-receipt">
                <h3>OKPOS 영수증</h3>
                <div class="stat-value" id="okpos-receipt-count">-</div>
                <div class="stat-label">총 데이터</div>
                <div class="stat-label" id="okpos-receipt-days">-</div>
                <div class="stat-date" id="okpos-receipt-date">최종: -</div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="stat-card upsolution">
                <h3>UPSolution</h3>
                <div class="stat-value" id="upsolution-count">-</div>
                <div class="stat-label">총 데이터</div>
                <div class="stat-label" id="upsolution-days">-</div>
                <div class="stat-date" id="upsolution-date">최종: -</div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="stat-card weather">
                <h3>날씨 데이터</h3>
                <div class="stat-value" id="weather-count">-</div>
                <div class="stat-label">총 데이터</div>
                <div class="stat-label" id="weather-days">-</div>
                <div class="stat-date" id="weather-date">최종: -</div>
            </div>
        </div>
    </div>
    
    <!-- 주간 예보 테이블 -->
    <div style="margin-top: 30px;">
        <h5 style="margin-bottom: 20px; font-weight: 600; color: #333;">
            <i class="bi bi-calendar-event"></i> 이번주 예상 날씨 & 방문객
        </h5>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>날짜</th>
                        <th>최저기온</th>
                        <th>최고기온</th>
                        <th>강수량</th>
                        <th>습도</th>
                        <th>예상 방문객</th>
                    </tr>
                </thead>
                <tbody id="weekly-forecast-table">
                    <tr>
                        <td colspan="6" class="text-center text-muted">데이터 로딩 중...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 방문객 추이 그래프 -->
    <div style="margin-top: 30px;">
        <h5 style="margin-bottom: 20px; font-weight: 600; color: #333;">
            <i class="bi bi-graph-up"></i> 방문객 추이
        </h5>
        
        <!-- 날짜 범위 선택 -->
        <div class="date-range-picker">
            <input type="date" id="trend-start-date" class="form-control" style="max-width: 150px;">
            <span style="display: flex; align-items: center;">~</span>
            <input type="date" id="trend-end-date" class="form-control" style="max-width: 150px;">
            <button class="btn btn-primary btn-sm" onclick="loadVisitorTrend()">조회</button>
            <button class="btn btn-outline-primary btn-sm" onclick="resetTrendDate()">최근 1개월</button>
        </div>
        
        <!-- 그래프 -->
        <div class="chart-container">
            <canvas id="visitor-trend-chart"></canvas>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
<script>
    // 대시보드 초기화
    document.addEventListener('DOMContentLoaded', function() {
        initializeDashboard();
    });
</script>
{% endblock %}