{% extends "base.html" %}
{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="bg-white shadow-lg rounded-xl overflow-hidden">
        <div class="bg-blue-600 px-6 py-4 border-b border-blue-700">
            <h3 class="text-lg font-bold text-white"><i class="fas fa-edit mr-2"></i>Edit Data Penjualan</h3>
        </div>
        <form method="POST" class="p-6 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Tanggal Transaksi</label>
                    <input type="date" name="tanggal_penjualan" value="{{ penjualan.tanggal_penjualan }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Saluran Penjualan</label>
                    <select name="channel_penjualan" required class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white">
                        <option value="Marketplace" {% if penjualan.channel_penjualan == 'Marketplace' %}selected{% endif %}>Marketplace</option>
                        <option value="Toko Fisik" {% if penjualan.channel_penjualan == 'Toko Fisik' %}selected{% endif %}>Toko Fisik</option>
                        <option value="Distributor" {% if penjualan.channel_penjualan == 'Distributor' %}selected{% endif %}>Distributor</option>
                        <option value="Event" {% if penjualan.channel_penjualan == 'Event' %}selected{% endif %}>Event</option>
                        <option value="Direct" {% if penjualan.channel_penjualan == 'Direct' %}selected{% endif %}>Direct</option>
                    </select>
                </div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">ID Buku: {{ penjualan.judul_buku }}</label>
                    <input type="hidden" name="id_buku" value="{{ penjualan.id_buku }}">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Harga Satuan</label>
                        <input type="number" name="harga_satuan" id="hargaSatuan" value="{{ penjualan.harga_satuan }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" oninput="calculateTotal()">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Jumlah (Qty)</label>
                        <input type="number" name="qty_terjual" id="qty" value="{{ penjualan.qty_terjual }}" min="1" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" oninput="calculateTotal()">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Total Harga</label>
                        <input type="text" id="totalHarga" value="{{ "{:,}".format(penjualan.total_penjualan) }}" readonly class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 font-bold">
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Kota Tujuan</label>
                    <input type="text" name="kota" value="{{ penjualan.kota }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Keterangan</label>
                    <input type="text" name="keterangan" value="{{ penjualan.keterangan }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
            </div>

            <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                <label class="block text-sm font-bold text-yellow-800 mb-2">Verifikasi OTP (Wajib)</label>
                <p class="text-xs text-yellow-700 mb-3">Mengedit penjualan akan mengubah nilai royalti penulis.</p>
                <div class="flex space-x-2">
                    <button type="button" onclick="requestOTP('{{ penjualan.id_transaksi }}')" id="btnRequestOTP" class="bg-minhaj-orange text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition">
                        <i class="fab fa-whatsapp mr-1"></i> Minta OTP
                    </button>
                    <input type="text" name="otp_code" id="otpCode" placeholder="Masukkan Kode OTP" class="w-full px-4 py-2 border border-gray-300 rounded-lg hidden" required>
                </div>
            </div>

            <div class="flex justify-end space-x-3 pt-4 border-t">
                <a href="/data-penjualan" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium">Batal</a>
                <button type="submit" id="btnSubmit" class="px-6 py-2 bg-minhaj-blue text-white rounded-lg hover:bg-blue-800 transition shadow-md font-medium hidden">
                    <i class="fas fa-save mr-2"></i> Update Transaksi
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    function calculateTotal() {
        const harga = document.getElementById('hargaSatuan').value || 0;
        const qty = document.getElementById('qty').value || 0;
        const total = harga * qty;
        document.getElementById('totalHarga').value = new Intl.NumberFormat('id-ID').format(total);
    }
    async function requestOTP(id) {
        const btn = document.getElementById('btnRequestOTP');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';
        try {
            const res = await fetch('/api/request-otp-sales/' + id, {method: 'POST'});
            const data = await res.json();
            if (data.success) {
                alert(data.message);
                btn.classList.add('hidden');
                document.getElementById('otpCode').classList.remove('hidden');
                document.getElementById('btnSubmit').classList.remove('hidden');
            } else {
                alert('Gagal: ' + data.message);
                btn.disabled = false;
                btn.innerHTML = '<i class="fab fa-whatsapp mr-1"></i> Minta OTP';
            }
        } catch (e) {
            alert('Error koneksi');
            btn.disabled = false;
        }
    }
</script>
{% endblock %}