{% 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-minhaj-orange px-6 py-4 border-b border-orange-600">
            <h3 class="text-lg font-bold text-white"><i class="fas fa-cart-plus mr-2"></i>Input Penjualan Baru</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="{{ today }}" 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="Website Penerbit">Website Penerbit</option>
                        <option value="Marketplace">Marketplace</option>
                        <option value="Toko Fisik">Toko Fisik</option>
                        <option value="Distributor">Distributor</option>
                        <option value="Event">Event</option>
                        <option value="Direct">Direct</option>
                    </select>
                </div>
            </div>

            <div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
                <h4 class="text-minhaj-blue font-bold mb-3">Detail Produk</h4>
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Pilih Penulis</label>
                    <select id="penulisSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white" onchange="loadBooks()">
                        <option value="">-- Pilih Penulis --</option>
                        {% for p in penulis_list %}
                        <option value="{{ p.id_penulis }}">{{ p.nama_penulis }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Pilih Buku</label>
                    <select name="id_buku" id="bukuSelect" required class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 cursor-not-allowed" disabled onchange="updatePrice()">
                        <option value="">-- Pilih Penulis Terlebih Dahulu --</option>
                    </select>
                </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</label>
                        <input type="number" name="harga_satuan" id="hargaSatuan" required readonly class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Qty</label>
                        <input type="number" name="qty_terjual" id="qty" value="1" 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</label>
                        <input type="text" id="totalHarga" 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 <span class="text-xs text-gray-400">(Opsional)</span></label>
                    <input type="text" name="kota" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Kosongkan jika tidak ada">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Keterangan / No Resi <span class="text-xs text-gray-400">(Opsional)</span></label>
                    <input type="text" name="keterangan" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Kosongkan jika tidak ada">
                </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">Batal</a>
                <button type="submit" class="px-6 py-2 bg-minhaj-blue text-white rounded-lg hover:bg-blue-800">Simpan Transaksi</button>
            </div>
        </form>
    </div>
</div>
<script>
    let booksData = {};
    async function loadBooks() {
        const authorId = document.getElementById('penulisSelect').value;
        const bukuSelect = document.getElementById('bukuSelect');
        const hargaInput = document.getElementById('hargaSatuan');
        bukuSelect.innerHTML = '<option value="">-- Memuat... --</option>';
        bukuSelect.disabled = true;
        hargaInput.value = '';
        if (!authorId) return;
        
        try {
            const res = await fetch('/get-books-by-author/' + authorId);
            const books = await res.json();
            bukuSelect.innerHTML = '<option value="">-- Pilih Buku --</option>';
            if(books.length===0) bukuSelect.innerHTML='<option value="">Belum ada buku</option>';
            else {
                books.forEach(b => {
                    booksData[b.id_buku] = b.harga_jual;
                    bukuSelect.innerHTML += `<option value="${b.id_buku}">${b.judul_buku}</option>`;
                });
                bukuSelect.disabled = false;
                bukuSelect.classList.remove('bg-gray-100','cursor-not-allowed');
            }
        } catch(e) { alert('Error'); }
    }
    function updatePrice() {
        const id = document.getElementById('bukuSelect').value;
        if(id && booksData[id]) document.getElementById('hargaSatuan').value = booksData[id];
        calculateTotal();
    }
    function calculateTotal() {
        const h = document.getElementById('hargaSatuan').value||0;
        const q = document.getElementById('qty').value||0;
        document.getElementById('totalHarga').value = new Intl.NumberFormat('id-ID').format(h*q);
    }
</script>
{% endblock %}