bps-rw/Views/Regulasi/Index.cshtml

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

<!-- Toast Notification -->
<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 id="toast-title" class="font-semibold text-gray-900">Regulasi berhasil ditambah!</h3>
            <p id="toast-message" class="text-sm text-gray-600">Berhasil! Regulasi 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>Regulasi</li>
    </ul>
</div>

<!-- Header -->
<div class="flex items-center justify-between mb-6">
    <h3 class="text-xl font-semibold">Regulasi</h3>
    <button onclick="modal_add_regulasi.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>

<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>Sub Judul</th>
                    <th>Deskripsi</th>
                    <th>Ditetapkan</th>
                    <th>Berlaku</th>
                    <th>Dokumen</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- Modal Add Regulasi -->
<dialog id="modal_add_regulasi" class="modal">
    <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
        <label onclick="modal_add_regulasi.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">Tambah Regulasi</h3>
        
        <form id="form_add_regulasi" class="gap-y-6">
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
                <input type="text" id="add_judul" class="input w-full" placeholder="Masukkan judul" required/>
            </fieldset>

            <fieldset class="fieldset">
                <legend class="fieldset-legend">Sub Judul <span class="text-red-500">*</span></legend>
                <textarea id="add_subjudul" class="textarea h-24 w-full" placeholder="Masukkan subjudul" required></textarea>
            </fieldset>

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

            <div class="grid grid-cols-2 gap-4">
                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Tanggal Penetapan <span class="text-red-500">*</span></legend>
                    <input type="date" id="add_tanggal" class="input w-full" required/>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Status <span class="text-red-500">*</span></legend>
                    <select id="add_status" class="select w-full" required>
                        <option value="">Pilih status</option>
                        <option value="Berlaku">Berlaku</option>
                        <option value="Tidak Berlaku">Tidak Berlaku</option>
                    </select>
                </fieldset>
            </div>

            <fieldset class="fieldset">
                <legend class="fieldset-legend">Upload Dokumen <span class="text-red-500">*</span></legend>
                <input type="file" id="add_dokumen" class="file-input w-full" accept=".pdf,.doc,.docx" required/>
                <p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB</p>
            </fieldset>

            <div class="modal-action flex justify-end gap-3">
                <button onclick="modal_add_regulasi.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>

<!-- Modal Edit Regulasi -->
<dialog id="modal_edit_regulasi" class="modal">
    <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
        <label onclick="modal_edit_regulasi.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">Edit Regulasi</h3>
        
        <form id="form_edit_regulasi" class="gap-y-6">
            <input type="hidden" id="edit_id">
            
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
                <input type="text" id="edit_judul" class="input w-full" placeholder="Masukkan judul" required/>
            </fieldset>

            <fieldset class="fieldset">
                <legend class="fieldset-legend">Sub Judul <span class="text-red-500">*</span></legend>
                <textarea id="edit_subjudul" class="textarea h-24 w-full" placeholder="Masukkan subjudul" required></textarea>
            </fieldset>

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

            <div class="grid grid-cols-2 gap-4">
                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Tanggal Penetapan <span class="text-red-500">*</span></legend>
                    <input type="date" id="edit_tanggal" class="input w-full" required/>
                </fieldset>

                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Status <span class="text-red-500">*</span></legend>
                    <select id="edit_status" class="select w-full" required>
                        <option value="">Pilih status</option>
                        <option value="Berlaku">Berlaku</option>
                        <option value="Tidak Berlaku">Tidak Berlaku</option>
                    </select>
                </fieldset>
            </div>

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

            <div class="modal-action flex justify-end gap-3">
                <button onclick="modal_edit_regulasi.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>

<!-- Modal Detail Regulasi -->
<dialog id="modal_detail_regulasi" class="modal">
    <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
        <label onclick="modal_detail_regulasi.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 Regulasi</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">Sub Judul</label>
                <p id="detail-subjudul" 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">Ditetapkan</label>
                <p id="detail-tanggal" class="text-gray-900"></p>
            </div>

            <div>
                <label class="text-sm text-gray-500">Status</label>
                <p id="detail-status" 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_regulasi.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>

<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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function () {

    var table = new DataTable('#example', {
        ajax: '@Url.Action("Table", "Regulasi")',
        scrollX: true,
        autoWidth: true,
        initComplete: function () {
            $('div.dt-scroll-body thead').css('visibility', 'collapse');
        },
        columns: [
            { data: null, render: (d, t, r, m) => m.row + 1, orderable: false },
            { data: 'judul' },
            { data: 'subJudul' },
            {
                data: 'deskripsi',
                render: function (data) {
                    if (!data) return '-';
                    const max = 80; 
                    return data.length > max ? data.substring(0, max) + "..." : data;
                }
            },
            { data: 'tanggalDitetapkan' },
            {
                data: 'statusBerlaku',
                render: function () {
                    return `<input type="checkbox" class="toggle toggle-success" checked />`;
                }
            },
            {
                data: 'dokumen',
                render: function () {
                    return `<div class="flex items-center gap-1 text-green-600">
                        <span class="icon icon-fill">description</span> Dokumen</div>`;
                }
            },
            {
                data: 'aksi',
                orderable: false,
                searchable: false,
                render: function (data) { return data; }
            }
        ],
        columnDefs: [
            { className: "whitespace-normal", targets: [1, 2, 3] }
        ]
    });

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

    function showSuccessToast(title, message) {
        $("#toast-title").text(title);
        $("#toast-message").text(message);
        $("#successToast").removeClass("hidden");
        setTimeout(() => { $("#successToast").addClass("hidden"); }, 4000);
    }

    // Add Regulasi
    $("#form_add_regulasi").on("submit", function(e){
        e.preventDefault();
        modal_add_regulasi.close();
        showSuccessToast("Regulasi berhasil ditambah!", "Berhasil! Regulasi baru telah berhasil ditambahkan.");
        table.ajax.reload();
        this.reset();
    });

    // Edit Regulasi
    $(document).on("click", ".btn-edit-regulasi", function(){
        const row = table.row($(this).parents("tr")).data();
        $("#edit_id").val(row.id);
        $("#edit_judul").val(row.judul);
        $("#edit_subjudul").val(row.subJudul);
        $("#edit_deskripsi").val(row.deskripsi);
        $("#edit_tanggal").val(row.tanggalDitetapkan);
        $("#edit_status").val(row.statusBerlaku);
        modal_edit_regulasi.showModal();
    });

    $("#form_edit_regulasi").on("submit", function(e){
        e.preventDefault();
        modal_edit_regulasi.close();
        showSuccessToast("Regulasi berhasil diperbarui!", "Data regulasi telah berhasil diperbarui.");
        table.ajax.reload();
    });

    $(document).on("click", ".btn-delete-regulasi", 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("Regulasi berhasil dihapus!", "Data regulasi telah berhasil dihapus.");
                table.ajax.reload();
            }
        });
    });

    // Detail Regulasi
    $(document).on('click', '.btn-detail-regulasi', function() {
        const row = table.row($(this).parents('tr')).data();
        $('#detail-judul').text(row.judul);
        $('#detail-subjudul').text(row.subJudul);
        $('#detail-deskripsi').text(row.deskripsi || '-');
        $('#detail-tanggal').text(row.tanggalDitetapkan);
        $('#detail-status').text(row.statusBerlaku === 'Ya' ? 'Berlaku' : 'Tidak Berlaku');

        $('#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_regulasi.close();
            $("#edit_id").val(row.id);
            $("#edit_judul").val(row.judul);
            $("#edit_subjudul").val(row.subJudul);
            $("#edit_deskripsi").val(row.deskripsi);
            $("#edit_tanggal").val(row.tanggalDitetapkan);
            $("#edit_status").val(row.statusBerlaku);
            modal_edit_regulasi.showModal();
        });
        
        modal_detail_regulasi.showModal();
    });

});
</script>