<?php
//phpinfo();
include_once 'src/inc/db/function.php';
check_login();
/* $redis = new Redis();
//$redis->connect('127.0.0.1', 6379);
$redis->connect('125.229.116.28', 56379);
echo "Redis 伺服器連線成功！"; */
//$ary_dataCategory = ['WE' => '氣象', 'WA' => '波浪', 'OC' => '洋流', 'GE' => '地(震測)'];
//$ary_downloadType = ["original" => "原始資料", 'processed' => "處理後資料", 'results' => "模擬成果", 'simulation' => "資料使用 / 模擬教學"]; //檔案下載類型
// $ary_downloadType_WE = ["original" => 0, 'results' => 0, 'simulation' => 0]; //檔案下載類型
// $ary_downloadType_WA = ["original" => 0, 'results' => 0, 'simulation' => 0]; //檔案下載類型
// $ary_downloadType_OC = ["original" => 0, 'results' => 0, 'simulation' => 0]; //檔案下載類型
// $ary_downloadType_GE = ["original" => 0, 'results' => 0, 'simulation' => 0]; //檔案下載類型
$ary_downloadTypes = [
    'WE' =>  ["original" => 0, 'results' => 0, 'simulation' => 0],
    'WA' =>  ["original" => 0, 'results' => 0, 'simulation' => 0],
    'OC' => ["original" => 0, 'results' => 0, 'simulation' => 0],
    'GE' =>  ["original" => 0, 'results' => 0, 'simulation' => 0],
];

$sql = 'SELECT a.dataCategory, b.downloadType, count(1) as qty FROM data_service AS a ';
$sql .= ' INNER JOIN data_service_detail AS b ON a.data_id = b.data_id GROUP BY a.dataCategory, b.downloadType';
$stmt = $conn->prepare($sql);
$stmt->execute();
$file_list = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($file_list) {
    foreach ($file_list as $row) {
        $mdataCategory = $row['dataCategory'];
        $mdownloadType = $row['downloadType'];
        if (isset($ary_downloadTypes[$mdataCategory]) && array_key_exists($mdownloadType, $ary_downloadTypes[$mdataCategory])) {
            $ary_downloadTypes[$mdataCategory][$mdownloadType] = (int)$row['qty']; // 更新計數
        }
    }
}
//print_r($ary_downloadTypes);

// 最新資料
$sql = 'SELECT data_id,update_date,	dataTitle FROM data_service Order BY update_date desc LIMIT 5';
$stmt = $conn->prepare($sql);
$stmt->execute();
$data_list = $stmt->fetchAll(PDO::FETCH_ASSOC);

$sql = 'SELECT COUNT(1) AS qty FROM data_service;';
$stmt = $conn->prepare($sql);
$stmt->execute();
$data_qty = $stmt->fetchColumn();

// 查詢目前頁面所需的資料
$sql = 'SELECT news_id,title,update_date FROM system_news  Order BY update_date desc LIMIT 5;';
$stmt = $conn->prepare($sql);
$stmt->execute();
$news_list = $stmt->fetchAll(PDO::FETCH_ASSOC);
//$news_qty = $conn->query('SELECT FOUND_ROWS()')->fetchColumn(); // 獲取總數量
$sql = 'SELECT COUNT(1) AS qty FROM system_news;';
$stmt = $conn->prepare($sql);
$stmt->execute();
$news_qty = $stmt->fetchColumn();

?>
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <?php include_once "template_css.php"; ?>
    <style>
        .card-title {
            font-family: Microsoft JhengHei;
            font-size: 24px;
            font-weight: 700;
            line-height: 31.92px;
            letter-spacing: 0.1em;
            text-align: left;
            color: #000;
            white-space: nowrap;
        }

        .card-subtitle {
            font-family: Arial;
            font-size: 15px;
            font-weight: 400;
            line-height: 17.25px;
            letter-spacing: 0.1em;
            text-align: left;
            color: #959495;
            white-space: nowrap;
        }

        .card-subtitle1 {
            font-family: Arial;
            font-size: 14px;
            font-weight: 400;
            line-height: 16.1px;
            letter-spacing: 0.1em;
            text-align: left;
            color: #A889FF;
        }

        .card-img {
            width: 95px;
            height: 54px;
            background-color: #eaecff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .card-td {
            background-image: url(./assets/img/line1.png);
            background-repeat: no-repeat;
            background-position: left;
        }

        .card-item {
            font-family: Inter;
            font-size: 15px;
            font-weight: 400;
            line-height: 18.15px;
            letter-spacing: 0.05em;
            text-align: left;
            /* padding-right: 6px; */
            margin-right: 6px;
            /* font-size: 0.9vw; */          
            /* 使用視窗寬度來動態縮放字體 */
            white-space: nowrap;
            /* 防止內容換行 */
        }

        .card-data {
            font-family: Inter;
            font-size: 32px;
            font-weight: 400;
            line-height: 38.73px;
            text-align: left;
            font-size: 1.5vw;
            white-space: nowrap;
        }

        .col-img {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .d1 {
            background-image: url('./assets/img/line-p1.png');
            background-repeat: no-repeat;
            background-position: bottom left;
        }

        .d2 {
            background-image: url('./assets/img/line-b2.png');
            background-repeat: no-repeat;
            background-position: bottom left;
        }

        .date-badge {
            /*  background-color: #8762d8; */
            color: white;
            padding: 6px;
            min-width: 120px;
            font-family: Microsoft JhengHei;
            /* font-size: 16px;
            font-size: 1.2vw; */
            font-weight: 400;
            line-height: 21.28px;
            letter-spacing: 0.05em;
            text-align: left;
        }

        .date-1 {
            background-color: #8762d8;
        }

        .date-2 {
            background-color: #518dff;
        }

        .data-list {
            padding: 6px 0;
            border-bottom: 1px dashed #ddd;
            /* 虛線分隔線 */
        }
    </style>
</head>

<body class="d-flex flex-column min-vh-100">

    <!--BEGIN SIDEBAR-->
    <?php include_once "template_sidebar.php"; ?>
    <!--END SIDEBAR-->
    <?php include_once "template_header.php"; ?>
    <!--BEGIN HEADER-->
    <!--END HEADER-->
    <main id="main" class="main">
        <!-- <div class="pagetitle">
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="index.php">首頁</a></li>
                </ol>
            </nav>
        </div> -->
        <section class="section">
            <div class="row">
                <div class="col-md-3 ">
                    <div class="card card-body">
                        <table style="width: 100%;">
                            <tr>
                                <td class="card-td" style="padding-left: 20px;">
                                    <span class="card-title">氣象</span><br />
                                    <span class="card-subtitle">Weather</span>
                                </td>
                                <td style="width: 35%;">
                                    <div class="card-img">
                                        <img src="./assets/img/wind.png" style="max-width: 100%; max-height: 100%;" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <span class="card-subtitle1">資料筆數</span>
                                </td>
                            </tr>
                        </table>
                        <!--   $ary_downloadTypes = [
    'WE' =>  ["original" => 0, 'results' => 0, 'simulation' => 0],
    'WA' =>  ["original" => 0, 'results' => 0, 'simulation' => 0],
    'OC' => ["original" => 0, 'results' => 0, 'simulation' => 0],
    'GE' =>  ["original" => 0, 'results' => 0, 'simulation' => 0],
]; -->
                        <div class="row">
                            <div class="col-md-3  text-center">
                                <span class="card-item">原始資料</span>
                                <span class="card-data"><?= $ary_downloadTypes['WE']['original'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬成果</span>
                                <span class="card-data"><?= $ary_downloadTypes['WE']['results'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬教學</span>
                                <span class="card-data"><?= $ary_downloadTypes['WE']['simulation'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3 col-img">
                                <a href="DataList.php?msel_attr=WE" title="氣象More..">
                                    <img src="./assets/img/chevron-forward-circle-outline.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card card-body">
                        <table style="width: 100%;">
                            <tr>
                                <td class="card-td" style="padding-left: 20px;">
                                    <span class="card-title">波浪</span><br />
                                    <span class="card-subtitle">Wave</span>
                                </td>
                                <td style="width: 35%;">
                                    <div class="card-img">
                                        <img src="./assets/img/wave.png" style="max-width: 100%; max-height: 100%;" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <span class="card-subtitle1">資料筆數</span>
                                </td>
                            </tr>
                        </table>
                        <div class="row">
                            <div class="col-md-3  text-center">
                                <span class="card-item">原始資料</span>
                                <span class="card-data"><?= $ary_downloadTypes['WA']['original'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬成果</span>
                                <span class="card-data"><?= $ary_downloadTypes['WA']['results'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬教學</span>
                                <span class="card-data"><?= $ary_downloadTypes['WA']['simulation'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3 col-img">
                                <a href="DataList.php?msel_attr=WA" title="波浪More..">
                                    <img src="./assets/img/chevron-forward-circle-outline.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card card-body">
                        <table style="width: 100%;">
                            <tr>
                                <td class="card-td" style="padding-left: 20px;">
                                    <span class="card-title">洋流</span><br />
                                    <span class="card-subtitle">Ocean Current</span>
                                </td>
                                <td style="width: 35%;">
                                    <div class="card-img">
                                        <img src="./assets/img/ocean.png" style="max-width: 100%; max-height: 100%;" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <span class="card-subtitle1">資料筆數</span>
                                </td>
                            </tr>
                        </table>
                        <div class="row">
                            <div class="col-md-3  text-center">
                                <span class="card-item">原始資料</span>
                                <span class="card-data"><?= $ary_downloadTypes['OC']['original'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬成果</span>
                                <span class="card-data"><?= $ary_downloadTypes['OC']['results'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬教學</span>
                                <span class="card-data"><?= $ary_downloadTypes['OC']['simulation'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3 col-img">
                                <a href="DataList.php?msel_attr=OC" title="洋流More..">
                                    <img src="./assets/img/chevron-forward-circle-outline.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card card-body">
                        <table style="width: 100%;">
                            <tr>
                                <td class="card-td" style="padding-left: 20px;">
                                    <span class="card-title">地(震測)</span><br />
                                    <span class="card-subtitle">Geology</span>
                                </td>
                                <td style="width: 35%;">
                                    <div class="card-img">
                                        <img src="./assets/img/geology.png" style="max-width: 100%; max-height: 100%;" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <span class="card-subtitle1">資料筆數</span>
                                </td>
                            </tr>
                        </table>
                        <div class="row">
                            <div class="col-md-3  text-center">
                                <span class="card-item">原始資料</span>
                                <span class="card-data"><?= $ary_downloadTypes['GE']['original'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬成果</span>
                                <span class="card-data"><?= $ary_downloadTypes['GE']['results'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3  text-center">
                                <span class="card-item">模擬教學</span>
                                <span class="card-data"><?= $ary_downloadTypes['GE']['simulation'] ?? 0 ?></span>
                            </div>
                            <div class="col-md-3 col-img">
                                <a href="DataList.php?msel_attr=GE" title="地(震測)More..">
                                    <img src="./assets/img/chevron-forward-circle-outline.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card" style="min-height:45vh;">
                        <div class="card-header d1">
                            <img src="./assets/img/最新資料.png" alt="最新資料" title="最新資料" class=" img img-fluid " />
                        </div>
                        <div class=" card-body">
                            <?php if (!empty($data_list)):
                                foreach ($data_list as $data): ?>
                                    <div class="data-list d-flex align-items-center">
                                        <div class="date-1 date-badge text-center me-2"><?= date('Y-m-d', strtotime($data['update_date'])) ?? '' ?></div>
                                        <div>
                                            <a href="DataList_in.php?rid=<?php echo $data['data_id'] ?? 0; ?>" class="news-text">
                                                <?php echo htmlspecialchars($data['dataTitle'] ?? ''); ?></a>
                                        </div>
                                    </div>

                            <?php endforeach;
                            endif; ?>
                            <?php if (!empty($data_qty) && $data_qty > 5) { ?>
                                <div class="data-list " style="border:none;float: right;">
                                    <a href="./DataList.php"><img src="./assets/img/more.png" class="img img-fluid" alt="more" /></a>
                                </div>
                            <?php } ?>
                            <!-- <div class="data-list d-flex align-items-center">
                                <div class="date-1 date-badge text-center me-2">2024-04-01</div>
                                <div>最新資料標題最新資料標題最新資料標題最新資料標題最新資料標題</div>
                            </div>
                            <div class="data-list d-flex align-items-center">
                                <div class="date-1 date-badge text-center me-2">2024-04-01</div>
                                <div>最新資料標題最新資料標題最新資料標題最新資料標題最新資料標題</div>
                            </div>
                            <div class="data-list d-flex align-items-center">
                                <div class="date-1 date-badge text-center me-2">2024-04-01</div>
                                <div class="flex-grow-1">最新資料標題最新資料標題最新資料標題最新資料標題最新資料標題</div>
                            </div>
                            <div class="data-list d-flex align-items-center">
                                <div class="date-1 date-badge text-center me-2">2024-04-01</div>
                                <div class="flex-grow-1">最新資料標題</div>
                            </div>
                            <div class="data-list d-flex align-items-center" style="border:none;">
                                <div class="date-1 date-badge text-center me-2">2024-04-01</div>
                                <div class="flex-grow-1">最新資料標題最新資標題最新資料標題</div>
                            </div> -->
                        </div>

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card" style="min-height:45vh;">
                        <div class="card-header d2">
                            <img src="./assets/img/系統公告.png" alt="系統公告" title="系統公告" class="img img-fluid " />
                        </div>
                        <div class="card-body">
                            <?php if (!empty($news_list)) {

                                // 正常處理資料
                                //   echo "資料筆數: " . $news_qty."  資料筆數1: " .$news_qty1;
                                foreach ($news_list as $idx => $news) { ?>

                                    <div class="data-list d-flex align-items-center">
                                        <div class="date-2 date-badge text-center me-2"><?= date('Y-m-d', strtotime($data['update_date'])) ?? '' ?></div>
                                        <div class="flex-grow-1">
                                            <a href="SystemNews_in.php?id=<?= $news['news_id'] ?? 0; ?>" class="news-text">
                                                <?php echo htmlspecialchars($news['title'] ?? ''); ?></a>
                                        </div>
                                    </div>
                                <?php }
                            }
                            if (!empty($news_qty) && $news_qty > 5) { ?>

                                <div class="data-list" style="border:none;float: right;">
                                    <a href="./SystemNews.php"><img src="./assets/img/more.png" class="img img-fluid" alt="more" /></a>
                                </div>
                            <?php } ?>

                            <!-- <div class="data-list d-flex align-items-center">
                                <div class="date-2 date-badge text-center me-2">2024-04-01</div>
                                <div class="flex-grow-1">最新資料最新資料最新資料</div>
                            </div>
                            <div class="data-list d-flex align-items-center">
                                <div class="date-2 date-badge text-center me-2">2024-04-01</div>
                                <div class="flex-grow-1">最新資料最新資料最新資料</div>
                            </div>
                            <div class="data-list d-flex align-items-center" style="border:none;">
                                <div class="date-2 date-badge text-center me-2">2024-04-01</div>
                                <div class="flex-grow-1">最新資料最新資料最新資料</div>
                            </div>
                            <div style="position: absolute;right: 1.5rem; bottom:  1rem;">
                                <a href="#"><img src="./assets/img/more.png" class="img img-fluid" alt="more" /></a>
                            </div> -->
                        </div>
                    </div>
                    <!-- <div style="background-color: #f1f1f1; height: 250px; border-radius: 8px; margin-right: 5px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; text-align: left; position: relative;margin-top: 5px;">
                        <div>
                            2024-04-01 最新資料最新資料最新資料<br>
                            2024-04-01 最新資料最新資料最新資料
                        </div>
                        <div style="text-align: right;">
                            <a href="#" style="font-size: 14px; text-decoration: none; color: #007bff;">more &gt;</a>
                        </div>
                    </div> -->
                </div>
            </div>

        </section>
    </main>

    <!--BEGIN FOOTER-->
    <?php include_once "template_footer.php"; ?>
    <script>
        showSidebar("sidebar", "index");
    </script>
</body>


</html>