<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row">
    <div class="col-12">

        <?php if (session()->getFlashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show shadow-sm">
            <i class="bi bi-check-circle me-2"></i><?= session()->getFlashdata('success') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger alert-dismissible fade show shadow-sm">
            <i class="bi bi-exclamation-circle me-2"></i><?= session()->getFlashdata('error') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <!-- Header -->
        <div class="card border-0 shadow-sm mb-4"
             style="background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); border-radius: 14px;">
            <div class="card-body p-4 text-white d-flex align-items-center gap-3">
                <div style="font-size: 2.5rem;">📱</div>
                <div>
                    <h5 class="fw-bold mb-0">Pengaturan WhatsApp</h5>
                    <p class="mb-0 opacity-75 small">Integrasi notifikasi via Sidobe API Gateway</p>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Form -->
<form action="/settings/whatsapp/save" method="POST">
    <?= csrf_field() ?>

    <div class="row">
        <!-- Kolom Kiri: Konfigurasi WhatsApp Gateway -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                    <h6 class="fw-bold mb-0"><i class="bi bi-gear me-2 text-success"></i>Konfigurasi WhatsApp Gateway</h6>
                </div>
                <div class="card-body p-4">

                    <!-- Toggle Aktif -->
                    <div class="mb-4 p-3 rounded" style="background: #f8f9fa; border-left: 4px solid #25d366;">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wa_enabled" name="wa_enabled" value="1"
                                   <?= ($config['wa_enabled'] ?? '0') === '1' ? 'checked' : '' ?>>
                            <label class="form-check-label fw-semibold" for="wa_enabled">
                                Aktifkan Notifikasi WhatsApp
                            </label>
                        </div>
                        <small class="text-muted d-block mt-1">
                            Jika dinonaktifkan, seluruh fitur pengiriman notifikasi WhatsApp tidak akan berfungsi.
                        </small>
                    </div>

                    <!-- Provider Selection -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="wa_provider">
                            Pilih Provider WhatsApp Gateway <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" id="wa_provider" name="wa_provider" style="border-radius: 8px;">
                            <option value="sidobe" <?= ($config['wa_provider'] ?? 'sidobe') === 'sidobe' ? 'selected' : '' ?>>Sidobe (Default)</option>
                            <option value="fonnte" <?= ($config['wa_provider'] ?? 'sidobe') === 'fonnte' ? 'selected' : '' ?>>Fonnte</option>
                        </select>
                    </div>

                    <!-- Sidobe Configuration Block -->
                    <div id="sidobe_config_block" class="wa-provider-block">
                        <!-- API Key -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold" for="wa_sidobe_api_key">
                                API Key Sidobe <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control font-monospace"
                                   id="wa_sidobe_api_key" name="wa_sidobe_api_key"
                                   value="<?= esc($config['wa_sidobe_api_key'] ?? '') ?>"
                                   placeholder="Masukkan API key dari dashboard Sidobe" style="border-radius: 8px;">
                            <div class="form-text">
                                Dapatkan API key di <a href="https://sidobe.com" target="_blank">sidobe.com</a> → Dashboard → API Key
                            </div>
                        </div>

                        <!-- Nomor Pengirim -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold" for="wa_sidobe_sender">
                                Nomor Pengirim (Sender) <span class="text-muted fw-normal">(opsional)</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text" style="border-radius: 8px 0 0 8px;"><i class="bi bi-phone"></i></span>
                                <input type="text" class="form-control"
                                       id="wa_sidobe_sender" name="wa_sidobe_sender"
                                       value="<?= esc($config['wa_sidobe_sender'] ?? '') ?>"
                                       placeholder="628xxxxxxxxxx" style="border-radius: 0 8px 8px 0;">
                            </div>
                            <div class="form-text">
                                Nomor WhatsApp yang terhubung di Sidobe. Jika dikosongkan, Sidobe akan otomatis menggunakan perangkat default Anda. Format: <code>628xxxxxxxxxx</code>
                            </div>
                        </div>
                    </div>

                    <!-- Fonnte Configuration Block -->
                    <div id="fonnte_config_block" class="wa-provider-block">
                        <!-- API Token -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold" for="wa_fonnte_token">
                                API Token Fonnte <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control font-monospace"
                                   id="wa_fonnte_token" name="wa_fonnte_token"
                                   value="<?= esc($config['wa_fonnte_token'] ?? '') ?>"
                                   placeholder="Masukkan API token / authorization token dari Fonnte" style="border-radius: 8px;">
                            <div class="form-text">
                                Dapatkan API token di <a href="https://fonnte.com" target="_blank">fonnte.com</a> → Dashboard
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Tombol Aksi -->
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-success px-4">
                    <i class="bi bi-save me-2"></i>Simpan Pengaturan
                </button>
                <a href="/settings" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-2"></i>Kembali
                </a>
            </div>
        </div>

        <!-- Kolom Kanan: Kontrol Fitur & Panduan -->
        <div class="col-lg-6 mb-4">
            <!-- Kontrol Fitur Modular -->
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                    <h6 class="fw-bold mb-0"><i class="bi bi-sliders me-2 text-success"></i>Kontrol Fitur WhatsApp</h6>
                </div>
                <div class="card-body p-4">
                    <!-- Fitur Laporan Tahfidz -->
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="fw-semibold mb-1">Laporan Tahfidz</h6>
                            <small class="text-muted d-block mt-1">Mengirimkan rekap hafalan Quran siswa ke grup kelas atau langsung ke orang tua.</small>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wa_enable_tahfidz" name="wa_enable_tahfidz" value="1"
                                   <?= ($config['wa_enable_tahfidz'] ?? '0') === '1' ? 'checked' : '' ?>>
                        </div>
                    </div>

                    <!-- Fitur Laporan Tabungan -->
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="fw-semibold mb-1">Laporan Tabungan Siswa</h6>
                            <small class="text-muted d-block mt-1">Mengirimkan laporan tabungan harian, bulanan, dan tahunan ke nomor HP orang tua/wali siswa.</small>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wa_enable_tabungan" name="wa_enable_tabungan" value="1"
                                   <?= ($config['wa_enable_tabungan'] ?? '0') === '1' ? 'checked' : '' ?>>
                        </div>
                    </div>

                    <!-- Fitur Jadwal Harian Guru -->
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="fw-semibold mb-1">Jadwal Harian Guru</h6>
                            <small class="text-muted d-block mt-1">Mengirimkan jadwal mengajar harian otomatis kepada guru setiap pagi hari.</small>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wa_enable_schedule" name="wa_enable_schedule" value="1"
                                   <?= ($config['wa_enable_schedule'] ?? '0') === '1' ? 'checked' : '' ?>>
                        </div>
                    </div>

                    <!-- Fitur Rekap Absensi Siswa -->
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="fw-semibold mb-1">Rekap Absensi Harian</h6>
                            <small class="text-muted d-block mt-1">Mengirimkan rekap siswa tidak masuk per kelas ke grup sekolah.</small>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wa_enable_attendance" name="wa_enable_attendance" value="1"
                                   <?= ($config['wa_enable_attendance'] ?? '0') === '1' ? 'checked' : '' ?>>
                        </div>
                    </div>

                    <!-- Fitur Tagihan Jurnal Guru -->
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="fw-semibold mb-1">Laporan Jurnal Mengajar</h6>
                            <small class="text-muted d-block mt-1">Mengirimkan tagihan guru yang belum mengisi jurnal mengajar harian ke grup sekolah.</small>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wa_enable_journal" name="wa_enable_journal" value="1"
                                   <?= ($config['wa_enable_journal'] ?? '0') === '1' ? 'checked' : '' ?>>
                        </div>
                    </div>

                    <!-- Target ID Grup WhatsApp Absensi -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="wa_group_id_attendance">
                            ID Grup WhatsApp Absensi Siswa <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="wa_group_id_attendance" name="wa_group_id_attendance" 
                               value="<?= esc($config['wa_group_id_attendance'] ?? '') ?>" 
                               placeholder="Contoh: 628123456789-1625000000@g.us" style="border-radius: 8px;">
                        <small class="text-muted d-block mt-1">
                            Masukkan ID grup WhatsApp tujuan untuk mengirim rekap absensi harian siswa.
                        </small>
                    </div>

                    <!-- Target ID Grup WhatsApp Jurnal -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="wa_group_id_journal">
                            ID Grup WhatsApp Jurnal Mengajar <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="wa_group_id_journal" name="wa_group_id_journal" 
                               value="<?= esc($config['wa_group_id_journal'] ?? '') ?>" 
                               placeholder="Contoh: 628123456789-1625000000@g.us" style="border-radius: 8px;">
                        <small class="text-muted d-block mt-1">
                            Masukkan ID grup WhatsApp tujuan untuk mengirim laporan jurnal mengajar guru.
                        </small>
                    </div>
                </div>
            </div>

            <!-- Info Panduan Cara Menggunakan -->
            <div class="card border-0 shadow-sm mb-4 border-start border-4 border-info">
                <div class="card-body p-3">
                    <h6 class="fw-bold text-info mb-2"><i class="bi bi-info-circle me-2"></i>Cara Menggunakan</h6>
                    <div id="sidobe_help" class="help-block small text-muted">
                        <ol class="mb-0 ps-3">
                            <li>Daftar dan login di <strong>sidobe.com</strong></li>
                            <li>Hubungkan nomor WA dengan scan QR di dashboard Sidobe</li>
                            <li>Salin <strong>API Key</strong> dan <strong>nomor pengirim</strong>, isi di form ini</li>
                            <li>Sistem akan menggunakan API Sidobe untuk mengirim notifikasi</li>
                        </ol>
                    </div>
                    <div id="fonnte_help" class="help-block small text-muted">
                        <ol class="mb-0 ps-3">
                            <li>Daftar dan login di <strong>fonnte.com</strong></li>
                            <li>Hubungkan perangkat WhatsApp Anda di dashboard Fonnte</li>
                            <li>Salin <strong>API Token / Authorization Token</strong>, isi di form ini</li>
                            <li>Sistem akan menggunakan API Fonnte untuk mengirim notifikasi</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const waProvider = document.getElementById('wa_provider');
    const sidobeBlock = document.getElementById('sidobe_config_block');
    const fonnteBlock = document.getElementById('fonnte_config_block');
    const sidobeHelp = document.getElementById('sidobe_help');
    const fonnteHelp = document.getElementById('fonnte_help');

    function toggleProviderFields() {
        const val = waProvider.value;
        if (val === 'fonnte') {
            sidobeBlock.classList.add('d-none');
            fonnteBlock.classList.remove('d-none');
            sidobeHelp.classList.add('d-none');
            fonnteHelp.classList.remove('d-none');
        } else {
            sidobeBlock.classList.remove('d-none');
            fonnteBlock.classList.add('d-none');
            sidobeHelp.classList.remove('d-none');
            fonnteHelp.classList.add('d-none');
        }
    }

    waProvider.addEventListener('change', toggleProviderFields);
    toggleProviderFields(); // Run once on load
});
</script>
<?= $this->endSection() ?>
