{% extends "base.html" %}

{% block title %}Laporan Profit Pelanggan - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Analisis Profitabilitas Pelanggan{% endblock %}

{% block content %}
<!-- AREA PRINT: KOP SURAT (Hanya muncul saat diprint) -->
<div id="print-header" class="hidden print:block mb-8 border-b-2 border-gray-800 pb-4">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-black text-gray-900 uppercase tracking-tighter">{{ 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 }} | WA: {{ app_settings.company_wa }}</p>
        </div>
        <div class="text-right">
            <h2 class="text-xl font-bold text-gray-800 uppercase">Laporan Profit Pelanggan</h2>
            <p class="text-sm text-gray-500">Periode: <b>{{ start_date }}</b> s/d <b>{{ end_date }}</b></p>
            <p class="text-[10px] text-gray-400 mt-1">Dicetak pada: {{ now.strftime('%d/%m/%Y %H:%M') if now else '' }}</p>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto space-y-4">
    
    <!-- HEADER & FILTER (STAY CLEAN - HIDDEN ON PRINT) -->
    <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 flex flex-col md:flex-row justify-between items-center gap-4 print:hidden">
        <div class="flex items-center gap-3">
            <div class="p-3 bg-purple-100 text-purple-600 rounded-lg">
                <i class="fas fa-chart-line text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold text-gray-800 text-lg">Analisis Profit Pelanggan</h3>
                <p class="text-xs text-gray-500 italic">Gunakan filter untuk mengatur rentang waktu laporan.</p>
            </div>
        </div>
        
        <div class="flex items-center gap-2">
            <form class="flex gap-2 items-center bg-gray-50 p-1.5 rounded-lg border">
                <input type="date" name="start_date" value="{{ start_date }}" class="bg-transparent border-none text-sm focus:ring-0">
                <span class="text-gray-400">-</span>
                <input type="date" name="end_date" value="{{ end_date }}" class="bg-transparent border-none text-sm focus:ring-0">
                <button type="submit" class="bg-purple-600 text-white px-4 py-1.5 rounded-md text-sm font-bold hover:bg-purple-700 transition-all">
                    Filter
                </button>
            </form>
            <div class="flex border-l pl-2 ml-2 gap-1">
                <button onclick="toggleAll(true)" class="p-2 text-gray-400 hover:text-purple-600" title="Buka Semua">
                    <i class="fas fa-expand-arrows-alt"></i>
                </button>
                <button onclick="toggleAll(false)" class="p-2 text-gray-400 hover:text-gray-600" title="Tutup Semua">
                    <i class="fas fa-compress-arrows-alt"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- GLOBAL SUMMARY CARD -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 print:grid-cols-2 print:gap-2">
        <div class="bg-white p-4 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between print:border-gray-300 print:p-3">
            <span class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Omzet</span>
            <span class="text-xl font-black text-gray-900">Rp {{ "{:,.0f}".format(total_belanja_semua) }}</span>
        </div>
        <div class="bg-purple-600 p-4 rounded-xl shadow-lg shadow-purple-200 flex items-center justify-between text-white print:bg-white print:text-gray-900 print:border print:border-gray-300 print:shadow-none print:p-3">
            <span class="text-sm font-medium opacity-80 print:opacity-100 uppercase tracking-wider">Total Laba Bersih</span>
            <span class="text-xl font-black">Rp {{ "{:,.0f}".format(total_profit_semua) }}</span>
        </div>
    </div>

    {% if customers_data %}
        <div class="space-y-4" id="report-body">
            {% for cust_id, data in customers_data.items() %}
            <div class="customer-card bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden transition-all duration-300 print:shadow-none print:border-gray-300 print:rounded-none break-inside-avoid">
                
                <!-- CUSTOMER HEADER -->
                <div onclick="toggleSection('details-{{ cust_id }}')" class="p-4 cursor-pointer flex flex-col md:flex-row justify-between items-center gap-4 bg-white hover:bg-purple-50/30 transition-colors print:bg-gray-100 print:cursor-default print:border-b">
                    <div class="flex items-center gap-4 w-full md:w-auto">
                        <div class="w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold shadow-md print:shadow-none">
                            {{ data.nama[0]|upper }}
                        </div>
                        <div class="flex-1">
                            <h4 class="font-bold text-gray-900">{{ data.nama }}</h4>
                            <p class="text-[10px] text-purple-600 font-bold uppercase tracking-widest print:text-gray-500">{{ data.per_tanggal|length }} Hari Transaksi</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-8 w-full md:w-auto justify-between border-t md:border-none pt-2 md:pt-0">
                        <div class="text-center md:text-right">
                            <p class="text-[10px] text-gray-400 font-bold uppercase">Belanja</p>
                            <p class="font-bold text-gray-700">Rp {{ "{:,.0f}".format(data.grand_total_belanja) }}</p>
                        </div>
                        <div class="text-center md:text-right">
                            <p class="text-[10px] text-gray-400 font-bold uppercase text-green-600">Profit</p>
                            <p class="font-bold text-green-600">Rp {{ "{:,.0f}".format(data.grand_total_profit) }}</p>
                        </div>
                        <i class="fas fa-chevron-down text-gray-300 transition-transform duration-300 icon-arrow print:hidden" id="arrow-details-{{ cust_id }}"></i>
                    </div>
                </div>

                <!-- CONTENT -->
                <div id="details-{{ cust_id }}" class="hidden border-t border-gray-100 bg-gray-50/50 p-3 md:p-6 space-y-6 print:block print:p-0 print:border-none">
                    {% for tgl, daily in data.per_tanggal.items() %}
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm print:rounded-none print:border-none print:shadow-none">
                        <!-- DATE SUB-HEADER -->
                        <div class="px-4 py-2 bg-gray-100 flex justify-between items-center border-b print:bg-white print:px-2 print:py-1">
                            <span class="text-xs font-bold text-gray-600 uppercase"><i class="far fa-calendar-alt mr-2 text-purple-500 print:hidden"></i>Tgl: {{ tgl }}</span>
                            <div class="flex gap-4">
                                <span class="text-[10px] font-medium text-gray-500">Omzet: <b class="text-gray-700">Rp {{ "{:,.0f}".format(daily.total_harian) }}</b></span>
                                <span class="text-[10px] font-medium text-green-600">Profit: <b>Rp {{ "{:,.0f}".format(daily.profit_harian) }}</b></span>
                            </div>
                        </div>

                        <!-- PRODUCT TABLE -->
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs text-left print:text-[10px]">
                                <thead class="bg-gray-50/50 text-[10px] text-gray-400 font-black uppercase print:bg-white print:text-gray-900 print:border-b">
                                    <tr>
                                        <th class="px-4 py-2">Nama Produk</th>
                                        <th class="px-4 py-2 text-center">Qty</th>
                                        <th class="px-4 py-2 text-right">Penjualan</th>
                                        <th class="px-4 py-2 text-right">Laba</th>
                                        <th class="px-4 py-2 text-center print:hidden">Margin</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 print:divide-gray-300">
                                    {% for item in daily.detail_barang %}
                                    <tr class="hover:bg-purple-50/20">
                                        <td class="px-4 py-2 font-medium text-gray-700">{{ item.produk }}</td>
                                        <td class="px-4 py-2 text-center text-gray-500">{{ item.qty }} {{ item.satuan }}</td>
                                        <td class="px-4 py-2 text-right font-mono">Rp {{ "{:,.0f}".format(item.subtotal) }}</td>
                                        <td class="px-4 py-2 text-right font-bold {% if item.profit >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                                            Rp {{ "{:,.0f}".format(item.profit) }}
                                        </td>
                                        <td class="px-4 py-2 text-center print:hidden">
                                            {% set margin = (item.profit / item.subtotal * 100) if item.subtotal > 0 else 0 %}
                                            <span class="text-[10px] font-bold {{ 'text-green-600' if margin > 10 else 'text-gray-400' }}">
                                                {{ "%.1f"|format(margin) }}%
                                            </span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="bg-white p-20 rounded-xl border border-dashed border-gray-300 text-center">
            <p class="text-gray-400 font-medium">Data transaksi tidak ditemukan pada periode ini.</p>
        </div>
    {% endif %}

    <!-- SIGNATURE AREA (Only on print) -->
    <div class="hidden print:grid grid-cols-3 gap-4 mt-12 text-center">
        <div>
            <p class="text-xs text-gray-500 mb-12">Dibuat Oleh,</p>
            <p class="text-xs font-bold border-t border-gray-800 pt-1 inline-block px-8">KASIR / ADMIN</p>
        </div>
        <div></div>
        <div>
            <p class="text-xs text-gray-500 mb-12">Disetujui Oleh,</p>
            <p class="text-xs font-bold border-t border-gray-800 pt-1 inline-block px-8">OWNER / MANAJER</p>
        </div>
    </div>

    <!-- FOOTER ACTIONS (Hidden on print) -->
    <div class="flex justify-between items-center py-6 print:hidden">
        <button onclick="history.back()" class="text-sm font-bold text-gray-400 hover:text-gray-600 flex items-center gap-2">
            <i class="fas fa-arrow-left"></i> Kembali
        </button>
        <button onclick="preparePrint()" class="bg-gray-900 text-white px-8 py-3 rounded-xl font-bold shadow-lg hover:bg-black transition-all active:scale-95 flex items-center gap-2">
            <i class="fas fa-print"></i> CETAK LAPORAN RESMI
        </button>
    </div>
</div>

<script>
    function toggleSection(id) {
        const section = document.getElementById(id);
        const arrow = document.getElementById('arrow-' + id);
        if (section.classList.contains('hidden')) {
            section.classList.remove('hidden');
            if(arrow) arrow.style.transform = 'rotate(180deg)';
        } else {
            section.classList.add('hidden');
            if(arrow) arrow.style.transform = 'rotate(0deg)';
        }
    }

    function toggleAll(open) {
        const sections = document.querySelectorAll('[id^="details-"]');
        const arrows = document.querySelectorAll('.icon-arrow');
        sections.forEach(s => {
            if (open) s.classList.remove('hidden');
            else s.classList.add('hidden');
        });
        arrows.forEach(a => {
            a.style.transform = open ? 'rotate(180deg)' : 'rotate(0deg)';
        });
    }

    function preparePrint() {
        // 1. Expand all sections
        toggleAll(true);
        // 2. Beri waktu browser untuk me-render expansi sebelum buka dialog print
        setTimeout(() => {
            window.print();
        }, 800);
    }
</script>

<style>
    @media print {
        /* Sembunyikan elemen navigasi dan UI web */
        aside, nav, header, #sidebar, #sidebar-toggle, .print\:hidden, button, form {
            display: none !important;
        }

        /* Atur Layout Utama agar memenuhi kertas */
        #content-area {
            margin-left: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            position: absolute;
            left: 0;
            top: 0;
        }

        body {
            background: white !important;
            font-size: 12pt;
        }

        /* Tampilkan konten yang di-collapse */
        [id^="details-"] {
            display: block !important;
        }

        /* Atur Tabel dan Border */
        .customer-card {
            border: 1px solid #ddd !important;
            margin-bottom: 20px !important;
            page-break-inside: avoid; /* Jangan memotong kartu di tengah halaman */
        }

        table {
            border-collapse: collapse !important;
        }
        
        th, td {
            border: 1px solid #f3f4f6 !important;
        }

        /* Pastikan Warna tetap muncul saat diprint (Chrome/Safari) */
        .bg-purple-600 {
            background-color: #7e22ce !important;
            -webkit-print-color-adjust: exact;
            color: white !important;
        }
        
        .bg-gray-100 {
            background-color: #f3f4f6 !important;
            -webkit-print-color-adjust: exact;
        }

        .text-green-600 { color: #16a34a !important; }
        .text-red-600 { color: #dc2626 !important; }

        /* Pengaturan Halaman */
        @page {
            size: A4;
            margin: 1.5cm;
        }
    }
</style>
{% endblock %}