{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white shadow-lg rounded-xl overflow-hidden">
        <div class="bg-minhaj-blue px-6 py-4 border-b border-blue-800">
            <h3 class="text-lg font-bold text-white"><i class="fas fa-book-medical mr-2"></i>Tambah Katalog Buku</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">Penulis Utama</label>
                    <select name="id_penulis" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-minhaj-teal bg-white">
                        <option value="">-- Pilih Penulis --</option>
                        {% for p in penulis_list %}
                        <option value="{{ p.id_penulis }}">{{ p.nama_penulis }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Judul Buku</label>
                    <input type="text" name="judul_buku" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-minhaj-teal" placeholder="Contoh: Fiqih Ibadah">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Nomor Kontrak</label>
                    <input type="text" name="nomor_kontrak" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="K-2025/001">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">ISBN</label>
                    <input type="text" name="isbn" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="978-...">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Kategori</label>
                    <select name="kategori" required class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white">
                        <option value="Agama">Agama</option>
                        <option value="Pendidikan">Pendidikan</option>
                        <option value="Umum">Umum</option>
                        <option value="Sejarah">Sejarah</option>
                        <option value="Anak">Anak</option>
                    </select>
                </div>
            </div>

            <div class="border-t border-gray-100 my-2"></div>
            
            <div class="bg-blue-50 p-5 rounded-lg border border-blue-100">
                <h4 class="text-minhaj-blue font-bold mb-4">Konfigurasi Royalti</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Harga Jual (Rp)</label>
                        <input type="number" name="harga_jual" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-minhaj-orange" placeholder="0">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Persentase Royalti (%)</label>
                        <input type="number" name="persentase_royalti" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-minhaj-orange" placeholder="10">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Tipe Penulis</label>
                        <select name="tipe_penulis" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white">
                            <option value="Penulis Buku">Penulis Buku</option>
                            <option value="Korespondensi">Korespondensi</option>
                            <option value="Koordinator Penulis">Koordinator Penulis</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Opsi Pajak</label>
                        <select name="opsi_pajak" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white">
                            <option value="Tanpa Pajak">Tanpa Pajak (0%)</option>
                            <option value="PPh 15%">PPh Pasal 23 (15%)</option>
                            <option value="NPPN 6%">NPPN (6%)</option>
                        </select>
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Tanggal Terbit</label>
                <input type="date" name="tanggal_terbit" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>

            <div class="flex justify-end space-x-3 pt-4">
                <a href="/master-buku" class="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">Batal</a>
                <button type="submit" class="px-6 py-2 bg-minhaj-orange text-white rounded-lg hover:bg-orange-700 transition shadow-md font-medium">
                    <i class="fas fa-save mr-2"></i> Simpan Buku
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}