{{ define "content" }}
<div class="min-h-screen bg-gray-50">
  <!-- Header Bar -->

  <!-- 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">
    <!-- Volunteer 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">
            {{ .Volunteer.FirstName }} {{ .Volunteer.LastName }}
          </h3>
          <p class="text-gray-600">{{ .Volunteer.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>
              Volunteer
            </span>
            <span class="text-gray-600">User ID:</span>
            <span class="font-mono text-gray-900">{{ .Volunteer.UserID }}</span>
            <span class="text-gray-600">Current Role:</span>
            <span class="text-gray-900">
              {{ if eq .Volunteer.RoleID 2 }}Team Leader{{ else }}Volunteer{{
              end }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Volunteer 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 Volunteer Information
      </h3>

      <!-- Edit Volunteer Form -->
      <form method="POST" action="/volunteer/edit">
        <input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />

        <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="{{.Volunteer.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="{{.Volunteer.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 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              Email Address <span class="text-red-500">*</span>
            </label>
            <input
              type="email"
              name="email"
              value="{{.Volunteer.Email}}"
              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 email address"
            />
          </div>

          <!-- Phone -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              Phone Number
            </label>
            <input
              type="text"
              name="phone"
              value="{{.Volunteer.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>

          <!-- Role Selection -->
          <div class="lg:col-span-2">
            <label class="block text-sm font-semibold text-gray-700 mb-2">
              Role Assignment <span class="text-red-500">*</span>
            </label>
            <select
              name="role_id"
              id="role_id"
              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"
            >
              <option value="">--Select Role--</option>
              <option value="3" {{if eq .Volunteer.RoleID 3}}selected{{end}}>
                Volunteer
              </option>
              <option value="2" {{if eq .Volunteer.RoleID 2}}selected{{end}}>
                Team Leader
              </option>
            </select>
            <p class="text-xs text-gray-500 mt-1">
              Team Leaders can manage volunteers and access additional features
            </p>
          </div>
        </div>

        <!-- 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>
        Volunteer Settings
      </h3>

      <form
        method="post"
        action="/volunteer/settings"
        id="volunteerSettingsForm"
      >
        <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="newVolunteerSettingName"
                  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="newVolunteerSettingValue"
                  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="addVolunteerSetting()"
                  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="volunteerSettingsList" class="space-y-3">
              <!-- Settings will be dynamically added here -->
              <div
                class="text-gray-500 text-sm"
                id="noVolunteerSettingsMessage"
              >
                No settings configured for this volunteer yet. Add settings
                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 specific to this volunteer and applied immediately
          </div>
          <div class="flex space-x-3">
            <button
              type="button"
              onclick="clearAllVolunteerSettings()"
              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 volunteerSettings = [];

  function addVolunteerSetting() {
    const nameInput = document.getElementById("newVolunteerSettingName");
    const valueInput = document.getElementById("newVolunteerSettingValue");

    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 = volunteerSettings.findIndex(
      (s) => s.name.toLowerCase() === name.toLowerCase()
    );
    if (existingIndex !== -1) {
      // Update existing setting
      volunteerSettings[existingIndex].value = value;
    } else {
      // Add new setting
      volunteerSettings.push({ name, value });
    }

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

    // Update display
    displayVolunteerSettings();
  }

  function removeVolunteerSetting(index) {
    volunteerSettings.splice(index, 1);
    displayVolunteerSettings();
  }

  function displayVolunteerSettings() {
    const settingsList = document.getElementById("volunteerSettingsList");
    const noSettingsMessage = document.getElementById(
      "noVolunteerSettingsMessage"
    );

    if (volunteerSettings.length === 0) {
      settingsList.innerHTML =
        '<div class="text-gray-500 text-sm" id="noVolunteerSettingsMessage">No settings configured for this volunteer yet. Add settings above.</div>';
      return;
    }

    settingsList.innerHTML = volunteerSettings
      .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="removeVolunteerSetting(${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 clearAllVolunteerSettings() {
    if (volunteerSettings.length === 0) return;

    if (
      confirm("Are you sure you want to clear all settings for this volunteer?")
    ) {
      volunteerSettings = [];
      displayVolunteerSettings();
    }
  }

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

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

  // Volunteer Settings form submission handler
  document
    .getElementById("volunteerSettingsForm")
    .addEventListener("submit", function (e) {
      e.preventDefault();

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

      // Show success message
      alert("Volunteer settings saved successfully!");
    });

  // Form validation for main volunteer form
  document
    .querySelector('form[action="/volunteer/edit"]')
    .addEventListener("submit", function (e) {
      const firstName = document
        .querySelector('input[name="first_name"]')
        .value.trim();
      const lastName = document
        .querySelector('input[name="last_name"]')
        .value.trim();
      const email = document.querySelector('input[name="email"]').value.trim();
      const roleId = document.querySelector('select[name="role_id"]').value;

      if (!firstName || !lastName || !email || !roleId) {
        e.preventDefault();
        alert("Please fill in all required fields.");
        return false;
      }

      // Email validation
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        e.preventDefault();
        alert("Please enter a valid email address.");
        return false;
      }
    });
</script>

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

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

  /* Focus states with blue accent */
  input:focus,
  select: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-50:hover {
    background-color: #eff6ff;
  }

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

  .hover\:bg-orange-50:hover {
    background-color: #fff7ed;
  }

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

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

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

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

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

  /* Select styling */
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  /* 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));
    }

    .lg\:col-span-2 {
      grid-column: span 1;
    }
  }
</style>
{{ end }}