<?php
if (session_status() === PHP_SESSION_NONE) session_start();
require_once 'includes/config.php';

if (!isset($_SESSION['nguoi_dung_id']) || $_SESSION['vai_tro'] !== 'admin') {
    die("<h2 style='color:red;text-align:center;padding:50px;'>TRUY CẬP BỊ TỪ CHỐI!</h2>");
}

// Tạo bảng nếu chưa có
$pdo->exec("CREATE TABLE IF NOT EXISTS cai_dat_he_thong (
    `khoa` VARCHAR(100) PRIMARY KEY,
    `gia_tri` TEXT,
    `cap_nhat` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

// Tạo thư mục upload ảnh bìa trang nếu chưa có
$thu_muc_bia = __DIR__ . '/uploads/anh-bia-trang/';
if (!is_dir($thu_muc_bia)) mkdir($thu_muc_bia, 0755, true);

// Hàm lấy cài đặt
function layCD($pdo, $khoa, $mac_dinh = '') {
    $stmt = $pdo->prepare("SELECT gia_tri FROM cai_dat_he_thong WHERE khoa = ?");
    $stmt->execute([$khoa]);
    $r = $stmt->fetchColumn();
    return $r !== false ? $r : $mac_dinh;
}

// Hàm lưu cài đặt
function luuCD($pdo, $khoa, $gia_tri) {
    $pdo->prepare("INSERT INTO cai_dat_he_thong (khoa, gia_tri) VALUES (?,?) ON DUPLICATE KEY UPDATE gia_tri=VALUES(gia_tri)")
        ->execute([$khoa, $gia_tri]);
}

// Hàm upload ảnh bìa trang
function uploadAnhBiaTrang($field, $thu_muc) {
    if (!isset($_FILES[$field]) || $_FILES[$field]['error'] !== UPLOAD_ERR_OK) return null;
    $file = $_FILES[$field];
    $duoi = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    if (!in_array($duoi, ['jpg','jpeg','png','webp']) || $file['size'] > 5*1024*1024) return null;
    $ten = uniqid('bia_trang_') . '.' . $duoi;
    move_uploaded_file($file['tmp_name'], $thu_muc . $ten);
    return 'uploads/anh-bia-trang/' . $ten;
}

$thong_bao = '';

// XỬ LÝ LƯU
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $tab = $_POST['tab_hien_tai'] ?? 'anh-bia';

    if ($tab === 'anh-bia') {
        $cac_trang = ['tin-su-kien', 'am-nhac', 'hoi-hoa', 'gian-hang', 'thong-bao-su-kien', 'lien-he'];
        foreach ($cac_trang as $trang) {
            $anh = uploadAnhBiaTrang('anh_bia_' . str_replace('-', '_', $trang), $thu_muc_bia);
            if ($anh) luuCD($pdo, 'anh_bia_' . str_replace('-', '_', $trang), $anh);
        }
        $thong_bao = "<div class='tb thanh-cong'>✅ Đã lưu ảnh bìa thành công!</div>";
    }

    if ($tab === 'mang-xa-hoi') {
        $cac_mxh = ['youtube_url', 'facebook_url', 'tiktok_url', 'zalo_url'];
        foreach ($cac_mxh as $k) {
            luuCD($pdo, $k, trim($_POST[$k] ?? ''));
        }
        $thong_bao = "<div class='tb thanh-cong'>✅ Đã lưu đường link mạng xã hội!</div>";
    }

    header("Location: admin-cai-dat.php?tab=$tab&saved=1");
    exit;
}

if (isset($_GET['saved'])) {
    $thong_bao = "<div class='tb thanh-cong'>✅ Đã lưu cài đặt thành công!</div>";
}

$tab_hien_tai = $_GET['tab'] ?? 'anh-bia';

// Danh sách trang ảnh bìa
$cac_trang_bia = [
    'tin_su_kien'       => ['ten' => '📰 Tin tức & Sự kiện',    'file' => 'tin-su-kien.php'],
    'am_nhac'           => ['ten' => '🎵 Hoạt động Âm nhạc',    'file' => 'am-nhac.php'],
    'hoi_hoa'           => ['ten' => '🎨 Hoạt động Hội họa',    'file' => 'hoi-hoa.php'],
    'gian_hang'         => ['ten' => '🛒 Gian trưng bày',       'file' => 'gian-hang.php'],
    'thong_bao_su_kien' => ['ten' => '📅 Thông báo Sự kiện',    'file' => 'thong-bao-su-kien.php'],
    'lien_he'           => ['ten' => '📞 Trang Liên hệ',        'file' => 'lien-he.php'],
];
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cài đặt Hệ thống - Quản trị</title>
    <link rel="stylesheet" href="includes/admin-style.css">
    <style>
        .thanh-tab { display:flex; gap:8px; margin-bottom:25px; flex-wrap:wrap; border-bottom:2px solid #e9ecef; padding-bottom:0; }
        .nut-tab { padding:10px 20px; border:none; background:transparent; cursor:pointer; font-size:14px; font-weight:600; color:#666; border-bottom:3px solid transparent; margin-bottom:-2px; transition:.2s; }
        .nut-tab:hover { color:#004085; }
        .nut-tab.active { color:#004085; border-bottom-color:#004085; }
        .khung-tab { display:none; }
        .khung-tab.active { display:block; }
        .the-cai-dat { background:#fff; border-radius:10px; padding:25px; box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid #e9ecef; margin-bottom:20px; }
        .luoi-anh-bia { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
        .muc-anh-bia { border:1px solid #e9ecef; border-radius:8px; overflow:hidden; background:#f8f9fa; }
        .muc-anh-bia .tieu-de { padding:12px 15px; font-weight:bold; font-size:14px; background:#fff; border-bottom:1px solid #e9ecef; }
        .khung-preview { width:100%; height:160px; object-fit:cover; display:block; background:#e9ecef; cursor:pointer; position:relative; }
        .khung-preview img { width:100%; height:160px; object-fit:cover; display:block; }
        .khung-preview .chu-placeholder { display:flex; align-items:center; justify-content:center; height:160px; color:#aaa; font-size:13px; flex-direction:column; gap:6px; }
        .muc-anh-bia .footer { padding:10px 15px; background:#fff; }
        .muc-anh-bia input[type=file] { display:none; }
        .nut-chon-anh { display:inline-block; padding:7px 14px; background:#004085; color:#fff; border-radius:5px; font-size:13px; cursor:pointer; }
        .nut-chon-anh:hover { background:#1864ab; }
        .ten-file { font-size:12px; color:#888; margin-top:5px; }

        .luoi-mxh { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
        .nhom-mxh { display:flex; flex-direction:column; gap:6px; }
        .nhom-mxh label { font-weight:bold; font-size:14px; display:flex; align-items:center; gap:8px; }
        .nhom-mxh input { padding:10px 14px; border:1px solid #ced4da; border-radius:6px; font-size:14px; width:100%; box-sizing:border-box; }
        .nhom-mxh input:focus { border-color:#004085; outline:none; }
        .preview-mxh { font-size:12px; color:#888; margin-top:3px; word-break:break-all; }

        .tb { padding:14px 18px; border-radius:6px; font-weight:bold; margin-bottom:20px; }
        .thanh-cong { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
        .nut-luu { background:#004085; color:#fff; border:none; padding:12px 28px; border-radius:6px; font-size:15px; font-weight:bold; cursor:pointer; }
        .nut-luu:hover { background:#1864ab; }

        @media(max-width:600px) { .luoi-mxh { grid-template-columns:1fr; } }
    </style>
</head>
<body>
    <?php require_once 'includes/menu-admin.php'; ?>

    <div class="khu-vuc-du-lieu">
        <div class="thanh-tren">Cài đặt Hệ thống</div>
        <div class="noi-dung-chinh">
            <?php echo $thong_bao; ?>

            <div class="thanh-tab">
                <button class="nut-tab <?php echo $tab_hien_tai === 'anh-bia' ? 'active' : ''; ?>" onclick="chuyenTab('anh-bia', this)">🖼️ Ảnh bìa các trang</button>
                <button class="nut-tab <?php echo $tab_hien_tai === 'mang-xa-hoi' ? 'active' : ''; ?>" onclick="chuyenTab('mang-xa-hoi', this)">🔗 Mạng xã hội & Truyền thông</button>
            </div>

            <!-- TAB 1: ẢNH BÌA -->
            <div id="tab-anh-bia" class="khung-tab <?php echo $tab_hien_tai === 'anh-bia' ? 'active' : ''; ?>">
                <div class="the-cai-dat">
                    <h2 style="margin-top:0; color:#004085;">🖼️ Cài đặt Ảnh bìa Hero các trang</h2>
                    <p style="color:#666; font-size:14px; margin-bottom:20px;">Ảnh bìa sẽ hiển thị ở khu vực banner đầu trang. Khuyến nghị kích thước <strong>1920×400px</strong>, tối đa 5MB.</p>
                    <form method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="tab_hien_tai" value="anh-bia">
                        <div class="luoi-anh-bia">
                            <?php foreach ($cac_trang_bia as $khoa => $info):
                                $anh_hien_tai = layCD($pdo, 'anh_bia_' . $khoa);
                                $field = 'anh_bia_' . $khoa;
                            ?>
                            <div class="muc-anh-bia">
                                <div class="tieu-de"><?php echo $info['ten']; ?></div>
                                <div class="khung-preview" onclick="document.getElementById('<?php echo $field; ?>').click()">
                                    <?php if ($anh_hien_tai): ?>
                                        <img src="<?php echo htmlspecialchars($anh_hien_tai); ?>" id="preview_<?php echo $khoa; ?>" alt="Ảnh bìa">
                                    <?php else: ?>
                                        <div class="chu-placeholder" id="preview_<?php echo $khoa; ?>">
                                            <span style="font-size:32px;">🖼️</span>
                                            <span>Nhấp để chọn ảnh</span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div class="footer">
                                    <label class="nut-chon-anh" for="<?php echo $field; ?>">📁 Chọn ảnh mới</label>
                                    <input type="file" id="<?php echo $field; ?>" name="<?php echo $field; ?>" accept="image/*"
                                        onchange="xemTruoc(this, 'preview_<?php echo $khoa; ?>')">
                                    <div class="ten-file" id="ten_<?php echo $khoa; ?>">
                                        <?php echo $anh_hien_tai ? '✅ ' . basename($anh_hien_tai) : 'Chưa có ảnh'; ?>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <div style="margin-top:25px;">
                            <button type="submit" class="nut-luu">💾 Lưu tất cả ảnh bìa</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- TAB 2: MẠNG XÃ HỘI -->
            <div id="tab-mang-xa-hoi" class="khung-tab <?php echo $tab_hien_tai === 'mang-xa-hoi' ? 'active' : ''; ?>">
                <div class="the-cai-dat">
                    <h2 style="margin-top:0; color:#004085;">🔗 Đường link Mạng xã hội & Truyền thông</h2>
                    <p style="color:#666; font-size:14px; margin-bottom:20px;">Các đường link này sẽ hiển thị trên <strong>header đầu trang</strong> và <strong>trang Liên hệ</strong>.</p>
                    <form method="POST">
                        <input type="hidden" name="tab_hien_tai" value="mang-xa-hoi">
                        <div class="luoi-mxh">
                            <div class="nhom-mxh">
                                <label><span style="font-size:20px;">▶️</span> YouTube</label>
                                <input type="url" name="youtube_url" value="<?php echo htmlspecialchars(layCD($pdo, 'youtube_url')); ?>" placeholder="https://youtube.com/@kenh-cua-ban">
                                <div class="preview-mxh" id="prev_yt"><?php echo layCD($pdo, 'youtube_url') ? '🔗 ' . layCD($pdo, 'youtube_url') : ''; ?></div>
                            </div>
                            <div class="nhom-mxh">
                                <label><span style="font-size:20px;">📘</span> Facebook</label>
                                <input type="url" name="facebook_url" value="<?php echo htmlspecialchars(layCD($pdo, 'facebook_url')); ?>" placeholder="https://facebook.com/trang-cua-ban">
                                <div class="preview-mxh" id="prev_fb"><?php echo layCD($pdo, 'facebook_url') ? '🔗 ' . layCD($pdo, 'facebook_url') : ''; ?></div>
                            </div>
                            <div class="nhom-mxh">
                                <label><span style="font-size:20px;">🎵</span> TikTok</label>
                                <input type="url" name="tiktok_url" value="<?php echo htmlspecialchars(layCD($pdo, 'tiktok_url')); ?>" placeholder="https://tiktok.com/@ten-cua-ban">
                                <div class="preview-mxh" id="prev_tt"><?php echo layCD($pdo, 'tiktok_url') ? '🔗 ' . layCD($pdo, 'tiktok_url') : ''; ?></div>
                            </div>
                            <div class="nhom-mxh">
                                <label><span style="font-size:20px;">💬</span> Zalo</label>
                                <input type="url" name="zalo_url" value="<?php echo htmlspecialchars(layCD($pdo, 'zalo_url')); ?>" placeholder="https://zalo.me/so-dien-thoai">
                                <div class="preview-mxh" id="prev_zl"><?php echo layCD($pdo, 'zalo_url') ? '🔗 ' . layCD($pdo, 'zalo_url') : ''; ?></div>
                            </div>
                        </div>

                        <div style="margin-top:25px; padding:20px; background:#f8f9fa; border-radius:8px; border:1px dashed #dee2e6;">
                            <strong style="font-size:14px; color:#555;">👁️ Xem trước hiển thị trên Header:</strong>
                            <div style="margin-top:12px; display:flex; gap:12px; flex-wrap:wrap;" id="preview-header">
                                <?php
                                $mxh = [
                                    'youtube_url'  => ['icon' => '▶️', 'ten' => 'YouTube',  'mau' => '#ff0000'],
                                    'facebook_url' => ['icon' => '📘', 'ten' => 'Facebook', 'mau' => '#1877f2'],
                                    'tiktok_url'   => ['icon' => '🎵', 'ten' => 'TikTok',   'mau' => '#000'],
                                    'zalo_url'     => ['icon' => '💬', 'ten' => 'Zalo',     'mau' => '#0068ff'],
                                ];
                                foreach ($mxh as $k => $v):
                                    $url = layCD($pdo, $k);
                                    if ($url):
                                ?>
                                <a href="<?php echo htmlspecialchars($url); ?>" target="_blank"
                                   style="display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:<?php echo $v['mau']; ?>; color:#fff; border-radius:20px; text-decoration:none; font-size:13px; font-weight:bold;">
                                    <?php echo $v['icon']; ?> <?php echo $v['ten']; ?>
                                </a>
                                <?php endif; endforeach; ?>
                            </div>
                        </div>

                        <div style="margin-top:20px;">
                            <button type="submit" class="nut-luu">💾 Lưu đường link</button>
                        </div>
                    </form>
                </div>

                <div class="the-cai-dat">
                    <h3 style="margin-top:0; color:#555;">📋 Hướng dẫn tích hợp vào trang web</h3>
                    <p style="font-size:14px; color:#666; line-height:1.7;">
                        Để hiển thị các icon mạng xã hội trên <strong>header</strong> và trang <strong>Liên hệ</strong>, thêm đoạn code PHP sau vào file <code>includes/style.css</code> hoặc header của từng trang:
                    </p>
                    <pre style="background:#f1f3f5; padding:15px; border-radius:6px; font-size:13px; overflow-x:auto; border:1px solid #dee2e6;">&lt;?php
require_once 'includes/config.php';
// Lấy link mạng xã hội
$yt  = layCD($pdo, 'youtube_url');
$fb  = layCD($pdo, 'facebook_url');
$tt  = layCD($pdo, 'tiktok_url');
$zl  = layCD($pdo, 'zalo_url');
?&gt;
&lt;div class="mang-xa-hoi-header"&gt;
  &lt;?php if($yt): ?&gt;&lt;a href="&lt;?=$yt?&gt;" target="_blank"&gt;▶️&lt;/a&gt;&lt;?php endif; ?&gt;
  &lt;?php if($fb): ?&gt;&lt;a href="&lt;?=$fb?&gt;" target="_blank"&gt;📘&lt;/a&gt;&lt;?php endif; ?&gt;
  &lt;?php if($tt): ?&gt;&lt;a href="&lt;?=$tt?&gt;" target="_blank"&gt;🎵&lt;/a&gt;&lt;?php endif; ?&gt;
  &lt;?php if($zl): ?&gt;&lt;a href="&lt;?=$zl?&gt;" target="_blank"&gt;💬&lt;/a&gt;&lt;?php endif; ?&gt;
&lt;/div&gt;</pre>
                </div>
            </div>

        </div>
    </div>

    <script>
    function chuyenTab(id, nut) {
        document.querySelectorAll('.khung-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.nut-tab').forEach(b => b.classList.remove('active'));
        document.getElementById('tab-' + id).classList.add('active');
        nut.classList.add('active');
        history.replaceState({}, '', '?tab=' + id);
    }
    function xemTruoc(input, idPreview) {
        if (!input.files || !input.files[0]) return;
        var reader = new FileReader();
        var el = document.getElementById(idPreview);
        reader.onload = function(e) {
            el.outerHTML = '<img src="' + e.target.result + '" id="' + idPreview + '" style="width:100%;height:160px;object-fit:cover;display:block;">';
        };
        reader.readAsDataURL(input.files[0]);
        // Cập nhật tên file
        var khoa = idPreview.replace('preview_', '');
        var tenEl = document.getElementById('ten_' + khoa);
        if (tenEl) tenEl.textContent = '📎 ' + input.files[0].name;
    }
    </script>
</body>
</html>
