{% 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-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 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 bg-white">
                        {% for p in penulis_list %}
                        <option value="{{ p.id_penulis }}" {% if p.id_penulis == buku.id_penulis %}selected{% endif %}>{{ 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" value="{{ buku.judul_buku }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </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" value="{{ buku.nomor_kontrak }}" 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">ISBN</label>
                    <input type="text" name="isbn" value="{{ buku.isbn }}" 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">Kategori</label>
                    <select name="kategori" required class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white">
                        <option value="Agama" {% if buku.kategori == 'Agama' %}selected{% endif %}>Agama</option>
                        <option value="Pendidikan" {% if buku.kategori == 'Pendidikan' %}selected{% endif %}>Pendidikan</option>
                        <option value="Umum" {% if buku.kategori == 'Umum' %}selected{% endif %}>Umum</option>
                        <option value="Sejarah" {% if buku.kategori == 'Sejarah' %}selected{% endif %}>Sejarah</option>
                    </select>
                </div>
            </div>
            <div class="bg-blue-50 p-5 rounded-lg border border-blue-100">
                <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" value="{{ buku.harga_jual }}" 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">Royalti (%)</label>
                        <input type="number" name="persentase_royalti" value="{{ buku.persentase_royalti }}" 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">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" {% if buku.tipe_penulis == 'Penulis Buku' %}selected{% endif %}>Penulis Buku</option>
                            <option value="Korespondensi" {% if buku.tipe_penulis == 'Korespondensi' %}selected{% endif %}>Korespondensi</option>
                            <option value="Koordinator Penulis" {% if buku.tipe_penulis == 'Koordinator Penulis' %}selected{% endif %}>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" {% if buku.opsi_pajak == 'Tanpa Pajak' %}selected{% endif %}>Tanpa Pajak</option>
                            <option value="PPh 15%" {% if buku.opsi_pajak == 'PPh 15%' %}selected{% endif %}>PPh 15%</option>
                            <option value="NPPN 6%" {% if buku.opsi_pajak == 'NPPN 6%' %}selected{% endif %}>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" value="{{ buku.tanggal_terbit }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </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">Persetujuan penulis diperlukan untuk mengubah data buku ini.</p>
                <div class="flex space-x-2">
                    <button type="button" onclick="requestOTP('{{ buku.id_buku }}')" 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="/master-buku" 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> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
<script>
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-buku/' + 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 %}