{% extends "base.html" %}

{% block title %}Laporan - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Laporan & Analisis Bisnis{% endblock %}

{% block content %}
<!-- Load Library html2pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<!-- Filter Period -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6 mb-3 sm:mb-4 lg:mb-6">
    <form method="GET" class="flex flex-col sm:flex-row gap-2 sm:gap-3 lg:gap-4">
        <div class="flex-1">
            <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Tanggal Mulai</label>
            <input type="date" name="start_date" value="{{ start_date }}" 
                   class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
        <div class="flex-1">
            <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Tanggal Akhir</label>
            <input type="date" name="end_date" value="{{ end_date }}" 
                   class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
        <button type="submit" 
                class="px-4 sm:px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 font-semibold whitespace-nowrap text-sm sm:text-base self-end">
            <i class="fas fa-filter mr-1 sm:mr-2"></i>Filter Data
        </button>
    </form>
</div>

<!-- Summary Cards (Arus Kas) -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 lg:gap-6 mb-3 sm:mb-4 lg:mb-6">
    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6 text-white">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm sm:text-base lg:text-lg font-semibold">Kas Masuk</h3>
            <i class="fas fa-arrow-down text-lg sm:text-xl lg:text-2xl opacity-75"></i>
        </div>
        <p class="text-xl sm:text-2xl lg:text-3xl font-bold">Rp {{ "{:,.0f}".format(kas_masuk) }}</p>
        <p class="text-green-100 text-xs sm:text-sm mt-1 sm:mt-2">Total pemasukan uang</p>
    </div>

    <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6 text-white">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm sm:text-base lg:text-lg font-semibold">Kas Keluar</h3>
            <i class="fas fa-arrow-up text-lg sm:text-xl lg:text-2xl opacity-75"></i>
        </div>
        <p class="text-xl sm:text-2xl lg:text-3xl font-bold">Rp {{ "{:,.0f}".format(kas_keluar) }}</p>
        <p class="text-red-100 text-xs sm:text-sm mt-1 sm:mt-2">Pengeluaran & Pembelian</p>
    </div>

    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6 text-white">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm sm:text-base lg:text-lg font-semibold">Surplus/Defisit Kas</h3>
            <i class="fas fa-wallet text-lg sm:text-xl lg:text-2xl opacity-75"></i>
        </div>
        <p class="text-xl sm:text-2xl lg:text-3xl font-bold">Rp {{ "{:,.0f}".format(kas_masuk - kas_keluar) }}</p>
        <p class="text-purple-100 text-xs sm:text-sm mt-1 sm:mt-2">Selisih arus kas periode ini</p>
    </div>
</div>

<!-- CONTAINER LAPORAN LABA RUGI (Target PDF) -->
<div id="laba-rugi-container" class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden mb-3 sm:mb-4 lg:mb-6">
    
    <!-- Header PDF (Hidden di Layar, Muncul di PDF) -->
    <div id="pdf-header" class="hidden p-6 border-b-2 border-gray-800 text-center mb-4">
        <h1 class="text-2xl font-bold uppercase tracking-wider text-gray-900">{{ app_settings.company_name }}</h1>
        <p class="text-sm text-gray-600">{{ app_settings.company_address }}</p>
        <p class="text-sm text-gray-600">Telp: {{ app_settings.company_phone }} | Email: {{ app_settings.company_email }}</p>
    </div>

    <!-- Header UI (Visible di Layar) -->
    <div id="ui-header" class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 flex flex-col sm:flex-row justify-between items-center gap-3">
        <div>
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-white">
                <i class="fas fa-file-invoice-dollar mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Laporan Laba Rugi
            </h3>
            <p class="text-blue-100 text-xs sm:text-sm mt-1">Periode: {{ start_date }} s/d {{ end_date }}</p>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex gap-2" data-html2canvas-ignore="true">
            <button onclick="downloadPDF()" 
               class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-lg text-xs sm:text-sm font-bold shadow transition-colors cursor-pointer">
                <i class="fas fa-file-pdf mr-1"></i> Export PDF
            </button>
            <a href="{{ url_for('customer_profit_report', start_date=start_date, end_date=end_date) }}" 
               class="bg-white text-blue-700 hover:bg-blue-50 px-3 py-2 rounded-lg text-xs sm:text-sm font-bold shadow transition-colors">
                <i class="fas fa-users mr-1"></i> Profit Pelanggan
            </a>
        </div>
    </div>
    
    <!-- Isi Laporan -->
    <div class="p-3 sm:p-4 lg:p-6 bg-white">
        <!-- Sub-header untuk PDF agar tanggal muncul -->
        <div id="pdf-subheader" class="hidden mb-6 text-center">
            <h2 class="text-xl font-bold underline">LAPORAN LABA RUGI</h2>
            <p class="text-sm">Periode: {{ start_date }} s/d {{ end_date }}</p>
        </div>

        <div class="space-y-3 sm:space-y-4">
            <!-- A. Pendapatan -->
            <div class="border-b border-gray-200 pb-3 sm:pb-4">
                <h4 class="font-bold text-gray-800 mb-2 sm:mb-3 text-sm sm:text-base lg:text-lg uppercase">A. Pendapatan Usaha</h4>
                <div class="pl-2 sm:pl-4 space-y-1.5 sm:space-y-2">
                    <div class="flex justify-between text-xs sm:text-sm">
                        <span class="text-gray-600">A.1 Penjualan Barang</span>
                        <span class="font-semibold text-gray-900">Rp {{ "{:,.0f}".format(total_sales) }}</span>
                    </div>
                    <div class="flex justify-between text-xs sm:text-sm">
                        <span class="text-gray-600">
                            A.2 Pendapatan Jasa Reparasi
                            {% if repair_count %}<span class="text-gray-400">({{ repair_count }} order)</span>{% endif %}
                        </span>
                        <span class="font-semibold text-gray-900">Rp {{ "{:,.0f}".format(repair_income) }}</span>
                    </div>
                </div>
                <div class="flex justify-between mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-200 text-sm sm:text-base">
                    <span class="font-bold text-gray-900">Total Pendapatan Usaha</span>
                    <span class="font-bold text-green-600">Rp {{ "{:,.0f}".format(total_pendapatan) }}</span>
                </div>
            </div>

            <!-- B. HPP -->
            <div class="border-b border-gray-200 pb-3 sm:pb-4">
                <h4 class="font-bold text-gray-800 mb-2 sm:mb-3 text-sm sm:text-base lg:text-lg uppercase">B. Harga Pokok Penjualan (HPP)</h4>
                <div class="pl-2 sm:pl-4 space-y-1.5 sm:space-y-2">
                    <div class="flex justify-between text-xs sm:text-sm">
                        <span class="text-gray-600">Total Modal Barang Terjual</span>
                        <span class="font-semibold text-gray-900">(Rp {{ "{:,.0f}".format(hpp) }})</span>
                    </div>
                    <p class="text-[11px] text-gray-400 italic">
                        Biaya sparepart jasa sudah tercatat pada tindakan reparasi, tidak masuk HPP di sini.
                    </p>
                </div>
            </div>

            <!-- Gross Profit -->
            <div class="border-b border-gray-200 pb-3 sm:pb-4 bg-gray-50 p-3 rounded print:bg-white print:border print:border-gray-300">
                <div class="flex justify-between items-center">
                    <span class="font-bold text-gray-900 text-sm sm:text-base lg:text-lg">LABA KOTOR (A - B)</span>
                    <span class="font-bold text-base sm:text-lg lg:text-xl {% if laba_kotor >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                        Rp {{ "{:,.0f}".format(laba_kotor) }}
                    </span>
                </div>
            </div>

            <!-- C. Biaya Operasional -->
            <div class="border-b border-gray-200 pb-3 sm:pb-4">
                <h4 class="font-bold text-gray-800 mb-2 sm:mb-3 text-sm sm:text-base lg:text-lg uppercase">C. Biaya Operasional</h4>
                <div class="pl-2 sm:pl-4 space-y-1.5 sm:space-y-2">
                    <div class="flex justify-between text-xs sm:text-sm">
                        <span class="text-gray-600">Total Biaya (Gaji, Listrik, dll)</span>
                        <span class="font-semibold text-red-600">(Rp {{ "{:,.0f}".format(biaya_operasional) }})</span>
                    </div>
                </div>
            </div>

            <!-- D. Kerugian Barang -->
            <div class="border-b border-gray-200 pb-3 sm:pb-4">
                <h4 class="font-bold text-gray-800 mb-2 sm:mb-3 text-sm sm:text-base lg:text-lg uppercase">D. Kerugian Barang (Loss)</h4>
                <div class="pl-2 sm:pl-4 space-y-1.5 sm:space-y-2">
                    <div class="flex justify-between text-xs sm:text-sm">
                        <span class="text-gray-600">Barang Rusak / Expired / Hilang</span>
                        <span class="font-semibold text-red-600">(Rp {{ "{:,.0f}".format(total_loss) }})</span>
                    </div>
                </div>
            </div>

            <!-- Net Profit -->
            <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-3 sm:p-4 border border-blue-100 print:bg-white print:border-2 print:border-black">
                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                    <div>
                        <span class="font-bold text-gray-900 text-base sm:text-lg lg:text-xl uppercase">Laba Bersih Usaha</span>
                        <p class="text-xs sm:text-sm text-gray-600 mt-0.5 sm:mt-1">(Laba Kotor - Biaya Ops - Kerugian)</p>
                    </div>
                    <div class="text-left sm:text-right">
                        <span class="font-bold text-xl sm:text-2xl lg:text-3xl {% if laba_bersih >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                            Rp {{ "{:,.0f}".format(laba_bersih) }}
                        </span>
                        {% if total_pendapatan > 0 %}
                        <p class="text-xs sm:text-sm text-gray-600 mt-0.5 sm:mt-1">
                            Net Margin: {{ "%.2f"|format((laba_bersih / total_pendapatan * 100) if total_pendapatan > 0 else 0) }}%
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Footer PDF -->
            <div id="pdf-footer" class="hidden mt-8 text-right text-sm text-gray-600">
                <p class="mb-8">Dicetak pada: <span id="print-date"></span></p>
                <p>({{ current_user.nama_lengkap }})</p>
            </div>
        </div>
    </div>
</div>

<!-- Sales Chart (Tidak Ikut Diprint) -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-blue-100">
        <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">
            <i class="fas fa-chart-bar mr-1 sm:mr-2 text-sm sm:text-base"></i>
            Grafik Penjualan Harian
        </h3>
    </div>
    <div class="p-3 sm:p-4 lg:p-6">
        {% if sales_data %}
        <!-- Desktop Table View -->
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Total Penjualan</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Visualisasi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for data in sales_data %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm text-gray-900">{{ data.tanggal }}</td>
                        <td class="px-4 py-3 text-sm font-semibold text-gray-900">Rp {{ "{:,.0f}".format(data.total) }}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center">
                                <div class="flex-1 bg-gray-200 rounded-full h-4 mr-2">
                                    <div class="bg-blue-600 h-4 rounded-full" 
                                         style="width: {{ (data.total / sales_data|map(attribute='total')|max * 100)|round(2) if sales_data|map(attribute='total')|max > 0 else 0 }}%">
                                    </div>
                                </div>
                                <span class="text-xs text-gray-600">
                                    {{ "%.1f"|format((data.total / sales_data|map(attribute='total')|max * 100) if sales_data|map(attribute='total')|max > 0 else 0) }}%
                                </span>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-8 text-gray-400">
            <i class="fas fa-chart-bar text-4xl mb-2"></i>
            <p class="text-sm">Tidak ada data penjualan pada periode ini</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- JavaScript for PDF Generation -->
<script>
function downloadPDF() {
    // 1. Ambil elemen container
    const element = document.getElementById('laba-rugi-container');
    
    // 2. Manipulasi DOM sementara untuk tampilan PDF yang bersih
    const pdfHeader = document.getElementById('pdf-header');
    const pdfSubheader = document.getElementById('pdf-subheader');
    const pdfFooter = document.getElementById('pdf-footer');
    const uiHeader = document.getElementById('ui-header');
    const printDate = document.getElementById('print-date');
    
    // Set tanggal cetak
    const now = new Date();
    printDate.innerText = now.toLocaleString('id-ID');

    // Tampilkan elemen khusus PDF, sembunyikan UI web
    pdfHeader.classList.remove('hidden');
    pdfSubheader.classList.remove('hidden');
    pdfFooter.classList.remove('hidden');
    uiHeader.classList.add('hidden'); // Sembunyikan header biru UI
    
    // Hilangkan shadow dan border radius agar terlihat seperti kertas
    element.classList.remove('shadow-md', 'sm:shadow-lg', 'rounded-lg', 'sm:rounded-xl', 'overflow-hidden');

    // 3. Konfigurasi html2pdf
    const opt = {
        margin:       15, // Margin 15mm
        filename:     'Laporan_Laba_Rugi_{{ start_date }}_{{ end_date }}.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2, useCORS: true }, // Scale 2 untuk text tajam
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };

    // 4. Generate PDF
    html2pdf().set(opt).from(element).save().then(function() {
        // 5. Kembalikan tampilan ke semula setelah download selesai
        pdfHeader.classList.add('hidden');
        pdfSubheader.classList.add('hidden');
        pdfFooter.classList.add('hidden');
        uiHeader.classList.remove('hidden');
        element.classList.add('shadow-md', 'sm:shadow-lg', 'rounded-lg', 'sm:rounded-xl', 'overflow-hidden');
    });
}
</script>

<!-- Tambahkan style khusus agar background warna tercetak -->
<style>
    /* CSS ini memastikan background color (seperti bg-gray-50) tercetak di PDF */
    @media print {
        body {
            -webkit-print-color-adjust: exact;
        }
    }
</style>

{% endblock %}