{% extends "base.html" %}
{% block content %}
<div class="max-w-2xl 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-user-edit mr-2"></i>Edit Data Penulis</h3>
        </div>
        <form method="POST" id="formEdit" 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">Nama Lengkap</label>
                    <input type="text" name="nama_penulis" value="{{ penulis.nama_penulis }}" 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">No. Handphone</label>
                    <input type="text" name="no_hp" value="{{ penulis.no_hp }}" 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">Email (Login)</label>
                    <input type="email" name="email" value="{{ penulis.email }}" 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">NIK</label>
                    <input type="text" name="nik" value="{{ penulis.nik or '' }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">NPWP</label>
                <input type="text" name="npwp" value="{{ penulis.npwp or '' }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>
            <hr class="border-gray-100">
            <h4 class="text-blue-700 font-bold">Data Rekening</h4>
            <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">Bank</label>
                    <select name="bank" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white">
                        <option value="BCA" {% if penulis.bank == 'BCA' %}selected{% endif %}>BCA</option>
                        <option value="Mandiri" {% if penulis.bank == 'Mandiri' %}selected{% endif %}>Mandiri</option>
                        <option value="BRI" {% if penulis.bank == 'BRI' %}selected{% endif %}>BRI</option>
                        <option value="BNI" {% if penulis.bank == 'BNI' %}selected{% endif %}>BNI</option>
                        <option value="BSI" {% if penulis.bank == 'BSI' %}selected{% endif %}>BSI</option>
                        <option value="Lainnya" {% if penulis.bank == 'Lainnya' %}selected{% endif %}>Lainnya</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">No. Rekening</label>
                    <input type="text" name="no_rekening" value="{{ penulis.no_rekening }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Atas Nama</label>
                    <input type="text" name="atas_nama" value="{{ penulis.atas_nama }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Alamat Lengkap</label>
                <textarea name="alamat" required rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg">{{ penulis.alamat }}</textarea>
            </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">Klik tombol di bawah untuk meminta persetujuan edit ke WhatsApp Penulis.</p>
                
                <div class="flex space-x-2">
                    <button type="button" onclick="requestOTP('{{ penulis.id_penulis }}')" 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-penulis" 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-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-md font-medium hidden">
                    <i class="fas fa-save mr-2"></i> Update Data
                </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-penulis/' + 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 %}