update

app/Http/Controllers/HomeController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\File;
+
+class HomeController extends Controller
+{
+    public function index()
+    {
+        $popup = json_decode(File::get(public_path('assets/json/home/popup.json')), true);
+        $faqs = json_decode(File::get(public_path('assets/json/home/faq.json')), true);
+        $heros = json_decode(File::get(public_path('assets/json/home/hero.json')), true);
+        $konten = json_decode(File::get(public_path('assets/json/home/news.json')), true);
+
+         usort($konten, function($a, $b) {
+            return strcmp($b['date'], $a['date']);
+        });
+
+        $newsItems  = array_values(array_filter($konten, fn($i) => $i['type'] === 'news'));
+        $videoItems = array_values(array_filter($konten, fn($i) => $i['type'] === 'video'));
+
+        return view('frontend.home', compact('popup', 'heros','faqs', 'newsItems', 'videoItems'));
+    }
+}

app/Http/Controllers/NewsController.php

@@ -16,4 +16,15 @@ class NewsController extends Controller
     {
         return view('frontend.news_detail');
     }
+
+    public function index_newsvideo()
+    {
+        return view('news.index_news');
+    }
+
+
+    public function create_newsvideo()
+    {
+        return view('news.create_news');
+    }
 }

app/Http/Controllers/Persetujuan/AddendumController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class AddendumController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.addendum.index_addendum');
+    }
+
+    public function view()
+    {
+        return view('persetujuanlingkungan.addendum.view_addendum');
+    }
+}

app/Http/Controllers/Persetujuan/AmdalController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class AmdalController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.amdal.index_amdal');
+    }
+
+    public function view()
+    {
+        return view('persetujuanlingkungan.amdal.view_amdal');
+    }
+}

app/Http/Controllers/Persetujuan/DelhController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class DelhController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.delh.index_delh');
+    }
+
+    public function view()
+    {
+        return view('persetujuanlingkungan.delh.view_delh');
+    }
+}

app/Http/Controllers/Persetujuan/DplhController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class DplhController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.dplh.index_dplh');
+    }
+
+    public function view()
+    {
+        return view('persetujuanlingkungan.dplh.view_dplh');
+    }
+}

app/Http/Controllers/Persetujuan/KerangkaController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class KerangkaController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.kerangka_acuan.index_kerangka_acuan');
+    }
+
+    public function create()
+    {
+        return view('persetujuanlingkungan.kerangka_acuan.create_kerangka_acuan');
+    }
+}

app/Http/Controllers/Persetujuan/RklController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class RklController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.rkl.index_rkl');
+    }
+
+    public function view()
+    {
+        return view('persetujuanlingkungan.rkl.view_rkl');
+    }
+}

app/Http/Controllers/Persetujuan/UklController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Persetujuan;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class UklController extends Controller
+{
+    public function index()
+    {
+        return view('persetujuanlingkungan.ukl.index_ukl');
+    }
+
+    public function view()
+    {
+        return view('persetujuanlingkungan.ukl.view_ukl');
+    }
+}

app/Http/Controllers/PersetujuanTeknisController.php

@@ -6,6 +6,8 @@ use Illuminate\Http\Request;
 
 class PersetujuanTeknisController extends Controller
 {
+
+    //Arahan
     public function index_arahan()
     {
         return view('pertek/arahan/index_arahan');
@@ -26,11 +28,20 @@ class PersetujuanTeknisController extends Controller
         return view('pertek/arahan/create_arahan');
     }
 
+
+    // Emisi
     public function index_emisi()
     {
         return view('pertek/emisi/index_emisi');
     }
 
+    public function detail_emisi()
+    {
+        return view('pertek/emisi/detail_emisi');
+    }
+
+     // Air Limbah
+
     public function index_airlimbah()
     {
         return view('pertek/airlimbah/index_airlimbah');
@@ -40,4 +51,15 @@ class PersetujuanTeknisController extends Controller
     {
         return view('pertek/limbahb3/index_limbahb3');
     }
+
+    // SLO
+
+    public function index_slo()
+    {
+        return view('pertek/slo/index_slo');
+    }
+    public function detail_slo()
+    {
+        return view('pertek/slo/detail_slo');
+    }
 }

public/assets/css/pertek/user_arahan.css

@@ -0,0 +1,37 @@
+.timeline-status {
+    position: relative;
+    padding-left: 28px;
+}
+.timeline-status:before {
+    content: "";
+    position: absolute;
+    left: 9px;
+    top: 6px;
+    height: calc(100% - 12px);
+    width: 2px;
+    background: #e9ecef;
+}
+.timeline-item {
+    position: relative;
+    padding-bottom: 20px;
+}
+.timeline-marker {
+    position: absolute;
+    left: -25px;
+    top: 6px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #e9ecef;
+    border: 2px solid #fff;
+}
+.timeline-item.completed .timeline-marker {
+    background: #28a745;
+}
+.timeline-item.active .timeline-marker {
+    background: #007bff;
+    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
+}
+.timeline-content {
+    padding-left: 10px;
+}

public/assets/js/backend/news/embed.js

@@ -0,0 +1,16 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const categorySelect = document.getElementById("category-select");
+    const embedField = document.getElementById("embed-link-field");
+
+    function toggleEmbedField() {
+        if (categorySelect.value === "Video") {
+            embedField.classList.remove("d-none");
+        } else {
+            embedField.classList.add("d-none");
+        }
+    }
+
+    toggleEmbedField();
+
+    categorySelect.addEventListener("change", toggleEmbedField);
+});

public/assets/js/backend/news/script_upload.js

@@ -0,0 +1,142 @@
+// =============================== Upload Single Image js start here ================================================
+const fileInput = document.getElementById("upload-file");
+const imagePreview = document.getElementById("uploaded-img__preview");
+const uploadedImgContainer = document.querySelector(".uploaded-img");
+const removeButton = document.querySelector(".uploaded-img__remove");
+
+fileInput.addEventListener("change", (e) => {
+    if (e.target.files.length) {
+        const src = URL.createObjectURL(e.target.files[0]);
+        imagePreview.src = src;
+        uploadedImgContainer.classList.remove("d-none");
+    }
+});
+removeButton.addEventListener("click", () => {
+    imagePreview.src = "";
+    uploadedImgContainer.classList.add("d-none");
+    fileInput.value = "";
+});
+// =============================== Upload Single Image js End here ================================================
+
+// ================================================ Upload Multiple image js Start here ================================================
+const fileInputMultiple = document.getElementById("upload-file-multiple");
+const uploadedImgsContainer = document.querySelector(
+    ".uploaded-imgs-container"
+);
+
+fileInputMultiple.addEventListener("change", (e) => {
+    const files = e.target.files;
+
+    Array.from(files).forEach((file) => {
+        const src = URL.createObjectURL(file);
+
+        const imgContainer = document.createElement("div");
+        imgContainer.classList.add(
+            "position-relative",
+            "h-120-px",
+            "w-120-px",
+            "border",
+            "input-form-light",
+            "radius-8",
+            "overflow-hidden",
+            "border-dashed",
+            "bg-neutral-50"
+        );
+
+        const removeButton = document.createElement("button");
+        removeButton.type = "button";
+        removeButton.classList.add(
+            "uploaded-img__remove",
+            "position-absolute",
+            "top-0",
+            "end-0",
+            "z-1",
+            "text-2xxl",
+            "line-height-1",
+            "me-8",
+            "mt-8",
+            "d-flex"
+        );
+        removeButton.innerHTML =
+            "<iconify-icon icon='radix-icons:cross-2' class='text-xl text-danger-600'></iconify-icon>";
+
+        const imagePreview = document.createElement("img");
+        imagePreview.classList.add("w-100", "h-100", "object-fit-cover");
+        imagePreview.src = src;
+
+        imgContainer.appendChild(removeButton);
+        imgContainer.appendChild(imagePreview);
+        uploadedImgsContainer.appendChild(imgContainer);
+
+        removeButton.addEventListener("click", () => {
+            URL.revokeObjectURL(src);
+            imgContainer.remove();
+        });
+    });
+
+    // Clear the file input so the same file(s) can be uploaded again if needed
+    fileInputMultiple.value = "";
+});
+// ================================================ Upload Multiple image js End here  ================================================
+
+// ================================================ Upload image & show it\'s name js start  ================================================
+document
+    .getElementById("file-upload-name")
+    .addEventListener("change", function (event) {
+        var fileInput = event.target;
+        var fileList = fileInput.files;
+        var ul = document.getElementById("uploaded-img-names");
+
+        // Add show-uploaded-img-name class to the ul element if not already added
+        ul.classList.add("show-uploaded-img-name");
+
+        // Append each uploaded file name as a list item with Font Awesome and Iconify icons
+        for (var i = 0; i < fileList.length; i++) {
+            var li = document.createElement("li");
+            li.classList.add(
+                "uploaded-image-name-list",
+                "text-primary-600",
+                "fw-semibold",
+                "d-flex",
+                "align-items-center",
+                "gap-2"
+            );
+
+            // Create the Link Iconify icon element
+            var iconifyIcon = document.createElement("iconify-icon");
+            iconifyIcon.setAttribute("icon", "ph:link-break-light");
+            iconifyIcon.classList.add("text-xl", "text-secondary-light");
+
+            // Create the Cross Iconify icon element
+            var crossIconifyIcon = document.createElement("iconify-icon");
+            crossIconifyIcon.setAttribute("icon", "radix-icons:cross-2");
+            crossIconifyIcon.classList.add(
+                "remove-image",
+                "text-xl",
+                "text-secondary-light",
+                "text-hover-danger-600"
+            );
+
+            // Add event listener to remove the image on click
+            crossIconifyIcon.addEventListener(
+                "click",
+                (function (liToRemove) {
+                    return function () {
+                        ul.removeChild(liToRemove); // Remove the corresponding list item
+                    };
+                })(li)
+            ); // Pass the current list item as a parameter to the closure
+
+            // Append both icons to the list item
+            li.appendChild(iconifyIcon);
+
+            // Append the file name text to the list item
+            li.appendChild(document.createTextNode(" " + fileList[i].name));
+
+            li.appendChild(crossIconifyIcon);
+
+            // Append the list item to the unordered list
+            ul.appendChild(li);
+        }
+    });
+// ================================================ Upload image & show it\'s name js end ================================================

public/assets/js/backend/news/upload_image.js

@@ -0,0 +1,28 @@
+// Editor Js Start
+const quill = new Quill("#editor", {
+    modules: {
+        syntax: true,
+        toolbar: "#toolbar-container",
+    },
+    placeholder: "Compose an epic...",
+    theme: "snow",
+});
+// Editor Js End
+
+const fileInput = document.getElementById("upload-file");
+const imagePreview = document.getElementById("uploaded-img__preview");
+const uploadedImgContainer = document.querySelector(".uploaded-img");
+const removeButton = document.querySelector(".uploaded-img__remove");
+
+fileInput.addEventListener("change", (e) => {
+    if (e.target.files.length) {
+        const src = URL.createObjectURL(e.target.files[0]);
+        imagePreview.src = src;
+        uploadedImgContainer.classList.remove("d-none");
+    }
+});
+removeButton.addEventListener("click", () => {
+    imagePreview.src = "";
+    uploadedImgContainer.classList.add("d-none");
+    fileInput.value = "";
+});

public/assets/js/backend/pertek/script_arahan.js

@@ -0,0 +1,134 @@
+// =============================== Wizard Step Js Start ================================
+$(document).ready(function () {
+    // click on next button
+    $(".form-wizard-next-btn").on("click", function () {
+        var parentFieldset = $(this).parents(".wizard-fieldset");
+        var currentActiveStep = $(this)
+            .parents(".form-wizard")
+            .find(".form-wizard-list .active");
+        var next = $(this);
+        var nextWizardStep = true;
+        parentFieldset.find(".wizard-required").each(function () {
+            var thisValue = $(this).val();
+
+            if (thisValue == "") {
+                $(this).siblings(".wizard-form-error").show();
+                nextWizardStep = false;
+            } else {
+                $(this).siblings(".wizard-form-error").hide();
+            }
+        });
+        if (nextWizardStep) {
+            next.parents(".wizard-fieldset").removeClass("show", "400");
+            currentActiveStep
+                .removeClass("active")
+                .addClass("activated")
+                .next()
+                .addClass("active", "400");
+            next.parents(".wizard-fieldset")
+                .next(".wizard-fieldset")
+                .addClass("show", "400");
+            $(document)
+                .find(".wizard-fieldset")
+                .each(function () {
+                    if ($(this).hasClass("show")) {
+                        var formAtrr = $(this).attr("data-tab-content");
+                        $(document)
+                            .find(".form-wizard-list .form-wizard-step-item")
+                            .each(function () {
+                                if ($(this).attr("data-attr") == formAtrr) {
+                                    $(this).addClass("active");
+                                    var innerWidth = $(this).innerWidth();
+                                    var position = $(this).position();
+                                    $(document)
+                                        .find(".form-wizard-step-move")
+                                        .css({
+                                            left: position.left,
+                                            width: innerWidth,
+                                        });
+                                } else {
+                                    $(this).removeClass("active");
+                                }
+                            });
+                    }
+                });
+        }
+    });
+    //click on previous button
+    $(".form-wizard-previous-btn").on("click", function () {
+        var counter = parseInt($(".wizard-counter").text());
+        var prev = $(this);
+        var currentActiveStep = $(this)
+            .parents(".form-wizard")
+            .find(".form-wizard-list .active");
+        prev.parents(".wizard-fieldset").removeClass("show", "400");
+        prev.parents(".wizard-fieldset")
+            .prev(".wizard-fieldset")
+            .addClass("show", "400");
+        currentActiveStep
+            .removeClass("active")
+            .prev()
+            .removeClass("activated")
+            .addClass("active", "400");
+        $(document)
+            .find(".wizard-fieldset")
+            .each(function () {
+                if ($(this).hasClass("show")) {
+                    var formAtrr = $(this).attr("data-tab-content");
+                    $(document)
+                        .find(".form-wizard-list .form-wizard-step-item")
+                        .each(function () {
+                            if ($(this).attr("data-attr") == formAtrr) {
+                                $(this).addClass("active");
+                                var innerWidth = $(this).innerWidth();
+                                var position = $(this).position();
+                                $(document)
+                                    .find(".form-wizard-step-move")
+                                    .css({
+                                        left: position.left,
+                                        width: innerWidth,
+                                    });
+                            } else {
+                                $(this).removeClass("active");
+                            }
+                        });
+                }
+            });
+    });
+    //click on form submit button
+    $(document).on("click", ".form-wizard .form-wizard-submit", function () {
+        var parentFieldset = $(this).parents(".wizard-fieldset");
+        var currentActiveStep = $(this)
+            .parents(".form-wizard")
+            .find(".form-wizard-list .active");
+        parentFieldset.find(".wizard-required").each(function () {
+            var thisValue = $(this).val();
+            if (thisValue == "") {
+                $(this).siblings(".wizard-form-error").show();
+            } else {
+                $(this).siblings(".wizard-form-error").hide();
+            }
+        });
+    });
+    // focus on input field check empty or not
+    $(".form-control")
+        .on("focus", function () {
+            var tmpThis = $(this).val();
+            if (tmpThis == "") {
+                $(this).parent().addClass("focus-input");
+            } else if (tmpThis != "") {
+                $(this).parent().addClass("focus-input");
+            }
+        })
+        .on("blur", function () {
+            var tmpThis = $(this).val();
+            if (tmpThis == "") {
+                $(this).parent().removeClass("focus-input");
+                $(this).siblings(".wizard-form-error").show();
+            } else if (tmpThis != "") {
+                $(this).parent().addClass("focus-input");
+                $(this).siblings(".wizard-form-error").hide();
+            }
+        });
+});
+// =============================== Wizard Step Js End ================================

public/assets/js/frontend/home/layanan.js

@@ -1,19 +1,188 @@
-document.getElementById("filter-button").addEventListener("click", function () {
-    const filterSection = document.getElementById("filter-section");
-    filterSection.classList.toggle("hidden");
+// Fetch Wilayah JSON
+fetch("/assets/json/home/wilayah.json")
+    .then((response) => response.json())
+    .then((data) => populateFilters(data))
+    .catch((error) => console.error("Gagal load wilayah.json:", error));
+
+function populateFilters(data) {
+    populateSelect("kabkota", data.kabkota);
+    populateSelect("kecamatan", data.kecamatan);
+    populateSelect("kelurahan", data.kelurahan);
+}
+
+function populateSelect(id, options) {
+    const select = document.getElementById(id);
+    if (!select) return;
+
+    select.innerHTML = options
+        .map(
+            (opt) => `
+    <option value="${opt.value}">${opt.label}</option>
+  `
+        )
+        .join("");
+}
+
+// Fetch Layanan JSON
+document.addEventListener("DOMContentLoaded", function () {
+    fetch("/assets/json/home/layanan.json")
+        .then((response) => response.json())
+        .then((data) => {
+            initializeLayanan(data);
+            setupUIHandlers();
+        })
+        .catch((error) => console.error("Gagal load layanan.json:", error));
 });
 
-document.getElementById("clear-filter").addEventListener("click", function () {
-    // Reset province and city dropdowns
+function initializeLayanan(data) {
+    renderHeader(data.header);
+    renderTabs(data.tabs);
+    renderContents(data.contents);
+    changeTab("pertek");
+}
+
+// Data Header
+function renderHeader(header) {
+    const headerContainer = document.querySelector("#layanan-header");
+    if (!headerContainer) return;
+
+    headerContainer.innerHTML = `
+      <h1 class="text-2xl sm:text-4xl font-bold text-blue-900">${header.title}</h1>
+      <p class="text-gray-700 mt-1 text-sm sm:text-base">${header.subtitle}</p>
+    `;
+}
+
+// Data Tabs
+function renderTabs(tabs) {
+    const tabsContainer = document.querySelector("#layanan-tabs");
+    if (!tabsContainer) return;
+
+    tabsContainer.innerHTML = tabs
+        .map(
+            (tab) => `
+      <button id="tab-${tab.id}"
+              class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base"
+              onclick="changeTab('${tab.id}')">
+        ${tab.label}
+      </button>
+    `
+        )
+        .join("");
+}
+
+// Data Contents
+function renderContents(contents) {
+    const contentsContainer = document.querySelector("#layanan-contents");
+    if (!contentsContainer) return;
+
+    contentsContainer.innerHTML = Object.entries(contents)
+        .map(([key, items]) => {
+            if (key === "audit") {
+                return `
+          <div id="content-${key}" class="tab-content hidden bg-white rounded overflow-hidden shadow">
+            ${renderAuditTable(items)}
+          </div>
+        `;
+            } else {
+                return `
+          <div id="content-${key}" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
+            ${items.map((item) => renderStandardItem(item)).join("")}
+          </div>
+        `;
+            }
+        })
+        .join("");
+}
+
+function renderStandardItem(item) {
+    return `
+      <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div class="flex gap-3 sm:gap-4 w-full">
+          <div class="flex-shrink-0">
+            <div class="bg-blue-500 p-2 rounded">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            </div>
+          </div>
+          <div>
+            <h2 class="text-white font-bold text-sm sm:text-base">${item.title}</h2>
+            <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">${item.description}</p>
+            <a href="${item.link}" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
+          </div>
+        </div>
+        <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
+          <div class="text-white text-xs sm:text-sm text-right">${item.periode}</div>
+          <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
+        </div>
+      </div>
+    `;
+}
+
+function renderAuditTable(items) {
+    return `
+      <div class="overflow-x-auto">
+        <table class="w-full text-xs sm:text-base">
+          <thead>
+            <tr class="bg-blue-800 text-white">
+              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left w-12 sm:w-16">No</th>
+              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Nama PT</th>
+              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Judul</th>
+              <th class="py-2 sm:py-3 px-2 sm:px-4 text-left hidden md:table-cell">Deskripsi</th>
+              <th class="py-2 sm:py-3 px-2 sm:px-4 text-center w-20 sm:w-32">Aksi</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${items
+                .map(
+                    (item) => `
+              <tr class="border-b border-gray-200">
+                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">${item.no}</td>
+                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">${item.company}</td>
+                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">${item.title}</td>
+                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top hidden md:table-cell">
+                  <div class="max-h-24 sm:max-h-32 overflow-y-auto pr-2">${item.description}</div>
+                </td>
+                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">
+                  <button class="bg-green-500 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded w-full text-xs sm:text-sm">Download</button>
+                </td>
+              </tr>
+            `
+                )
+                .join("")}
+          </tbody>
+        </table>
+      </div>
+    `;
+}
+
+function setupUIHandlers() {
+    // Toggle filter section
+    const filterButton = document.getElementById("filter-button");
+    if (filterButton) {
+        filterButton.addEventListener("click", function () {
+            const filterSection = document.getElementById("filter-section");
+            if (filterSection) filterSection.classList.toggle("hidden");
+        });
+    }
+
+    // Clear filter inputs
+    const clearButton = document.getElementById("clear-filter");
+    if (clearButton) {
+        clearButton.addEventListener("click", function () {
             document.getElementById("kabkota").value = "";
             document.getElementById("kecamatan").value = "";
             document.getElementById("kelurahan").value = "";
 
-    // Reset search input
-    const searchInput = document.querySelector('input[placeholder="Search"]');
+            const searchInput = document.querySelector(
+                'input[placeholder="Search"]'
+            );
             if (searchInput) searchInput.value = "";
         });
+    }
+}
 
+// Tab switching function
 function changeTab(tabName) {
     const contentSections = document.querySelectorAll(".tab-content");
     contentSections.forEach((section) => {
@@ -27,13 +196,13 @@ function changeTab(tabName) {
     });
 
     const selectedTab = document.getElementById("tab-" + tabName);
+    if (selectedTab) {
         selectedTab.classList.remove("bg-white", "border", "border-gray-300");
         selectedTab.classList.add("bg-blue-900", "text-white");
-
-    const selectedContent = document.getElementById("content-" + tabName);
-    selectedContent.classList.remove("hidden");
     }
 
-document.addEventListener("DOMContentLoaded", function () {
-    changeTab("pertek");
-});
+    const selectedContent = document.getElementById("content-" + tabName);
+    if (selectedContent) {
+        selectedContent.classList.remove("hidden");
+    }
+}

public/assets/js/frontend/home/popup.js

@@ -1,17 +1,14 @@
 document.addEventListener("DOMContentLoaded", function () {
-    // Show popup with slight delay after page load
     setTimeout(function () {
         document.getElementById("popupBanner").classList.remove("hidden");
     }, 800);
 
-    // Close popup when clicking the close button
     document
         .getElementById("closePopup")
         .addEventListener("click", function () {
             document.getElementById("popupBanner").classList.add("hidden");
         });
 
-    // Close popup when clicking outside the banner
     document
         .getElementById("popupBanner")
         .addEventListener("click", function (e) {
@@ -20,7 +17,6 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         });
 
-    // Slider functionality
     const slides = document.querySelectorAll(".banner-slide");
     const dots = document.querySelectorAll(".dot-indicator");
     let currentSlide = 0;
@@ -34,13 +30,11 @@ document.addEventListener("DOMContentLoaded", function () {
         currentSlide = index;
     }
 
-    // Auto slide every 5 seconds
     let slideInterval = setInterval(() => {
         let nextSlide = (currentSlide + 1) % slides.length;
         showSlide(nextSlide);
     }, 5000);
 
-    // Navigation buttons
     document.getElementById("nextSlide").addEventListener("click", function () {
         clearInterval(slideInterval);
         let nextSlide = (currentSlide + 1) % slides.length;

public/assets/js/frontend/news/newsvideo.js

@@ -0,0 +1,212 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const loadMoreBtn = document.getElementById("load-more-btn");
+    const newsContainer = document.getElementById("news-container");
+    const videoContainer = document.getElementById("video-container");
+    const newsContent = document.getElementById("news-content");
+    const videoContent = document.getElementById("videos-content");
+    const tabs = document.querySelectorAll(".tab-btn");
+    const tabIndicator = document.getElementById("tab-indicator");
+
+    let newsOffset = 0;
+    let videoOffset = 0;
+    const itemsPerLoad = 3;
+
+    setTabIndicatorPosition(tabs[0]);
+    tabs[0].classList.add("text-white", "font-medium");
+
+    tabs.forEach((tab) => {
+        tab.addEventListener("click", () => {
+            setTabIndicatorPosition(tab);
+
+            tabs.forEach((t) => {
+                t.classList.remove("text-white", "font-medium");
+                t.classList.add("text-gray-600");
+            });
+            tab.classList.add("text-white", "font-medium");
+            tab.classList.remove("text-gray-600");
+
+            const targetTab = tab.getAttribute("data-tab");
+            document.querySelectorAll(".tab-content").forEach((content) => {
+                content.classList.add("hidden");
+            });
+            document
+                .getElementById(`${targetTab}-content`)
+                .classList.remove("hidden");
+
+            // Update button visibility when switching tabs
+            updateLoadMoreButtonVisibility();
+        });
+    });
+
+    function setTabIndicatorPosition(activeTab) {
+        tabIndicator.style.width = `${activeTab.offsetWidth}px`;
+        tabIndicator.style.left = `${activeTab.offsetLeft}px`;
+    }
+
+    function updateLoadMoreButtonVisibility() {
+        if (newsContent.classList.contains("hidden") === false) {
+            if (newsOffset >= moreArticles.length) {
+                loadMoreBtn.classList.add("hidden");
+            } else {
+                loadMoreBtn.classList.remove("hidden");
+            }
+        } else {
+            if (videoOffset >= moreVideos.length) {
+                loadMoreBtn.classList.add("hidden");
+            } else {
+                loadMoreBtn.classList.remove("hidden");
+            }
+        }
+    }
+
+    const moreArticles = [
+        {
+            image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
+            title: "Panduan Lengkap Perizinan AMDAL Terbaru",
+            description:
+                "Prosedur dan persyaratan terbaru untuk mendapatkan persetujuan AMDAL dalam proyek pembangunan skala besar di Indonesia...",
+            published_date: "10 April 2025",
+            slug: "panduan-perizinan-amdal-terbaru",
+        },
+        {
+            image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
+            title: "Regulasi UKL-UPL: Apa yang Perlu Diketahui",
+            description:
+                "Panduan praktis tentang dokumen Upaya Pengelolaan Lingkungan dan Upaya Pemantauan Lingkungan untuk usaha skala menengah...",
+            published_date: "12 April 2025",
+            slug: "regulasi-ukl-upl-terbaru",
+        },
+        {
+            image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
+            title: "Perubahan Kebijakan Perizinan Lingkungan 2025",
+            description:
+                "Analisis mendalam tentang perubahan kebijakan perizinan lingkungan dan dampaknya terhadap sektor industri di Indonesia...",
+            published_date: "15 April 2025",
+            slug: "perubahan-kebijakan-perizinan-lingkungan-2025",
+        },
+    ];
+    const moreVideos = [
+        {
+            src: "https://www.w3schools.com/html/movie.mp4",
+            title: "Tutorial Pengisian Formulir Izin Lingkungan",
+            description:
+                "Panduan langkah demi langkah cara mengisi formulir perizinan lingkungan dengan benar dan efisien...",
+            date: "8 April 2025",
+        },
+        {
+            src: "https://www.w3schools.com/html/movie.mp4",
+            title: "Proses Sidang Perizinan Lingkungan: Apa yang Harus Dipersiapkan",
+            description:
+                "Penjelasan detail tentang tahapan sidang perizinan lingkungan dan tips sukses menghadapinya...",
+            date: "11 April 2025",
+        },
+        {
+            src: "https://www.w3schools.com/html/movie.mp4",
+            title: "Studi Kasus: Penolakan Izin Lingkungan dan Solusinya",
+            description:
+                "Analisis kasus penolakan izin lingkungan dan strategi untuk mengatasi masalah perizinan yang umum terjadi...",
+            date: "14 April 2025",
+        },
+    ];
+
+    loadMoreBtn.addEventListener("click", function () {
+        const loadingText = loadMoreBtn.innerHTML;
+        loadMoreBtn.innerHTML = `
+            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Loading...
+        `;
+
+        setTimeout(() => {
+            if (newsContent.classList.contains("hidden") === false) {
+                const remainingArticles = moreArticles.slice(
+                    newsOffset,
+                    newsOffset + itemsPerLoad
+                );
+                remainingArticles.forEach((article) => {
+                    const articleElement = createArticleElement(article);
+                    newsContainer.appendChild(articleElement);
+                });
+                newsOffset += remainingArticles.length;
+            } else {
+                const remainingVideos = moreVideos.slice(
+                    videoOffset,
+                    videoOffset + itemsPerLoad
+                );
+                remainingVideos.forEach((video) => {
+                    const videoElement = createVideoElement(video);
+                    videoContainer.appendChild(videoElement);
+                });
+                videoOffset += remainingVideos.length;
+            }
+
+            loadMoreBtn.innerHTML = loadingText;
+
+            updateLoadMoreButtonVisibility();
+        }, 1000);
+    });
+
+    updateLoadMoreButtonVisibility();
+
+    function createArticleElement(article) {
+        const div = document.createElement("div");
+        div.className =
+            "bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group";
+        div.innerHTML = `
+                <div class="relative overflow-hidden">
+                    <img src="${article.image}" alt="${article.title}" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute top-4 left-4">
+                        <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">${article.published_date}</span>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">${article.title}</h3>
+                    <p class="text-gray-600 mb-5 line-clamp-3">${article.description}</p>
+                    <a href="/news/${article.slug}" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
+                        <span>Baca Selengkapnya</span>
+                        <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                        </svg>
+                    </a>
+                </div>
+            `;
+        return div;
+    }
+
+    function createVideoElement(video) {
+        const div = document.createElement("div");
+        div.className =
+            "bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group";
+        div.innerHTML = `
+                <div class="relative overflow-hidden">
+                    <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
+                        <source src="${video.src}" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                        <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
+                            <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex items-center mb-3">
+                        <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">${video.date}</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">${video.title}</h3>
+                    <p class="text-gray-600 mb-5 line-clamp-3">${video.description}</p>
+                    <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
+                        <span>Tonton Video</span>
+                        <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                        </svg>
+                    </a>
+                </div>
+            `;
+        return div;
+    }
+});

public/assets/json/home/faq.json

@@ -0,0 +1,14 @@
+[
+    {
+        "question": "Bagaimana mekanisme penapisan dengan hasil jenis dokumen SPPL?",
+        "answer": "Proses penapisan dilakukan untuk menentukan jenis dokumen yang sesuai berdasarkan kegiatan yang diajukan. Jika hasil penapisan menunjukkan bahwa jenis dokumen yang diperlukan adalah SPPL (Surat Pernyataan Pengelolaan Lingkungan), pengguna dapat mengikuti panduan penggunaan (manual guide) SPPL yang tersedia."
+    },
+    {
+        "question": "Bagaimana cara Validator Administrasi melakukan uji administrasi?",
+        "answer": "Validator Administrasi memeriksa kesesuaian berkas administrasi dengan cara mengklik menu AMDAL atau UKL-UPL, memilih menu sebelum rapat, dan mengakses tab Uji Admin. Validator menentukan kelengkapan administrasi dengan memberikan keterangan di kolom yang sesuai."
+    },
+    {
+        "question": "Apa yang harus dilakukan jika dokumen tidak lengkap?",
+        "answer": "Jika dokumen tidak lengkap, Validator Administrasi dapat mengembalikan berkas kepada pengguna dengan memberikan keterangan yang jelas mengenai kekurangan dokumen tersebut. Pengguna kemudian dapat memperbaiki dan mengunggah kembali dokumen yang diperlukan."
+    }
+]

public/assets/json/home/hero.json

@@ -0,0 +1,7 @@
+{
+    "background_image": "assets/images/home/bg-home.png",
+    "title_one": "for Smarter",
+    "title_two": "Environmental Documents",
+    "badge": "Digital Hub",
+    "subtitle": "Create. Track. Integrate. All your environmental documents in one place."
+}

public/assets/json/home/layanan.json

@@ -0,0 +1,83 @@
+{
+    "header": {
+        "title": "Daftar Pengumuman & Informasi",
+        "subtitle": "Daftar Pengumuman dan Informasi terkait kegiatan yang mengajukan izin lingkungan"
+    },
+    "tabs": [
+        { "id": "pertek", "label": "PERTEK" },
+        { "id": "rintek", "label": "RINTEK" },
+        { "id": "amdal", "label": "AMDAL" },
+        { "id": "addendum", "label": "Addendum" },
+        { "id": "ukl-upl", "label": "UKL - UPL" },
+        { "id": "audit", "label": "AUDIT" }
+    ],
+    "contents": {
+        "pertek": [
+            {
+                "title": "Kegiatan Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY",
+                "description": "Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes",
+                "link": "#",
+                "periode": "27 Maret - 10 April 2025"
+            },
+            {
+                "title": "Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W",
+                "description": "Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis",
+                "link": "#",
+                "periode": "26 Maret - 9 April 2025"
+            }
+        ],
+        "rintek": [
+            {
+                "title": "Test Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY",
+                "description": "Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes",
+                "link": "#",
+                "periode": "27 Maret - 10 April 2025"
+            },
+            {
+                "title": "Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W",
+                "description": "Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis",
+                "link": "#",
+                "periode": "26 Maret - 9 April 2025"
+            }
+        ],
+        "amdal": [
+            {
+                "title": "Kegiatan Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY",
+                "description": "Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes",
+                "link": "#",
+                "periode": "27 Maret - 10 April 2025"
+            },
+            {
+                "title": "Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W",
+                "description": "Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis",
+                "link": "#",
+                "periode": "26 Maret - 9 April 2025"
+            }
+        ],
+        "addendum": [
+            {
+                "title": "Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W",
+                "description": "Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis",
+                "link": "#",
+                "periode": "26 Maret - 9 April 2025"
+            }
+        ],
+        "ukl-upl": [
+            {
+                "title": "Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W",
+                "description": "Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis",
+                "link": "#",
+                "periode": "26 Maret - 9 April 2025"
+            }
+        ],
+        "audit": [
+            {
+                "no": 1,
+                "company": "PT PETROKIMIA GRESIK",
+                "title": "PENGUMUMAN AUDIT LINGKUNGAN HIDUP WAJIB BERKALA INDUSTRI PETROKIMIA",
+                "description": "PT Petrokimia Gresik merupakan Kegiatan pada sektor Industri Petrokimia : Industri Pupuk dan Bahan Kimia (Amonia, Pupuk, Asam Sulfat, Asam Fosfat, dan Asam Klorida)...",
+                "link": "#"
+            }
+        ]
+    }
+}

public/assets/json/home/news.json

@@ -0,0 +1,162 @@
+[
+    {
+        "type": "news",
+        "date": "2024-12-11",
+        "title": "Pengenalan dan Uji Coba Aplikasi Perling untuk Mendukung Sistem Persetujuan Lingkungan",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Bogor, 11 Desember 2024 - Dalam upaya meningkatkan efisiensi sistem persetujuan lingkungan di Indonesia...",
+        "url": "/news/perling-uji-coba"
+    },
+    {
+        "type": "news",
+        "date": "2024-12-10",
+        "title": "Implementasi Sistem Monitoring Lingkungan Terbaru",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Jakarta, 10 Desember 2024 - Kementerian Lingkungan Hidup memperkenalkan sistem baru untuk monitoring kualitas lingkungan...",
+        "url": "/news/monitoring-lingkungan"
+    },
+    {
+        "type": "news",
+        "date": "2024-12-09",
+        "title": "Peresmian Pusat Data Lingkungan Hidup Nasional",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Jakarta, 9 Desember 2024 - Presiden meresmikan pusat data lingkungan hidup terbaru yang akan menjadi referensi nasional...",
+        "url": "/news/pusat-data-lingkungan"
+    },
+    {
+        "type": "news",
+        "date": "2024-12-07",
+        "title": "Workshop Pemanfaatan Aplikasi Perling untuk Pelaku Usaha",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Bandung, 7 Desember 2024 - KLHK mengadakan workshop untuk memperkenalkan fitur-fitur Perling kepada pelaku usaha...",
+        "url": "/news/workshop-perling"
+    },
+    {
+        "type": "news",
+        "date": "2024-12-05",
+        "title": "Kolaborasi Internasional dalam Pengelolaan Data Lingkungan",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Bali, 5 Desember 2024 - Indonesia menjalin kerja sama dengan beberapa negara ASEAN untuk pengelolaan data lingkungan...",
+        "url": "/news/kolaborasi-internasional"
+    },
+    {
+        "type": "news",
+        "date": "2024-12-03",
+        "title": "Inovasi Teknologi dalam Pengawasan Lingkungan",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Jakarta, 3 Desember 2024 - KLHK mengadopsi teknologi AI dan IoT untuk meningkatkan efektivitas pengawasan lingkungan...",
+        "url": "/news/inovasi-teknologi-lingkungan"
+    },
+    {
+        "type": "news",
+        "date": "2024-12-01",
+        "title": "Forum Diskusi Kebijakan Lingkungan Hidup 2025",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Surabaya, 1 Desember 2024 - Para pakar lingkungan berkumpul untuk membahas arah kebijakan lingkungan hidup tahun 2025...",
+        "url": "/news/forum-kebijakan-2025"
+    },
+    {
+        "type": "news",
+        "date": "2024-11-28",
+        "title": "Evaluasi Dampak Lingkungan Proyek Strategis Nasional",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Jakarta, 28 November 2024 - KLHK melakukan evaluasi menyeluruh terhadap dampak lingkungan dari proyek strategis nasional...",
+        "url": "/news/evaluasi-dampak-lingkungan"
+    },
+    {
+        "type": "news",
+        "date": "2024-11-25",
+        "title": "Penghargaan Perusahaan Ramah Lingkungan 2024",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Jakarta, 25 November 2024 - KLHK memberikan penghargaan kepada perusahaan-perusahaan yang konsisten menerapkan praktik ramah lingkungan...",
+        "url": "/news/penghargaan-ramah-lingkungan"
+    },
+    {
+        "type": "news",
+        "date": "2024-11-22",
+        "title": "Peluncuran Program Edukasi Lingkungan untuk Sekolah",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "description": "Yogyakarta, 22 November 2024 - KLHK bekerja sama dengan Kemendikbud meluncurkan program edukasi lingkungan untuk sekolah...",
+        "url": "/news/program-edukasi-lingkungan"
+    },
+    {
+        "type": "video",
+        "date": "2024-12-12",
+        "title": "Tutorial Lengkap Penggunaan Aplikasi Perling",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/perling-tutorial"
+    },
+    {
+        "type": "video",
+        "date": "2024-12-08",
+        "title": "Wawancara dengan Menteri LHK",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/wawancara-menteri"
+    },
+    {
+        "type": "video",
+        "date": "2024-12-06",
+        "title": "Webinar: Dampak Perubahan Iklim terhadap Keanekaragaman Hayati",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/webinar-perubahan-iklim"
+    },
+    {
+        "type": "video",
+        "date": "2024-12-04",
+        "title": "Dokumenter: Restorasi Hutan Mangrove Indonesia",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/dokumenter-mangrove"
+    },
+    {
+        "type": "video",
+        "date": "2024-12-01",
+        "title": "Diskusi Panel: Kebijakan Pengelolaan Limbah B3",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/diskusi-limbah-b3"
+    },
+    {
+        "type": "video",
+        "date": "2024-11-29",
+        "title": "Sosialisasi Peraturan Baru tentang Kualitas Udara",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/sosialisasi-kualitas-udara"
+    },
+    {
+        "type": "video",
+        "date": "2024-11-27",
+        "title": "Liputan Khusus: Inovasi Teknologi Ramah Lingkungan",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/inovasi-ramah-lingkungan"
+    },
+    {
+        "type": "video",
+        "date": "2024-11-24",
+        "title": "Workshop Virtual: Penggunaan Sistem Informasi Lingkungan",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/workshop-sistem-informasi"
+    },
+    {
+        "type": "video",
+        "date": "2024-11-21",
+        "title": "Dokumenter: Upaya Konservasi Spesies Langka Indonesia",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/konservasi-spesies"
+    },
+    {
+        "type": "video",
+        "date": "2024-11-19",
+        "title": "Panduan Praktis: Pengolahan Sampah Rumah Tangga",
+        "thumbnail": "https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg",
+        "embedUrl": "https://www.youtube.com/embed/Mb93OtlApAQ?si=njiEfYKiv6SCQB_Z",
+        "url": "/videos/pengolahan-sampah"
+    }
+]

public/assets/json/home/popup.json

@@ -0,0 +1,11 @@
+[
+    {
+        "slide_image": "assets/images/home/slider.jpg"
+    },
+    {
+        "slide_image": "assets/images/home/banner.webp"
+    },
+    {
+        "slide_image": "assets/images/home/slider.jpg"
+    }
+]

public/assets/json/home/wilayah.json

@@ -0,0 +1,22 @@
+{
+    "kabkota": [
+        { "value": "", "label": "Semua Kabupaten/Kota" },
+        { "value": "kepseribu", "label": "ADM. KEP. SERIBU" },
+        { "value": "jakpus", "label": "KOTA ADM. JAKARTA PUSAT" },
+        { "value": "jakut", "label": "KOTA ADM. JAKARTA UTARA" },
+        { "value": "jakbar", "label": "KOTA ADM. JAKARTA BARAT" },
+        { "value": "jaksel", "label": "KOTA ADM. JAKARTA SELATAN" },
+        { "value": "jaktim", "label": "KOTA ADM. JAKARTA TIMUR" }
+    ],
+    "kecamatan": [
+        { "value": "", "label": "Semua Kecamatan" },
+        { "value": "kepseribuutara", "label": "KEPULAUAN SERIBU UTARA" },
+        { "value": "kepseribuselatan", "label": "KEPULAUAN SERIBU SELATAN" }
+    ],
+    "kelurahan": [
+        { "value": "", "label": "Semua Kelurahan" },
+        { "value": "pulau_panggung", "label": "PULAU PANGGANG" },
+        { "value": "pulau_kelapa", "label": "PULAU KELAPA" },
+        { "value": "pulau_harapan", "label": "PULAU HARAPAN" }
+    ]
+}

public/robots.txt

@@ -1,2 +1,2 @@
 User-agent: *
-Disallow:/
+Disallow:

resources/views/components/footer.blade.php

@@ -1,7 +1,7 @@
 <footer class="d-footer">
     <div class="row align-items-center justify-content-between">
         <div class="col-auto">
-            <p class="mb-0">© 2025 Perizinan Lingkungan. All Rights Reserved.</p>
+            <p class="mb-0">© {{ date('Y') }} Perizinan Lingkungan. All Rights Reserved.</p>
         </div>
     </div>
 </footer>

resources/views/components/frontend/home/faq.blade.php

@@ -8,22 +8,21 @@
 
 <section class="bg-gradient-to-b from-gray-50 to-gray-100 font-sans py-6">
   <div class="container mx-auto max-w-7xl px-4">
-
     <div class="flex flex-col md:flex-row gap-8">
       <div>
         <h2 class="text-2xl font-bold custom-blue mb-4">Frequently Asked Questions</h2>
 
-
+        @foreach($faqs as $faq)
         <div class="faq-item bg-white rounded-xl shadow-sm hover:shadow-lg mb-5 overflow-hidden transition-all duration-300">
           <div class="faq-header flex justify-between items-center p-5 cursor-pointer">
             <div class="flex items-center gap-3">
               <div class="faq-icon bg-blue-50 text-custom-blue p-2 rounded-full">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                   <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#003296" stroke-width="2"/>
                   <path d="M12 17V17.01M12 14C12.5523 14 13 13.5523 13 13V9.5C13 8.94772 12.5523 8.5 12 8.5C11.4477 8.5 11 8.94772 11 9.5V13C11 13.5523 11.4477 14 12 14Z" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
                 </svg>
               </div>
-                <h3 class="text-lg font-semibold custom-blue">Bagaimana mekanisme penapisan dengan hasil jenis dokumen SPPL?</h3>
+              <h3 class="text-lg font-semibold custom-blue">{{ $faq['question'] }}</h3>
             </div>
             <div class="faq-toggle w-8 h-8 flex items-center justify-center text-custom-blue rounded-full transition-all duration-300">
               <svg width="20" height="20" viewBox="0 0 24 24" class="transform transition-transform duration-300">
@@ -33,40 +32,17 @@
           </div>
           <div class="faq-content overflow-hidden max-h-0 transition-all duration-500 px-5">
             <div class="py-5 border-t border-gray-100">
-                <p class="text-gray-600">Proses penapisan dilakukan untuk menentukan jenis dokumen yang sesuai berdasarkan kegiatan yang diajukan. Jika hasil penapisan menunjukkan bahwa jenis dokumen yang diperlukan adalah SPPL (Surat Pernyataan Pengelolaan Lingkungan), pengguna dapat mengikuti panduan penggunaan (manual guide) SPPL yang t</p>
+              <p class="text-gray-600">{{ $faq['answer'] }}</p>
             </div>
           </div>
         </div>
+        @endforeach
 
-          <div class="faq-item bg-white rounded-xl shadow-sm hover:shadow-lg mb-5 overflow-hidden transition-all duration-300">
-            <div class="faq-header flex justify-between items-center p-5 cursor-pointer">
-              <div class="flex items-center gap-3">
-                <div class="faq-icon bg-blue-50 text-custom-blue p-2 rounded-full">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#003296" stroke-width="2"/>
-                    <path d="M12 17V17.01M12 14C12.5523 14 13 13.5523 13 13V9.5C13 8.94772 12.5523 8.5 12 8.5C11.4477 8.5 11 8.94772 11 9.5V13C11 13.5523 11.4477 14 12 14Z" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
-                </div>
-                <h3 class="text-lg font-semibold custom-blue">Bagaimana cara Validator Administrasi melakukan uji administrasi?</h3>
-              </div>
-              <div class="faq-toggle w-8 h-8 flex items-center justify-center text-custom-blue rounded-full transition-all duration-300">
-                <svg width="20" height="20" viewBox="0 0 24 24" class="transform transition-transform duration-300">
-                  <path d="M12 5V19M5 12H19" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </div>
-            </div>
-            <div class="faq-content overflow-hidden max-h-0 transition-all duration-500 px-5">
-              <div class="py-5 border-t border-gray-100">
-                <p class="text-gray-600">Validator Administrasi memeriksa kesesuaian berkas administrasi dengan cara mengklik menu AMDAL atau UKL-UPL, memilih menu sebelum rapat, dan mengakses tab Uji Admin. Validator menentukan kelengkapan administrasi dengan memberikan keterangan di kolom yang sesuai</p>
-              </div>
-            </div>
-          </div>
       </div>
 
       <div>
         <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-custom-blue">
           <h2 class="text-2xl font-bold custom-blue mb-6">Track Your Document</h2>
-
           <div class="mb-6">
             <label for="documentNumber" class="block text-sm font-medium text-gray-700 mb-2">Nomor Registrasi Kegiatan</label>
             <div class="flex">
@@ -81,4 +57,3 @@
     </div>
   </div>
 </section>
-

resources/views/components/frontend/home/hero.blade.php

@@ -4,17 +4,17 @@
 
 <section class="relative w-full overflow-hidden min-h-[600px] md:min-h-[800px]">
     <div class="absolute inset-0 z-0">
-        <img src="{{ asset('assets/images/home/bg-home.png') }}" alt="Hero Background" class="w-full h-full object-contain md:object-cover rounded-b-2xl">
+        <img src="{{ asset($heros['background_image']) }}" alt="Hero Background" class="w-full h-full object-contain md:object-cover rounded-b-2xl">
     </div>
 
     <div class="relative z-10 max-w-7xl mx-auto px-4 mt-20 md:mt-10" style="z-index: 0;>
         <div class="grid grid-cols-1 items-center">
             <div class="text-center space-y-6 animate-fade-in-up">
                 <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
-                    <span class="bg-blue-600 px-4 py-1 rounded-full text-white">Digital Hub</span> for Smarter</br> Environmental Documents
+                    <span class="bg-blue-600 px-4 py-1 rounded-full text-white">{{ $heros['badge'] }}</span> {{ $heros['title_one'] }}</br>{{ $heros['title_two'] }}
                 </h1>
                 <h6 class="text-xl text-gray-700">
-                    Create. Track. Integrate. All your environmental documents in one place.
+                    {{ $heros['subtitle'] }}
                 </h6>
             </div>
         </div>

resources/views/components/frontend/home/layanan.blade.php

@@ -5,21 +5,13 @@
 <section class="bg-gray-100">
     <div class="container mx-auto max-w-7xl px-4 py-8 sm:py-15">
       <!-- Header -->
-      <div class="mb-4">
-        <h1 class="text-2xl sm:text-4xl font-bold text-blue-900">Daftar Pengumuman & Informasi</h1>
-        <p class="text-gray-700 mt-1 text-sm sm:text-base">Daftar Pengumuman dan Informasi terkait kegiatan yang mengajukan izin lingkungan</p>
-      </div>
+      <div id="layanan-header" class="mb-4"></div>
 
-      <!-- Filter Buttons and Search -->
+    {{-- Tabs (PERTEK, RINTEK, AMDAL, dll) --}}
     <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
-        <div class="flex flex-wrap gap-2 w-full sm:w-auto">
-            <button id="tab-pertek" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('pertek')">PERTEK</button>
-            <button id="tab-rintek" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('rintek')">RINTEK</button>
-            <button id="tab-amdal" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('amdal')">AMDAL</button>
-            <button id="tab-addendum" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('addendum')">Addendum</button>
-            <button id="tab-ukl-upl" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('ukl-upl')">UKL - UPL</button>
-            <button id="tab-audit" class="tab-btn bg-blue-800 text-white px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('audit')">AUDIT</button>
-        </div>
+        <div id="layanan-tabs" class="flex flex-wrap gap-2 w-full sm:w-auto"></div>
+
+        {{-- Search + Filter Section --}}
         <div class="flex gap-2 w-full sm:w-auto mt-3 sm:mt-0">
         <div class="relative flex-grow sm:flex-grow-0">
             <input type="text" placeholder="Search" class="pl-10 pr-3 py-2 border border-gray-300 rounded w-full sm:w-64">
@@ -38,7 +30,7 @@
         </div>
     </div>
 
-    <!-- Filter dropdown section - positioned below the filters button -->
+    {{-- Filter Section --}}
     <div id="filter-section" class="hidden w-full mb-6 bg-white border border-gray-200 rounded-md p-4 shadow-md">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div>
@@ -65,238 +57,21 @@
             <label for="kelurahan" class="block text-sm font-medium text-gray-700 mb-1">Kelurahan</label>
             <select id="kelurahan" name="kelurahan" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
               <option value="">Semua Kelurahan</option>
-                    <option value="kepseribuutara">PULAU PANGGANG</option>
-                    <option value="kepseribuselatan">PULAU KELAPA</option>
-                    <option value="kepseribuselatan">PULAU HARAPAN</option>
+              <option value="pulau_panggung">PULAU PANGGANG</option>
+              <option value="pulau_kelapa">PULAU KELAPA</option>
+              <option value="pulau_harapan">PULAU HARAPAN</option>
             </select>
           </div>
         </div>
+
         <div class="mt-4 flex justify-end gap-2">
           <button id="clear-filter" class="bg-gray-600 text-white px-4 py-2 rounded text-sm">Clear Filter</button>
           <button class="bg-blue-600 text-white px-4 py-2 rounded text-sm">Terapkan Filter</button>
         </div>
       </div>
 
-      <!-- Pertek Content -->
-      <div id="content-pertek" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
-        <!-- Announcement 1 -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Kegiatan Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">27 Maret - 10 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
+      {{-- Konten Layanan --}}
+      <div id="layanan-contents"></div>
 
-        <!-- Announcement 2 -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-      </div>
-
-       <!-- Rintek Content -->
-       <div id="content-rintek" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
-        <!-- Announcement 1 -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Test Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">27 Maret - 10 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-
-        <!-- Announcement 2 -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- AMDAL Content -->
-      <div id="content-amdal" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
-        <!-- Announcement 1 -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Kegiatan Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">27 Maret - 10 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-
-        <!-- Announcement 2 -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Addendum Content -->
-      <div id="content-addendum" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
-        <!-- Similar content as AMDAL but for Addendum -->
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- UKL-UPL Content -->
-      <div id="content-ukl-upl" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
-        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <div class="flex gap-3 sm:gap-4 w-full">
-            <div class="flex-shrink-0">
-              <div class="bg-blue-500 p-2 rounded">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-            </div>
-            <div>
-              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
-              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
-              <a href="#" class="text-green-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
-            </div>
-          </div>
-          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
-            <button class="bg-green-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- AUDIT Content - Table View -->
-      <div id="content-audit" class="tab-content bg-white rounded overflow-hidden shadow">
-        <div class="overflow-x-auto">
-          <table class="w-full text-xs sm:text-base">
-            <thead>
-              <tr class="bg-blue-800 text-white">
-                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left w-12 sm:w-16">No</th>
-                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Nama PT</th>
-                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Judul</th>
-                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left hidden md:table-cell">Deskripsi</th>
-                <th class="py-2 sm:py-3 px-2 sm:px-4 text-center w-20 sm:w-32">Aksi</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="border-b border-gray-200">
-                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">1</td>
-                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">PT PETROKIMIA GRESIK</td>
-                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">PENGUMUMAN AUDIT LINGKUNGAN HIDUP WAJIB BERKALA INDUSTRI PETROKIMIA</td>
-                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top hidden md:table-cell">
-                  <div class="max-h-24 sm:max-h-32 overflow-y-auto pr-2">
-                    PT Petrokimia Gresik merupakan Kegiatan pada sektor Industri Petrokimia : Industri Pupuk dan Bahan Kimia (Amonia, Pupuk, Asam Sulfat, Asam Fosfat, dan Asam Klorida) yang telah dikenakan Audit Lingkungan Hidup Wajib Berkala untuk kegiatan berisiko tinggi terhadap lingkungan berdasarkan Lampiran I Peraturan
-                  </div>
-                </td>
-                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">
-                  <button class="bg-green-500 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded w-full text-xs sm:text-sm">Download</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
     </div>
   </section>

resources/views/components/frontend/home/news.blade.php

@@ -7,15 +7,21 @@
 <link rel="stylesheet" href="{{ asset('assets/css/frontend/home/news.css') }}">
 @endpush
 
+@php
+    $featuredNews = $newsItems[0] ?? null;
+    $otherNews    = array_slice($newsItems, 1, 3);
+
+    $featuredVideo = $videoItems[0] ?? null;
+    $otherVideos   = array_slice($videoItems, 1, 3);
+@endphp
+
 <section class="news-section relative overflow-hidden py-20 bg-gradient-to-b from-[#0c1a3f] via-[#0c2a6f] to-[#0c1a3f]">
-    <!-- Advanced particle background -->
     <div class="container max-w-6xl mx-auto">
     <div class="absolute inset-0">
         <div id="particles-js" class="absolute inset-0 opacity-30"></div>
         <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(12,42,111,0.8),rgba(8,8,40,0.9))] mix-blend-multiply"></div>
     </div>
 
-    <!-- Enhanced 3D floating elements -->
     <div class="absolute w-full h-full overflow-hidden pointer-events-none">
         <div class="absolute top-1/5 left-10 w-80 h-80 rounded-full mix-blend-screen opacity-10 animate-float-slow" style="background: radial-gradient(circle, rgba(139,92,246,0.8) 0%, rgba(76,29,149,0) 70%); filter: blur(60px);"></div>
         <div class="absolute bottom-1/4 right-5 w-96 h-96 rounded-full mix-blend-screen opacity-10 animate-float-slow-reverse" style="background: radial-gradient(circle, rgba(72,127,255,0.8) 0%, rgba(8,145,178,0) 70%); filter: blur(70px); animation-delay: 2s;"></div>
@@ -23,9 +29,7 @@
     </div>
 
     <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <!-- 3D Floating Section Header with perspective -->
         <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-16 perspective-hero relative z-10">
-            <!-- Sisi Kiri: Title and subtitle -->
             <div class="mb-10 lg:mb-0 lg:w-1/2">
                 <div class="relative">
                     <h2 class="text-5xl sm:text-6xl font-extrabold bg-clip-text mb-3 tracking-tight text-white">
@@ -37,7 +41,6 @@
                 </p>
             </div>
 
-            <!-- Sisi Kanan: Interactive 3D Glass Tabs -->
             <div class="lg:w-auto transform transition-all duration-500 hover:translate-y-[-5px]">
                 <div class="relative flex flex-row sm:flex-row p-1 sm:p-1.5 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl z-10 tab-glass-container">
                     <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#487fff]/20 to-purple-500/20 blur-xl transform scale-[0.96] z-0"></div>
@@ -61,21 +64,20 @@
                         </div>
                     </button>
                 </div>
-                <!-- Decorative element - hidden on small screens -->
                 <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-gradient-to-br from-[#00c950]/30 to-[#487fff]/30 rounded-full blur-xl opacity-70 animate-pulse-slow hidden lg:block"></div>
             </div>
         </div>
 
         <!-- Konten Berita -->
         <div id="beritaContent" class="transition-all transform duration-500 opacity-100">
-            <!-- Berita Utama -->
+            @if($featuredNews)
             <div class="mb-12 rounded-2xl transform transition-all duration-500 group">
             <div class="bg-gradient-to-br from-black/80 to-indigo-950/50 backdrop-blur-md border border-white/10 overflow-hidden rounded-2xl">
                 <div class="lg:flex">
                 <div class="lg:w-3/5 xl:w-2/3 relative overflow-hidden">
                     <div class="absolute inset-0 bg-gradient-to-tr from-[#00c950]/40 to-[#487fff]/40 mix-blend-overlay opacity-50"></div>
                     <div class="parallax-container h-[400px] lg:h-full overflow-hidden">
-                    <img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="Featured news"
+                    <img src="{{ $featuredNews['thumbnail'] }}" alt="Featured news"
                          class="w-full h-full object-cover parallax-img transform transition-transform duration-1000">
                     <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
                     </div>
@@ -87,16 +89,16 @@
                         <svg class="w-5 h-5 text-[#00c950]" fill="currentColor" viewBox="0 0 20 20">
                         <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                         </svg>
-                        <span class="text-[#00c950] text-sm font-medium">11 Desember 2024</span>
+                        <span class="text-[#00c950] text-sm font-medium"> {{ \Carbon\Carbon::parse($featuredNews['date'])->locale('id')->isoFormat('D MMMM YYYY') }}</span>
                     </div>
                     <h3 class="text-white font-black text-3xl my-4 leading-tight group-hover:text-[#00c950] transition-colors duration-300">
-                        Pengenalan dan Uji Coba Aplikasi Perling untuk Mendukung Sistem Persetujuan Lingkungan
+                        {{ $featuredNews['title'] }}
                     </h3>
                     <p class="text-gray-300 mb-8 line-clamp-3 text-lg">
-                        Bogor, 11 Desember 2024 - Dalam upaya meningkatkan efisiensi sistem persetujuan lingkungan di Indonesia, Kementerian Lingkungan Hidup dan Kehutanan telah meluncurkan aplikasi Perling yang inovatif...
+                        {{ $featuredNews['description'] }}
                     </p>
                     <div>
-                        <a href="{{ route('news.index') }}" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#00c950] to-[#00c950] text-white text-sm font-medium rounded-lg overflow-hidden relative transition-all duration-300 hover:pr-9 hover:shadow-lg hover:shadow-[#00c950]/20">
+                        <a href="{{ route('news.detail') }}" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#00c950] to-[#00c950] text-white text-sm font-medium rounded-lg overflow-hidden relative transition-all duration-300 hover:pr-9 hover:shadow-lg hover:shadow-[#00c950]/20">
                         <span>Baca Selengkapnya</span>
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
@@ -109,29 +111,27 @@
                 </div>
             </div>
             </div>
+            @endif
 
             <!-- 3 Berita Tambahan -->
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-            @for($i = 0; $i < 3; $i++)
+            @foreach($otherNews as $news)
             <div class="news-card group transform hover:-translate-y-1 transition-all duration-500 overflow-hidden">
                 <div class="h-full flex flex-col bg-gradient-to-br from-black/60 to-indigo-950/20 backdrop-filter backdrop-blur-md border border-white/10 rounded-2xl shadow-lg hover:shadow-[#00c950]/10 hover:border-[#00c950]/20 transition-all duration-300">
                 <div class="relative overflow-hidden">
-                    <img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="News thumbnail"
+                    <img src="{{ $news['thumbnail'] }}" alt="News thumbnail"
                      class="w-full h-64 object-cover transform group-hover:scale-105 transition-all duration-700 ease-in-out">
                     <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent opacity-80"></div>
                     <div class="absolute bottom-0 left-0 w-full p-5">
                     <div class="flex items-center space-x-2">
-                        <span class="bg-black/40 backdrop-blur-sm text-white/90 px-3 py-1 rounded-full text-xs font-medium border border-white/10">{{ 11 - $i % 10 }} Desember 2024</span>
+                        <span class="bg-black/40 backdrop-blur-sm text-white/90 px-3 py-1 rounded-full text-xs font-medium border border-white/10">{{ \Carbon\Carbon::parse($news['date'])->locale('id')->isoFormat('D MMMM YYYY') }}</span>
                     </div>
-                    <h3 class="text-white font-bold text-xl mt-3 group-hover:text-[#00c950] transition-colors duration-300 line-clamp-2">{{ ['Implementasi Sistem Monitoring Lingkungan Terbaru', 'Kebijakan Pengelolaan Limbah untuk Industri', 'Teknologi Hijau untuk Smart City', 'Mitigasi Perubahan Iklim di Indonesia'][$i % 4] }}</h3>
+                    <h3 class="text-white font-bold text-xl mt-3 group-hover:text-[#00c950] transition-colors duration-300 line-clamp-2">{{ $news['title'] }}</h3>
                     </div>
                 </div>
                 <div class="p-5 pt-4 flex-grow flex flex-col">
                     <p class="text-gray-300 text-sm mb-5 flex-grow line-clamp-3">
-                    {{ ['Jakarta, 11 Desember 2024 - Kementerian Lingkungan Hidup memperkenalkan sistem baru untuk monitoring kualitas lingkungan yang mengintegrasikan teknologi IoT dan AI untuk pemantauan real-time.',
-                    'Pemerintah mengeluarkan kebijakan baru terkait pengelolaan limbah industri yang bertujuan untuk mengurangi dampak negatif terhadap lingkungan dan mendorong ekonomi sirkular.',
-                    'Smart city di Indonesia mulai mengadopsi teknologi hijau untuk mengurangi emisi karbon dan meningkatkan efisiensi energi dalam pengelolaan kota.',
-                    'Program mitigasi perubahan iklim baru diluncurkan untuk mengurangi emisi gas rumah kaca dan mempersiapkan masyarakat menghadapi dampak perubahan iklim.'][$i % 4] }}
+                        {{ $news['description'] }}
                     </p>
                     <a href="#" class="inline-flex items-center text-[#00c950] hover:text-white font-medium text-sm transition-all duration-300 group-hover:translate-x-1 mt-auto">
                     Baca selengkapnya
@@ -142,12 +142,13 @@
                 </div>
                 </div>
             </div>
-            @endfor
+            @endforeach
             </div>
         </div>
 
         <!-- Konten Video -->
         <div id="videoContent" class="transition-all transform duration-500 opacity-0 hidden">
+            @if($featuredVideo)
             <!-- Video Utama -->
             <div class="mb-12 rounded-2xl transform transition-all duration-500 group">
                 <div class="bg-gradient-to-br from-black/80 to-blue-950/50 backdrop-blur-md border border-white/10 overflow-hidden rounded-2xl">
@@ -156,7 +157,7 @@
                             <div class="absolute inset-0 bg-gradient-to-tr from-[#487fff]/30 to-purple-500/30 mix-blend-overlay opacity-50"></div>
                             <div class="h-[400px] lg:h-full">
                                 <div class="featured-video-preview relative h-full group">
-                                    <img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="Featured video thumbnail"
+                                    <img src="{{ $featuredVideo['thumbnail'] }}" alt="Featured video thumbnail"
                                          class="w-full h-full object-cover brightness-[0.8] group-hover:brightness-[0.9] transition-all duration-500 group-hover:scale-105">
                                     <div class="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent"></div>
                                     <div class="absolute inset-0 flex items-center justify-center">
@@ -182,14 +183,11 @@
                                     <svg class="w-5 h-5 text-[#487fff]" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                                     </svg>
-                                    <span class="text-[#487fff] text-sm font-medium">10 Desember 2024</span>
+                                    <span class="text-[#487fff] text-sm font-medium"> {{ \Carbon\Carbon::parse($news['date'])->locale('id')->isoFormat('D MMMM YYYY') }}</span>
                                 </div>
                                 <h3 class="text-white font-black text-3xl my-4 leading-tight group-hover:text-[#487fff] transition-colors duration-300">
-                                    Tutorial Lengkap Penggunaan Aplikasi Perling
+                                    {{ $featuredVideo['title'] }}
                                 </h3>
-                                <p class="text-gray-300 mb-8 line-clamp-3 text-lg">
-                                    Video tutorial lengkap ini akan membantu Anda memahami semua fitur dan kemampuan dari aplikasi Perling terbaru yang dikeluarkan Kementerian Lingkungan Hidup...
-                                </p>
                                 <div>
                                     <a href="#" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#487fff] to-[#487fff] text-white text-sm font-medium rounded-lg overflow-hidden relative transition-all duration-300 hover:pr-9 hover:shadow-lg hover:shadow-[#487fff]/20">
                                         <span>Tonton Video</span>
@@ -204,15 +202,16 @@
                     </div>
                 </div>
             </div>
+            @endif
 
             <!-- Video Tambahan -->
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-                @for($i = 0; $i < 3; $i++)
+                @foreach($otherVideos as $video)
                 <div class="video-card perspective-card group transform hover:-translate-y-1 transition-all duration-500 overflow-hidden">
                     <div class="h-full flex flex-col bg-gradient-to-br from-black/60 to-blue-950/20 backdrop-filter backdrop-blur-md border border-white/10 rounded-2xl shadow-lg hover:shadow-[#487fff]/10 hover:border-[#487fff]/20 transition-all duration-300 transform-3d group-hover:rotate-y-2 group-hover:rotate-x-2">
                         <div class="relative overflow-hidden">
                             <div class="video-preview h-64 cursor-pointer">
-                                <img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="Video thumbnail"
+                                <img src="{{ $video['thumbnail'] }}" alt="Video thumbnail"
                                      class="w-full h-full object-cover brightness-[0.85] group-hover:brightness-100 transition-all duration-500 transform group-hover:scale-105">
                                 <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
                                 <div class="absolute inset-0 flex items-center justify-center">
@@ -228,24 +227,15 @@
                         </div>
                         <div class="p-5 flex-grow flex flex-col">
                             <h3 class="text-white font-bold text-xl mb-3 group-hover:text-[#487fff] transition-colors duration-300 line-clamp-2">
-                                {{ ['Wawancara dengan Menteri LHK', 'Pembahasan UU Perlindungan Lingkungan', 'Tips Implementasi Kebijakan Lingkungan', 'Diskusi Panel: Masa Depan Energi Hijau', 'Panduan Lengkap AMDAL', 'Workshop Perling untuk Pemda'][$i % 6] }}
+                               {{ $video['title'] }}
                             </h3>
-                            <p class="text-gray-300 text-sm mb-5 flex-grow line-clamp-2">
-                                {{ ['Menteri Lingkungan Hidup dan Kehutanan berbicara tentang kebijakan terbaru dan rencana strategis...',
-                                'Diskusi mendalam mengenai UU Perlindungan Lingkungan yang baru disahkan dan implikasinya...',
-                                'Panduan praktis untuk mengimplementasikan kebijakan lingkungan yang efektif di daerah...',
-                                'Para ahli membahas tren dan inovasi dalam pengembangan energi hijau di Indonesia...',
-                                'Penjelasan detail tentang proses AMDAL dan perubahan terbaru dalam regulasinya...',
-                                'Workshop khusus untuk pemerintah daerah dalam menggunakan aplikasi Perling...'][$i % 6] }}
-                            </p>
                         </div>
                     </div>
                 </div>
-                @endfor
+                @endforeach
             </div>
         </div>
 
-        <!-- Enhanced "See More" button with 3D effect -->
         <div class="flex justify-center mt-20">
             <a href="/news" class="inline-flex items-center px-8 py-3 bg-green-500 text-white font-medium rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#487fff]/20 hover:-translate-y-1">
             <span>Lihat Selengkapnya</span>

resources/views/components/frontend/home/popup.blade.php

@@ -8,31 +8,20 @@
 
 <div id="popupBanner" class="fixed inset-0 z-50 flex items-center justify-center bg-black/85 hidden">
     <div class="relative bg-white w-11/12 max-w-6xl rounded-lg shadow-2xl overflow-hidden">
-        <!-- Close button (now floating on top of content) -->
         <button id="closePopup" class="absolute right-3 top-3 z-10 text-gray-600 hover:text-gray-900 bg-white/80 rounded-full p-2">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
         </button>
 
-        <!-- Simplified Slider container -->
         <div id="bannerSlider" class="relative overflow-hidden rounded-lg h-[200px] md:h-[500px]">
-            <!-- Slide 1 -->
+            @foreach($popup as $popup)
+                <!-- Slide Image -->
                 <div class="banner-slide absolute inset-0">
-                 <img src="{{ asset ('assets/images/home/slider.jpg') }}"
+                    <img src="{{ asset($popup['slide_image']) }}"
                         alt="Banner Image" class="w-full h-full object-cover">
                 </div>
-
-            <!-- Slide 2 -->
-            <div class="banner-slide absolute inset-0 hidden">
-                      <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
-                     alt="Banner Image" class="w-full h-full object-cover">
-            </div>
-
-            <!-- Slide 3 -->
-            <div class="banner-slide absolute inset-0 hidden">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
-                     alt="Banner Image" class="w-full h-full object-cover">
+            @endforeach
         </div>
 
         <!-- Navigation -->
@@ -56,4 +45,3 @@
         </div>
     </div>
 </div>
-</div>

resources/views/components/frontend/news/index_news.blade.php

@@ -1,252 +1,194 @@
-<section class="relative bg-gray-100 font-sans" style="z-index: 9;">
-    <div class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white" >
-        <div class="container mx-auto px-4 py-16 md:py-24">
+<section class="relative bg-gradient-to-b from-gray-50 to-white font-sans" style="z-index: 9;">
+    <div class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-indigo-900 text-white">
+        <div class="absolute inset-0">
+            <svg class="absolute bottom-0 left-0 right-0 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+                <path fill="currentColor" fill-opacity="0.05" d="M0,192L48,202.7C96,213,192,235,288,229.3C384,224,480,192,576,181.3C672,171,768,181,864,197.3C960,213,1056,235,1152,229.3C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
+            </svg>
+            <svg class="absolute bottom-0 left-0 right-0 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+                <path fill="currentColor" fill-opacity="0.1" d="M0,256L48,240C96,224,192,192,288,181.3C384,171,480,181,576,186.7C672,192,768,192,864,181.3C960,171,1056,149,1152,149.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
+            </svg>
+        </div>
+        <div class="container mx-auto px-4 py-20 md:py-28 relative">
             <div class="max-w-3xl mx-auto text-center">
-                <h1 class="text-4xl md:text-5xl font-bold mb-4">Berita & Updates</h1>
-                <p class="text-xl md:text-2xl opacity-90">Temukan informasi terbaru dan video menarik seputar Sistem Pengelolaan Dokumen Lingkungan dan kebijakan lingkungan hidup</p>
+                <h1 class="text-4xl md:text-5xl font-extrabold mb-6 leading-tight tracking-tight">
+                    Berita & Updates
+                </h1>
+                <p class="text-xl md:text-2xl opacity-90 font-light leading-relaxed">Temukan informasi terbaru dan video menarik seputar Sistem Pengelolaan Dokumen Lingkungan dan kebijakan lingkungan hidup</p>
             </div>
         </div>
     </div>
+
     <div class="container mx-auto px-4 py-12 max-w-7xl">
-        <!-- News Articles Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="news-container">
-            <!-- Sample article 1 -->
-            <div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Teknologi AI" class="w-full h-48 object-cover">
-                <div class="p-5">
-                    <div class="flex items-center mb-3">
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">5 April 2025</span>
+        <div class="flex justify-center mb-10 relative">
+            <div class="bg-gray-100 rounded-full p-1.5 inline-flex shadow-md relative">
+                <button class="tab-btn text-lg px-6 py-2 rounded-full transition-all duration-300 relative z-10 font-medium" data-tab="news">Berita</button>
+                <button class="tab-btn text-lg px-6 py-2 rounded-full transition-all duration-300 relative z-10 text-gray-600" data-tab="videos">Video</button>
+                <div id="tab-indicator" class="absolute h-full top-0 rounded-full transition-all duration-300 bg-gradient-to-r from-blue-600 to-indigo-600 z-0"></div>
             </div>
-                    <h3 class="text-xl font-bold mb-2">Kemajuan AI dalam Industri Kesehatan</h3>
-                    <p class="text-gray-600 mb-4">Bagaimana kecerdasan buatan merevolusi diagnosis dan perawatan dalam bidang medis...</p>
-                    <a href="{{ route('news.detail') }}" class="inline-flex items-center text-blue-600 hover:underline">
-                        Baca Selengkapnya
-                        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+        </div>
+
+
+        <!-- News Section -->
+        <div class="tab-content" id="news-content">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="news-container">
+            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
+                <div class="relative overflow-hidden">
+                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Perizinan Lingkungan" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4">
+                    <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">5 April 2025</span>
+                </div>
+                </div>
+                <div class="p-6">
+                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">Perubahan Terbaru dalam Regulasi Perizinan Lingkungan</h3>
+                <p class="text-gray-600 mb-5 line-clamp-3">Informasi mengenai pembaruan kebijakan perizinan lingkungan dan bagaimana hal ini akan memengaruhi proses pengajuan izin untuk perusahaan di berbagai sektor industri...</p>
+                <a href="#" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
+                    <span>Baca Selengkapnya</span>
+                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                     </svg>
                 </a>
                 </div>
             </div>
 
-            <!-- Sample article 2 -->
-            <div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Robotika" class="w-full h-48 object-cover">
-                <div class="p-5">
-                    <div class="flex items-center mb-3">
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2 April 2025</span>
+            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
+                <div class="relative overflow-hidden">
+                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Perizinan Lingkungan" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4">
+                    <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">5 April 2025</span>
                 </div>
-                    <h3 class="text-xl font-bold mb-2">Robot Asisten Rumah Tangga Masa Depan</h3>
-                    <p class="text-gray-600 mb-4">Perkembangan terbaru dalam robotika yang membantu pekerjaan rumah tangga sehari-hari...</p>
-                    <a href="#" class="inline-flex items-center text-blue-600 hover:underline">
-                        Baca Selengkapnya
-                        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                </div>
+                <div class="p-6">
+                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">Panduan Praktis Pengajuan AMDAL dan UKL-UPL</h3>
+                <p class="text-gray-600 mb-5 line-clamp-3">Tahapan dan persyaratan terkini dalam pengajuan dokumen AMDAL dan UKL-UPL yang perlu diperhatikan untuk mempercepat proses perizinan lingkungan...</p>
+                <a href="#" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
+                    <span>Baca Selengkapnya</span>
+                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                     </svg>
                 </a>
                 </div>
             </div>
 
-            <!-- Sample article 3 -->
-            <div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Eksplorasi Luar Angkasa" class="w-full h-48 object-cover">
-                <div class="p-5">
-                    <div class="flex items-center mb-3">
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">30 Maret 2025</span>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Misi Mars Pertama dengan Awak Manusia</h3>
-                    <p class="text-gray-600 mb-4">Persiapan dan tantangan untuk misi bersejarah pengiriman manusia ke planet merah...</p>
-                    <a href="#" class="inline-flex items-center text-blue-600 hover:underline">
-                        Baca Selengkapnya
-                        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-                        </svg>
-                    </a>
+            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
+                <div class="relative overflow-hidden">
+                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Perizinan Lingkungan" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4">
+                    <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">5 April 2025</span>
                 </div>
                 </div>
-
-            <!-- Sample article 4 -->
-            <div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Energi Terbarukan" class="w-full h-48 object-cover">
-                <div class="p-5">
-                    <div class="flex items-center mb-3">
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">25 Maret 2025</span>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Terobosan Baru dalam Teknologi Panel Surya</h3>
-                    <p class="text-gray-600 mb-4">Efisiensi panel surya mencapai level tertinggi dengan material nano-photonic...</p>
-                    <a href="#" class="inline-flex items-center text-blue-600 hover:underline">
-                        Baca Selengkapnya
-                        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-                        </svg>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Sample article 5 -->
-            <div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Komputasi Kuantum" class="w-full h-48 object-cover">
-                <div class="p-5">
-                    <div class="flex items-center mb-3">
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">20 Maret 2025</span>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Komputer Kuantum Merevolusi Kriptografi</h3>
-                    <p class="text-gray-600 mb-4">Implikasi dari pengembangan komputer kuantum terhadap keamanan data global...</p>
-                    <a href="#" class="inline-flex items-center text-blue-600 hover:underline">
-                        Baca Selengkapnya
-                        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-                        </svg>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Sample article 6 -->
-            <div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
-                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Bioteknologi" class="w-full h-48 object-cover">
-                <div class="p-5">
-                    <div class="flex items-center mb-3">
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">15 Maret 2025</span>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">CRISPR Menjadi Pilihan Utama Terapi Gen</h3>
-                    <p class="text-gray-600 mb-4">Perkembangan terapi gen dengan teknologi CRISPR untuk mengobati penyakit genetik...</p>
-                    <a href="#" class="inline-flex items-center text-blue-600 hover:underline">
-                        Baca Selengkapnya
-                        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                <div class="p-6">
+                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">Digitalisasi Sistem Perizinan Lingkungan Nasional</h3>
+                <p class="text-gray-600 mb-5 line-clamp-3">Pemerintah meluncurkan platform digital terpadu untuk memudahkan proses pengajuan, pemantauan, dan perpanjangan izin lingkungan bagi pelaku usaha...</p>
+                <a href="#" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
+                    <span>Baca Selengkapnya</span>
+                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                     </svg>
                 </a>
                 </div>
             </div>
             </div>
+        </div>
 
-        <!-- Load More Button -->
-        <div class="flex justify-center mt-10">
-            <button id="load-more-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center" data-page="1">
-                <span>Lihat Artikel Lainnya</span>
-                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        <!-- Video Section -->
+        <div class="tab-content hidden" id="videos-content">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="video-container">
+            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
+                <div class="relative overflow-hidden">
+                <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
+                    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                    <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
+                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
+                    </svg>
+                    </div>
+                </div>
+                </div>
+                <div class="p-6">
+                <div class="flex items-center mb-3">
+                    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">5 April 2025</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">Panduan Praktis Perizinan Lingkungan Hidup</h3>
+                <p class="text-gray-600 mb-5 line-clamp-3">Langkah-langkah lengkap mengurus dokumen perizinan lingkungan sesuai dengan regulasi terbaru dan praktik terbaik...</p>
+                <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
+                    <span>Tonton Video</span>
+                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                    </svg>
+                </a>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
+                <div class="relative overflow-hidden">
+                <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
+                    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                    <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
+                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
+                    </svg>
+                    </div>
+                </div>
+                </div>
+                <div class="p-6">
+                <div class="flex items-center mb-3">
+                    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">5 April 2025</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">Tutorial Penyusunan Dokumen AMDAL yang Benar</h3>
+                <p class="text-gray-600 mb-5 line-clamp-3">Penjelasan detail tentang cara menyusun dokumen AMDAL yang memenuhi standar dan persyaratan dari Kementerian Lingkungan Hidup...</p>
+                <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
+                    <span>Tonton Video</span>
+                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                    </svg>
+                </a>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
+                <div class="relative overflow-hidden">
+                <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
+                    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                    <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
+                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
+                    </svg>
+                    </div>
+                </div>
+                </div>
+                <div class="p-6">
+                <div class="flex items-center mb-3">
+                    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">5 April 2025</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">Sistem Online Perizinan Lingkungan Terpadu</h3>
+                <p class="text-gray-600 mb-5 line-clamp-3">Demo penggunaan platform digital terbaru untuk mengajukan, melacak, dan memperbarui dokumen perizinan lingkungan secara efisien...</p>
+                <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
+                    <span>Tonton Video</span>
+                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                    </svg>
+                </a>
+                </div>
+            </div>
+            </div>
+        </div>
+
+        <div class="flex justify-center mt-12">
+            <button id="load-more-btn" class="group bg-gradient-to-r from-blue-600 to-indigo-700 text-white font-bold py-3.5 px-10 rounded-full transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg flex items-center">
+                <span>Lihat Lainnya</span>
+                <svg class="w-5 h-5 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                 </svg>
             </button>
         </div>
-
-        <!-- JavaScript for Load More functionality -->
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                const loadMoreBtn = document.getElementById('load-more-btn');
-                const newsContainer = document.getElementById('news-container');
-
-                // Sample data for demonstration
-                const moreArticles = [
-                    {
-                        image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-                        published_date: "10 Maret 2025",
-                        title: "Virtual Reality untuk Pendidikan Jarak Jauh",
-                        excerpt: "Bagaimana teknologi VR mengubah cara kita belajar dan mengajar dalam era digital",
-                        slug: "virtual-reality-pendidikan"
-                    },
-                    {
-                        image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-                        published_date: "5 Maret 2025",
-                        title: "Mobil Terbang Mulai Uji Coba di Perkotaan",
-                        excerpt: "Prototipe mobil terbang memasuki fase uji coba di lingkungan perkotaan untuk pertama kalinya",
-                        slug: "mobil-terbang-uji-coba"
-                    },
-                    {
-                        image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-                        published_date: "1 Maret 2025",
-                        title: "Interface Otak-Komputer Generasi Baru",
-                        excerpt: "Perangkat non-invasif baru memungkinkan kendali komputer hanya dengan pikiran",
-                        slug: "brain-computer-interface"
-                    },
-                    {
-                        image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-                        published_date: "25 Februari 2025",
-                        title: "Daging Kultur Laboratorium Memasuki Pasar Global",
-                        excerpt: "Produksi daging dalam laboratorium mencapai skala komersial dan mulai tersedia untuk konsumen",
-                        slug: "daging-laboratorium"
-                    },
-                    {
-                        image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-                        published_date: "20 Februari 2025",
-                        title: "Drone Pengirim Bantuan Medis di Daerah Terpencil",
-                        excerpt: "Jaringan drone otonom menyediakan layanan medis darurat ke wilayah yang sulit dijangkau",
-                        slug: "drone-medis"
-                    },
-                    {
-                        image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-                        published_date: "15 Februari 2025",
-                        title: "Material Super-Konduktor Bekerja pada Suhu Ruangan",
-                        excerpt: "Penemuan material super-konduktor yang bekerja pada suhu kamar membuka peluang untuk revolusi energi",
-                        slug: "super-konduktor"
-                    }
-                ];
-
-                let currentPage = 1;
-                const totalPages = 3;
-
-                loadMoreBtn.addEventListener('click', function() {
-                    currentPage++;
-                    const loadingText = loadMoreBtn.innerHTML;
-
-                    // Show loading state
-                    loadMoreBtn.innerHTML = `
-                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        Loading...
-                    `;
-
-                    // Simulate AJAX request with setTimeout
-                    setTimeout(() => {
-                        if (currentPage <= totalPages) {
-                            // For demo, we'll just use our sample data
-                            moreArticles.forEach(article => {
-                                const articleElement = createArticleElement(article);
-                                newsContainer.appendChild(articleElement);
-                            });
-
-                            // If reached the last page, hide the button
-                            if (currentPage === totalPages) {
-                                loadMoreBtn.style.display = 'none';
-                            } else {
-                                loadMoreBtn.innerHTML = loadingText;
-                            }
-                        } else {
-                            // No more articles
-                            loadMoreBtn.innerHTML = 'Tidak ada artikel lagi';
-                            loadMoreBtn.disabled = true;
-                            loadMoreBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
-                            loadMoreBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
-                        }
-                    }, 1000);
-                });
-
-                // Helper function to create an article element
-                function createArticleElement(article) {
-                    const div = document.createElement('div');
-                    div.className = 'bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1';
-
-                    div.innerHTML = `
-                        <img src="${article.image}" alt="${article.title}" class="w-full h-48 object-cover">
-                        <div class="p-5">
-                            <div class="flex items-center mb-3">
-                                <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">${article.published_date}</span>
-                            </div>
-                            <h3 class="text-xl font-bold mb-2">${article.title}</h3>
-                            <p class="text-gray-600 mb-4">${article.excerpt}</p>
-                            <a href="/news/${article.slug}" class="inline-flex items-center text-blue-600 hover:underline">
-                                Baca Selengkapnya
-                                <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-                                </svg>
-                            </a>
-                        </div>
-                    `;
-
-                    return div;
-                }
-            });
-        </script>
     </div>
 </section>

resources/views/components/navbar.blade.php

@@ -9,109 +9,10 @@
                 <button type="button" class="sidebar-mobile-toggle">
                     <iconify-icon icon="heroicons:bars-3-solid" class="icon"></iconify-icon>
                 </button>
-                {{-- <form class="navbar-search">
-                    <input type="text" name="search" placeholder="Search">
-                    <iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
-                </form> --}}
             </div>
         </div>
         <div class="col-auto">
             <div class="d-flex flex-wrap align-items-center gap-3">
-                {{-- <button type="button" data-theme-toggle class="w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center"></button>
-                <div class="dropdown d-none d-sm-inline-block">
-                    <button class="has-indicator w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center" type="button" data-bs-toggle="dropdown">
-                        <img src="{{ asset('assets/images/lang-flag.png') }}" alt="image" class="w-24 h-24 object-fit-cover rounded-circle">
-                    </button>
-                    <div class="dropdown-menu to-top dropdown-menu-sm">
-                        <div class="py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
-                            <div>
-                                <h6 class="text-lg text-primary-light fw-semibold mb-0">Choose Your Language</h6>
-                            </div>
-                        </div>
-
-                        <div class="max-h-400-px overflow-y-auto scroll-sm pe-8">
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="english">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag1.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">English</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="english">
-                            </div>
-
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="japan">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag2.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">Japan</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="japan">
-                            </div>
-
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="france">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag3.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">France</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="france">
-                            </div>
-
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="germany">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag4.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">Germany</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="germany">
-                            </div>
-
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="korea">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag5.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">South Korea</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="korea">
-                            </div>
-
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="bangladesh">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag6.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">Bangladesh</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="bangladesh">
-                            </div>
-
-                            <div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="india">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag7.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">India</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="india">
-                            </div>
-                            <div class="form-check style-check d-flex align-items-center justify-content-between">
-                                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="canada">
-                                    <span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
-                                        <img src="{{ asset('assets/images/flags/flag8.png') }}" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
-                                        <span class="text-md fw-semibold mb-0">Canada</span>
-                                    </span>
-                                </label>
-                                <input class="form-check-input" type="radio" name="crypto" id="canada">
-                            </div>
-                        </div>
-                    </div>
-                </div> --}}
-                <!-- Language dropdown end -->
 
                 <div class="dropdown">
                     <button class="has-indicator w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center" type="button" data-bs-toggle="dropdown">

resources/views/components/sidebar.blade.php

@@ -18,11 +18,18 @@
                 </a>
             </li>
 
-            <li class="sidebar-menu-group-title">Perizinan</li>
+            <li>
+                <a href="{{ route('jadwal.index') }}">
+                  <iconify-icon icon="bi:calendar-date" class="menu-icon"></iconify-icon>
+                  <span>Penjadwalan</span>
+                </a>
+            </li>
+
+            <li class="sidebar-menu-group-title">Persetujuan Teknis</li>
             <li class="dropdown">
                 <a href="javascript:void(0)">
                   <iconify-icon icon="bi:file-earmark-medical" class="menu-icon"></iconify-icon>
-                  <span>Persetujuan Teknis</span>
+                  <span>PERTEK</span>
                 </a>
                  {{-- submenu --}}
                  <ul class="sidebar-submenu">
@@ -32,6 +39,12 @@
                         <span>Permohonan Arahan</span>
                         </a>
                     </li>
+                    <li>
+                        <a href="{{ route('pertek.index_slo') }}"><i class="text-primary-600 w-auto"></i>
+                        <iconify-icon icon="bi:list-task" class="menu-icon"></iconify-icon>
+                        <span>Permohonan SLO</span>
+                        </a>
+                    </li>
                     <li>
                         <a href="{{ route('pertek.index_emisi') }}"><i class="text-primary-600 w-auto"></i>
                             <iconify-icon icon="bi:list-task" class="menu-icon"></iconify-icon>
@@ -53,10 +66,12 @@
                 </ul>
             </li>
 
+            <li class="sidebar-menu-group-title">Rincian Teknis</li>
+
             <li class="dropdown">
                 <a href="javascript:void(0)">
                   <iconify-icon icon="bi:card-text" class="menu-icon"></iconify-icon>
-                  <span>Rincian Teknis</span>
+                  <span>RINTEK</span>
                 </a>
                  {{-- submenu --}}
                  <ul class="sidebar-submenu">
@@ -69,192 +84,92 @@
                 </ul>
             </li>
 
-            <li>
-                <a href="{{ route('jadwal.index') }}">
-                  <iconify-icon icon="bi:calendar-date" class="menu-icon"></iconify-icon>
-                  <span>Penjadwalan</span>
-                </a>
-            </li>
+            <li class="sidebar-menu-group-title">Persetujuan Lingkungan</li>
 
             <li class="dropdown">
                 <a href="javascript:void(0)">
-                  <iconify-icon icon="bi:list-task" class="menu-icon"></iconify-icon>
-                  <span>Penugasan</span>
+                  <iconify-icon icon="bi:card-text" class="menu-icon"></iconify-icon>
+                  <span>PERLING</span>
                 </a>
                  {{-- submenu --}}
                  <ul class="sidebar-submenu">
                     <li>
-                        <a href="{{ route('penugasan.index') }}"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:list-task" class="menu-icon"></iconify-icon>
-                        <span>Semua Kegiatan</span>
+                        <a href="{{ route('persetujuan.kerangka.index') }}"><i class="text-primary-600 w-auto"></i>
+                           <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
+                           <span>Permohonan Kerangka Acuan</span>
                          </a>
                    </li>
                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                            <iconify-icon icon="bi:list-task" class="menu-icon"></iconify-icon>
-                            <span>Kegiatan Belum Ditugaskan</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:list-task" class="menu-icon"></iconify-icon>
-                        <span>Kegiatan Sudah Ditugaskan</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-
-            <li class="dropdown">
-                <a href="javascript:void(0)">
+                       <a href="{{ route ('persetujuan.amdal.index') }}"><i class="text-primary-600 w-auto"></i>
                          <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
                          <span>Amdal</span>
                        </a>
-                {{-- submenu --}}
-                <ul class="sidebar-submenu">
+                   </li>
                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
+                   <a href="{{ route('persetujuan.rkl.index') }}"><i class="text-primary-600 w-auto"></i>
                            <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
-                        <span>Semua Kegiatan</span>
+                           <span>Andal RKL-RPL</span>
                          </a>
                    </li>
                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
+                         <a href="{{ route('persetujuan.ukl.index') }}"><i class="text-primary-600 w-auto"></i>
                            <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
-                            <span>Sebelum Rapat</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
-                        <span>Sesudah Rapat</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-
-            <li class="dropdown">
-                <a href="javascript:void(0)">
-                  <iconify-icon icon="bi:file-earmark-break" class="menu-icon"></iconify-icon>
                            <span>UKL-UPL</span>
                          </a>
-                {{-- submenu --}}
-                <ul class="sidebar-submenu">
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:file-earmark-break" class="menu-icon"></iconify-icon>
-                        <span>Semua Kegiatan</span>
-                        </a>
                    </li>
                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                            <iconify-icon icon="bi:file-earmark-break" class="menu-icon"></iconify-icon>
-                            <span>Sebelum Rapat</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:file-earmark-break" class="menu-icon"></iconify-icon>
-                        <span>Sesudah Rapat</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-
-            <li class="dropdown">
-                <a href="javascript:void(0)">
-                  <iconify-icon icon="bi:file-earmark-minus"" class="menu-icon"></iconify-icon>
-                  <span>SPPL</span>
-                </a>
-                {{-- submenu --}}
-                <ul class="sidebar-submenu">
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:file-earmark-minus"" class="menu-icon"></iconify-icon>
-                        <span>Penapisan</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                            <iconify-icon icon="bi:file-earmark-minus"" class="menu-icon"></iconify-icon>
-                            <span>Terbit Otomatis</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-
-
-            <li class="dropdown">
-                <a href="javascript:void(0)">
-                  <iconify-icon icon="bi:file-earmark-post" class="menu-icon"></iconify-icon>
+                         <a href="{{ route('persetujuan.addendum.index') }}"><i class="text-primary-600 w-auto"></i>
+                           <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
                            <span>ADDENDUM</span>
                          </a>
-                {{-- submenu --}}
-                <ul class="sidebar-submenu">
+                       </li>
                        <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:file-earmark-post" class="menu-icon"></iconify-icon>
-                        <span>Semua Kegiatan</span>
+                         <a href="{{ route('persetujuan.delh.index') }}"><i class="text-primary-600 w-auto"></i>
+                           <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
+                           <span>DELH</span>
                          </a>
                        </li>
                        <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                            <iconify-icon icon="bi:file-earmark-post" class="menu-icon"></iconify-icon>
-                            <span>Sebelum Rapat</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:file-earmark-post" class="menu-icon"></iconify-icon>
-                        <span>Sesudah Rapat</span>
+                         <a href="{{ route('persetujuan.dplh.index') }}"><i class="text-primary-600 w-auto"></i>
+                           <iconify-icon icon="bi:journal-text" class="menu-icon"></iconify-icon>
+                           <span>DPLH</span>
                          </a>
                        </li>
                 </ul>
             </li>
 
+
+            <li class="sidebar-menu-group-title">Pengaturan</li>
             <li class="dropdown">
                 <a href="javascript:void(0)">
-                  <iconify-icon icon="bi:activity" class="menu-icon"></iconify-icon>
-                  <span>Kegiatan</span>
+                  <iconify-icon icon="bi:person-fill" class="menu-icon"></iconify-icon>
+                  <span>User</span>
                 </a>
                 {{-- submenu --}}
                 <ul class="sidebar-submenu">
                     <li>
                         <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:person-video" class="menu-icon"></iconify-icon>
-                        <span>Daftar Kegiatan</span>
+                        <iconify-icon icon="bi:person-fill" class="menu-icon"></iconify-icon>
+                        <span>Pengguna</span>
                         </a>
                     </li>
                     <li>
                         <a href="#"><i class="text-primary-600 w-auto"></i>
-                            <iconify-icon icon="bi:person-video" class="menu-icon"></iconify-icon>
-                            <span>Perubahan Dengan Dokumen</span>
+                            <iconify-icon icon="bi:person-gear" class="menu-icon"></iconify-icon>
+                            <span>Roles & Akses</span>
                         </a>
                     </li>
                 </ul>
             </li>
 
-            <li class="dropdown">
-                <a href="javascript:void(0)">
-                  <iconify-icon icon="bi:pencil-square" class="menu-icon"></iconify-icon>
-                  <span>Perubahan Persetujuan Lingkungan</span>
-                </a>
-                {{-- submenu --}}
-                <ul class="sidebar-submenu">
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                        <iconify-icon icon="bi:pencil-square" class="menu-icon"></iconify-icon>
-                        <span>File Browser</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#"><i class="text-primary-600 w-auto"></i>
-                            <iconify-icon icon="bi:pencil-square" class="menu-icon"></iconify-icon>
-                            <span>Data Pemrakarsa</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
 
+            <li class="sidebar-menu-group-title">Konten</li>
+            <li>
+                <a href="{{ route('news.index_newsvideo') }}">
+                  <iconify-icon icon="bi:pencil-square" class="menu-icon"></iconify-icon>
+                  <span>News & Video</span>
+                </a>
+            </li>
 
             <li class="sidebar-menu-group-title">Data Master</li>
 
@@ -295,12 +210,6 @@
                             <span>Data Konsultan</span>
                         </a>
                     </li>
-                    <li class="dropdown">
-                        <a href="#">
-                        <iconify-icon icon="bi:pencil-square" class="menu-icon"></iconify-icon>
-                        <span>Data TUK</span>
-                        </a>
-                    </li>
                 </ul>
             </li>
         </ul>

resources/views/frontend/home.blade.php

@@ -10,11 +10,11 @@
 
 @section('content')
 
-@include('components.frontend.home.popup')
-@include('components.frontend.home.hero')
+@include('components.frontend.home.popup', ['popup' => $popup])
+@include('components.frontend.home.hero', ['heros' => $heros])
 @include('components.frontend.home.layanan')
-@include('components.frontend.home.faq')
-@include('components.frontend.home.news')
+@include('components.frontend.home.faq', ['faqs' => $faqs])
+@include('components.frontend.home.news', ['newsItems' => $newsItems, 'videoItems' => $videoItems])
 @include('components.frontend.footer')
 
 @endsection

resources/views/frontend/news.blade.php

@@ -14,3 +14,9 @@
 @include('components.frontend.footer')
 
 @endsection
+
+
+@push('script')
+<script src="{{ asset('assets/js/frontend/news/newsvideo.js') }}"></script>
+@endpush
+

resources/views/news/create_news.blade.php

@@ -0,0 +1,126 @@
+@extends('layout.layout')
+@php
+    $title='News/Video';
+    $subTitle = 'News/Video';
+    $script = '<script src="' . asset('assets/js/editor.highlighted.min.js') . '"></script>
+                 <script src="' . asset('assets/js/editor.quill.js') . '"></script>
+                 <script src="' . asset('assets/js/editor.katex.min.js') . '"></script>
+                    <script src="' . asset('assets/js/backend/news/upload_image.js') . '"></script>
+                 <script src="' . asset('assets/js/backend/news/embed.js') . '"></script>
+';
+@endphp
+
+@section('content')
+            <div class="row gy-4">
+                <div class="col-lg-12">
+                    <div class="card mt-24">
+                        <div class="card-header border-bottom">
+                            <h6 class="text-xl mb-0">Tambah Postingan</h6>
+                        </div>
+                        <div class="card-body p-24">
+                            <form action="#" class="d-flex flex-column gap-20">
+                                <div>
+                                    <label class="form-label fw-bold text-neutral-900" for="title">Judul</label>
+                                    <input type="text" class="form-control border border-neutral-200 radius-8" id="title" placeholder="Masukkan judul disini">
+                                </div>
+                                <div>
+                                    <label class="form-label fw-bold text-neutral-900">Kategori </label>
+                                    <select id="category-select" class="form-control border border-neutral-200 radius-8">
+                                        <option value="News">News</option>
+                                        <option value="Video">Video</option>
+                                        <option value="Popup Home">Popup Home</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="form-label fw-bold text-neutral-900">Deskripsi </label>
+                                    <div class="border border-neutral-200 radius-8 overflow-hidden">
+                                        <div class="height-200">
+                                            <!-- Editor Toolbar Start -->
+                                            <div id="toolbar-container">
+                                                <span class="ql-formats">
+                                                    <select class="ql-font"></select>
+                                                    <select class="ql-size"></select>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-bold"></button>
+                                                    <button class="ql-italic"></button>
+                                                    <button class="ql-underline"></button>
+                                                    <button class="ql-strike"></button>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <select class="ql-color"></select>
+                                                    <select class="ql-background"></select>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-script" value="sub"></button>
+                                                    <button class="ql-script" value="super"></button>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-header" value="1"></button>
+                                                    <button class="ql-header" value="2"></button>
+                                                    <button class="ql-blockquote"></button>
+                                                    <button class="ql-code-block"></button>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-list" value="ordered"></button>
+                                                    <button class="ql-list" value="bullet"></button>
+                                                    <button class="ql-indent" value="-1"></button>
+                                                    <button class="ql-indent" value="+1"></button>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-direction" value="rtl"></button>
+                                                    <select class="ql-align"></select>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-link"></button>
+                                                    <button class="ql-image"></button>
+                                                    <button class="ql-video"></button>
+                                                    <button class="ql-formula"></button>
+                                                </span>
+                                                <span class="ql-formats">
+                                                    <button class="ql-clean"></button>
+                                                </span>
+                                            </div>
+                                            <!-- Editor Toolbar Start -->
+
+                                            <!-- Editor start -->
+                                            <div id="editor">
+                                                <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis dolores explicabo corrupti, fuga</p>
+                                                <p><br></p>
+                                            </div>
+                                            <!-- Edit End -->
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <label class="form-label fw-bold text-neutral-900">Upload Thumbnail </label>
+                                    <div class="upload-image-wrapper d-flex gap-3">
+                                        <div class="uploaded-img d-none position-relative h-160-px w-50 border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50">
+                                            <button type="button" class="uploaded-img__remove position-absolute top-0 end-0 z-1 text-2xxl line-height-1 me-8 mt-8 d-flex bg-danger-600 w-40-px h-40-px justify-content-center align-items-center rounded-circle">
+                                                <iconify-icon icon="radix-icons:cross-2" class="text-2xl text-white"></iconify-icon>
+                                            </button>
+                                            <img id="uploaded-img__preview" class="w-100 h-100 object-fit-contain" src="{{ asset('assets/images/user.png') }}" alt="image">
+                                        </div>
+                                        <label class="upload-file h-160-px w-50 border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file">
+                                            <iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
+                                            <span class="fw-semibold text-secondary-light">Upload</span>
+                                            <input id="upload-file" type="file" hidden>
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <div id="embed-link-field" class="d-none mt-4">
+                                    <label class="form-label fw-bold text-neutral-900" for="embed_link">Link Embed</label>
+                                    <input type="text" name="embed_link" id="embed_link" class="form-control border border-neutral-200 radius-8" placeholder="Masukkan URL embed di sini">
+                                </div>
+
+
+                                <button type="submit" class="btn btn-primary-600 radius-8">Submit</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+@endsection

resources/views/news/index_news.blade.php

@@ -0,0 +1,82 @@
+@extends('layout.layout')
+
+@php
+    $title='News & Video';
+    $subTitle = 'News & Video';
+    $script= '<script src="' . asset('assets/js/homeOneChart.js') . '"></script>';
+@endphp
+
+@section('content')
+
+<div class="card basic-data-table">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">
+        </h5>
+        <a href="{{ route('news.create_newsvideo') }}">
+        <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Tambah Postingan</button>
+        </a>
+    </div>
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                <thead>
+                    <tr>
+                        <th scope="col">
+                            <div class="form-check style-check d-flex align-items-center">
+                                <label class="form-check-label">
+                                    No
+                                </label>
+                            </div>
+                        </th>
+                        <th scope="col">Judul</th>
+                        <th scope="col">Thumbnail</th>
+                        <th scope="col">Tanggal Upload</th>
+                        <th scope="col">Tipe</th>
+                        <th scope="col">Pemohon</th>
+                        <th scope="col">Tanggal</th>
+                        <th scope="col">Status</th>
+                        <th scope="col">Dok</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <div class="form-check style-check d-flex align-items-center">
+                                <label class="form-check-label">
+                                    01
+                                </label>
+                            </div>
+                        </td>
+                        {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                        <td>
+                            <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                            <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                        </td>
+
+                        @include('pertek.arahan.modal_detail_arahan')
+                        {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                        <td>
+                            <div class="d-flex align-items-center">
+                                {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                            </div>
+                        </td>
+                        <td>Pembangungan Gedung Baru</td>
+                        <td>UKL-UPL</td>
+                        <td>Charles Hasibuan</td>
+                        <td>21 Maret 2025</td>
+                        <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                        <td>
+                            <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+@endsection

resources/views/penjadwalan/jadwal_sidang.blade.php

@@ -279,7 +279,28 @@
                                                 <input class="form-check-input" type="radio" name="label" id="Family">
                                                 <label class="form-check-label line-height-1 fw-medium text-secondary-light text-sm d-flex align-items-center gap-1" for="Family">
                                                     <span class="w-8-px h-8-px bg-warning-600 rounded-circle"></span>
-                                                    Amdal
+                                                    Andal RKL-RPL
+                                                </label>
+                                            </div>
+                                            <div class="form-check checked-secondary d-flex align-items-center gap-2">
+                                                <input class="form-check-input" type="radio" name="label" id="Important">
+                                                <label class="form-check-label line-height-1 fw-medium text-secondary-light text-sm d-flex align-items-center gap-1" for="Important">
+                                                    <span class="w-8-px h-8-px bg-info-600 rounded-circle"></span>
+                                                    Addendum
+                                                </label>
+                                            </div>
+                                            <div class="form-check checked-secondary d-flex align-items-center gap-2">
+                                                <input class="form-check-input" type="radio" name="label" id="Important">
+                                                <label class="form-check-label line-height-1 fw-medium text-secondary-light text-sm d-flex align-items-center gap-1" for="Important">
+                                                    <span class="w-8-px h-8-px bg-pink rounded-circle"></span>
+                                                  DPLH
+                                                </label>
+                                            </div>
+                                            <div class="form-check checked-secondary d-flex align-items-center gap-2">
+                                                <input class="form-check-input" type="radio" name="label" id="Important">
+                                                <label class="form-check-label line-height-1 fw-medium text-secondary-light text-sm d-flex align-items-center gap-1" for="Important">
+                                                    <span class="w-8-px h-8-px bg-lilac-600 rounded-circle"></span>
+                                                  DELH
                                                 </label>
                                             </div>
                                             <div class="form-check checked-secondary d-flex align-items-center gap-2">

resources/views/persetujuanlingkungan/addendum/view_addendum.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/amdal/index_amdal.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/amdal/view_amdal.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/delh/index_delh.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/delh/view_delh.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/dplh/index_dplh.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/dplh/view_dplh.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/kerangka_acuan/create_kerangka_acuan.blade.php

@@ -0,0 +1,81 @@
+@extends('layout.layout')
+@php
+    $title='Permohonan Kerangka Acuan';
+    $subTitle = 'Permohonan Kerangka Acuan';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+
+            <div class="card basic-data-table">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <a href="{{ route('pertek.create_arahan') }}">
+                    <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Buat Permohonan</button>
+                    </a>
+                </div>
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+@endsection

resources/views/persetujuanlingkungan/kerangka_acuan/index_kerangka_acuan.blade.php

@@ -0,0 +1,81 @@
+@extends('layout.layout')
+@php
+    $title='Permohonan Kerangka Acuan';
+    $subTitle = 'Permohonan Kerangka Acuan';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+
+            <div class="card basic-data-table">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <a href="{{ route('pertek.create_arahan') }}">
+                    <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Buat Permohonan</button>
+                    </a>
+                </div>
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+@endsection

resources/views/persetujuanlingkungan/rkl/index_rkl.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/rkl/view_rkl.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/ukl/index_ukl.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/persetujuanlingkungan/ukl/view_ukl.blade.php

@@ -0,0 +1,74 @@
+@extends('layout.layout')
+@php
+    $title='Amdal';
+    $subTitle = 'Amdal';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>UKL-UPL</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+@endsection

resources/views/pertek/arahan/create_arahan.blade.php

@@ -2,108 +2,7 @@
 @php
     $title='Permohonan Surat Arahan Persetujuan Teknis';
     $subTitle = 'Permohonan Surat Arahan Persetujuan Teknis';
-    $script = ' <script>
-        // =============================== Wizard Step Js Start ================================
-        $(document).ready(function() {
-            // click on next button
-            $(".form-wizard-next-btn").on("click", function() {
-                var parentFieldset = $(this).parents(".wizard-fieldset");
-                var currentActiveStep = $(this).parents(".form-wizard").find(".form-wizard-list .active");
-                var next = $(this);
-                var nextWizardStep = true;
-                parentFieldset.find(".wizard-required").each(function(){
-                    var thisValue = $(this).val();
-
-                    if( thisValue == "") {
-                        $(this).siblings(".wizard-form-error").show();
-                        nextWizardStep = false;
-                    }
-                    else {
-                        $(this).siblings(".wizard-form-error").hide();
-                    }
-                });
-                if( nextWizardStep) {
-                    next.parents(".wizard-fieldset").removeClass("show","400");
-                    currentActiveStep.removeClass("active").addClass("activated").next().addClass("active","400");
-                    next.parents(".wizard-fieldset").next(".wizard-fieldset").addClass("show","400");
-                    $(document).find(".wizard-fieldset").each(function(){
-                        if($(this).hasClass("show")){
-                            var formAtrr = $(this).attr("data-tab-content");
-                            $(document).find(".form-wizard-list .form-wizard-step-item").each(function(){
-                                if($(this).attr("data-attr") == formAtrr){
-                                    $(this).addClass("active");
-                                    var innerWidth = $(this).innerWidth();
-                                    var position = $(this).position();
-                                    $(document).find(".form-wizard-step-move").css({"left": position.left, "width": innerWidth});
-                                }else{
-                                    $(this).removeClass("active");
-                                }
-                            });
-                        }
-                    });
-                }
-            });
-            //click on previous button
-            $(".form-wizard-previous-btn").on("click",function() {
-                var counter = parseInt($(".wizard-counter").text());;
-                var prev =$(this);
-                var currentActiveStep = $(this).parents(".form-wizard").find(".form-wizard-list .active");
-                prev.parents(".wizard-fieldset").removeClass("show","400");
-                prev.parents(".wizard-fieldset").prev(".wizard-fieldset").addClass("show","400");
-                currentActiveStep.removeClass("active").prev().removeClass("activated").addClass("active","400");
-                $(document).find(".wizard-fieldset").each(function(){
-                    if($(this).hasClass("show")){
-                        var formAtrr = $(this).attr("data-tab-content");
-                        $(document).find(".form-wizard-list .form-wizard-step-item").each(function(){
-                            if($(this).attr("data-attr") == formAtrr){
-                                $(this).addClass("active");
-                                var innerWidth = $(this).innerWidth();
-                                var position = $(this).position();
-                                $(document).find(".form-wizard-step-move").css({"left": position.left, "width": innerWidth});
-                            }else{
-                                $(this).removeClass("active");
-                            }
-                        });
-                    }
-                });
-            });
-            //click on form submit button
-            $(document).on("click",".form-wizard .form-wizard-submit" , function(){
-                var parentFieldset = $(this).parents(".wizard-fieldset");
-                var currentActiveStep = $(this).parents(".form-wizard").find(".form-wizard-list .active");
-                parentFieldset.find(".wizard-required").each(function() {
-                    var thisValue = $(this).val();
-                    if( thisValue == "" ) {
-                        $(this).siblings(".wizard-form-error").show();
-                    }
-                    else {
-                        $(this).siblings(".wizard-form-error").hide();
-                    }
-                });
-            });
-            // focus on input field check empty or not
-            $(".form-control").on("focus", function(){
-                var tmpThis = $(this).val();
-                if(tmpThis == "" ) {
-                    $(this).parent().addClass("focus-input");
-                }
-                else if(tmpThis !="" ){
-                    $(this).parent().addClass("focus-input");
-                }
-            }).on("blur", function(){
-                var tmpThis = $(this).val();
-                if(tmpThis == "" ) {
-                    $(this).parent().removeClass("focus-input");
-                    $(this).siblings(".wizard-form-error").show();
-                }
-                else if(tmpThis !="" ){
-                    $(this).parent().addClass("focus-input");
-                    $(this).siblings(".wizard-form-error").hide();
-                }
-            });
-        });
-        // =============================== Wizard Step Js End ================================
-    </script>';
+    $script = '<script src="' . asset('assets/js/backend/pertek/script_arahan.js') . '"></script>';
     $css = '<link rel="stylesheet" href="' . asset('assets/css/custom.css') . '">';
 
 @endphp
@@ -111,7 +10,6 @@
 @section('content')
 
             <div class="row gy-4">
-
                 <div class="col-md-12">
                     <div class="card">
                         <div class="card-body">
@@ -149,11 +47,6 @@
                                             </li>
                                         </ul>
                                     </div>
-
-
-
-
-
                                     <fieldset class="wizard-fieldset show">
                                         <div class="card h-100 p-0 radius-12 overflow-hidden">
                                             <div class="card-header bg-light py-3">

resources/views/pertek/arahan/index_arahan.blade.php

@@ -24,7 +24,6 @@
                                 <tr>
                                     <th scope="col">
                                         <div class="form-check style-check d-flex align-items-center">
-                                            {{-- <input class="form-check-input" type="checkbox"> --}}
                                             <label class="form-check-label">
                                                 No
                                             </label>
@@ -44,7 +43,6 @@
                                 <tr>
                                     <td>
                                         <div class="form-check style-check d-flex align-items-center">
-                                            {{-- <input class="form-check-input" type="checkbox"> --}}
                                             <label class="form-check-label">
                                                 01
                                             </label>
@@ -53,7 +51,7 @@
                                     {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
                                     <td>
                                         <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a>
-                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600">K24/User</a>
+                                        <a href="{{ route('pertek.user_arahan') }}" class="text-primary-600 bg-amber-300 rounded-2xl">65D47C214422D</a>
                                     </td>
 
                                     @include('pertek.arahan.modal_detail_arahan')

resources/views/pertek/arahan/user_view_arahan.blade.php

@@ -2,7 +2,10 @@
 @php
     $title= 'Permohonan Surat Arahan Persetujuan Teknis';
     $subTitle = 'Permohonan Surat Arahan Persetujuan Teknis';
-    $css = '<link rel="stylesheet" href="' . asset('assets/css/custom.css') . '">';
+    $css = '
+    <link rel="stylesheet" href="' . asset('assets/css/pertek/user_arahan.css') . '">
+    <link rel="stylesheet" href="' . asset('assets/css/custom.css') . '">
+    ';
 @endphp
 
 @section('content')
@@ -521,46 +524,4 @@
                 </div>
     </div>
     </div>
-
-    <style>
-        .timeline-status {
-            position: relative;
-            padding-left: 28px;
-        }
-        .timeline-status:before {
-            content: '';
-            position: absolute;
-            left: 9px;
-            top: 6px;
-            height: calc(100% - 12px);
-            width: 2px;
-            background: #e9ecef;
-        }
-        .timeline-item {
-            position: relative;
-            padding-bottom: 20px;
-        }
-        .timeline-marker {
-            position: absolute;
-            left: -25px;
-            top: 6px;
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #e9ecef;
-            border: 2px solid #fff;
-        }
-        .timeline-item.completed .timeline-marker {
-            background: #28a745;
-        }
-        .timeline-item.active .timeline-marker {
-            background: #007bff;
-            box-shadow: 0 0 0 4px rgba(0,123,255,0.2);
-        }
-        .timeline-content {
-            padding-left: 10px;
-        }
-
-
-    </style>
 @endsection

resources/views/pertek/create_arahan_awal.blade.php

@@ -3,6 +3,7 @@
     $title='Permohonan Surat Arahan Persetujuan Teknis';
     $subTitle = 'Permohonan Surat Arahan Persetujuan Teknis';
     $css = '<link rel="stylesheet" href="' . asset('assets/css/custom.css') . '">';
+    $script = '<script src="' . asset('assets/js/dashboard/script_dropdown.js') . '"></script>';
 @endphp
 
 @section('content')
@@ -350,8 +351,9 @@
 </div>
 
 
-<script src="{{ asset('assets/js/dashboard/script_dropdown.js') }}"></script>
+{{-- <script src="{{ asset('assets/js/dashboard/script_dropdown.js') }}"></script> --}}
 
+<script>
     function toggleLimbahFields() {
         const selection = document.getElementById('hasilLimbahB3').value;
         const additionalFields = document.getElementById('limbahAdditionalFields');

resources/views/pertek/emisi/detail_emisi.blade.php

@@ -0,0 +1,565 @@
+@extends('layout.layout')
+@php
+    $title='Permohonan Surat Arahan Persetujuan Teknis';
+    $subTitle = 'Permohonan Surat Arahan Persetujuan Teknis';
+    $css = '<link rel="stylesheet" href="' . asset('assets/css/custom.css') . '">';
+@endphp
+
+@section('content')
+    <div class="row gy-4">
+        <div class="col-md-8">
+            <div class="card p-0 overflow-hidden position-relative radius-12 h-100">
+                <div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
+                    <h6 class="text-lg mb-0">Detail Permohonan</h6>
+                </div>
+                <div class="card-body p-24 pt-10">
+                    <!-- Tab Navigation -->
+                    <ul class="nav button-tab nav-pills mb-16" id="permohonan-tabs" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10 active" id="info-pemohon-tab" data-bs-toggle="pill" data-bs-target="#info-pemohon" type="button" role="tab" aria-controls="info-pemohon" aria-selected="true">
+                                <iconify-icon icon="bi:person-fill" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Informasi Pemohon</span>
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="persyaratan-tab" data-bs-toggle="pill" data-bs-target="#persyaratan" type="button" role="tab" aria-controls="persyaratan" aria-selected="false">
+                                <iconify-icon icon="bi:file-earmark-text" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Persyaratan Izin</span>
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="pertanyaan-tab" data-bs-toggle="pill" data-bs-target="#pertanyaan" type="button" role="tab" aria-controls="pertanyaan" aria-selected="false">
+                                <iconify-icon icon="bi:patch-question" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Pertanyaan</span>
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="timeline-tab" data-bs-toggle="pill" data-bs-target="#timeline" type="button" role="tab" aria-controls="timeline" aria-selected="false">
+                                <iconify-icon icon="material-symbols:timeline" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Timeline</span>
+                            </button>
+                        </li>
+                    </ul>
+
+                    <!-- Tab Content -->
+                    <div class="tab-content" id="permohonan-tabs-content">
+                        <!-- Tab 1: Informasi Pemohon -->
+                        <div class="tab-pane fade show active" id="info-pemohon" role="tabpanel" aria-labelledby="info-pemohon-tab" tabindex="0">
+                            <!-- Section Card: Data Pemohon -->
+                            <div class="section-card mb-8">
+                                <div class="section-header active" data-bs-toggle="collapse" href="#dataPemohon" role="button" aria-expanded="true" aria-controls="dataPemohon">
+                                    <iconify-icon icon="bi:person-fill" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Data Pemohon</h6>
+                                    <iconify-icon icon="bi:chevron-down" class="ms-auto dropdown-arrow rotated"></iconify-icon>
+                                </div>
+                                <div class="collapse show" id="dataPemohon">
+                                    <div class="section-content p-3">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="NamaPemohon" class="form-label fw-semibold text-primary-light text-sm mb-8">Nama Pemohon <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="NamaPemohon" value="John Doe">
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Jabatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Jabatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="Jabatan" value="Direktur">
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Email" class="form-label fw-semibold text-primary-light text-sm mb-8">Email <span class="text-danger-600">*</span></label>
+                                                    <input type="email" class="form-control radius-8" id="Email" value="john.doe@example.com">
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Telepon" class="form-label fw-semibold text-primary-light text-sm mb-8">Nomor Telepon</label>
+                                                    <input type="text" class="form-control radius-8" id="Telepon" value="08123456789">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Section Card: Data Kegiatan -->
+                            <div class="section-card mb-8">
+                                <div class="section-header" data-bs-toggle="collapse" href="#dataKegiatan" role="button" aria-expanded="false" aria-controls="dataKegiatan">
+                                    <iconify-icon icon="bi:building" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Data Kegiatan</h6>
+                                    <iconify-icon icon="bi:chevron-down" class="ms-auto dropdown-arrow"></iconify-icon>
+                                </div>
+                                <div class="collapse" id="dataKegiatan">
+                                    <div class="section-content p-3">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="NamaKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Nama Kegiatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="NamaKegiatan" value="Pengolahan Limbah Industri" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="JenisKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Jenis Kegiatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="JenisKegiatan" value="Industri Pengolahan" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="PelaksanaKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Pelaksana Kegiatan</label>
+                                                    <input type="text" class="form-control radius-8" id="PelaksanaKegiatan" value="PT Example Industries" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="AlamatKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Alamat Kegiatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="AlamatKegiatan" value="Jl. Industri No. 123, Jakarta Utara" >
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Section Card: Detail Informasi -->
+                            <div class="section-card mb-8">
+                                <div class="section-header" data-bs-toggle="collapse" href="#detailInformasi" role="button" aria-expanded="false" aria-controls="detailInformasi">
+                                    <iconify-icon icon="bi:info-circle-fill" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Detail Informasi</h6>
+                                    <iconify-icon icon="bi:chevron-down" class="ms-auto dropdown-arrow"></iconify-icon>
+                                </div>
+                                <div class="collapse" id="detailInformasi">
+                                    <div class="section-content p-3">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="JenisIzinLingkungan" class="form-label fw-semibold text-primary-light text-sm mb-8">Jenis Izin Lingkungan <span class="text-danger-600">*</span></label>
+                                                    <select class="form-control radius-8 form-select" id="JenisIzinLingkungan" >
+                                                        <option selected>Persetujuan Teknis - Pemenuhan Baku Mutu Air Limbah (Pemanfaatan)</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="StatusPemodalan" class="form-label fw-semibold text-primary-light text-sm mb-8">Status Pemodalan</label>
+                                                    <input type="text" class="form-control radius-8" id="StatusPemodalan" value="PMDN" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="NIB" class="form-label fw-semibold text-primary-light text-sm mb-8">NIB<span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="NIB" value="8123456789012" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="KBLI" class="form-label fw-semibold text-primary-light text-sm mb-8">KBLI <span class="text-danger-600">*</span></label>
+                                                    <select class="form-control radius-8 form-select" id="KBLI" >
+                                                        <option selected>10293 (lndustri Pembekuan Biota Air Lainnya)</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="OperasionalKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Operasional Kegiatan<span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="OperasionalKegiatan" value="24 Jam" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Skala" class="form-label fw-semibold text-primary-light text-sm mb-8">Skala<span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="Skala" value="Menengah" >
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Tab 2: Persyaratan Izin -->
+                        <div class="tab-pane fade" id="persyaratan" role="tabpanel" aria-labelledby="persyaratan-tab" tabindex="0">
+                         <fieldset class="wizard-fieldset">
+                            <!-- Dokumen Persyaratan Section -->
+                            <div class="section-card">
+                                <div class="section-header mb-3">
+                                    <iconify-icon icon="bi:file-earmark-text" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Dokumen Persyaratan</h6>
+                                </div>
+                                <div class="section-content">
+                                    <div class="row gy-4">
+                                        <!-- Surat Permohonan -->
+                                        <div class="col-12">
+                                            <div class="card border">
+                                                <div class="card-body">
+                                                    <div class="d-flex align-items-center justify-content-between mb-3">
+                                                        <div class="d-flex align-items-center">
+                                                            <div class="d-flex align-items-center justify-content-center bg-primary-600 rounded-circle text-white fw-bold me-2" style="width: 24px; height: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">1</div>
+                                                            <label class="form-label required-field mb-0">Surat Permohonan</label>
+                                                        </div>
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="badge bg-success-100 text-success-600 text-lg d-flex align-items-center">
+                                                                <iconify-icon icon="bi:check-circle-fill" class="me-1"></iconify-icon>
+                                                                Disetujui
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <!-- File Preview Section -->
+                                                    <div class="file-preview-container mt-3" id="suratPermohonanPreview">
+                                                        <div class="border rounded p-3 bg-light d-flex align-items-start">
+                                                            <div class="preview-image me-3">
+                                                                <div class="preview-icon">
+                                                                    <iconify-icon icon="bi:file-earmark-pdf" class="text-danger fs-1"></iconify-icon>
+                                                                </div>
+                                                            </div>
+                                                            <div class="flex-grow-1">
+                                                                <div class="d-flex justify-content-between align-items-start">
+                                                                    <div>
+                                                                        <h6 class="preview-filename mb-1 text-truncate" style="max-width: 200px;">surat_permohonan.pdf</h6>
+                                                                        <p class="preview-filesize text-sm text-muted mb-0">1.2 MB</p>
+                                                                    </div>
+                                                                    <button type="button" class="btn btn-sm btn-neutral-200 remove-file" data-target="suratPermohonan">
+                                                                        <iconify-icon icon="bi:x" class="text-muted"></iconify-icon>
+                                                                    </button>
+                                                                </div>
+                                                                <div class="progress mt-2" style="height: 5px;">
+                                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
+                                                                </div>
+                                                                <span class="text-success text-xs mt-1 d-block">Berhasil diupload</span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="mt-2">
+                                                        <small class="text-muted d-block">Maks. berukuran 20 MB dan berformat pdf</small>
+
+                                                         <!-- Message Section -->
+                                                         <div class="mt-3 border-top pt-3">
+                                                            <!-- Message History Container -->
+                                                            <div class="message-history mb-3">
+                                                                <div class="d-flex flex-column gap-3">
+                                                                    <!-- Admin Message -->
+                                                                    <div class="d-flex gap-2">
+                                                                        <div class="avatar avatar-sm bg-primary-100 rounded-circle d-flex align-items-center justify-content-center">
+                                                                            <iconify-icon icon="bi:person-fill" class="text-primary-600"></iconify-icon>
+                                                                        </div>
+                                                                        <div style="max-width: 85%;">
+                                                                            <div class="fw-semibold text-xs mb-1">Admin Perizinan</div>
+                                                                            <div class="bg-light rounded p-2 px-3">
+                                                                                <div>Silahkan upload dokumen pendukung lainnya jika ada</div>
+                                                                                <div class="text-muted text-xs mt-1">10:30 AM</div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <!-- User Message -->
+                                                                    <div class="d-flex flex-row-reverse gap-2">
+                                                                        <div class="avatar avatar-sm bg-primary-600 rounded-circle d-flex align-items-center justify-content-center">
+                                                                            <iconify-icon icon="bi:person-fill" class="text-white"></iconify-icon>
+                                                                        </div>
+                                                                        <div style="max-width: 85%;">
+                                                                            <div class="fw-semibold text-xs mb-1 text-end">Budi Santoso</div>
+                                                                            <div class="bg-primary-50 rounded p-2 px-3">
+                                                                                <div>Baik, saya akan upload dokumen tambahan</div>
+                                                                                <div class="text-muted text-xs mt-1">10:45 AM</div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
+                                                            <!-- Message Input -->
+                                                            <div class="d-flex gap-2">
+                                                                <textarea class="form-control" rows="2" placeholder="Tulis Pesan..."></textarea>
+                                                                <button type="button" class="btn btn-sm btn-primary-600 d-flex align-items-center align-self-end">
+                                                                    Kirim
+                                                                    <iconify-icon icon="f7:paperplane" class="text-white me-1"></iconify-icon>
+
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group d-flex align-items-center justify-content-end gap-8 mt-4">
+                                <button type="button" class="form-wizard-previous-btn btn btn-neutral-500 border-neutral-100 px-32">Sebelumnya</button>
+                                <button type="button" class="form-wizard-next-btn btn btn-primary-600 px-32">Berikutnya</button>
+                            </div>
+                        </fieldset>
+                        </div>
+
+                        <!-- Tab 3: Pertanyaan -->
+                        <div class="tab-pane fade" id="pertanyaan" role="tabpanel" aria-labelledby="pertanyaan-tab" tabindex="0">
+                            <div class="section-card mb-8">
+                                <div class="section-header active">
+                                    <iconify-icon icon="bi:question-circle-fill" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Pertanyaan dan Jawaban</h6>
+                                </div>
+                                <div class="section-content p-3">
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah berada di lokasi kawasan industri?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah masuk dalam Kawasan Lindung?</label>
+                                                <div class="form-control-plaintext">Tidak</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah masuk dalam PIPPIB?</label>
+                                                <div class="form-control-plaintext">Tidak</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah melakukan pengumpulan limbah B3?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-12">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah melakukan pengolahan air limbah?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional details for "Ya" response -->
+                                        <div class="col-12">
+                                            <div class="card border border-primary-100 rounded-3 p-3 mb-20">
+                                                <div class="row">
+                                                    <div class="col-sm-12 mb-3">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Jumlah IPAL yang telah beroperasi?</label>
+                                                            <div class="form-control-plaintext">2 Unit</div>
+                                                        </div>
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Keterangan</label>
+                                                            <div class="form-control-plaintext">IPAL beroperasi sejak tahun 2020 dengan kapasitas 100 m³/hari</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-sm-12">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">
+                                                                Apakah sebelumnya mempunyai izin IPAL?
+                                                            </label>
+                                                            <div class="form-control-plaintext">Ya</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-12">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah menghasilkan emisi?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional details for emisi -->
+                                        <div class="col-12">
+                                            <div class="card border border-primary-100 rounded-3 p-3 mb-20">
+                                                <div class="row">
+                                                    <div class="col-sm-12 mb-3">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Keterangan</label>
+                                                            <div class="form-control-plaintext">Emisi dari mesin diesel dan proses produksi</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-12">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah menghasilkan Limbah B3?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional details for limbah B3 -->
+                                        <div class="col-12">
+                                            <div class="card border border-primary-100 rounded-3 p-3 mb-20">
+                                                <div class="row">
+                                                    <div class="col-sm-12 mb-3">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Keterangan</label>
+                                                            <div class="form-control-plaintext">Limbah B3 berupa oli bekas, kemasan bekas bahan kimia, dan sludge dari IPAL</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Tab 4: Timeline -->
+                        <div class="tab-pane fade" id="timeline" role="tabpanel" aria-labelledby="timeline-tab" tabindex="0">
+                            <fieldset class="wizard-fieldset">
+                                <!-- Timeline Status Section -->
+                                <div class="section-card">
+                                    <div class="section-header mb-3">
+                                        <iconify-icon icon="material-symbols:timeline" class="section-icon"></iconify-icon>
+                                        <h6 class="text-md mb-0">Timeline Status Permohonan</h6>
+                                    </div>
+                                    <div class="section-content">
+                                        <div class="alert alert-info mb-4" role="alert">
+                                            <div class="d-flex">
+                                                <iconify-icon icon="bi:info-circle-fill" class="me-2 fs-5"></iconify-icon>
+                                                <div>
+                                                    <strong>Status Permohonan:</strong> Berikut adalah timeline status permohonan Anda. Harap periksa secara berkala untuk mengetahui kemajuan permohonan.
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="card border p-12">
+                                            <div class="timeline-status">
+                                                <div class="timeline-item completed">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Permohonan Diajukan</h6>
+                                                        <p class="text-muted small mb-0">21 Maret 2025 - 09:30</p>
+                                                        <p class="small">Permohonan berhasil diajukan</p>
+                                                    </div>
+                                                </div>
+                                                <div class="timeline-item completed">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Verifikasi Dokumen</h6>
+                                                        <p class="text-muted small mb-0">22 Maret 2025 - 14:15</p>
+                                                        <p class="small">Dokumen telah diverifikasi oleh admin</p>
+                                                    </div>
+                                                </div>
+                                                <div class="timeline-item completed">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Pembuatan Surat Tanggapan
+                                                            Arahan Persetujuan Teknis
+                                                        </h6>
+                                                        <p class="text-muted small mb-0">22 Maret 2025 - 14:15</p>
+                                                        <p class="small">Dokumen telah diverifikasi oleh admin</p>
+                                                    </div>
+                                                </div>
+                                                <div class="timeline-item">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Penerbitan Surat Tanggapan
+                                                            Arahan Persetujuan Teknis</h6>
+                                                            <p class="text-muted small mb-0">22 Maret 2025 - 15:00</p>
+                                                        <p class="small">Proses permohonan selesai</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+
+                            </fieldset>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Informasi Permohonan -->
+     <div class="col-md-4">
+                    <div class="card">
+                        <div class="card-header bg-light py-3">
+                            <div class="d-flex align-items-center">
+                                <iconify-icon icon="bi:file-earmark-medical" class="text-xl text-primary-600 me-2"></iconify-icon>
+                                <h6 class="mb-0 fw-semibold">Informasi Permohonan</h6>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Nomor Pengajuan</span>
+                                <span class="text-md fw-medium">K23/250120CAEFC3A7E</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Jenis Izin</span>
+                                <span class="text-md fw-medium">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU AIR LIMBAH (PEMANFAATAN)</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Tipe Perizinan</span>
+                                <span class="text-md fw-medium">Perusahaan/Yayasan/Pemerintahan</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Status</span>
+                                <span class="badge bg-warning-100 text-warning-600">Substansi Disetujui Tim Sekre LH</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Alamat Maps</span>
+                                <span class="text-md fw-medium">Jl. Kapten Tendean No.20C, RW.3, Kuningan Bar., Kec. Mampang Prpt., Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12710, Indonesia</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Tanggal Pengajuan</span>
+                                <span class="text-md">{{ date('d/m/Y') }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+    </div>
+    </div>
+
+    <style>
+        .timeline-status {
+            position: relative;
+            padding-left: 28px;
+        }
+        .timeline-status:before {
+            content: '';
+            position: absolute;
+            left: 9px;
+            top: 6px;
+            height: calc(100% - 12px);
+            width: 2px;
+            background: #e9ecef;
+        }
+        .timeline-item {
+            position: relative;
+            padding-bottom: 20px;
+        }
+        .timeline-marker {
+            position: absolute;
+            left: -25px;
+            top: 6px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #e9ecef;
+            border: 2px solid #fff;
+        }
+        .timeline-item.completed .timeline-marker {
+            background: #28a745;
+        }
+        .timeline-item.active .timeline-marker {
+            background: #007bff;
+            box-shadow: 0 0 0 4px rgba(0,123,255,0.2);
+        }
+        .timeline-content {
+            padding-left: 10px;
+        }
+
+
+    </style>
+@endsection

resources/views/pertek/emisi/index_emisi.blade.php

@@ -10,13 +10,6 @@
 @section('content')
 
             <div class="card basic-data-table">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h5 class="card-title mb-0">
-                    </h5>
-                    <a href="{{ route('pertek.create_arahan') }}">
-                    <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Buat Permohonan</button>
-                    </a>
-                </div>
                 <div class="card-body">
                     <div class="table-responsive">
                         <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
@@ -24,7 +17,6 @@
                                 <tr>
                                     <th scope="col">
                                         <div class="form-check style-check d-flex align-items-center">
-                                            {{-- <input class="form-check-input" type="checkbox"> --}}
                                             <label class="form-check-label">
                                                 No
                                             </label>
@@ -32,8 +24,7 @@
                                     </th>
                                     <th scope="col">Nomor Permohonan</th>
                                     <th scope="col">Perusahaan</th>
-                                    <th scope="col">Nama Kegiatan</th>
-                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Jenis Izin</th>
                                     <th scope="col">Pemohon</th>
                                     <th scope="col">Tanggal</th>
                                     <th scope="col">Status</th>
@@ -44,26 +35,22 @@
                                 <tr>
                                     <td>
                                         <div class="form-check style-check d-flex align-items-center">
-                                            {{-- <input class="form-check-input" type="checkbox"> --}}
                                             <label class="form-check-label">
                                                 01
                                             </label>
                                         </div>
                                     </td>
-                                    <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td>
-                                    @include('pertek.arahan.modal_detail_arahan')
-
                                     <td>
-                                        <div class="d-flex align-items-center">
-                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
-                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
-                                        </div>
+                                        {{-- <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a> --}}
+                                        <a href="{{ route('pertek.detail_emisi') }}" class="text-primary-600 bg-amber-300 rounded-2xl">K23/250120CAEFC3A7E</a>
                                     </td>
-                                    <td>Pembangungan Gedung Baru</td>
-                                    <td>UKL-UPL</td>
+                                    <td>
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT ANEKA TAMBANG TBK</h6>
+                                    </td>
+                                    <td>PERSETUJUAN TEKNIS - PEMENUHAN BAKU MUTU EMISI</td>
                                     <td>Charles Hasibuan</td>
                                     <td>21 Maret 2025</td>
-                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Perbaikan Berkas Dikirim Pemohon</span> </td>
                                     <td>
                                         <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
                                             <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>

resources/views/pertek/slo/detail_slo.blade.php

@@ -0,0 +1,565 @@
+@extends('layout.layout')
+@php
+    $title='Permohonan Surat Arahan Persetujuan Teknis';
+    $subTitle = 'Permohonan Surat Arahan Persetujuan Teknis';
+    $css = '<link rel="stylesheet" href="' . asset('assets/css/custom.css') . '">';
+@endphp
+
+@section('content')
+    <div class="row gy-4">
+        <div class="col-md-8">
+            <div class="card p-0 overflow-hidden position-relative radius-12 h-100">
+                <div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
+                    <h6 class="text-lg mb-0">Detail Permohonan</h6>
+                </div>
+                <div class="card-body p-24 pt-10">
+                    <!-- Tab Navigation -->
+                    <ul class="nav button-tab nav-pills mb-16" id="permohonan-tabs" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10 active" id="info-pemohon-tab" data-bs-toggle="pill" data-bs-target="#info-pemohon" type="button" role="tab" aria-controls="info-pemohon" aria-selected="true">
+                                <iconify-icon icon="bi:person-fill" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Informasi Pemohon</span>
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="persyaratan-tab" data-bs-toggle="pill" data-bs-target="#persyaratan" type="button" role="tab" aria-controls="persyaratan" aria-selected="false">
+                                <iconify-icon icon="bi:file-earmark-text" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Persyaratan Izin</span>
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="pertanyaan-tab" data-bs-toggle="pill" data-bs-target="#pertanyaan" type="button" role="tab" aria-controls="pertanyaan" aria-selected="false">
+                                <iconify-icon icon="bi:patch-question" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Pertanyaan</span>
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="timeline-tab" data-bs-toggle="pill" data-bs-target="#timeline" type="button" role="tab" aria-controls="timeline" aria-selected="false">
+                                <iconify-icon icon="material-symbols:timeline" class="text-xl"></iconify-icon>
+                                <span class="line-height-1">Timeline</span>
+                            </button>
+                        </li>
+                    </ul>
+
+                    <!-- Tab Content -->
+                    <div class="tab-content" id="permohonan-tabs-content">
+                        <!-- Tab 1: Informasi Pemohon -->
+                        <div class="tab-pane fade show active" id="info-pemohon" role="tabpanel" aria-labelledby="info-pemohon-tab" tabindex="0">
+                            <!-- Section Card: Data Pemohon -->
+                            <div class="section-card mb-8">
+                                <div class="section-header active" data-bs-toggle="collapse" href="#dataPemohon" role="button" aria-expanded="true" aria-controls="dataPemohon">
+                                    <iconify-icon icon="bi:person-fill" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Data Pemohon</h6>
+                                    <iconify-icon icon="bi:chevron-down" class="ms-auto dropdown-arrow rotated"></iconify-icon>
+                                </div>
+                                <div class="collapse show" id="dataPemohon">
+                                    <div class="section-content p-3">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="NamaPemohon" class="form-label fw-semibold text-primary-light text-sm mb-8">Nama Pemohon <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="NamaPemohon" value="John Doe">
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Jabatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Jabatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="Jabatan" value="Direktur">
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Email" class="form-label fw-semibold text-primary-light text-sm mb-8">Email <span class="text-danger-600">*</span></label>
+                                                    <input type="email" class="form-control radius-8" id="Email" value="john.doe@example.com">
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Telepon" class="form-label fw-semibold text-primary-light text-sm mb-8">Nomor Telepon</label>
+                                                    <input type="text" class="form-control radius-8" id="Telepon" value="08123456789">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Section Card: Data Kegiatan -->
+                            <div class="section-card mb-8">
+                                <div class="section-header" data-bs-toggle="collapse" href="#dataKegiatan" role="button" aria-expanded="false" aria-controls="dataKegiatan">
+                                    <iconify-icon icon="bi:building" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Data Kegiatan</h6>
+                                    <iconify-icon icon="bi:chevron-down" class="ms-auto dropdown-arrow"></iconify-icon>
+                                </div>
+                                <div class="collapse" id="dataKegiatan">
+                                    <div class="section-content p-3">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="NamaKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Nama Kegiatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="NamaKegiatan" value="Pengolahan Limbah Industri" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="JenisKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Jenis Kegiatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="JenisKegiatan" value="Industri Pengolahan" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="PelaksanaKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Pelaksana Kegiatan</label>
+                                                    <input type="text" class="form-control radius-8" id="PelaksanaKegiatan" value="PT Example Industries" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="AlamatKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Alamat Kegiatan <span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="AlamatKegiatan" value="Jl. Industri No. 123, Jakarta Utara" >
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Section Card: Detail Informasi -->
+                            <div class="section-card mb-8">
+                                <div class="section-header" data-bs-toggle="collapse" href="#detailInformasi" role="button" aria-expanded="false" aria-controls="detailInformasi">
+                                    <iconify-icon icon="bi:info-circle-fill" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Detail Informasi</h6>
+                                    <iconify-icon icon="bi:chevron-down" class="ms-auto dropdown-arrow"></iconify-icon>
+                                </div>
+                                <div class="collapse" id="detailInformasi">
+                                    <div class="section-content p-3">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="JenisIzinLingkungan" class="form-label fw-semibold text-primary-light text-sm mb-8">Jenis Izin Lingkungan <span class="text-danger-600">*</span></label>
+                                                    <select class="form-control radius-8 form-select" id="JenisIzinLingkungan" >
+                                                        <option selected>Persetujuan Teknis - Pemenuhan Baku Mutu Air Limbah (Pemanfaatan)</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="StatusPemodalan" class="form-label fw-semibold text-primary-light text-sm mb-8">Status Pemodalan</label>
+                                                    <input type="text" class="form-control radius-8" id="StatusPemodalan" value="PMDN" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="NIB" class="form-label fw-semibold text-primary-light text-sm mb-8">NIB<span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="NIB" value="8123456789012" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="KBLI" class="form-label fw-semibold text-primary-light text-sm mb-8">KBLI <span class="text-danger-600">*</span></label>
+                                                    <select class="form-control radius-8 form-select" id="KBLI" >
+                                                        <option selected>10293 (lndustri Pembekuan Biota Air Lainnya)</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="OperasionalKegiatan" class="form-label fw-semibold text-primary-light text-sm mb-8">Operasional Kegiatan<span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="OperasionalKegiatan" value="24 Jam" >
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="mb-20">
+                                                    <label for="Skala" class="form-label fw-semibold text-primary-light text-sm mb-8">Skala<span class="text-danger-600">*</span></label>
+                                                    <input type="text" class="form-control radius-8" id="Skala" value="Menengah" >
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Tab 2: Persyaratan Izin -->
+                        <div class="tab-pane fade" id="persyaratan" role="tabpanel" aria-labelledby="persyaratan-tab" tabindex="0">
+                         <fieldset class="wizard-fieldset">
+                            <!-- Dokumen Persyaratan Section -->
+                            <div class="section-card">
+                                <div class="section-header mb-3">
+                                    <iconify-icon icon="bi:file-earmark-text" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Dokumen Persyaratan</h6>
+                                </div>
+                                <div class="section-content">
+                                    <div class="row gy-4">
+                                        <!-- Surat Permohonan -->
+                                        <div class="col-12">
+                                            <div class="card border">
+                                                <div class="card-body">
+                                                    <div class="d-flex align-items-center justify-content-between mb-3">
+                                                        <div class="d-flex align-items-center">
+                                                            <div class="d-flex align-items-center justify-content-center bg-primary-600 rounded-circle text-white fw-bold me-2" style="width: 24px; height: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">1</div>
+                                                            <label class="form-label required-field mb-0">Surat Permohonan</label>
+                                                        </div>
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="badge bg-success-100 text-success-600 text-lg d-flex align-items-center">
+                                                                <iconify-icon icon="bi:check-circle-fill" class="me-1"></iconify-icon>
+                                                                Disetujui
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <!-- File Preview Section -->
+                                                    <div class="file-preview-container mt-3" id="suratPermohonanPreview">
+                                                        <div class="border rounded p-3 bg-light d-flex align-items-start">
+                                                            <div class="preview-image me-3">
+                                                                <div class="preview-icon">
+                                                                    <iconify-icon icon="bi:file-earmark-pdf" class="text-danger fs-1"></iconify-icon>
+                                                                </div>
+                                                            </div>
+                                                            <div class="flex-grow-1">
+                                                                <div class="d-flex justify-content-between align-items-start">
+                                                                    <div>
+                                                                        <h6 class="preview-filename mb-1 text-truncate" style="max-width: 200px;">surat_permohonan.pdf</h6>
+                                                                        <p class="preview-filesize text-sm text-muted mb-0">1.2 MB</p>
+                                                                    </div>
+                                                                    <button type="button" class="btn btn-sm btn-neutral-200 remove-file" data-target="suratPermohonan">
+                                                                        <iconify-icon icon="bi:x" class="text-muted"></iconify-icon>
+                                                                    </button>
+                                                                </div>
+                                                                <div class="progress mt-2" style="height: 5px;">
+                                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
+                                                                </div>
+                                                                <span class="text-success text-xs mt-1 d-block">Berhasil diupload</span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="mt-2">
+                                                        <small class="text-muted d-block">Maks. berukuran 20 MB dan berformat pdf</small>
+
+                                                         <!-- Message Section -->
+                                                         <div class="mt-3 border-top pt-3">
+                                                            <!-- Message History Container -->
+                                                            <div class="message-history mb-3">
+                                                                <div class="d-flex flex-column gap-3">
+                                                                    <!-- Admin Message -->
+                                                                    <div class="d-flex gap-2">
+                                                                        <div class="avatar avatar-sm bg-primary-100 rounded-circle d-flex align-items-center justify-content-center">
+                                                                            <iconify-icon icon="bi:person-fill" class="text-primary-600"></iconify-icon>
+                                                                        </div>
+                                                                        <div style="max-width: 85%;">
+                                                                            <div class="fw-semibold text-xs mb-1">Admin Perizinan</div>
+                                                                            <div class="bg-light rounded p-2 px-3">
+                                                                                <div>Silahkan upload dokumen pendukung lainnya jika ada</div>
+                                                                                <div class="text-muted text-xs mt-1">10:30 AM</div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <!-- User Message -->
+                                                                    <div class="d-flex flex-row-reverse gap-2">
+                                                                        <div class="avatar avatar-sm bg-primary-600 rounded-circle d-flex align-items-center justify-content-center">
+                                                                            <iconify-icon icon="bi:person-fill" class="text-white"></iconify-icon>
+                                                                        </div>
+                                                                        <div style="max-width: 85%;">
+                                                                            <div class="fw-semibold text-xs mb-1 text-end">Budi Santoso</div>
+                                                                            <div class="bg-primary-50 rounded p-2 px-3">
+                                                                                <div>Baik, saya akan upload dokumen tambahan</div>
+                                                                                <div class="text-muted text-xs mt-1">10:45 AM</div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
+                                                            <!-- Message Input -->
+                                                            <div class="d-flex gap-2">
+                                                                <textarea class="form-control" rows="2" placeholder="Tulis Pesan..."></textarea>
+                                                                <button type="button" class="btn btn-sm btn-primary-600 d-flex align-items-center align-self-end">
+                                                                    Kirim
+                                                                    <iconify-icon icon="f7:paperplane" class="text-white me-1"></iconify-icon>
+
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group d-flex align-items-center justify-content-end gap-8 mt-4">
+                                <button type="button" class="form-wizard-previous-btn btn btn-neutral-500 border-neutral-100 px-32">Sebelumnya</button>
+                                <button type="button" class="form-wizard-next-btn btn btn-primary-600 px-32">Berikutnya</button>
+                            </div>
+                        </fieldset>
+                        </div>
+
+                        <!-- Tab 3: Pertanyaan -->
+                        <div class="tab-pane fade" id="pertanyaan" role="tabpanel" aria-labelledby="pertanyaan-tab" tabindex="0">
+                            <div class="section-card mb-8">
+                                <div class="section-header active">
+                                    <iconify-icon icon="bi:question-circle-fill" class="section-icon"></iconify-icon>
+                                    <h6 class="text-md mb-0">Pertanyaan dan Jawaban</h6>
+                                </div>
+                                <div class="section-content p-3">
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah berada di lokasi kawasan industri?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah masuk dalam Kawasan Lindung?</label>
+                                                <div class="form-control-plaintext">Tidak</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah masuk dalam PIPPIB?</label>
+                                                <div class="form-control-plaintext">Tidak</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-6">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah melakukan pengumpulan limbah B3?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-12">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah melakukan pengolahan air limbah?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional details for "Ya" response -->
+                                        <div class="col-12">
+                                            <div class="card border border-primary-100 rounded-3 p-3 mb-20">
+                                                <div class="row">
+                                                    <div class="col-sm-12 mb-3">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Jumlah IPAL yang telah beroperasi?</label>
+                                                            <div class="form-control-plaintext">2 Unit</div>
+                                                        </div>
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Keterangan</label>
+                                                            <div class="form-control-plaintext">IPAL beroperasi sejak tahun 2020 dengan kapasitas 100 m³/hari</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-sm-12">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">
+                                                                Apakah sebelumnya mempunyai izin IPAL?
+                                                            </label>
+                                                            <div class="form-control-plaintext">Ya</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-12">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah menghasilkan emisi?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional details for emisi -->
+                                        <div class="col-12">
+                                            <div class="card border border-primary-100 rounded-3 p-3 mb-20">
+                                                <div class="row">
+                                                    <div class="col-sm-12 mb-3">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Keterangan</label>
+                                                            <div class="form-control-plaintext">Emisi dari mesin diesel dan proses produksi</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="col-sm-12">
+                                            <div class="mb-20">
+                                                <label class="form-label fw-semibold text-primary-light text-sm mb-8">Apakah menghasilkan Limbah B3?</label>
+                                                <div class="form-control-plaintext">Ya</div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Additional details for limbah B3 -->
+                                        <div class="col-12">
+                                            <div class="card border border-primary-100 rounded-3 p-3 mb-20">
+                                                <div class="row">
+                                                    <div class="col-sm-12 mb-3">
+                                                        <div class="mb-20">
+                                                            <label class="form-label fw-semibold text-primary-light text-sm mb-8">Keterangan</label>
+                                                            <div class="form-control-plaintext">Limbah B3 berupa oli bekas, kemasan bekas bahan kimia, dan sludge dari IPAL</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Tab 4: Timeline -->
+                        <div class="tab-pane fade" id="timeline" role="tabpanel" aria-labelledby="timeline-tab" tabindex="0">
+                            <fieldset class="wizard-fieldset">
+                                <!-- Timeline Status Section -->
+                                <div class="section-card">
+                                    <div class="section-header mb-3">
+                                        <iconify-icon icon="material-symbols:timeline" class="section-icon"></iconify-icon>
+                                        <h6 class="text-md mb-0">Timeline Status Permohonan</h6>
+                                    </div>
+                                    <div class="section-content">
+                                        <div class="alert alert-info mb-4" role="alert">
+                                            <div class="d-flex">
+                                                <iconify-icon icon="bi:info-circle-fill" class="me-2 fs-5"></iconify-icon>
+                                                <div>
+                                                    <strong>Status Permohonan:</strong> Berikut adalah timeline status permohonan Anda. Harap periksa secara berkala untuk mengetahui kemajuan permohonan.
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="card border p-12">
+                                            <div class="timeline-status">
+                                                <div class="timeline-item completed">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Permohonan Diajukan</h6>
+                                                        <p class="text-muted small mb-0">21 Maret 2025 - 09:30</p>
+                                                        <p class="small">Permohonan berhasil diajukan</p>
+                                                    </div>
+                                                </div>
+                                                <div class="timeline-item completed">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Verifikasi Dokumen</h6>
+                                                        <p class="text-muted small mb-0">22 Maret 2025 - 14:15</p>
+                                                        <p class="small">Dokumen telah diverifikasi oleh admin</p>
+                                                    </div>
+                                                </div>
+                                                <div class="timeline-item completed">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Pembuatan Surat Tanggapan
+                                                            Arahan Persetujuan Teknis
+                                                        </h6>
+                                                        <p class="text-muted small mb-0">22 Maret 2025 - 14:15</p>
+                                                        <p class="small">Dokumen telah diverifikasi oleh admin</p>
+                                                    </div>
+                                                </div>
+                                                <div class="timeline-item">
+                                                    <div class="timeline-marker"></div>
+                                                    <div class="timeline-content">
+                                                        <h6 class="mb-0">Penerbitan Surat Tanggapan
+                                                            Arahan Persetujuan Teknis</h6>
+                                                            <p class="text-muted small mb-0">22 Maret 2025 - 15:00</p>
+                                                        <p class="small">Proses permohonan selesai</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+
+                            </fieldset>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Informasi Permohonan -->
+     <div class="col-md-4">
+                    <div class="card">
+                        <div class="card-header bg-light py-3">
+                            <div class="d-flex align-items-center">
+                                <iconify-icon icon="bi:file-earmark-medical" class="text-xl text-primary-600 me-2"></iconify-icon>
+                                <h6 class="mb-0 fw-semibold">Informasi Permohonan</h6>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Nomor Pengajuan</span>
+                                <span class="text-md fw-medium">K23/250120CAEFC3A7E</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Jenis Izin</span>
+                                <span class="text-md fw-medium">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU AIR LIMBAH (PEMANFAATAN)</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Tipe Perizinan</span>
+                                <span class="text-md fw-medium">Perusahaan/Yayasan/Pemerintahan</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Status</span>
+                                <span class="badge bg-warning-100 text-warning-600">Substansi Disetujui Tim Sekre LH</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Alamat Maps</span>
+                                <span class="text-md fw-medium">Jl. Kapten Tendean No.20C, RW.3, Kuningan Bar., Kec. Mampang Prpt., Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12710, Indonesia</span>
+                            </div>
+                            <div class="mb-3">
+                                <span class="d-block text-neutral-500 mb-1 text-sm">Tanggal Pengajuan</span>
+                                <span class="text-md">{{ date('d/m/Y') }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+    </div>
+    </div>
+
+    <style>
+        .timeline-status {
+            position: relative;
+            padding-left: 28px;
+        }
+        .timeline-status:before {
+            content: '';
+            position: absolute;
+            left: 9px;
+            top: 6px;
+            height: calc(100% - 12px);
+            width: 2px;
+            background: #e9ecef;
+        }
+        .timeline-item {
+            position: relative;
+            padding-bottom: 20px;
+        }
+        .timeline-marker {
+            position: absolute;
+            left: -25px;
+            top: 6px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #e9ecef;
+            border: 2px solid #fff;
+        }
+        .timeline-item.completed .timeline-marker {
+            background: #28a745;
+        }
+        .timeline-item.active .timeline-marker {
+            background: #007bff;
+            box-shadow: 0 0 0 4px rgba(0,123,255,0.2);
+        }
+        .timeline-content {
+            padding-left: 10px;
+        }
+
+
+    </style>
+@endsection

resources/views/pertek/slo/index_slo.blade.php

@@ -0,0 +1,76 @@
+@extends('layout.layout')
+@php
+    $title='Permohonan Dokumen Surat Kelayakan Operasional';
+    $subTitle = 'Permohonan Dokumen Surat Kelayakan Operasional';
+    $script = '<script>
+                    let table = new DataTable("#dataTable");
+               </script>';
+@endphp
+
+@section('content')
+
+            <div class="card basic-data-table">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
+                            <thead>
+                                <tr>
+                                    <th scope="col">
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                No
+                                            </label>
+                                        </div>
+                                    </th>
+                                    <th scope="col">Nomor Permohonan</th>
+                                    <th scope="col">Perusahaan</th>
+                                    <th scope="col">Nama Kegiatan</th>
+                                    <th scope="col">Tipe Perizinan</th>
+                                    <th scope="col">Pemohon</th>
+                                    <th scope="col">Tanggal</th>
+                                    <th scope="col">Status</th>
+                                    <th scope="col">Dok</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check style-check d-flex align-items-center">
+                                            <label class="form-check-label">
+                                                01
+                                            </label>
+                                        </div>
+                                    </td>
+                                    {{-- <td><a href="javascript:void(0)" class="text-primary-600" data-bs-toggle="modal" data-bs-target="#detailModal">K24/250319E5CC8C330</a></td> --}}
+                                    <td>
+                                        {{-- <a href="{{ route('pertek.verifikator_arahan') }}" class="text-primary-600">K24/Verifikator</a> --}}
+                                        <a href="{{ route('pertek.detail_slo') }}" class="text-primary-600 bg-amber-300 rounded-2xl">K23/250120CAEFC3A7E</a>
+                                    </td>
+
+                                    @include('pertek.arahan.modal_detail_arahan')
+                                    {{-- @include('pertek.arahan.admin_modal_detail_arahan') --}}
+
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            {{-- <img src="{{ asset('assets/images/user-list/user-list1.png') }}" alt="" class="flex-shrink-0 me-12 radius-8"> --}}
+                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">PT. Permata Hijau</h6>
+                                        </div>
+                                    </td>
+                                    <td>Pembangungan Gedung Baru</td>
+                                    <td>SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU AIR LIMBAH (PEMANFAATAN)</td>
+                                    <td>Charles Hasibuan</td>
+                                    <td>21 Maret 2025</td>
+                                    <td> <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">Proses Review Teknis</span> </td>
+                                    <td>
+                                        <a href="#" class="btn btn-sm btn-light-primary text-success" title="Download Dokumen" download>
+                                            <iconify-icon icon="material-symbols:description" class="text-xl"></iconify-icon>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+@endsection

resources/views/pertek/subkel/surat_penerimaan.blade.php

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Surat Tanggapan</title>
+    <style>
+        body {
+            font-family: 'Times New Roman', Times, serif;
+            font-size: 12pt;
+            line-height: 1.5;
+        }
+
+        .kop-surat {
+            text-align: center;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+
+        .kop-surat img {
+            width: 100%;
+        }
+
+        .surat-details {
+            width: 100%;
+        }
+
+        .details-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .details-table td {
+            padding: 5px 0;
+        }
+
+        .details-table .label {
+            width: 120px;
+        }
+
+        .details-table .colon {
+            width: 20px;
+            text-align: center;
+        }
+
+        .content-surat {
+            margin-top: 20px;
+            text-align: justify;
+        }
+
+        .ttd-section {
+            margin-top: 30px;
+            text-align: right;
+            width: 40%;
+            float: right;
+        }
+
+        .ttd-section p {
+            margin: 5px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="surat-details">
+        <table class="details-table">
+            <tr>
+                <td class="label">Nomor</td>
+                <td class="colon">:</td>
+                <td class="value">Test</td>
+            </tr>
+            <tr>
+                <td class="label">Sifat</td>
+                <td class="colon">:</td>
+                <td class="value">test</td>
+            </tr>
+            <tr>
+                <td class="label">Lampiran</td>
+                <td class="colon">:</td>
+                <td class="value">test</td>
+            </tr>
+            <tr>
+                <td class="label">Hal</td>
+                <td class="colon">:</td>
+                <td class="value">test</td>
+            </tr>
+            <tr>
+                <td class="label">Tanggal</td>
+                <td class="colon">:</td>
+                <td class="value">test</td>
+            </tr>
+            <tr>
+                <td class="label">Kepada</td>
+                <td class="colon">:</td>
+                <td class="value">test</td>
+            </tr>
+        </table>
+
+        <!-- Isi Surat -->
+        <div class="content-surat">
+            <p>test</p>
+        </div>
+
+        <!-- Tanda Tangan -->
+        <div class="ttd-section">
+            <p>Jakarta, test</p>
+            <p>Kepala Dinas Lingkungan Hidup</p>
+            <br><br><br>
+            <p><u>Nama Pejabat</u></p>
+            <p>NIP. 19700101 199001 1 001</p>
+        </div>
+    </div>
+</body>
+</html>

routes/web.php

@@ -1,11 +1,19 @@
 <?php
 
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\HomeController;
 use App\Http\Controllers\JadwalSidangController;
 use App\Http\Controllers\LoginController;
 use App\Http\Controllers\NewsController;
 use App\Http\Controllers\PenugasanController;
 use App\Http\Controllers\PerizinanLingkunganController;
+use App\Http\Controllers\Persetujuan\AddendumController;
+use App\Http\Controllers\Persetujuan\AmdalController;
+use App\Http\Controllers\Persetujuan\DelhController;
+use App\Http\Controllers\Persetujuan\DplhController;
+use App\Http\Controllers\Persetujuan\KerangkaController;
+use App\Http\Controllers\Persetujuan\RklController;
+use App\Http\Controllers\Persetujuan\UklController;
 use App\Http\Controllers\PersetujuanTeknisController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\RincianTeknisController;
@@ -20,6 +28,9 @@ Route::get('/', function () {
     return view('/frontend/home');
 });
 
+Route::get('/', [HomeController::class, 'index'])->name('home');
+
+
 Route::get('/news/detail', function () {
     return view('/frontend/news_detail');
 });
@@ -28,6 +39,10 @@ Route::get('/news', function () {
     return view('/frontend/news');
 });
 
+Route::get('/surat/pertek/penerimaan', function () {
+    return view('/pertek/subkel/surat_penerimaan');
+});
+
 Route::get('/news', [NewsController::class, 'index'])->name('news.index');
 Route::get('/news/detail', [NewsController::class, 'detail'])->name('news.detail');
 
@@ -51,10 +66,13 @@ Route::get('/auth/login', [LoginController::class, 'index'])->name('login.index'
 // Pertek
 Route::prefix('admin')->group(function () {
     Route::get('/pertek/arahan', [PersetujuanTeknisController::class, 'index_arahan'])->name('pertek.index_arahan');
+    Route::get('/pertek/slo', [PersetujuanTeknisController::class, 'index_slo'])->name('pertek.index_slo');
+    Route::get('/pertek/detail-slo', [PersetujuanTeknisController::class, 'detail_slo'])->name('pertek.detail_slo');
     Route::get('/pertek/create-arahan', [PersetujuanTeknisController::class, 'create_arahan'])->name('pertek.create_arahan');
     Route::get('/pertek/verifikator/arahan', [PersetujuanTeknisController::class, 'verifikator_arahan'])->name('pertek.verifikator_arahan');
     Route::get('/pertek/user/arahan', [PersetujuanTeknisController::class, 'user_arahan'])->name('pertek.user_arahan');
     Route::get('/pertek/emisi', [PersetujuanTeknisController::class, 'index_emisi'])->name('pertek.index_emisi');
+    Route::get('/pertek/emisi/detail', [PersetujuanTeknisController::class, 'detail_emisi'])->name('pertek.detail_emisi');
     Route::get('/pertek/airlimbah', [PersetujuanTeknisController::class, 'index_airlimbah'])->name('pertek.index_airlimbah');
     Route::get('/pertek/limbahb3', [PersetujuanTeknisController::class, 'index_limbahb3'])->name('pertek.index_limbahb3');
 });
@@ -80,3 +98,45 @@ Route::prefix('admin')->group(function () {
 Route::prefix('admin')->group(function () {
     Route::get('/profile', [ProfileController::class, 'index'])->name('profile.index');
 });
+
+Route::prefix('admin')->group(function () {
+    Route::get('/news', [NewsController::class, 'index_newsvideo'])->name('news.index_newsvideo');
+    Route::get('/news/create', [NewsController::class, 'create_newsvideo'])->name('news.create_newsvideo');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/kerangka', [KerangkaController::class, 'index'])->name('persetujuan.kerangka.index');
+    Route::get('/kerangka/create', [KerangkaController::class, 'create'])->name('persetujuan.kerangka.create');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/amdal', [AmdalController::class, 'index'])->name('persetujuan.amdal.index');
+    Route::get('/amdal/detail', [AmdalController::class, 'detail'])->name('persetujuan.amdal.detail');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/ukl', [UklController::class, 'index'])->name('persetujuan.ukl.index');
+    Route::get('/ukl/detail', [UklController::class, 'detail'])->name('persetujuan.ukl.detail');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/rkl', [RklController::class, 'index'])->name('persetujuan.rkl.index');
+    Route::get('/rkl/detail', [RklController::class, 'detail'])->name('persetujuan.rkl.detail');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/addendum', [AddendumController::class, 'index'])->name('persetujuan.addendum.index');
+    Route::get('/addendum/detail', [AddendumController::class, 'detail'])->name('persetujuan.addendum.detail');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/delh', [DelhController::class, 'index'])->name('persetujuan.delh.index');
+    Route::get('/delh/detail', [DelhController::class, 'detail'])->name('persetujuan.delh.detail');
+});
+
+Route::prefix('admin')->group(function () {
+    Route::get('/dplh', [DplhController::class, 'index'])->name('persetujuan.dplh.index');
+    Route::get('/dplh/detail', [DplhController::class, 'detail'])->name('persetujuan.dplh.detail');
+});
+
+