@extends('template.layouts.template-base')
@section('title', 'Legal Pages')

@section('styles')
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
    />
<style>
  .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
</style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a  href="javascript:void(0);">Pages / <span class="breadcrumb-link">Legal Pages </span></a>
                    </div>
                </div>
                </div>
            </div>
        </div>

          <div class="container-fluid d-flex p-0 legal-page">
      <!-- Sidebar -->
      <div class="sidebar">
        <button class="create-btn" id="createNewBtn">
         <i class="ri-add-fill fs-5"></i>
          Create New Policy
        </button>

        <ul class="page-list" id="pageList">
          <!-- Pages will be dynamically added here -->
        </ul>
      </div>

      <!-- Main Content -->
      <div class="legal-main-content">
        <div class="content-card">
          <div id="contentArea">
            <div class="header-section">
              <h2 class="page-heading" id="pageTitle"></h2>
              <button class="edit-btn" id="editBtn" style="display: none">
                <i class="fas fa-edit"></i>
                Edit
              </button>
            </div>

            <!-- View Mode -->
            <div id="viewMode" style="display: none">
              <div class="view-content" id="viewContent"></div>
            </div>

            <!-- Edit Mode -->
            <div id="editMode">
              <form id="policyForm">
                <div class="form-group">
                  <label class="form-label">
                    Heading <span class="required">*</span>
                  </label>
                  <input
                    type="text"
                    class="form-control"
                    id="headingInput"
                    placeholder="Enter Here"
                    required
                  />
                </div>

                <div class="form-group">
                  <div class="editor-container">
                    <textarea id="contentEditor"></textarea>
                  </div>
                </div>

                <div class="btn-actions">
                  <button
                    type="button"
                    class="cancel-btn"
                    id="cancelBtn"
                    style="display: none"
                  >
                    Cancel
                  </button>
                  <button type="submit" class="save-btn">Save</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

@endsection


@section('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/ckeditor.js"></script>
       <script>
      // State Management
      let pages = [];
      let currentPageId = null;
      let isEditMode = false;
      let editor = null;

      // Load pages from localStorage on page load
      window.addEventListener("DOMContentLoaded", () => {
        loadPagesFromStorage();
        renderPageList();
        initializeEditor();
      });

      // Initialize CKEditor
      async function initializeEditor() {
        if (editor) {
          return; // Editor already initialized
        }

        try {
          editor = await ClassicEditor.create(
            document.querySelector("#contentEditor"),
            {
              placeholder: "Type Here",
              toolbar: {
                items: [
                  "heading",
                  "|",
                  "bold",
                  "italic",
                  "underline",
                  "|",
                  "alignment",
                  "|",
                  "bulletedList",
                  "numberedList",
                  "|",
                  "link",
                  "insertTable",
                  "|",
                  "undo",
                  "redo",
                ],
              },
              heading: {
                options: [
                  {
                    model: "paragraph",
                    title: "Paragraph",
                    class: "ck-heading_paragraph",
                  },
                  {
                    model: "heading1",
                    view: "h1",
                    title: "H1 - Heading",
                    class: "ck-heading_heading1",
                  },
                  {
                    model: "heading2",
                    view: "h2",
                    title: "H2 - Heading",
                    class: "ck-heading_heading2",
                  },
                  {
                    model: "heading3",
                    view: "h3",
                    title: "H3 - Heading",
                    class: "ck-heading_heading3",
                  },
                ],
              },
            },
          );
        } catch (error) {
          console.error("Error initializing CKEditor:", error);
        }
      }

      // Load pages from localStorage
      function loadPagesFromStorage() {
        const savedPages = localStorage.getItem("legalPages");
        if (savedPages) {
          pages = JSON.parse(savedPages);
        } else {
          pages = [];
        }
      }

      // Save pages to localStorage
      function savePagesToStorage() {
        localStorage.setItem("legalPages", JSON.stringify(pages));
      }

      // Generate unique ID
      function generateId() {
        return (
          "page_" + Date.now() + "_" + Math.random().toString(36).substr(2, 9)
        );
      }

      // Render page list
      function renderPageList() {
        const pageList = document.getElementById("pageList");
        pageList.innerHTML = "";

        pages.forEach((page) => {
          const li = document.createElement("li");
          li.className =
            "page-item" + (page.id === currentPageId ? " active" : "");
          li.innerHTML = `
                    <span>${page.title}</span>
                    <i class="bx bxs-trash delete-icon" data-id="${page.id}"></i>
                `;

          li.addEventListener("click", (e) => {
            if (!e.target.classList.contains("delete-icon")) {
              selectPage(page.id);
            }
          });

          // Delete functionality
          const deleteIcon = li.querySelector(".delete-icon");
          deleteIcon.addEventListener("click", (e) => {
            e.stopPropagation();
            deletePage(page.id);
          });

          pageList.appendChild(li);
        });
      }

      // Select a page
      function selectPage(pageId) {
        currentPageId = pageId;
        const page = pages.find((p) => p.id === pageId);

        if (page) {
          isEditMode = false;
          document.getElementById("pageTitle").textContent = page.title;
          document.getElementById("viewContent").innerHTML = page.content;

          // Show view mode
          document.getElementById("viewMode").style.display = "block";
          document.getElementById("editMode").style.display = "none";
          document.getElementById("editBtn").style.display = "flex";
          document.getElementById("cancelBtn").style.display = "inline-block";

          renderPageList();
        }
      }

      // Create new page
      document.getElementById("createNewBtn").addEventListener("click", () => {
        // Clear the form
        document.getElementById("headingInput").value = "";
        if (editor) {
          editor.setData("");
        }

        // Show edit mode for new page
        currentPageId = null;
        isEditMode = true;
        document.getElementById("pageTitle").textContent = "";
        document.getElementById("viewMode").style.display = "none";
        document.getElementById("editMode").style.display = "block";
        document.getElementById("editBtn").style.display = "none";
        document.getElementById("cancelBtn").style.display = "none";

        // Clear selection in sidebar
        renderPageList();
      });

      // Delete page
      function deletePage(pageId) {
        pages = pages.filter((p) => p.id !== pageId);
        savePagesToStorage();
        renderPageList();

        if (currentPageId === pageId) {
          currentPageId = null;
          isEditMode = true;
          document.getElementById("pageTitle").textContent = "";
          document.getElementById("headingInput").value = "";
          if (editor) {
            editor.setData("");
          }
          document.getElementById("viewMode").style.display = "none";
          document.getElementById("editMode").style.display = "block";
          document.getElementById("editBtn").style.display = "none";
          document.getElementById("cancelBtn").style.display = "none";
        }
      }

      // Enter edit mode
      function enterEditMode() {
        isEditMode = true;
        const page = pages.find((p) => p.id === currentPageId);

        if (!page) return;

        document.getElementById("viewMode").style.display = "none";
        document.getElementById("editMode").style.display = "block";
        document.getElementById("editBtn").style.display = "none";
        document.getElementById("cancelBtn").style.display = "inline-block";

        // Populate form
        document.getElementById("headingInput").value = page.title;
        if (editor) {
          editor.setData(page.content);
        }
      }

      // Exit edit mode
      function exitEditMode() {
        if (!currentPageId) {
          // If no page selected, just clear the form
          document.getElementById("headingInput").value = "";
          if (editor) {
            editor.setData("");
          }
          return;
        }

        isEditMode = false;
        const page = pages.find((p) => p.id === currentPageId);

        if (page) {
          // Restore original content
          document.getElementById("pageTitle").textContent = page.title;
          document.getElementById("viewContent").innerHTML = page.content;
        }

        document.getElementById("viewMode").style.display = "block";
        document.getElementById("editMode").style.display = "none";
        document.getElementById("editBtn").style.display = "flex";
      }

      // Edit button click
      document
        .getElementById("editBtn")
        .addEventListener("click", enterEditMode);

      // Cancel button click
      document.getElementById("cancelBtn").addEventListener("click", () => {
        exitEditMode();
      });

      // Form submit
      document.getElementById("policyForm").addEventListener("submit", (e) => {
        e.preventDefault();

        const heading = document.getElementById("headingInput").value.trim();
        const content = editor ? editor.getData() : "";

        if (!heading) {
          return;
        }

        if (currentPageId) {
          // Update existing page
          const page = pages.find((p) => p.id === currentPageId);
          if (page) {
            page.title = heading;
            page.content = content;

            savePagesToStorage();
            renderPageList();

            // Update view
            document.getElementById("pageTitle").textContent = page.title;
            document.getElementById("viewContent").innerHTML = page.content;

            exitEditMode();
          }
        } else {
          // Create new page
          const newPage = {
            id: generateId(),
            title: heading,
            content: content,
          };

          pages.push(newPage);
          savePagesToStorage();
          renderPageList();
          selectPage(newPage.id);
        }
      });
    </script>

@endsection