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

<div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="mb-0 fw-bold">Links</h5>
    <?php if ($isAdmin): ?>
    <button class="btn btn-primary btn-sm" onclick="openModal()">
        <i class="bi bi-plus-lg me-1"></i> Tambah Link
    </button>
    <?php endif; ?>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
<?php if (empty($links)): ?>
    <div class="col-12">
        <div class="alert alert-info">Belum ada link. <?= $isAdmin ? 'Klik "Tambah Link" untuk menambahkan.' : '' ?></div>
    </div>
<?php else: ?>
    <?php foreach ($links as $link): ?>
    <div class="col" id="link-card-<?= $link['id'] ?>">
        <div class="card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="flex-shrink-0" style="width:40px;height:40px;background:#dbeafe;border-radius:.5rem;display:flex;align-items:center;justify-content:center;">
                    <i class="bi bi-link-45deg text-primary fs-5"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <div class="fw-semibold text-truncate"><?= esc($link['nama']) ?></div>
                    <a href="<?= esc($link['url']) ?>" target="_blank" rel="noopener" class="text-muted small text-truncate d-block">
                        <?= esc($link['url']) ?>
                    </a>
                </div>
                <?php if ($isAdmin): ?>
                <div class="flex-shrink-0 d-flex flex-column gap-1">
                    <button class="btn btn-sm btn-outline-secondary py-0 px-2"
                        onclick='editLink(<?= json_encode($link) ?>)' title="Edit">
                        <i class="bi bi-pencil" style="font-size:.75rem;"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger py-0 px-2"
                        onclick="deleteLink(<?= $link['id'] ?>, '<?= esc($link['nama'], 'js') ?>')" title="Hapus">
                        <i class="bi bi-trash" style="font-size:.75rem;"></i>
                    </button>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
<?php endif; ?>
</div>

<?php if ($isAdmin): ?>
<!-- Modal Add/Edit -->
<div class="modal fade" id="linkModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Tambah Link</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="linkId" value="0">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Nama <span class="text-danger">*</span></label>
                    <input type="text" id="linkNama" class="form-control" placeholder="Nama link">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">URL <span class="text-danger">*</span></label>
                    <input type="url" id="linkUrl" class="form-control" placeholder="https://...">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="saveLink()">Simpan</button>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<?= $this->endSection() ?>
<?= $this->section('scripts') ?>
<?php if ($isAdmin): ?>
<script>
var linkModal = new bootstrap.Modal(document.getElementById('linkModal'));

function openModal(id, nama, url) {
    document.getElementById('modalTitle').textContent = 'Tambah Link';
    document.getElementById('linkId').value = 0;
    document.getElementById('linkNama').value = '';
    document.getElementById('linkUrl').value = '';
    linkModal.show();
}

function editLink(link) {
    document.getElementById('modalTitle').textContent = 'Edit Link';
    document.getElementById('linkId').value  = link.id;
    document.getElementById('linkNama').value = link.nama;
    document.getElementById('linkUrl').value  = link.url;
    linkModal.show();
}

function saveLink() {
    const id   = document.getElementById('linkId').value;
    const nama = document.getElementById('linkNama').value.trim();
    const url  = document.getElementById('linkUrl').value.trim();
    if (!nama || !url) { Swal.fire('Perhatian', 'Nama dan URL wajib diisi.', 'warning'); return; }

    postData('links/save', {id, nama, url}, function() {
        Swal.fire({icon:'success', title:'Berhasil', text:'Link disimpan.', timer:1500, showConfirmButton:false});
        setTimeout(() => location.reload(), 1500);
        linkModal.hide();
    });
}

function deleteLink(id, nama) {
    Swal.fire({
        title: 'Hapus Link?', text: `Link "${nama}" akan dihapus permanen.`,
        icon: 'warning', showCancelButton: true,
        confirmButtonColor: '#ef4444', confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) {
            postData('links/delete/' + id, {}, function() {
                document.getElementById('link-card-' + id).remove();
                Swal.fire({icon:'success', title:'Terhapus', timer:1200, showConfirmButton:false});
            });
        }
    });
}
</script>
<?php endif; ?>
<?= $this->endSection() ?>
