{% extends "base.html" %}
{% block title %}Tutup Kasir — {{ app_settings.company_name }}{% endblock %}

{% block page_title %}
    <i class="fas fa-store-slash text-blue-500 mr-2"></i> Tutup Kasir / Laporan Shift
{% endblock %}

{% block content %}
<div class="space-y-6" id="page-kasir-shift">

    <!-- ===== FILTER BAR ===== -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ url_for('kasir_shift') }}" class="flex flex-wrap gap-3 items-end">
            
            {% if current_user.role != 'Kasir' %}
            <!-- Filter Tanggal (hanya Admin/Owner) -->
            <div class="flex-1 min-w-[180px]">
                <label class="block text-xs font-semibold text-gray-500 mb-1">Tanggal</label>
                <input type="date" name="tanggal" value="{{ tgl_str }}"
                       class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:ring-2 focus:ring-blue-300 focus:border-blue-400 outline-none transition">
            </div>
            <!-- Filter Kasir -->
            <div class="flex-1 min-w-[180px]">
                <label class="block text-xs font-semibold text-gray-500 mb-1">Kasir</label>
                <select name="kasir_id"
                        class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:ring-2 focus:ring-blue-300 focus:border-blue-400 outline-none transition">
                    <option value="all" {% if kasir_filter_id == 'all' %}selected{% endif %}>Semua Kasir</option>
                    {% for u in semua_kasir %}
                    <option value="{{ u.id }}" {% if kasir_filter_id|string == u.id|string %}selected{% endif %}>
                        {{ u.nama_lengkap }} ({{ u.role }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}

            <div class="flex gap-2">
                {% if current_user.role != 'Kasir' %}
                <button type="submit" id="btn-filter-shift"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm shadow-blue-200 flex items-center gap-2">
                    <i class="fas fa-search"></i> Filter
                </button>
                {% endif %}
                <button type="button" onclick="window.print()"
                        class="bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm flex items-center gap-2">
                    <i class="fas fa-print"></i> Cetak
                </button>
            </div>
        </form>
    </div>

    <!-- ===== HEADER INFO ===== -->
    <div class="flex items-center gap-3">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800">
                Laporan Shift —
                <span class="text-blue-600">
                    {{ tgl_filter.strftime('%A, %d %B %Y') if tgl_filter else '' }}
                </span>
            </h2>
            <p class="text-xs text-gray-400 mt-0.5">
                {% if current_user.role == 'Kasir' %}
                    Menampilkan transaksi Anda hari ini
                {% else %}
                    {% if kasir_filter_id == 'all' %}Semua kasir{% else %}Kasir terpilih{% endif %}
                {% endif %}
            </p>
        </div>
    </div>

    <!-- ===== KARTU RINGKASAN GRAND TOTAL ===== -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        <!-- Total Transaksi -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-4 text-white shadow-lg shadow-blue-200/50">
            <div class="flex items-center gap-2 mb-3">
                <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-receipt text-sm"></i>
                </div>
                <span class="text-xs font-semibold opacity-80 uppercase tracking-wide">Total Transaksi</span>
            </div>
            <p class="text-3xl font-extrabold">{{ grand_trx }}</p>
            <p class="text-xs opacity-70 mt-1">nota penjualan</p>
        </div>

        <!-- Total Penjualan -->
        <div class="bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-2xl p-4 text-white shadow-lg shadow-emerald-200/50">
            <div class="flex items-center gap-2 mb-3">
                <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-money-bill-wave text-sm"></i>
                </div>
                <span class="text-xs font-semibold opacity-80 uppercase tracking-wide">Total Penjualan</span>
            </div>
            <p class="text-xl font-extrabold">Rp {{ "{:,.0f}".format(grand_total) }}</p>
            <p class="text-xs opacity-70 mt-1">nilai bersih</p>
        </div>

        <!-- Tunai -->
        <div class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-4 text-white shadow-lg shadow-amber-200/50">
            <div class="flex items-center gap-2 mb-3">
                <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-coins text-sm"></i>
                </div>
                <span class="text-xs font-semibold opacity-80 uppercase tracking-wide">Uang Tunai</span>
            </div>
            <p class="text-xl font-extrabold">Rp {{ "{:,.0f}".format(grand_tunai) }}</p>
            <p class="text-xs opacity-70 mt-1">masuk ke laci</p>
        </div>

        <!-- Transfer/QRIS -->
        <div class="bg-gradient-to-br from-cyan-500 to-teal-600 rounded-2xl p-4 text-white shadow-lg shadow-cyan-200/50">
            <div class="flex items-center gap-2 mb-3">
                <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-qrcode text-sm"></i>
                </div>
                <span class="text-xs font-semibold opacity-80 uppercase tracking-wide">Transfer/QRIS</span>
            </div>
            <p class="text-xl font-extrabold">Rp {{ "{:,.0f}".format(grand_qris) }}</p>
            <p class="text-xs opacity-70 mt-1">digital / transfer</p>
        </div>

        <!-- Tempo/Cicilan -->
        <div class="bg-gradient-to-br from-violet-500 to-purple-700 rounded-2xl p-4 text-white shadow-lg shadow-violet-200/50">
            <div class="flex items-center gap-2 mb-3">
                <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-clock text-sm"></i>
                </div>
                <span class="text-xs font-semibold opacity-80 uppercase tracking-wide">Tempo / Cicilan</span>
            </div>
            <p class="text-xl font-extrabold">Rp {{ "{:,.0f}".format(grand_non_tunai) }}</p>
            <p class="text-xs opacity-70 mt-1">piutang belum lunas</p>
        </div>
    </div>

    <!-- ===== RINGKASAN PER KASIR (hanya admin) ===== -->
    {% if current_user.role != 'Kasir' and ringkasan_kasir %}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center gap-2">
            <i class="fas fa-users text-blue-500"></i>
            <h3 class="font-bold text-gray-800 text-sm">Ringkasan Per Kasir</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 text-slate-600 uppercase text-[11px] tracking-wide">
                    <tr>
                        <th class="px-4 py-3 text-left">Kasir</th>
                        <th class="px-4 py-3 text-center">Jml Transaksi</th>
                        <th class="px-4 py-3 text-right">Tunai</th>
                        <th class="px-4 py-3 text-right">Transfer/QRIS</th>
                        <th class="px-4 py-3 text-right">Tempo/Cicilan</th>
                        <th class="px-4 py-3 text-right">Diskon</th>
                        <th class="px-4 py-3 text-right font-bold text-blue-700">Total Penjualan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    {% for r in ringkasan_kasir %}
                    <tr class="hover:bg-blue-50/30 transition">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-bold">
                                    {{ r.nama_kasir[:1] }}
                                </div>
                                <span class="font-semibold text-gray-700">{{ r.nama_kasir }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <span class="bg-blue-100 text-blue-700 font-bold px-2 py-0.5 rounded-lg text-xs">
                                {{ r.jumlah_transaksi }} nota
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right text-emerald-700 font-semibold">
                            Rp {{ "{:,.0f}".format(r.total_tunai or 0) }}
                        </td>
                        <td class="px-4 py-3 text-right text-cyan-700 font-semibold">
                            Rp {{ "{:,.0f}".format(r.total_qris or 0) }}
                        </td>
                        <td class="px-4 py-3 text-right text-violet-700 font-semibold">
                            Rp {{ "{:,.0f}".format(r.total_non_tunai or 0) }}
                        </td>
                        <td class="px-4 py-3 text-right text-red-500">
                            Rp {{ "{:,.0f}".format(r.total_diskon or 0) }}
                        </td>
                        <td class="px-4 py-3 text-right font-bold text-gray-800">
                            Rp {{ "{:,.0f}".format(r.total_penjualan or 0) }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="bg-slate-800 text-white text-sm">
                    <tr>
                        <td class="px-4 py-3 font-bold" colspan="1">TOTAL KESELURUHAN</td>
                        <td class="px-4 py-3 text-center font-bold">{{ grand_trx }} nota</td>
                        <td class="px-4 py-3 text-right font-bold">Rp {{ "{:,.0f}".format(grand_tunai) }}</td>
                        <td class="px-4 py-3 text-right font-bold">Rp {{ "{:,.0f}".format(grand_qris) }}</td>
                        <td class="px-4 py-3 text-right font-bold">Rp {{ "{:,.0f}".format(grand_non_tunai) }}</td>
                        <td class="px-4 py-3 text-right font-bold">Rp {{ "{:,.0f}".format(grand_diskon) }}</td>
                        <td class="px-4 py-3 text-right font-extrabold text-emerald-400 text-base">
                            Rp {{ "{:,.0f}".format(grand_total) }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- ===== DETAIL TRANSAKSI ===== -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="fas fa-list-alt text-blue-500"></i>
                <h3 class="font-bold text-gray-800 text-sm">
                    Detail Transaksi
                    <span class="ml-2 bg-blue-100 text-blue-700 text-xs px-2 py-0.5 rounded-full font-bold">
                        {{ detail_transaksi|length }} nota
                    </span>
                </h3>
            </div>
        </div>

        {% if detail_transaksi %}
        <div class="overflow-x-auto">
            <table class="w-full text-sm" id="tbl-detail-transaksi">
                <thead class="bg-slate-50 text-slate-600 uppercase text-[11px] tracking-wide">
                    <tr>
                        <th class="px-4 py-3 text-left">No</th>
                        <th class="px-4 py-3 text-left">Nomor Nota</th>
                        <th class="px-4 py-3 text-left">Jam</th>
                        <th class="px-4 py-3 text-left">Pelanggan</th>
                        {% if current_user.role != 'Kasir' %}
                        <th class="px-4 py-3 text-left">Kasir</th>
                        {% endif %}
                        <th class="px-4 py-3 text-center">Metode</th>
                        <th class="px-4 py-3 text-center">Status</th>
                        <th class="px-4 py-3 text-right">Diskon</th>
                        <th class="px-4 py-3 text-right font-bold text-blue-700">Total Bayar</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    {% for s in detail_transaksi %}
                    <tr class="hover:bg-blue-50/30 transition">
                        <td class="px-4 py-3 text-gray-400 text-xs">{{ loop.index }}</td>
                        <td class="px-4 py-3">
                            <span class="font-mono font-semibold text-gray-700 text-xs">{{ s.nomor_nota }}</span>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-xs">
                            {{ s.tanggal.strftime('%H:%M') }}
                        </td>
                        <td class="px-4 py-3 text-gray-700">{{ s.customer.nama }}</td>
                        {% if current_user.role != 'Kasir' %}
                        <td class="px-4 py-3">
                            <span class="text-xs text-indigo-600 font-medium">
                                {{ s.user.nama_lengkap if s.user else '-' }}
                            </span>
                        </td>
                        {% endif %}
                        <td class="px-4 py-3 text-center">
                            {% if s.metode_pembayaran == 'Tunai' %}
                            <span class="bg-emerald-100 text-emerald-700 text-xs px-2 py-0.5 rounded-full font-semibold">
                                <i class="fas fa-coins mr-1 text-[10px]"></i>Tunai
                            </span>
                            {% elif s.metode_pembayaran == 'Transfer/QRIS' %}
                            <span class="bg-cyan-100 text-cyan-700 text-xs px-2 py-0.5 rounded-full font-semibold">
                                <i class="fas fa-qrcode mr-1 text-[10px]"></i>Transfer/QRIS
                            </span>
                            {% elif s.metode_pembayaran == 'Tempo' %}
                            <span class="bg-orange-100 text-orange-700 text-xs px-2 py-0.5 rounded-full font-semibold">
                                <i class="fas fa-clock mr-1 text-[10px]"></i>Tempo
                            </span>
                            {% else %}
                            <span class="bg-violet-100 text-violet-700 text-xs px-2 py-0.5 rounded-full font-semibold">
                                <i class="fas fa-credit-card mr-1 text-[10px]"></i>{{ s.metode_pembayaran }}
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-center">
                            {% if s.status == 'Lunas' %}
                            <span class="bg-emerald-50 text-emerald-600 text-xs px-2 py-0.5 rounded-full border border-emerald-200">Lunas</span>
                            {% else %}
                            <span class="bg-red-50 text-red-600 text-xs px-2 py-0.5 rounded-full border border-red-200">Belum Lunas</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-right text-red-500 text-xs">
                            {% if s.diskon > 0 %}Rp {{ "{:,.0f}".format(s.diskon) }}{% else %}-{% endif %}
                        </td>
                        <td class="px-4 py-3 text-right font-bold text-gray-800">
                            Rp {{ "{:,.0f}".format(s.total_bayar) }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="bg-slate-800 text-white">
                    <tr>
                        <td colspan="{% if current_user.role != 'Kasir' %}7{% else %}6{% endif %}" class="px-4 py-3 font-bold text-sm">
                            TOTAL ({{ detail_transaksi|length }} transaksi)
                        </td>
                        <td class="px-4 py-3 text-right font-bold text-red-300">
                            Rp {{ "{:,.0f}".format(grand_diskon) }}
                        </td>
                        <td class="px-4 py-3 text-right font-extrabold text-emerald-400 text-base">
                            Rp {{ "{:,.0f}".format(grand_total) }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        {% else %}
        <div class="py-16 text-center">
            <div class="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-cash-register text-blue-300 text-2xl"></i>
            </div>
            <p class="text-gray-400 font-medium">Tidak ada transaksi pada tanggal ini</p>
            <p class="text-gray-300 text-sm mt-1">Belum ada penjualan yang tercatat</p>
        </div>
        {% endif %}
    </div>

    <!-- ===== RINGKASAN TUTUP KASIR (box cetak) ===== -->
    {% if detail_transaksi %}
    <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white shadow-xl" id="box-tutup-kasir">
        <div class="flex items-center gap-3 mb-5">
            <div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center">
                <i class="fas fa-store-slash text-emerald-400 text-lg"></i>
            </div>
            <div>
                <h3 class="font-bold text-white text-base">Ringkasan Tutup Kasir</h3>
                <p class="text-slate-400 text-xs">{{ tgl_filter.strftime('%A, %d %B %Y') }}</p>
            </div>
        </div>

        <div class="space-y-3">
            <div class="flex justify-between items-center py-2 border-b border-white/10">
                <span class="text-slate-400 text-sm">Jumlah Transaksi</span>
                <span class="font-bold text-white">{{ grand_trx }} nota</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-white/10">
                <span class="text-slate-400 text-sm"><i class="fas fa-coins mr-2 text-amber-400"></i>Penjualan Tunai</span>
                <span class="font-bold text-amber-400">Rp {{ "{:,.0f}".format(grand_tunai) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-white/10">
                <span class="text-slate-400 text-sm"><i class="fas fa-qrcode mr-2 text-cyan-400"></i>Transfer / QRIS</span>
                <span class="font-bold text-cyan-400">Rp {{ "{:,.0f}".format(grand_qris) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-white/10">
                <span class="text-slate-400 text-sm"><i class="fas fa-clock mr-2 text-violet-400"></i>Tempo / Cicilan</span>
                <span class="font-bold text-violet-400">Rp {{ "{:,.0f}".format(grand_non_tunai) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-white/10">
                <span class="text-slate-400 text-sm"><i class="fas fa-tag mr-2 text-red-400"></i>Total Diskon Diberikan</span>
                <span class="font-bold text-red-400">- Rp {{ "{:,.0f}".format(grand_diskon) }}</span>
            </div>
            <div class="flex justify-between items-center py-3 bg-emerald-500/20 rounded-xl px-3 mt-2">
                <span class="text-emerald-300 font-bold text-sm"><i class="fas fa-money-bill-wave mr-2"></i>TOTAL UANG MASUK</span>
                <span class="font-extrabold text-emerald-400 text-xl">Rp {{ "{:,.0f}".format(grand_total) }}</span>
            </div>
        </div>

        <div class="mt-5 pt-4 border-t border-white/10 grid grid-cols-2 gap-3 text-xs text-slate-400">
            <div>
                <p>Dicetak oleh</p>
                <p class="text-white font-semibold">{{ current_user.nama_lengkap }}</p>
            </div>
            <div class="text-right">
                <p>Waktu cetak</p>
                <p class="text-white font-semibold" id="waktu-cetak"></p>
            </div>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}

{% block extra_js %}
<script>
    // Isi waktu cetak
    const el = document.getElementById('waktu-cetak');
    if (el) {
        const now = new Date();
        el.innerText = now.toLocaleString('id-ID', {
            weekday: 'long', year: 'numeric', month: 'long',
            day: 'numeric', hour: '2-digit', minute: '2-digit'
        });
    }
</script>

<style>
    @media print {
        /* Sembunyikan semua elemen kecuali konten utama */
        body * { visibility: hidden; }
        #page-kasir-shift, #page-kasir-shift * { visibility: visible; }
        #page-kasir-shift { position: absolute; top: 0; left: 0; width: 100%; }

        /* Sembunyikan tombol filter dan cetak */
        form, button, .no-print { display: none !important; }

        /* Styling cetak */
        #box-tutup-kasir { background: #1e293b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        table { font-size: 11px; }
        thead { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        tfoot { background: #1e293b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
</style>
{% endblock %}