<?php if (!defined('ABSPATH')) exit; ?>

<div class="hk-proposal-form"
     data-ajaxurl="<?php echo admin_url('admin-ajax.php'); ?>"
     data-otp-nonce="<?php echo wp_create_nonce('hk_otp_nonce'); ?>"
     data-proposal-nonce="<?php echo wp_create_nonce('hk_proposal_nonce'); ?>">
    <div id="hk-otp-section">
        <h3>Verifikasi WhatsApp</h3>
        <div class="form-group">
            <label>Nomor WhatsApp</label>
            <input type="text" id="hk-whatsapp" placeholder="08123456789" required>
        </div>
        <button type="button" id="hk-send-otp" class="hk-btn">Kirim OTP</button>
    </div>

    <!-- OTP Popup Modal -->
    <div id="hk-otp-modal" class="hk-modal">
        <div class="hk-modal-content">
            <span class="hk-modal-close">&times;</span>
            <h3>Masukkan Kode OTP</h3>
            <p>Kode OTP telah dikirim ke WhatsApp Anda</p>
            <div class="form-group">
                <input type="text" id="hk-otp-code" placeholder="1234" maxlength="4" required>
            </div>
            <button type="button" id="hk-verify-otp" class="hk-btn hk-btn-primary">Verifikasi OTP</button>
        </div>
    </div>

    <form id="hk-proposal-form-main" style="display:none;">
        <input type="hidden" id="hk-verified-token" name="token">
        <input type="hidden" id="hk-verified-whatsapp" name="whatsapp">

        <h3>Form Proposal</h3>

        <div class="form-group">
            <label>Lembaga / Organisasi / Komunitas Pengusul *</label>
            <input type="text" name="lembaga" required>
        </div>

        <div class="form-group">
            <label>Penanggung Jawab *</label>
            <input type="text" name="penanggung_jawab" required>
        </div>

        <div class="form-group">
            <label>Alamat Lembaga/Organisasi/Komunitas *</label>
            <textarea name="alamat" rows="3" required></textarea>
        </div>

        <div class="form-group">
            <label>Jelaskan Event/Kegiatan/Keperluan yang diusulkan *</label>
            <textarea name="event_detail" rows="4" required></textarea>
        </div>

        <div class="form-group">
            <label>Mengapa harus dibantu oleh ketua? *</label>
            <textarea name="alasan_bantuan" rows="4" required></textarea>
        </div>

        <div class="form-group">
            <label>Kira-kira apa feedback untuk ketua? *</label>
            <textarea name="feedback" rows="3" required></textarea>
        </div>

        <div class="form-group">
            <label>Berapa Jumlahnya? *</label>
            <input type="text" name="jumlah" required>
        </div>

        <div class="form-group">
            <label>Kapan Kegiatannya? *</label>
            <input type="text" name="kapan" placeholder="contoh: 15 Desember 2024" required>
        </div>

        <div class="form-group">
            <label>Dimana Kegiatannya? *</label>
            <input type="text" name="dimana" required>
        </div>

        <div class="form-group">
            <label>Upload Proposal/Foto (PDF, JPG, PNG - Max 10MB)</label>
            <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png">
        </div>

        <button type="submit" class="hk-btn hk-btn-primary">Submit Proposal</button>
    </form>

    <div id="hk-success-message" style="display:none;">
        <h3>Terima Kasih!</h3>
        <p>Proposal Anda telah berhasil dikirim. Kami akan menghubungi Anda melalui WhatsApp.</p>
    </div>
</div>
