   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->


  <div class="container flex-1 pt-20 w-full my-4">

    <%- include('../../partials/utils/title.ejs', { title: title }) %>

    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: title }
    ];
  %>
    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>
     <div class=" mt-4">

      <div class=" bg-white shadow-md rounded-lg" style="padding: 20px;">
        <h4 class="text-lg font-semibold pb-10">Edit Setting</h4>
                <hr/>

        <form id="editForm" style="padding-top: 10px;">
          <div class="mb-4">
            <label for="title" class="form-label">Title</label>
            <input type="text" id="title" name="title" class="form-control" value="<%= title %>" readonly />
          </div>

          <div class="mb-4">
            <label for="value" class="form-label">Value</label>
            <input type="text" id="value" name="value" class="form-control" value="<%= value %>" />
          </div>

          <div style="display: flex; justify-content: end; margin-top: 20px;">
            <button type="submit" class="btn btn-primary">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>

  <script>
    // Define form configuration
    const formConfig = {
      formId: "editForm",
      fields: [{
        name: "value",
        type: "text",
        required: true,
        messages: {
          required: "Value is required"
        }
      }]
    };
  </script>

  <script src="/js/validator/validation.js"></script>


  <script>
    const formValidator = setupFormValidation(
      formConfig.formId,
      formConfig.fields
    );

    document.getElementById("editForm").addEventListener("submit", async function(e) {
      e.preventDefault();
      // Validate form
      if (!formValidator.validateForm()) {
        console.log('Form validation failed');
        return;
      }

      const value = document.getElementById("value").value.trim();
      const key = "<%= rawKey %>".toLowerCase();

      const urlFields = ["privacy", "aboutus", "terms"];

      if (urlFields.includes(key) && !/^https?:\/\//i.test(value)) {
        return Swal.fire("Invalid URL", "Value must start with http:// or https://", "error");
      }

      try {
        const res = await fetch("/admin/settings/update/<%= type %>/<%= id %>", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            value
          }),
        });

        const data = await res.json();

        if (data.success) {
          Swal.fire("Success", data.message, "success");
        } else {
          Swal.fire("Error", data.message || "Failed to update", "error");
        }
      } catch (err) {
        console.error(err);
        Swal.fire("Error", "Something went wrong!", "error");
      }
    });
  </script>
  <%- footer %>