gravity/อนุมัติเดินทาง-ประชุม(ธุรการ)/views/settings/index.php

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0 text-gray-800">ตั้งค่าระบบ</h1>
</div>

<div class="row">
    <!-- Roles Management Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-solid fa-users-gear fa-4x text-info mb-3"></i>
                <h4 class="card-title fw-bold">จัดการสิทธิ์ (Roles)</h4>
                <p class="card-text text-muted mb-4">
                    กำหนดสิทธิ์ผู้ใช้งาน เช่น ผู้ดูแลระบบ, ผู้อนุมัติระดับ 1, 2
                </p>
                <a href="<?= BASE_URL ?>/roles" class="btn btn-outline-info px-4 mt-auto">
                    <i class="fa-solid fa-user-plus me-1"></i> จัดการสิทธิ์
                </a>
            </div>
        </div>
    </div>

    <!-- PDF Template Setup Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-solid fa-file-pdf fa-4x text-danger mb-3"></i>
                <h4 class="card-title fw-bold">ฟอร์ม PDF ต้นฉบับ</h4>
                <p class="card-text text-muted mb-4">
                    ออกแบบและจัดวางตำแหน่งข้อมูลบนฟอร์ม PDF ด้วยระบบลากวาง (Drag & Drop)
                </p>
                <a href="<?= BASE_URL ?>/settings/pdf-designer" class="btn btn-outline-danger px-4 mt-auto">
                    <i class="fa-solid fa-pen-ruler me-1"></i> เข้าสู่หน้าออกแบบ
                </a>
            </div>
        </div>
    </div>

    <!-- Google Sheets Setup Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-solid fa-table fa-4x text-success mb-3"></i>
                <h4 class="card-title fw-bold">Google Sheets Integration</h4>
                <p class="card-text text-muted mb-4">
                    ตั้งค่าการเชื่อมต่อ API ของ Google Sheets เพี่อซิงค์ข้อมูลลงฐานข้อมูล กำหนด Column Mapping และ Range ของข้อมูล
                </p>
                <a href="<?= BASE_URL ?>/settings/google-sheets" class="btn btn-outline-success px-4 mt-auto">
                    <i class="fa-solid fa-plug me-1"></i> ตั้งค่าการเชื่อมต่อ
                </a>
            </div>
        </div>
    </div>

    <!-- Approval Hierarchy Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-solid fa-sitemap fa-4x text-warning mb-3"></i>
                <h4 class="card-title fw-bold">สายงานอนุมัติ</h4>
                <p class="card-text text-muted mb-4">
                    ตั้งค่าผู้อนุมัติสำหรับพนักงานแต่ละคน เพื่อให้ระบบส่งเอกสารไปยังผู้อนุมัติได้โดยอัตโนมัติ
                </p>
                <a href="<?= BASE_URL ?>/settings/hierarchy" class="btn btn-outline-warning px-4 mt-auto">
                    <i class="fa-solid fa-users me-1"></i> ตั้งค่าผู้อนุมัติ
                </a>
            </div>
        </div>
    </div>

    <!-- LINE Notify Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-brands fa-line fa-4x text-success mb-3"></i>
                <h4 class="card-title fw-bold">แจ้งเตือน (LINE)</h4>
                <p class="card-text text-muted mb-4">
                    ตั้งค่า Token ของ LINE Notify เพื่อให้ระบบสามารถส่งข้อความแจ้งเตือนเมื่อมีคำขอหรือมีการอนุมัติ
                </p>
                <a href="<?= BASE_URL ?>/settings/line-notify" class="btn btn-outline-success px-4 mt-auto">
                    <i class="fa-solid fa-bell me-1"></i> ตั้งค่าแจ้งเตือน
                </a>
            </div>
        </div>
    </div>

    <!-- Telegram Notify Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-brands fa-telegram fa-4x text-info mb-3"></i>
                <h4 class="card-title fw-bold">แจ้งเตือน (Telegram)</h4>
                <p class="card-text text-muted mb-4">
                    เชื่อมต่อกับบอท Telegram ของคุณ เพื่อส่งข้อความแจ้งเตือนแบบเรียลไทม์
                </p>
                <a href="<?= BASE_URL ?>/settings/telegram-notify" class="btn btn-outline-info px-4 mt-auto">
                    <i class="fa-solid fa-paper-plane me-1"></i> ตั้งค่า Telegram
                </a>
            </div>
        </div>
    </div>
    <!-- Appearance & Theme Setup Card -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 rounded-4">
            <div class="card-body text-center p-5 d-flex flex-column">
                <i class="fa-solid fa-palette fa-4x text-primary mb-3"></i>
                <h4 class="card-title fw-bold">ตั้งค่าความสวยงาม</h4>
                <p class="card-text text-muted mb-4">
                    เปิดใช้งาน <strong>Premium Theme</strong> สำหรับระบบ (ดีไซน์ Glassmorphism + Animated Background)
                </p>
                <div class="mt-auto d-flex justify-content-center align-items-center">
                    <div class="form-check form-switch fs-4">
                        <input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="premiumThemeToggle">
                        <label class="form-check-label fs-5 ms-2" for="premiumThemeToggle" style="cursor: pointer;">เปิดใช้งาน</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const themeToggle = document.getElementById('premiumThemeToggle');
    // Set initial state from localStorage
    if (localStorage.getItem('app_premium_theme') === 'true') {
        themeToggle.checked = true;
    }
    
    // Listen for changes
    themeToggle.addEventListener('change', function(e) {
        if (typeof window.togglePremiumTheme === 'function') {
            window.togglePremiumTheme(e.target.checked);
        }
    });
});
</script>