{{ define "content" }}
<div class="min-h-screen bg-gray-50">
  <!-- Top Navigation -->
  <div class="bg-white border-b border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="flex items-center gap-2">
          <i
            class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-users{{end}} text-blue-600"
          ></i>
          <span class="text-sm font-medium">Volunteer Management</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Main Content -->
  <div class="p-6">
    <!-- Profile Info Section -->
    <div class="mb-8">
      <div class="flex items-start space-x-4">
        <div class="flex-1">
          <h3 class="text-xl font-semibold text-gray-900">
            {{ .User.FirstName }} {{ .User.LastName }}
          </h3>
          <p class="text-gray-600">{{ .User.Email }}</p>
          <div class="flex items-center mt-2 space-x-4">
            <span
              class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
            >
              <i class="fas fa-user-check mr-1"></i>
              Active User
            </span>
            <span class="text-gray-600">Signup Code:</span>
            <span class="font-mono text-gray-900">{{ .User.AdminCode }}</span>
            <span class="text-gray-600">User ID:</span>
            <span class="font-mono text-gray-900">{{ .User.UserID }}</span>
            <span class="text-gray-600">Role:</span>
            <span class="text-gray-900">
              {{ if eq .User.RoleID 1 }}Admin {{ else if eq .User.RoleID 2
              }}Team Leader {{ else }}Volunteer {{ end }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Profile Section -->
    <div class="border-t border-gray-200 pt-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
        <i class="fas fa-edit text-blue-600 mr-3"></i>
        Edit Profile Information
      </h3>

      <!-- Edit Profile Form -->
      <form method="post" action="/profile/update">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- First Name -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              First Name <span class="text-red-500">*</span>
            </label>
            <input
              type="text"
              name="first_name"
              value="{{ .User.FirstName }}"
              required
              class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
              placeholder="Enter first name"
            />
          </div>

          <!-- Last Name -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              Last Name <span class="text-red-500">*</span>
            </label>
            <input
              type="text"
              name="last_name"
              value="{{ .User.LastName }}"
              required
              class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
              placeholder="Enter last name"
            />
          </div>

          <!-- Email (Read-only) -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              Email Address
              <span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
                >Read Only</span
              >
            </label>
            <div class="relative">
              <input
                type="email"
                name="email"
                value="{{ .User.Email }}"
                disabled
                class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
              />
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                <i class="fas fa-lock text-gray-400"></i>
              </div>
            </div>
            <p class="text-xs text-gray-500 mt-1">
              Contact system administrator to change email
            </p>
          </div>

          <!-- Phone -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              Phone Number
            </label>
            <input
              type="tel"
              name="phone"
              value="{{ .User.Phone }}"
              class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
              placeholder="Enter phone number"
            />
          </div>
        </div>

        <!-- Profile Form Actions -->
        <div
          class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
        >
          <div class="flex items-center text-sm text-gray-500">
            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
            Changes will be applied immediately after saving
          </div>
          <div class="flex space-x-3">
            <button
              type="button"
              onclick="window.history.back()"
              class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
            >
              <i class="fas fa-times mr-2"></i>
              Cancel
            </button>
            <button
              type="submit"
              class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
            >
              <i class="fas fa-save mr-2"></i>
              Save Changes
            </button>
          </div>
        </div>
      </form>
    </div>

    <!-- Configuration Settings Section -->
    <div class="border-t border-gray-200 pt-8 mt-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
        <i class="fas fa-cog text-blue-600 mr-3"></i>
        Configuration Settings
      </h3>

      <form method="post" action="/profile/settings" id="settingsForm">
        <div class="space-y-6">
          <!-- Add New Setting -->
          <div class="bg-white border border-gray-200 p-6">
            <h4 class="text-md font-semibold text-gray-800 mb-4">
              Add New Setting
            </h4>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                  Setting Name
                </label>
                <input
                  type="text"
                  id="newSettingName"
                  class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
                  placeholder="Enter setting name"
                />
              </div>
              <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                  Setting Value
                </label>
                <input
                  type="text"
                  id="newSettingValue"
                  class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
                  placeholder="Enter setting value"
                />
              </div>
              <div class="flex items-end">
                <button
                  type="button"
                  onclick="addSetting()"
                  class="w-full px-6 py-3 bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 font-medium"
                >
                  <i class="fas fa-plus mr-2"></i>
                  Add Setting
                </button>
              </div>
            </div>
          </div>

          <!-- Current Settings -->
          <div class="bg-white border border-gray-200 p-6">
            <h4 class="text-md font-semibold text-gray-800 mb-4">
              Current Settings
            </h4>
            <div id="settingsList" class="space-y-3">
              <!-- Settings will be dynamically added here -->
              <div class="text-gray-500 text-sm" id="noSettingsMessage">
                No settings configured yet. Add your first setting above.
              </div>
            </div>
          </div>
        </div>

        <!-- Settings Form Actions -->
        <div
          class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
        >
          <div class="flex items-center text-sm text-gray-500">
            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
            Settings are applied immediately when added or removed
          </div>
          <div class="flex space-x-3">
            <button
              type="button"
              onclick="clearAllSettings()"
              class="px-6 py-2 border border-red-300 text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 font-medium"
            >
              <i class="fas fa-trash mr-2"></i>
              Clear All
            </button>
            <button
              type="submit"
              class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
            >
              <i class="fas fa-save mr-2"></i>
              Save Settings
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  let settings = [];

  function addSetting() {
    const nameInput = document.getElementById("newSettingName");
    const valueInput = document.getElementById("newSettingValue");

    const name = nameInput.value.trim();
    const value = valueInput.value.trim();

    if (!name || !value) {
      alert("Please enter both setting name and value");
      return;
    }

    // Check if setting already exists
    const existingIndex = settings.findIndex(
      (s) => s.name.toLowerCase() === name.toLowerCase()
    );
    if (existingIndex !== -1) {
      // Update existing setting
      settings[existingIndex].value = value;
    } else {
      // Add new setting
      settings.push({ name, value });
    }

    // Clear inputs
    nameInput.value = "";
    valueInput.value = "";

    // Update display
    displaySettings();
  }

  function removeSetting(index) {
    settings.splice(index, 1);
    displaySettings();
  }

  function displaySettings() {
    const settingsList = document.getElementById("settingsList");
    const noSettingsMessage = document.getElementById("noSettingsMessage");

    if (settings.length === 0) {
      noSettingsMessage.style.display = "block";
      settingsList.innerHTML =
        '<div class="text-gray-500 text-sm" id="noSettingsMessage">No settings configured yet. Add your first setting above.</div>';
      return;
    }

    noSettingsMessage.style.display = "none";

    settingsList.innerHTML = settings
      .map(
        (setting, index) => `
    <div class="flex items-center justify-between p-4 border border-gray-200 bg-gray-50">
      <div class="flex-1">
        <div class="flex items-center space-x-4">
          <span class="font-semibold text-gray-900">${setting.name}:</span>
          <span class="text-gray-700">${setting.value}</span>
        </div>
      </div>
      <button
        type="button"
        onclick="removeSetting(${index})"
        class="px-3 py-1 text-red-600 hover:text-red-800 focus:outline-none"
        title="Remove setting"
      >
        <i class="fas fa-times"></i>
      </button>
    </div>
  `
      )
      .join("");
  }

  function clearAllSettings() {
    if (settings.length === 0) return;

    if (confirm("Are you sure you want to clear all settings?")) {
      settings = [];
      displaySettings();
    }
  }

  // Allow Enter key to add setting
  document
    .getElementById("newSettingName")
    .addEventListener("keypress", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        document.getElementById("newSettingValue").focus();
      }
    });

  document
    .getElementById("newSettingValue")
    .addEventListener("keypress", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        addSetting();
      }
    });

  // Form submission handler
  document
    .getElementById("settingsForm")
    .addEventListener("submit", function (e) {
      e.preventDefault();

      // Here you would typically send the settings to your server
      console.log("Saving settings:", settings);

      // Show success message
      alert("Settings saved successfully!");
    });
</script>

<style>
  /* Professional square corner design */
  * {
    border-radius: 0 !important;
  }

  /* Clean transitions */
  input,
  button,
  .transition-colors {
    transition: all 0.2s ease;
  }

  /* Focus states with blue accent */
  input:focus {
    box-shadow: 0 0 0 1px #3b82f6;
  }

  button:focus {
    box-shadow: 0 0 0 2px #3b82f6;
  }

  /* Hover effects */
  .hover\:bg-gray-50:hover {
    background-color: #f9fafb;
  }

  .hover\:bg-blue-700:hover {
    background-color: #1d4ed8;
  }

  .hover\:bg-green-700:hover {
    background-color: #15803d;
  }

  .hover\:bg-red-50:hover {
    background-color: #fef2f2;
  }

  /* Professional button styling */
  button {
    font-weight: 500;
    letter-spacing: 0.025em;
  }

  /* Clean form inputs */
  input[disabled] {
    opacity: 0.8;
  }

  /* Status indicators */
  .bg-blue-100 {
    background-color: #dbeafe;
  }

  .text-blue-800 {
    color: #1e40af;
  }

  /* Progress bars */
  .bg-blue-600 {
    background-color: #2563eb;
  }

  .bg-green-600 {
    background-color: #16a34a;
  }

  /* Responsive design */
  @media (max-width: 1024px) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
</style>
{{ end }}