<!DOCTYPE html>
<html lang="ko" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>프로필 수정 | 신라 AMP</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          }
        }
      }
    };
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
  <style>
    /* "Currently:" 텍스트 숨기기 */
    .help {
      display: none !important;
    }
    
    /* 파일 입력 필드 스타일링 */
    input[type="file"] {
      border: 1px solid #4a5568;
      padding: 8px;
      border-radius: 4px;
      background-color: #2d3748;
      color: white;
      width: 100%;
    }
    
    input[type="file"]::-webkit-file-upload-button {
      background-color: #4299e1;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
    }
    
    input[type="file"]::-webkit-file-upload-button:hover {
      background-color: #3182ce;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white min-h-screen flex items-center justify-center px-4 font-sans">

  <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md transition-all">
    <div class="text-center mb-6">
      <h1 class="text-3xl font-bold tracking-tight text-white">신라 AMP</h1>
      <p class="text-sm text-gray-400 mt-2">프로필 수정</p>
    </div>

    <form method="POST" enctype="multipart/form-data" class="space-y-4">
      {% csrf_token %}
      {% if form.errors %}
        <div class="text-red-400 text-sm mb-2">
          {% for field, errors in form.errors.items %}
            {% for error in errors %}
              {{ error }}
            {% endfor %}
          {% endfor %}
        </div>
      {% endif %}

      <div>
        <label for="{{ form.이름.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.이름.label }}</label>
        {{ form.이름 }}
      </div>
      <div>
        <label for="{{ form.소속.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.소속.label }}</label>
        {{ form.소속 }}
      </div>
      <div>
        <label for="{{ form.직책.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.직책.label }}</label>
        {{ form.직책 }}
      </div>
      <div>
        <label for="{{ form.연락처.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.연락처.label }}</label>
        {{ form.연락처 }}
      </div>
      <div>
        <label for="{{ form.주소.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.주소.label }}</label>
        {{ form.주소 }}
      </div>
      <div>
        <label for="{{ form.생년월일.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.생년월일.label }}</label>
        {{ form.생년월일 }}
      </div>
      <div>
        <label for="{{ form.사진.id_for_label }}" class="block mb-1 text-sm text-gray-300">프로필 사진</label>
        <!-- 커스텀 파일 입력 필드 -->
        <input type="file" 
               name="{{ form.사진.name }}" 
               id="{{ form.사진.id_for_label }}"
               accept="image/*"
               class="w-full px-4 py-3 rounded-xl bg-gray-700 bg-opacity-80 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
        
        {% if form.instance.사진 and form.instance.사진.url %}
          <div class="mt-2">
            <img id="profile-preview" src="{{ form.instance.사진.url }}" alt="프로필 사진 미리보기" class="w-24 h-24 rounded-full object-cover border-2 border-gray-500" />
          </div>
        {% else %}
          <div class="mt-2">
            <img id="profile-preview" src="/static/B_main/images/default_user.png" alt="프로필 사진 미리보기" class="w-24 h-24 rounded-full object-cover border-2 border-gray-500" />
          </div>
        {% endif %}
      </div>

      <!-- 키워드 섹션 -->
      <div class="border-t border-gray-600 pt-4">
        <h3 class="text-lg font-semibold text-blue-400 mb-3">검색 키워드</h3>
        <p class="text-sm text-gray-400 mb-4">다른 사람들이 당신을 찾을 수 있도록 키워드를 설정하세요</p>
        
        <div class="mb-3">
          {{ form.keyword1 }}
        </div>
      </div>

      <button type="submit"
        class="w-full py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
        프로필 저장
      </button>
    </form>

    <!-- 회원탈퇴 섹션 -->
    <div class="mt-8 pt-6 border-t border-gray-600">
      <div class="text-center">
        <h3 class="text-lg font-semibold text-red-400 mb-2">회원탈퇴</h3>
        <p class="text-sm text-gray-400 mb-4">
          탈퇴하시면 로그인이 불가능하며, 개인정보는 보존됩니다.
        </p>
        <button 
          type="button"
          onclick="confirmWithdrawal()"
          class="px-6 py-2 bg-red-600 hover:bg-red-700 active:bg-red-800 rounded-lg text-white font-medium text-sm transition duration-200 shadow-md hover:shadow-lg">
          회원탈퇴
        </button>
      </div>
    </div>

    <!-- 비밀번호 변경 섹션 -->
    <div class="mt-6 pt-6 border-t border-gray-600">
      <div class="text-center">
        <h3 class="text-lg font-semibold text-yellow-400 mb-2">비밀번호 변경</h3>
        <p class="text-sm text-gray-400 mb-4">
          전화번호 인증을 통해 비밀번호를 변경할 수 있습니다.
        </p>
        <a href="{% url 'accounts:password_change' %}"
           class="inline-block px-6 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-white font-medium text-sm transition duration-200 shadow-md hover:shadow-lg">
          비밀번호 변경
        </a>
      </div>
    </div>

    <div class="mt-6 text-center text-sm">
      <a href="{% url 'main' %}" class="text-blue-400 hover:text-blue-500 transition">
        메인으로 돌아가기
      </a>
    </div>
  </div>

  <script>
    // 사진 업로드 시 미리보기
    document.querySelector('input[type=file][name$=사진]').addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(ev) {
          document.getElementById('profile-preview').src = ev.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // 회원탈퇴 확인
    function confirmWithdrawal() {
      if (confirm('정말로 회원탈퇴를 하시겠습니까?\n\n탈퇴하시면 로그인이 불가능하며, 개인정보는 보존됩니다.')) {
        // CSRF 토큰 가져오기
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        
        // 탈퇴 요청 전송
        fetch('{% url "withdraw" %}', {
          method: 'POST',
          headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/json',
          },
        })
        .then(response => {
          console.log('Response status:', response.status);
          return response.json();
        })
        .then(data => {
          console.log('Response data:', data);
          if (data.success) {
            alert('회원탈퇴가 완료되었습니다.');
            window.location.href = '{% url "main" %}';
          } else {
            alert('회원탈퇴 중 오류가 발생했습니다: ' + data.error);
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert('회원탈퇴 중 오류가 발생했습니다.');
        });
      }
    }
  </script>
</body>
</html>
