{% extends 'dashboard/base.html' %}
{% load static %}

{% block content %}
<!-- TOOLBAR FILTER DAN TOMBOL DOWNLOAD (Diberi id agar bisa disembunyikan total lewat JS) -->
<div class="toolbar-container" id="web-toolbar-filter" style="background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
    <div style="display: flex; align-items: center; gap: 15px;">
        <div style="display: flex; flex-direction: column; gap: 4px;">
            <label style="font-size: 12px; font-weight: 600; color: #4b5563;">Pilih Bulan Laporan:</label>
            <select id="filter-bulan-all" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; min-width: 200px;" onchange="loadReportAll()">
                {% for m in months %}
                    <option value="{{ m.value }}">{{ m.label }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <button class="btn-export" onclick="exportReportToPDF()" style="align-self: flex-end; padding: 8px 16px; background: #ef4444; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;">
        <i class="fa-solid fa-file-pdf"></i> Download PDF Laporan (A4)
    </button>
</div>

<!-- CONTAINER UTAMA YANG AKAN DICETAK (Kop Surat diletakkan di dalam sini sejak awal) -->
<div id="element-to-print" style="background: #fff; padding: 10px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    
    <!-- KOP SURAT PERUSAHAAN (Secara default tersembunyi di web, dikontrol lewat kelas 'force-show-header') -->
    <div id="print-header-corporate" class="hide-on-web" style="display: none; align-items: center; border-bottom: 3px solid #111827; padding-bottom: 15px; margin-bottom: 25px; gap: 20px;">
        <img src="{% static 'images/FLN.png' %}" alt="Logo FLN" style="height: 60px; width: auto; object-fit: contain;">
        <div style="flex: 1;">
            <h1 style="font-size: 22px; font-weight: 800; margin: 0; color: #111827; letter-spacing: 0.5px;">Sistem Informasi Monitoring Energi</h1>
            <h2 style="font-size: 15px; font-weight: 600; margin: 4px 0 0 0; color: #4b5563;">PT. Frina Lestari Nusantara</h2>
        </div>
        <div style="text-align: right; min-width: 180px;">
            <div style="font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px;">Laporan Bulanan</div>
            <div id="print-periode-label" style="font-size: 15px; font-weight: 700; color: #1d4ed8; margin-top: 2px;">September 2026</div>
        </div>
    </div>

    <!-- KOTAK SUMMARY AKUMULASI PABRIK -->
    <div class="summary-box" style="display: flex; justify-content: flex-start; margin-bottom: 25px;">
        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; padding: 14px 22px; border-radius: 8px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
            <span style="font-size: 14px; font-weight: 600; color: #166534;">
                <i class="fa-solid fa-industry"></i> Total Konsumsi Energi Seluruh Pabrik Periode Ini:
            </span>
            <span id="txt-total-pabrik-kwh" style="font-size: 20px; font-weight: 800; color: #15803d;">
                0.00 kWh
            </span>
        </div>
    </div>

    <!-- GRAFIK LINGKARAN (PIE CHART) BERUKURAN BESAR -->
    <div class="card" style="margin-bottom: 25px; background: #fff; padding: 25px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); page-break-inside: avoid;">
        <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 20px; color: #374151; text-align: center;">Grafik Distribusi Persentase Konsumsi Energi per Area</h3>
        <div class="chart-container" style="height: 420px; max-width: 580px; margin: 0 auto; position: relative;">
            <canvas id="chartAllAreaPie"></canvas>
        </div>
    </div>

    <!-- TABEL DATA RINGKASAN AREA -->
    <div class="card" style="background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); page-break-inside: avoid;">
        <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 15px; color: #374151;">Rincian Akumulasi Penggunaan Energi Tiap Wilayah Kerja</h3>
        <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 14px;">
            <thead>
                <tr style="background: #111827; color: white;">
                    <th style="padding: 12px 10px; border: 1px solid #374151; text-align: center; width: 60px;">No</th>
                    <th style="padding: 12px 10px; border: 1px solid #374151;">Nama Wilayah / Area</th>
                    <th style="padding: 12px 10px; border: 1px solid #374151; text-align: center; width: 150px;">Jumlah KWH Metter</th>
                    <th style="padding: 12px 10px; border: 1px solid #374151; text-align: right; background: #1d4ed8; width: 220px;">Total Konsumsi Energi (kWh)</th>
                </tr>
            </thead>
            <tbody id="tabel-body-report-all">
                <tr>
                    <td colspan="4" style="text-align: center; padding: 25px; color: #6b7280;">Sedang memproses data dari database...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- STYLE BANTUAN CSS UTK MEMAKSA TAMPILAN HEADER DI PDF -->
<style>
    .force-show-header {
        display: flex !important;
    }
</style>

<!-- PEMANGGILAN ASSET JAVASCRIPT SECARA LOKAL DARI FOLDER STATIC DJANGO -->
<script src="{% static 'js/chart.js' %}"></script>
<script src="{% static 'js/html2pdf.bundle.min.js' %}"></script>

<script>
    // Variabel global instans grafik lingkaran (Pie Chart)
    let chartInstancePie = null;

    // Fungsi Utama Penarik Data Seluruh Area dan Render Halaman Dashboard Web
    function loadReportAll() {
        const monthSelect = document.getElementById('filter-bulan-all');
        const monthVal = monthSelect.value;
        const canvasEl = document.getElementById('chartAllAreaPie');

        if (!canvasEl) return;
        if (!monthVal) return;

        // Ambil label teks bulan aktif (misal: "September 2026") untuk disinkronkan ke Kop Surat PDF
        const labelBulanAktif = monthSelect.options[monthSelect.selectedIndex].text;
        document.getElementById('print-periode-label').innerText = labelBulanAktif;

        // Ambil data menggunakan jalur routing api_report_all_data yang terdaftar di urls.py
        let url = "{% url 'api_report_all_data' %}?month=" + monthVal;
        console.log("Meminta data ringkasan seluruh area dari URL: ", url);

        fetch(url)
            .then(res => {
                if (!res.ok) throw new Error("HTTP error " + res.status);
                return res.json();
            })
            .then(data => {
                console.log("Data seluruh area sukses diterima:", data);

                // --- PROSES RENDER GRAFIK LINGKARAN (PIE CHART) BERUKURAN BESAR ---
                if (chartInstancePie) {
                    chartInstancePie.destroy();
                }

                const ctxPie = canvasEl.getContext('2d');
                chartInstancePie = new Chart(ctxPie, {
                    type: 'pie',
                    data: {
                        labels: data.labels || [],
                        datasets: [{
                            label: 'Total Konsumsi (kWh)',
                            data: data.values || [],
                            backgroundColor: [
                                'rgba(59, 130, 246, 0.75)',  // Area 1 - Biru
                                'rgba(16, 185, 129, 0.75)',  // Area 2 - Hijau
                                'rgba(245, 158, 11, 0.75)',  // Area 3 - Oranye
                                'rgba(239, 68, 68, 0.75)',   // Area 4 - Merah
                                'rgba(139, 92, 246, 0.75)',  // Area 5 - Ungu
                                'rgba(236, 72, 153, 0.75)',  // Area 6 - Pink
                                'rgba(20, 184, 166, 0.75)'   // Area 7 - Toska
                            ],
                            borderColor: '#ffffff',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: true,
                                position: 'bottom',
                                labels: {
                                    font: { size: 13, weight: '500' },
                                    padding: 15
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.label || '';
                                        let value = context.parsed || 0;
                                        return ' ' + label + ': ' + value.toFixed(2) + ' kWh';
                                    }
                                }
                            }
                        }
                    }
                });

                // --- PROSES UPDATE SUMMARY TOTAL PABRIK ---
                const totalSum = parseFloat(data.total_sum) || 0;
                document.getElementById('txt-total-pabrik-kwh').innerText = totalSum.toFixed(2) + " kWh";

                // --- PROSES UPDATE TABEL RINCIAN AREA ---
                const tbody = document.getElementById('tabel-body-report-all');
                tbody.innerHTML = '';

                if (!data.tabel_data || data.tabel_data.length === 0) {
                    tbody.innerHTML = `<tr><td colspan="4" style="text-align: center; padding: 25px; color: #6b7280;">Tidak ada data penggunaan energi pada periode ini.</td></tr>`;
                    return;
                }

                data.tabel_data.forEach((row, index) => {
                    const totalKonsumsi = parseFloat(row.total_konsumsi) || 0;

                    tbody.innerHTML += `
                        <tr style="border-bottom: 1px solid #e5e7eb;">
                            <td style="padding: 12px 10px; text-align:center;">${index + 1}</td>
                            <td style="padding: 12px 10px; font-weight:600; color: #1f2937;">${row.nama_area}</td>
                            <td style="padding: 12px 10px; text-align:center; color: #4b5563;">${row.jumlah_mesin} Unit</td>
                            <td style="padding: 12px 10px; text-align:right; font-weight:700; background:#eff6ff; color: #1e40af;">${totalKonsumsi.toFixed(2)}</td>
                        </tr>
                    `;
                });
            })
            .catch(err => {
                console.error("Gagal memuat data ringkasan seluruh area:", err);
                document.getElementById('tabel-body-report-all').innerHTML = `<tr><td colspan="4" style="text-align: center; padding: 25px; color: red;">Gagal mengambil data dari server. Periksa Console Log (F12).</td></tr>`;
            });
    }

    // --- FUNGSI GENERATOR EKSPOR KE PDF UKURAN A4 DENGAN KONTROL VISIBILITAS AMAN ---
    function exportReportToPDF() {
        const toolbarEl = document.getElementById('web-toolbar-filter');
        const headerCorporate = document.getElementById('print-header-corporate');
        const elementToPrint = document.getElementById('element-to-print');
        const monthSelect = document.getElementById('filter-bulan-all');
        const labelBulan = monthSelect.options[monthSelect.selectedIndex].text;

        if (!elementToPrint || !toolbarEl || !headerCorporate) return;

        // 1. Sembunyikan toolbar filter agar bersih total dari halaman PDF
        toolbarEl.style.display = 'none';

        // 2. Paksa munculkan Kop Surat perusahaan di dalam kontainer cetak tanpa merubah susunan DOM
        headerCorporate.style.display = 'flex';

        // Konfigurasi kertas resmi A4 portrait dengan margin seimbang 12 milimeter
        const opt = {
            margin:       12, 
            filename:     'Report_Bulanan_Energi_' + labelBulan.replace(' ', '_') + '.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 2, useCORS: true, logging: false }, 
            jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' } 
        };

        // Eksekusi pembuatan PDF dari kontainer elemen asli yang aman (Grafik & Data Dijamin Terbawa)
        html2pdf().set(opt).from(elementToPrint).save().then(() => {
            // 3. Setelah proses cetak PDF selesai, kembalikan tampilan web seperti semula
            headerCorporate.style.display = 'none'; // Sembunyikan kop dari web view kembali
            toolbarEl.style.display = 'flex';      // Munculkan toolbar filter kembali
        });
    }

    // Jalankan otomatis fungsi load pertama kali setelah siklus DOM siap sempurna
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            loadReportAll();
        }, 150);
    });
</script>
{% endblock content %}