<?= $this->extend('layout/tempadmin');?>

<?= $this->section('css') ?>
<style type="text/css">
	/* ══════ TOPBAR ══════ */
    .topbar { background:#fff; border-bottom:1px solid #e2e8f0; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:30; }
    .topbar-icon-btn { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#64748b; cursor:pointer; transition:all .12s; position:relative; }
    .topbar-icon-btn:hover { background:#f1f5f9; }
    .notif-dot { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px; border-radius:50%; background:#3b82f6; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }

    /* ══════ PANEL ══════ */
    .panel2 { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:24px 26px; }
    .panel2-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
    .panel2-title { font-size:14px; font-weight:700; color:#1e293b; }

    /* ══════ FORM ══════ */
    .form-group { margin-bottom:20px; }
    .form-label { display:block; font-size:12.5px; font-weight:700; color:#334155; margin-bottom:7px; }
    .form-label .req { color:#dc2626; }
    .form-hint { font-size:10.5px; color:#94a3b8; margin-top:6px; }

    .form-input, .form-select, .form-textarea {
        width:100%; border:1px solid #e2e8f0; border-radius:10px; padding:11px 14px;
        font-size:13px; font-weight:500; color:#1e293b; background:#fff; transition:all .12s;
        font-family:'Inter',sans-serif;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
        outline:none; border-color:#0099b8; box-shadow:0 0 0 3px rgba(0,153,184,.12);
    }
    .form-textarea { resize:vertical; min-height:120px; }

    .input-icon-wrap { position:relative; }
    .input-icon-wrap i.left-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:12.5px; }
    .input-icon-wrap .form-input { padding-left:38px; }
    .input-icon-wrap .form-input.has-suffix { padding-right:60px; }
    .input-suffix { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:10.5px; font-weight:700; color:#64748b; background:#f1f5f9; padding:5px 9px; border-radius:7px; }

    /* TAB TIPE DOKUMEN */
    .type-tab-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
    .type-tab { border:1.5px solid #e2e8f0; border-radius:12px; padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:all .15s; background:#fff; }
    .type-tab:hover { border-color:#0099b8; background:#f8fafc; }
    .type-tab.active { border-color:#0099b8; background:rgba(0,153,184,.07); box-shadow:0 0 0 3px rgba(0,153,184,.10); }
    .type-tab-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; }
    .ti-word { background:#2563eb; }
    .ti-excel { background:#16a34a; }
    .ti-ppt { background:#ea580c; }
    .ti-pdf { background:#dc2626; }
    .ti-zip { background:#9333ea; }
    .type-tab-label { font-size:10.5px; font-weight:700; color:#475569; }

    .btn-primary { background:#0099b8; color:#fff; font-size:13px; font-weight:700; padding:12px 22px; border-radius:10px; display:flex; align-items:center; gap:8px; cursor:pointer; transition:all .15s; box-shadow:0 4px 14px rgba(0,153,184,.3); }
    .btn-primary:hover { background:#007e9a; }
    .btn-secondary { background:#fff; color:#475569; border:1px solid #e2e8f0; font-size:13px; font-weight:700; padding:12px 22px; border-radius:10px; display:flex; align-items:center; gap:8px; cursor:pointer; transition:all .15s; }
    .btn-secondary:hover { background:#f8fafc; }

    .preview-card { display:flex; align-items:center; gap:14px; border:1px solid #e2e8f0; border-radius:14px; padding:16px; background:#f8fafc; }
    .preview-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; flex-shrink:0; }
    .preview-name { font-size:13.5px; font-weight:700; color:#1e293b; }
    .preview-meta { font-size:11px; color:#94a3b8; margin-top:2px; }
    .preview-link { font-size:11px; color:#0099b8; font-weight:600; margin-top:3px; word-break:break-all; }
</style>
<?= $this->endSection(); ?>

<?= $this->section('conten');?>
<div class="main-area">

    <!-- TOPBAR -->
    <div class="topbar">
        <div class="flex items-center gap-4">
            <button class="topbar-icon-btn"><i class="fa-solid fa-bars"></i></button>
            <div>
                <div class="text-[10.5px] text-slate-400 font-semibold flex items-center gap-1.5">
                    <a class="hover:text-[#0099b8] cursor-pointer">Dokumen</a> <i class="fa-solid fa-chevron-right" style="font-size:8px;"></i> <span class="text-slate-600">Tambah Dokumen</span>
                </div>
                <h1 class="text-lg font-bold text-slate-800">Input Dokumen Baru</h1>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <button class="topbar-icon-btn">
                <i class="fa-regular fa-bell"></i>
                <span class="notif-dot">3</span>
            </button>
            <div class="h-7 w-px bg-slate-200 mx-2"></div>
            <div class="flex items-center gap-2.5 cursor-pointer">
                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-[#0099b8] to-[#0066cc] flex items-center justify-center text-white text-sm font-bold">A</div>
                <div class="hidden md:block">
                    <div class="text-xs font-bold text-slate-700">Administrator</div>
                    <div class="text-[10px] text-slate-400">Super Admin</div>
                </div>
            </div>
        </div>
    </div>

    <div class="p-7 space-y-6 max-w-8xl">
        <?php if(session()->getFlashdata('success')): ?>
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: '<?= session()->getFlashdata('success'); ?>',
                timer: 2000,
                showConfirmButton: false
            });
        </script>
    <?php endif; ?>

    <?php if(session()->getFlashdata('error')): ?>
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: '<?= session()->getFlashdata('error'); ?>'
        });
    </script>
<?php endif; ?>
        <form action="<?= base_url('admin/simpandoc') ?>" method="post" class="space-y-6">
            <?= csrf_field(); ?>

            <!-- INFORMASI DOKUMEN -->
            <div class="panel2">
                <div class="panel2-head">
                    <div class="panel2-title"><i class="fa-solid fa-circle-info text-[#0099b8] mr-1.5"></i> Informasi Dokumen</div>
                </div>

                <div class="form-group">
                    <label class="form-label">Nama Dokumen <span class="req">*</span></label>
                    <div class="input-icon-wrap">
                        <i class="fa-solid fa-file-lines left-icon"></i>
                        <input type="text" name="n_dokumen" class="form-input" placeholder="Contoh: Modul Pembelajaran Matematika Kelas 10" id="docName">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Tipe Dokumen <span class="req">*</span></label>
                    <div class="type-tab-grid">
                        <div class="type-tab active" data-type="word">
                            <div class="type-tab-icon ti-word"><i class="fa-solid fa-file-word"></i></div>
                            <span class="type-tab-label">Word</span>
                        </div>
                        <div class="type-tab" data-type="excel">
                            <div class="type-tab-icon ti-excel"><i class="fa-solid fa-file-excel"></i></div>
                            <span class="type-tab-label">Excel</span>
                        </div>
                        <div class="type-tab" data-type="ppt">
                            <div class="type-tab-icon ti-ppt"><i class="fa-solid fa-file-powerpoint"></i></div>
                            <span class="type-tab-label">PowerPoint</span>
                        </div>
                        <div class="type-tab" data-type="pdf">
                            <div class="type-tab-icon ti-pdf"><i class="fa-solid fa-file-pdf"></i></div>
                            <span class="type-tab-label">PDF</span>
                        </div>
                        <div class="type-tab" data-type="zip">
                            <div class="type-tab-icon ti-zip"><i class="fa-solid fa-file-zipper"></i></div>
                            <span class="type-tab-label">ZIP</span>
                        </div>
                    </div>
                    <input type="hidden" name="t_dokumen" id="docType" value="word">
                </div>

                <div class="form-group">
                    <label class="form-label">Link Google Drive <span class="req">*</span></label>
                    <div class="input-icon-wrap">
                        <i class="fa-brands fa-google-drive left-icon"></i>
                        <input type="text" name="link_dokumen" class="form-input" placeholder="https://drive.google.com/file/d/..." id="driveLink">
                    </div>
                    <div class="form-hint">Pastikan akses file di Google Drive sudah diatur ke "Siapa saja yang memiliki link".</div>
                </div>

                <div class="form-group mb-0">
                    <label class="form-label">Ukuran File <span class="req">*</span></label>
                    <div class="input-icon-wrap">
                        <i class="fa-solid fa-weight-hanging left-icon"></i>
                        <input type="text" name="ukuran" class="form-input has-suffix" placeholder="Contoh: 2.4" id="fileSize">
                        <span class="input-suffix">MB</span>
                    </div>
                </div>
            </div>

            <!-- TENTANG DOKUMEN -->
            <div class="panel2">
                <div class="panel2-head">
                    <div class="panel2-title"><i class="fa-solid fa-align-left text-[#0099b8] mr-1.5"></i> Tentang Dokumen Ini</div>
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Deskripsi / Tentang Dokumen <span class="req">*</span></label>
                    <textarea name="deskripsi" class="form-textarea" placeholder="Jelaskan isi dokumen ini, cakupan materi, atau hal lain yang perlu diketahui pengguna..." id="docAbout"></textarea>
                    <div class="form-hint">Deskripsi ini akan ditampilkan di halaman detail dokumen.</div>
                </div>
            </div>

            <!-- PREVIEW -->
            <div class="panel2">
                <div class="panel2-head">
                    <div class="panel2-title"><i class="fa-solid fa-eye text-[#0099b8] mr-1.5"></i> Preview</div>
                </div>
                <div class="preview-card">
                    <div class="preview-icon ti-word" id="previewIcon"><i class="fa-solid fa-file-word"></i></div>
                    <div class="flex-1 min-w-0">
                        <div class="preview-name" id="previewName">Nama dokumen akan tampil di sini</div>
                        <div class="preview-meta" id="previewMeta">Tipe: Word &nbsp;•&nbsp; Ukuran: -</div>
                        <div class="preview-link" id="previewLink">Link Drive belum diisi</div>
                    </div>
                </div>
            </div>

            <!-- AKSI -->
            <div class="flex items-center justify-end gap-3">
                <button type="button" class="btn-secondary"><i class="fa-solid fa-xmark"></i> Batal</button>
                <button type="submit" class="btn-primary"><i class="fa-solid fa-circle-check"></i> Simpan Dokumen</button>
            </div>
        </form>

        <!-- FOOTER -->
        <div class="flex items-center justify-between pt-2 text-[11px] text-slate-400 font-medium">
            <span>&copy; 2026 Pena Ilmu. All rights reserved.</span>
            <span>Versi 1.0.0</span>
        </div>

    </div>
</div>
<?= $this->endSection(); ?>

<?= $this->section('myscript') ?>
<script>
    const typeIcons = {
        word:  { icon:'fa-file-word', cls:'ti-word', label:'Word' },
        excel: { icon:'fa-file-excel', cls:'ti-excel', label:'Excel' },
        ppt:   { icon:'fa-file-powerpoint', cls:'ti-ppt', label:'PowerPoint' },
        pdf:   { icon:'fa-file-pdf', cls:'ti-pdf', label:'PDF' },
        zip:   { icon:'fa-file-zipper', cls:'ti-zip', label:'ZIP' },
    };
    let currentType = 'word';

    function updatePreview() {
        const name = document.getElementById('docName').value || 'Nama dokumen akan tampil di sini';
        const size = document.getElementById('fileSize').value;
        const link = document.getElementById('driveLink').value;

        document.getElementById('previewName').textContent = name;
        document.getElementById('previewMeta').textContent =
        'Tipe: ' + typeIcons[currentType].label + ' \u2022 Ukuran: ' + (size ? size + ' MB' : '-');
        document.getElementById('previewLink').textContent = link || 'Link Drive belum diisi';

        const iconEl = document.getElementById('previewIcon');
        iconEl.className = 'preview-icon ' + typeIcons[currentType].cls;
        iconEl.innerHTML = '<i class="fa-solid ' + typeIcons[currentType].icon + '"></i>';
    }

    document.querySelectorAll('.type-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.type-tab').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            currentType = tab.dataset.type;
                 // simpan ke hidden input
            document.getElementById('docType').value = currentType;
            updatePreview();
        });
    });

    ['docName','fileSize','driveLink'].forEach(id => {
        document.getElementById(id).addEventListener('input', updatePreview);
    });

    updatePreview();
</script>
<?= $this->endSection(); ?>
