{% extends 'accounts/onboarding/base.html' %}
{% load static %}

{% block onboarding_content %}
<!-- Header -->
<div class="mb-8">
  <h1 class="text-3xl font-bold text-white mb-4">Personal Information</h1>
  
  <!-- Progress Bar -->
  <div class="flex items-center justify-between mb-6">
    <div class="progress-bar">
      <div class="progress-fill" style="width: {{ progress.progress_percentage }}%"></div>
    </div>
    <span class="text-sm text-slate-400 ml-4">{{ progress.progress_percentage }}%</span>
  </div>
  
  <!-- Info Banner -->
  <div class="flex items-center gap-3 p-4 bg-blue-500/10 border border-blue-500/20 rounded-xl mb-6">
    <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
      <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <p class="text-blue-400 text-sm">
      In order to start trading, you must first complete your profile.
    </p>
  </div>
</div>

<!-- Form -->
<form method="post" enctype="multipart/form-data" class="space-y-6">
  {% csrf_token %}
  
  <!-- Address Information -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="space-y-2">
      <label class="block text-sm font-medium text-slate-300">House No:</label>
      {{ form.house_number }}
      {% if form.house_number.errors %}
        <div class="text-red-400 text-sm">{{ form.house_number.errors.0 }}</div>
      {% endif %}
    </div>
    
    <div class="space-y-2">
      <label class="block text-sm font-medium text-slate-300">Phone No:</label>
      {{ form.phone_number }}
      {% if form.phone_number.errors %}
        <div class="text-red-400 text-sm">{{ form.phone_number.errors.0 }}</div>
      {% endif %}
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="block text-sm font-medium text-slate-300">Street Address:</label>
    {{ form.street_address }}
    {% if form.street_address.errors %}
      <div class="text-red-400 text-sm">{{ form.street_address.errors.0 }}</div>
    {% endif %}
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="space-y-2">
      <label class="block text-sm font-medium text-slate-300">City/Town/Village:</label>
      {{ form.city }}
      {% if form.city.errors %}
        <div class="text-red-400 text-sm">{{ form.city.errors.0 }}</div>
      {% endif %}
    </div>
    
    <div class="space-y-2">
      <label class="block text-sm font-medium text-slate-300">Province:</label>
      {{ form.province }}
      {% if form.province.errors %}
        <div class="text-red-400 text-sm">{{ form.province.errors.0 }}</div>
      {% endif %}
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="block text-sm font-medium text-slate-300">Zip Code / Postal Code:</label>
    {{ form.postal_code }}
    {% if form.postal_code.errors %}
      <div class="text-red-400 text-sm">{{ form.postal_code.errors.0 }}</div>
    {% endif %}
  </div>
  
  <!-- ID Verification -->
  <div class="border-t border-slate-700/50 pt-6">
    <h3 class="text-lg font-semibold text-white mb-4">ID Verification</h3>
    
    <div class="space-y-4">
      <div class="space-y-2">
        <label class="block text-sm font-medium text-slate-300">Type:</label>
        {{ form.id_type }}
        {% if form.id_type.errors %}
          <div class="text-red-400 text-sm">{{ form.id_type.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="space-y-2">
          <label class="block text-sm font-medium text-slate-300">ID front:</label>
          <div class="file-upload">
            <input type="file" name="id_front" id="id_front" accept="image/*" class="hidden">
            <label for="id_front" class="file-upload-label">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              <span id="id_front_label">Upload ID Front</span>
            </label>
          </div>
          {% if form.id_front.errors %}
            <div class="text-red-400 text-sm">{{ form.id_front.errors.0 }}</div>
          {% endif %}
        </div>
        
        <div class="space-y-2">
          <label class="block text-sm font-medium text-slate-300">ID back:</label>
          <div class="file-upload">
            <input type="file" name="id_back" id="id_back" accept="image/*" class="hidden">
            <label for="id_back" class="file-upload-label">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              <span id="id_back_label">Upload ID Back</span>
            </label>
          </div>
          {% if form.id_back.errors %}
            <div class="text-red-400 text-sm">{{ form.id_back.errors.0 }}</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  
  <!-- Navigation Buttons -->
  <div class="flex justify-between pt-8 border-t border-slate-700/50">
    <button type="button" onclick="history.back()" class="px-6 py-3 bg-slate-800 border border-slate-700 text-white rounded-xl hover:bg-slate-700 transition-all duration-200">
      Back
    </button>
    <button type="submit" class="px-6 py-3 bg-gradient-to-r from-amber-500 to-blue-500 text-white rounded-xl hover:from-amber-600 hover:to-blue-600 transition-all duration-200 font-semibold">
      Next
    </button>
  </div>
</form>

<script>
// Handle file upload labels
document.getElementById('id_front').addEventListener('change', function(e) {
  const label = document.getElementById('id_front_label');
  if (e.target.files.length > 0) {
    label.textContent = e.target.files[0].name;
  } else {
    label.textContent = 'Upload ID Front';
  }
});

document.getElementById('id_back').addEventListener('change', function(e) {
  const label = document.getElementById('id_back_label');
  if (e.target.files.length > 0) {
    label.textContent = e.target.files[0].name;
  } else {
    label.textContent = 'Upload ID Back';
  }
});
</script>
{% endblock %}