bps-rw/Views/Panduan/Index.cshtml

@{
    ViewData["Title"] = "Panduan";
}

<!-- Toast Notification Add/Edit -->
<div id="successToast" class="fixed top-20 right-6 z-[9999] hidden">
    <div class="alert bg-green-50 border border-green-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]">
        <div class="flex-shrink-0">
            <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                <span class="icon text-white text-xs">check</span>
            </div>
        </div>
        <div class="flex-1">
            <h3 class="font-semibold text-gray-900">Panduan berhasil ditambah!</h3>
            <p class="text-sm text-gray-600">Berhasil! Panduan baru telah berhasil ditambahkan.</p>
        </div>
        <button onclick="closeToast()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
            <span class="icon text-lg">close</span>
        </button>
    </div>
</div>

<div class="breadcrumbs text-sm mb-4">
    <ul>
        <li class="text-gray-500"><a>CMS</a></li>
        <li>Panduan</li>
    </ul>
</div>

<!-- Header -->
<div class="flex items-center justify-between mb-6">
    <h3 class="text-xl font-semibold">Panduan</h3>

    <button onclick="modal_add_panduan.showModal()" 
            class="btn rounded-full bg-green-700 hover:bg-green-800 text-white px-4 py-2 flex items-center gap-2" 
            type="button">
        <span class="icon icon-fill">add</span>
        Tambah
    </button>
</div>

<!-- Table -->
<div class="card bg-white shadow-sm">
    <div class="card-body p-0">
        <table class="table table-zebra w-full" id="example">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Judul</th>
                    <th>Deskripsi</th>
                    <th>Jenis</th>
                    <th>Dokumen</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- Modal Add Panduan -->
<dialog id="modal_add_panduan" class="modal">
    <div class="modal-box relative w-full max-w-lg rounded-2xl shadow-lg">
        <label onclick="modal_add_panduan.close()" 
               class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>

        <h3 class="mb-5 text-lg font-semibold">Tambah Panduan</h3>

        <form id="form_add_panduan" class="space-y-5">

            <div>
                <label class="block text-sm font-medium mb-1">
                    Judul <span class="text-red-500">*</span>
                </label>
                <input type="text" id="add_judul_panduan" class="input input-bordered w-full" placeholder="Masukkan judul" required/>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1">
                    Deskripsi <span class="text-red-500">*</span>
                </label>
                <textarea id="add_deskripsi_panduan" class="textarea textarea-bordered w-full h-28" placeholder="Masukkan deskripsi" required></textarea>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1">
                    Jenis Panduan <span class="text-red-500">*</span>
                </label>
                <select id="add_jenis_panduan" class="select select-bordered w-full" required>
                    <option value="">Pilih jenis panduan.</option>
                    <option value="Dokumen">Dokumen</option>
                    <option value="Video">Video</option>
                    <option value="Lainnya">Lainnya</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1">
                    Upload Dokumen <span class="text-red-500">*</span>
                </label>
                <input type="file" id="add_dokumen_panduan" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx" required/>
                <p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1">
                    Link Konten
                </label>
                <input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://" required/>
            </div>

            <div class="modal-action flex justify-end gap-3">
                <button type="button" onclick="modal_add_panduan.close()" class="btn btn-outline btn-sm rounded-full">
                    <span class="icon me-1">cancel</span> Tutup
                </button>
                <button type="submit" class="btn btn-primary btn-sm rounded-full text-white">
                    <span class="icon me-1">save</span> Simpan
                </button>
            </div>
        </form>
    </div>
</dialog>

<!-- Modal Detail Panduan -->
<dialog id="modal_detail_panduan" class="modal">
    <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
        <label onclick="modal_detail_panduan.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
        <h3 class="mb-5 text-lg font-semibold text-gray-800">Detail Panduan</h3>

        <div class="space-y-4">
            <div>
                <label class="text-sm text-gray-500">Judul</label>
                <p id="detail-judul" class="text-gray-900"></p>
            </div>
            <div>
                <label class="text-sm text-gray-500">Deskripsi</label>
                <p id="detail-deskripsi" class="text-gray-900"></p>
            </div>
            <div>
                <label class="text-sm text-gray-500">Jenis</label>
                <p id="detail-jenis" class="text-gray-900"></p>
            </div>
            <div>
                <label class="text-sm text-gray-500">Dokumen</label>
                <div class="mt-1">
                    <button id="detail-dokumen" class="btn btn-sm btn-outline btn-primary">
                        <span class="icon icon-fill me-1">description</span> Dokumen
                    </button>
                </div>
            </div>
        </div>

        <div class="modal-action flex justify-end gap-3">
            <button onclick="modal_detail_panduan.close()" type="button" class="btn btn-outline btn-sm rounded-full">
                <span class="icon me-1">cancel</span> Tutup
            </button>
            <button id="btnEditFromDetail" type="button" class="btn btn-primary btn-sm text-white rounded-full">
                <span class="icon me-1">edit</span> Edit
            </button>
        </div>
    </div>
</dialog>

<!-- Modal Edit Panduan -->
<dialog id="modal_edit_panduan" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box w-full sm:max-w-lg">
        <button class="btn btn-sm btn-circle absolute right-2 top-2" onclick="modal_edit_panduan.close()">✕</button>
        <h3 class="text-lg font-bold mb-4">Edit Panduan</h3>

        <form id="form_edit_panduan" enctype="multipart/form-data">
            <input type="hidden" id="edit_id_panduan" name="Id">
            <div class="space-y-4">

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
                    <input type="text" id="edit_judul_panduan" name="Judul" class="input input-bordered w-full" placeholder="Masukkan judul" required/>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Deskripsi <span class="text-red-500">*</span></legend>
                    <textarea id="edit_deskripsi_panduan" name="Deskripsi" class="textarea textarea-bordered w-full h-32" placeholder="Masukkan deskripsi" required></textarea>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Jenis Panduan <span class="text-red-500">*</span></legend>
                    <select id="edit_jenis_panduan" name="JenisPanduan" class="select select-bordered w-full" required>
                        <option value="">Pilih jenis panduan.</option>
                        <option value="Dokumen">Dokumen</option>
                        <option value="Video">Video</option>
                        <option value="Lainnya">Lainnya</option>
                    </select>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Upload Dokumen (opsional)</legend>
                    <input type="file" id="edit_dokumen_panduan" name="Dokumen" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.mp4"/>
                    <p class="text-xs text-gray-500 mt-1">Biarkan kosong jika tidak ingin mengganti file.</p>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Link Konten</legend>
                    <input type="url" id="edit_link_panduan" name="LinkKonten" class="input input-bordered w-full" placeholder="http://"/>
                </fieldset>

            </div>

            <div class="modal-action flex justify-end gap-3">
                <button onclick="modal_edit_panduan.close()" type="button" class="btn btn-outline btn-sm rounded-full">
                    <span class="icon me-1">cancel</span> Tutup
                </button>
                <button type="submit" class="btn btn-primary btn-sm rounded-full text-white">
                    <span class="icon me-1">save</span> Simpan
                </button>
            </div>
        </form>
    </div>
</dialog>

<script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/datatables/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="/lib/sweetalert2/sweetalert2-11.26.4.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

<script>
$(document).ready(function () {

    var table = new DataTable('#example', {
        ajax: '@Url.Action("Table", "Panduan")',
        scrollX: true,
        autoWidth: true,
        columns: [
            { data: null, render: (d,t,r,m) => m.row+1, orderable:false },
            { data: 'judul' },
            { 
                data: 'deskripsi',
                render: function(d) {
                    return d.length > 50 ? d.substr(0, 50) + "..." : d;
                }
            },
            { data: 'jenis' },
            { data: 'dokumen', render: function(){ 
                return `<div class="flex items-center gap-1 text-green-600 cursor-pointer btn-detail-doc">
                    <span class="icon icon-fill">description</span> Dokumen</div>`; 
            }},
            { data:'aksi', orderable:false, searchable:false, render:data=>data }
        ]
    });

    // Toast functions
    window.closeToast = function(){ $("#successToast").addClass("hidden"); }
    window.closeDeleteToast = function(){ $("#deleteToast").addClass("hidden"); }

    function showSuccessToast(title="Panduan berhasil ditambah!", message="Berhasil! Panduan baru telah berhasil ditambahkan.") {
        $("#successToast .font-semibold").text(title);
        $("#successToast p").text(message);
        $("#successToast").removeClass("hidden");
        setTimeout(()=>{ $("#successToast").addClass("hidden"); }, 4000);
    }

    function showDeleteToast(title="Panduan berhasil dihapus!", message="Data panduan telah berhasil dihapus.") {
        $("#deleteToast .font-semibold").text(title);
        $("#deleteToast p").text(message);
        $("#deleteToast").removeClass("hidden");
        setTimeout(()=>{ $("#deleteToast").addClass("hidden"); }, 4000);
    }

    // Add Panduan
    $("#form_add_panduan").on("submit", function(e){
        e.preventDefault();
        modal_add_panduan.close();
        showSuccessToast();
        table.ajax.reload();
        this.reset();
    });

    // Edit Panduan
    $(document).on("click", ".btn-edit-panduan", function(){
        const row = table.row($(this).parents("tr")).data();
        $("#edit_id_panduan").val(row.id);
        $("#edit_judul_panduan").val(row.judul);
        $("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
        $("#edit_jenis_panduan").val(row.jenis);
        $("#edit_link_panduan").val(row.link ?? "");
        modal_edit_panduan.showModal();
    });

    $("#form_edit_panduan").on("submit", function(e){
        e.preventDefault();
        modal_edit_panduan.close();
        showSuccessToast("Panduan berhasil diperbarui!","Data panduan telah berhasil diperbarui.");
        table.ajax.reload();
    });

    $(document).on("click", ".btn-delete-panduan", function(){
        const row = table.row($(this).parents('tr')).data();
        
        Swal.fire({
            title: 'Apakah Anda yakin?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                showSuccessToast("Panduan berhasil dihapus!", "Data Panduan telah berhasil dihapus.");
                table.ajax.reload();
            }
        });
    });

    // Detail Panduan
    $(document).on("click", ".btn-detail-panduan", function () {
        const row = table.row($(this).parents('tr')).data();
        $('#detail-judul').text(row.judul);
        $('#detail-deskripsi').text(row.deskripsi);
        $('#detail-jenis').text(row.jenis);

        $('#detail-dokumen').off("click").on("click", function(){
            window.open("/uploads/"+row.dokumen,"_blank");
        });

        // Tombol Edit From Detail
        $("#btnEditFromDetail").off("click").on("click", function(){
            modal_detail_panduan.close();
            $("#edit_id_panduan").val(row.id);
            $("#edit_judul_panduan").val(row.judul);
            $("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
            $("#edit_jenis_panduan").val(row.jenis);
            $("#edit_link_panduan").val(row.link ?? "");
            modal_edit_panduan.showModal(); 
        });

        modal_detail_panduan.showModal();
    });

});
</script>