.elementor-35686 .elementor-element.elementor-element-863e50e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35686 .elementor-element.elementor-element-fc7701c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35686 .elementor-element.elementor-element-d57c4d8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-35686 .elementor-element.elementor-element-6233a70{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-35686 .elementor-element.elementor-element-1400ebc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;--background-transition:0.3s;}/* Start custom CSS for html, class: .elementor-element-2998f71 */<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    :root {
        --midnight: #001a33;
        --deep-blue: #003366;
        --gold: #ffd700;
        --white: #ffffff;
    }

    .tk-mission-wrapper {
        font-family: 'Sarabun', sans-serif;
        background: linear-gradient(135deg, var(--midnight) 0%, var(--deep-blue) 100%);
        border: 2px solid var(--gold);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 40px;
        color: var(--white);
    }

    .tk-card-header { display: flex; align-items: center; border-bottom: 2px solid var(--gold); padding-bottom: 15px; margin-bottom: 20px; }
    .tk-mini-logo { width: 50px; margin-right: 15px; filter: drop-shadow(0 0 5px rgba(255,215,0,0.5)); }
    .tk-title { color: var(--gold); margin: 0; font-size: 20px; }

    /* Graphic Area */
    .tk-chart-box {
        background: rgba(0,0,0,0.2);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
        border: 1px solid rgba(255,215,0,0.1);
    }
    .tk-chart-label { color: var(--gold); margin-top: 0; text-align: center; }
    .tk-canvas-container { height: 250px; position: relative; }

    /* Button & Tables */
    .tk-month-.elementor-35686 .elementor-element.elementor-element-2998f71 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center; }
    .m-btn {
        background: transparent; border: 1px solid var(--gold); color: var(--gold);
        padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: 0.3s;
    }
    .m-btn.active, .m-btn:hover { background: var(--gold); color: var(--midnight); }

    .viewer-box { background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 15px; }
    .tk-iframe { width: 100%; height: 550px; border: none; }
    .tk-empty { height: 550px; display: flex; align-items: center; justify-content: center; color: #666; font-style: italic; }

    .tk-action-bar { display: flex; gap: 10px; justify-content: center; }
    .btn-dl { text-decoration: none; padding: 10px 20px; border-radius: 25px; font-size: 14px; color: white; transition: 0.3s; }
    .btn-dl.pdf { background: #c62828; }
    .btn-dl.excel { background: #2e7d32; }
    .btn-dl:hover { opacity: 0.8; transform: translateY(-2px); }
</style>

<script>
// ฟังก์ชันอัปเดต PDF และปุ่มดาวน์โหลด
function updateView(missionId, month, pdfUrl, excelUrl) {
    const iframe = document.getElementById('iframe-' + missionId);
    const emptyDiv = document.getElementById('empty-' + missionId);
    const dlPdf = document.getElementById('dl-pdf-' + missionId);
    const dlXl = document.getElementById('dl-xl-' + missionId);
    
    const eventBtn = event.currentTarget;
    const parent = eventBtn.parentElement;
    parent.querySelectorAll('.m-btn').forEach(b => b.classList.remove('active'));
    eventBtn.classList.add('active');

    if (pdfUrl === "") {
        iframe.style.display = "none";
        emptyDiv.style.display = "flex";
        dlPdf.style.display = "none";
        dlXl.style.display = "none";
    } else {
        iframe.style.display = "block";
        emptyDiv.style.display = "none";
        iframe.src = pdfUrl;
        dlPdf.style.display = "inline-block";
        dlXl.style.display = "inline-block";
        dlPdf.href = pdfUrl;
        dlXl.href = excelUrl;
    }
}

// สร้างกราฟิกเมื่อโหลดหน้าเว็บ
window.addEventListener('DOMContentLoaded', (event) => {
    Chart.defaults.color = '#ffffff';
    Chart.defaults.font.family = 'Sarabun';

    // กราฟ 1: CRIMES
    new Chart(document.getElementById('chartCrimeMain'), {
        type: 'bar',
        data: {
            labels: ['ต.ค.', 'พ.ย.', 'ธ.ค.', 'ม.ค.', 'ก.พ.', 'มี.ค.'],
            datasets: [
                { label: 'รับแจ้ง', data: [45, 0, 0, 0, 0, 0], backgroundColor: '#ffd700' },
                { label: 'จับกุม', data: [38, 0, 0, 0, 0, 0], backgroundColor: '#ffffff' }
            ]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    // กราฟ 2: จุดตรวจ
    new Chart(document.getElementById('chartCheckMain'), {
        type: 'line',
        data: {
            labels: ['ต.ค.', 'พ.ย.', 'ธ.ค.', 'ม.ค.', 'ก.พ.', 'มี.ค.'],
            datasets: [{
                label: 'จำนวนครั้ง',
                data: [110, 0, 0, 0, 0, 0],
                borderColor: '#ffd700',
                backgroundColor: 'rgba(255,215,0,0.1)',
                fill: true
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    // กราฟ 3: แจ้งความคืบหน้า
    new Chart(document.getElementById('chartNotifyMain'), {
        type: 'doughnut',
        data: {
            labels: ['แจ้งแล้ว', 'รอดำเนินการ'],
            datasets: [{
                data: [95, 5],
                backgroundColor: ['#ffd700', 'rgba(255,255,255,0.2)'],
                borderWidth: 0
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
});
</script>/* End custom CSS */