<?php
/**
 * @var string $title
 * @var string $pddikti_url
 * @var string $pddikti_username
 * @var string $pddikti_password
 */
?>
<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>

<div class="row">
    <div class="col-md-8">
        <div class="card glass">
            <div class="card-header">
                <h5 class="m-0"><?= $title; ?></h5>
            </div>
            <div class="card-body">
                
                <?php if(session()->getFlashdata('pesan')) : ?>
                    <div class="alert alert-success">
                        <?= session()->getFlashdata('pesan'); ?>
                    </div>
                <?php endif; ?>

                <form action="<?= base_url('pddikti/saveSetting') ?>" method="post">
                    <?= csrf_field() ?>
                    
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label for="pddikti_url" style="display: block; margin-bottom: 5px; font-weight: 500;">URL Web Service PDDIKTI (Gateway) <span style="color: #ef4444;">*</span></label>
                        <input type="url" class="form-control" id="pddikti_url" name="pddikti_url" value="<?= esc($pddikti_url) ?>" placeholder="http://localhost:3003/ws/live2.php" required style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;">
                        <small style="color: #6b7280; display: block; margin-top: 5px;">Alamat WS lokal neo feeder, biasanya berakhiran /ws/live2.php atau /ws/sandbox2.php</small>
                    </div>

                    <div class="form-group" style="margin-bottom: 15px;">
                        <label for="pddikti_username" style="display: block; margin-bottom: 5px; font-weight: 500;">Username Kampus (Kode PT) <span style="color: #ef4444;">*</span></label>
                        <input type="text" class="form-control" id="pddikti_username" name="pddikti_username" value="<?= esc($pddikti_username) ?>" required style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;">
                    </div>

                    <div class="form-group" style="margin-bottom: 20px;">
                        <label for="pddikti_password" style="display: block; margin-bottom: 5px; font-weight: 500;">Password <span style="color: #ef4444;">*</span></label>
                        <input type="password" class="form-control" id="pddikti_password" name="pddikti_password" value="<?= esc($pddikti_password) ?>" required style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;">
                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 15px;">
                        <button type="submit" class="btn btn-primary" style="padding: 8px 16px;">
                            <i class='bx bx-save'></i> Simpan Pengaturan
                        </button>
                        
                        <button type="button" id="btnTestKoneksi" class="btn" style="padding: 8px 16px; background-color: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer;">
                            <i class='bx bx-wifi'></i> Uji Koneksi PDDIKTI
                        </button>
                    </div>
                </form>

                <div id="testResult" style="display: none; margin-top: 20px; padding: 15px; border-radius: 6px;"></div>

            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card glass" style="background: rgba(59, 130, 246, 0.1); border-left: 4px solid #3b82f6;">
            <div class="card-body">
                <h5 style="color: #1e3a8a;"><i class='bx bx-info-circle'></i> Panduan Koneksi</h5>
                <p style="font-size: 14px; color: #374151; margin-top: 10px;">
                    SIAKAD ITKA melakukan komunikasi dengan Neo Feeder melalui metode <strong>RESTful API</strong>.
                </p>
                <p style="font-size: 14px; color: #374151;">
                    Pastikan aplikasi Neo Feeder Feeder (atau Sandbox) sedang berjalan di server lokal atau server jaringan yang sama sebelum melakukan Uji Koneksi.
                </p>
                <div style="background: #fff; padding: 10px; border-radius: 6px; font-family: monospace; font-size: 12px; color: #ef4444;">
                    PERHATIAN: Username & Password akan disimpan di database. Jaga kerahasiaan akun ini.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('btnTestKoneksi').addEventListener('click', function() {
        const btn = this;
        const resultDiv = document.getElementById('testResult');
        
        btn.innerHTML = "<i class='bx bx-loader-alt bx-spin'></i> Menghubungkan...";
        btn.disabled = true;
        resultDiv.style.display = 'none';

        fetch('<?= base_url('pddikti/testConnection') ?>')
            .then(response => response.json())
            .then(data => {
                btn.innerHTML = "<i class='bx bx-wifi'></i> Uji Koneksi PDDIKTI";
                btn.disabled = false;
                
                resultDiv.style.display = 'block';
                if (data.success) {
                    resultDiv.style.backgroundColor = 'rgba(16, 185, 129, 0.1)';
                    resultDiv.style.border = '1px solid #10b981';
                    resultDiv.style.color = '#047857';
                    resultDiv.innerHTML = `<i class='bx bx-check-circle'></i> <strong>${data.message}</strong>`;
                } else {
                    resultDiv.style.backgroundColor = 'rgba(239, 68, 68, 0.1)';
                    resultDiv.style.border = '1px solid #ef4444';
                    resultDiv.style.color = '#b91c1c';
                    resultDiv.innerHTML = `<i class='bx bx-error-circle'></i> <strong>${data.message}</strong>`;
                }
            })
            .catch(error => {
                btn.innerHTML = "<i class='bx bx-wifi'></i> Uji Koneksi PDDIKTI";
                btn.disabled = false;
                
                resultDiv.style.display = 'block';
                resultDiv.style.backgroundColor = 'rgba(239, 68, 68, 0.1)';
                resultDiv.style.border = '1px solid #ef4444';
                resultDiv.style.color = '#b91c1c';
                resultDiv.innerHTML = `<i class='bx bx-error-circle'></i> <strong>Gagal melakukan request AJAX: ${error}</strong>`;
            });
    });
</script>

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