{% extends "base.html" %}

{% block title %}Pembayaran Piutang - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Pembayaran Piutang{% endblock %}

{% block content %}
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <!-- Header -->
    <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">
        <div class="flex flex-col space-y-3 sm:space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">
                <i class="fas fa-hand-holding-usd text-blue-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Daftar Piutang Belum Lunas
            </h3>
            <form method="GET" class="flex-1 lg:flex-none">
                <div class="relative">
                    <input type="text" name="search" value="{{ search }}" 
                           placeholder="Cari no nota/pelanggan..." 
                           class="w-full lg:w-64 pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                </div>
            </form>
        </div>
    </div>

    <!-- Mobile Card View -->
    <div class="block lg:hidden divide-y divide-gray-100">
        {% for sale in sales.items %}
        {% set total_paid = sale.payments|sum(attribute='jumlah') %}
        {% set remaining = sale.total_bayar - total_paid %}
        <div class="p-3 hover:bg-gray-50 active:bg-gray-100 transition-colors">
            <div class="flex justify-between items-start mb-2">
                <div class="flex-1 min-w-0 pr-2">
                    <p class="text-xs font-bold text-blue-600">{{ sale.nomor_nota }}</p>
                    <p class="text-sm font-semibold text-gray-900 truncate">{{ sale.customer.nama }}</p>
                    <p class="text-xs text-gray-500 mt-0.5">
                        <i class="fas fa-calendar text-gray-400 mr-1"></i>{{ sale.tanggal.strftime('%d/%m/%Y') }}
                    </p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-xs text-gray-500 mb-0.5">Sisa Tagihan</p>
                    <p class="text-base font-bold text-red-600">Rp {{ "{:,.0f}".format(remaining) }}</p>
                </div>
            </div>
            <div class="flex justify-between items-center pt-2 border-t border-gray-100">
                <div class="text-xs text-gray-500">
                    Total: <span class="font-semibold text-gray-700">Rp {{ "{:,.0f}".format(sale.total_bayar) }}</span>
                </div>
                <button onclick="openPaymentModal({{ sale.id }}, '{{ sale.nomor_nota }}', '{{ sale.customer.nama }}', {{ remaining }})" 
                        class="bg-green-600 hover:bg-green-700 active:bg-green-800 text-white px-3 py-1.5 rounded-lg font-semibold transition-colors text-xs">
                    <i class="fas fa-money-bill-wave mr-1"></i>Bayar
                </button>
            </div>
        </div>
        {% else %}
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-check-circle text-4xl mb-2 text-green-300"></i>
            <p class="text-sm">Semua piutang sudah lunas!</p>
        </div>
        {% endfor %}
    </div>

    <!-- Desktop Table View -->
    <div class="hidden lg:block overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No. Nota</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Pelanggan</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Total</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Terbayar</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Sisa</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for sale in sales.items %}
                {% set total_paid = sale.payments|sum(attribute='jumlah') %}
                {% set remaining = sale.total_bayar - total_paid %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ sale.nomor_nota }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ sale.tanggal.strftime('%d/%m/%Y') }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ sale.customer.nama }}</td>
                    <td class="px-6 py-4 text-sm font-semibold text-gray-900">Rp {{ "{:,.0f}".format(sale.total_bayar) }}</td>
                    <td class="px-6 py-4 text-sm text-green-600 font-semibold">Rp {{ "{:,.0f}".format(total_paid) }}</td>
                    <td class="px-6 py-4 text-sm text-red-600 font-semibold">Rp {{ "{:,.0f}".format(remaining) }}</td>
                    <td class="px-6 py-4 text-center">
                        <button onclick="openPaymentModal({{ sale.id }}, '{{ sale.nomor_nota }}', '{{ sale.customer.nama }}', {{ remaining }})" 
                                class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-semibold">
                            <i class="fas fa-money-bill-wave mr-1"></i>Bayar
                        </button>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-check-circle text-4xl mb-2 text-green-300"></i>
                        <p>Semua piutang sudah lunas!</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if sales.pages > 1 %}
    <div class="p-3 sm:p-4 lg:p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-xs sm:text-sm text-gray-600 text-center sm:text-left">
                {{ sales.per_page * (sales.page - 1) + 1 }} - 
                {{ [sales.per_page * sales.page, sales.total]|min }} dari {{ sales.total }}
            </p>
            <div class="flex space-x-1 sm:space-x-2">
                {% if sales.has_prev %}
                <a href="?page={{ sales.prev_num }}{% if search %}&search={{ search }}{% endif %}" 
                   class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                    <i class="fas fa-chevron-left"></i>
                </a>
                {% endif %}
                {% for page_num in sales.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        <a href="?page={{ page_num }}{% if search %}&search={{ search }}{% endif %}" 
                           class="px-2 sm:px-3 py-1 text-sm border rounded {% if page_num == sales.page %}bg-blue-600 text-white border-blue-600{% else %}border-gray-300 hover:bg-gray-100 active:bg-gray-200{% endif %}">
                            {{ page_num }}
                        </a>
                    {% endif %}
                {% endfor %}
                {% if sales.has_next %}
                <a href="?page={{ sales.next_num }}{% if search %}&search={{ search }}{% endif %}" 
                   class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                    <i class="fas fa-chevron-right"></i>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Payment Modal -->
<div id="paymentModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-md">
        <div class="p-4 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
            <h3 class="text-lg sm:text-xl font-bold text-white">
                <i class="fas fa-money-bill-wave mr-2"></i>Input Pembayaran
            </h3>
        </div>
        <form id="paymentForm" method="POST" class="p-4 sm:p-6">
            <div class="mb-4 bg-gray-50 p-3 sm:p-4 rounded-lg">
                <div class="flex justify-between mb-2 text-sm">
                    <span class="text-gray-600">No. Nota:</span>
                    <span class="font-bold text-gray-900" id="modal_nota"></span>
                </div>
                <div class="flex justify-between mb-2 text-sm">
                    <span class="text-gray-600">Pelanggan:</span>
                    <span class="font-bold text-gray-900" id="modal_customer"></span>
                </div>
                <div class="flex justify-between mt-3 pt-3 border-t">
                    <span class="text-sm font-semibold text-gray-700">Sisa Tagihan:</span>
                    <span class="text-base sm:text-lg font-bold text-red-600" id="modal_remaining"></span>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Jumlah Pembayaran *</label>
                <input type="number" name="jumlah" id="payment_amount" required step="0.01" min="1"
                       class="w-full px-3 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 font-semibold"
                       placeholder="Masukkan jumlah">
            </div>

            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Keterangan</label>
                <textarea name="keterangan" rows="2"
                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                          placeholder="Cicilan ke-1, Pelunasan, dll"></textarea>
            </div>

            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
                <button type="button" onclick="closeModal('paymentModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">
                    Batal
                </button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold">
                    <i class="fas fa-check mr-2"></i>Bayar Sekarang
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function openPaymentModal(saleId, nota, customer, remaining) {
    document.getElementById('paymentForm').action = `/payments/add/${saleId}`;
    document.getElementById('modal_nota').textContent = nota;
    document.getElementById('modal_customer').textContent = customer;
    document.getElementById('modal_remaining').textContent = 'Rp ' + remaining.toLocaleString('id-ID');
    document.getElementById('payment_amount').max = remaining;
    document.getElementById('payment_amount').value = remaining;
    openModal('paymentModal');
}
</script>
{% endblock %}