{% extends 'base.html' %}
{% load static %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="glass-card p-4 p-md-5 rounded-0">
          <h2 class="brand-font fw-bold mb-4 border-bottom pb-3">Novo Projeto de Mockup</h2>
          
          <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            
            <div class="row g-4">
              <!-- Left Column: Uploads -->
              <div class="col-md-6">
                <h4 class="h5 mb-3 fw-bold">1. Upload das Fotos</h4>
                <div class="mb-4">
                  <label for="title" class="form-label small text-uppercase fw-bold">Título do Projeto</label>
                  <input type="text" class="form-control rounded-0" id="title" name="title" placeholder="Ex: Camiseta Oversized Verão 26" required>
                </div>
                
                <div class="mb-4">
                  <label class="form-label small text-uppercase fw-bold">Imagem Principal (Frente)</label>
                  <div class="upload-box p-5 border border-dashed text-center bg-light" style="border: 2px dashed #ccc; cursor: pointer;">
                    <input type="file" name="main_image" class="d-none" id="main_image_input" accept="image/*" required>
                    <div id="upload_label">
                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-camera mb-2" viewBox="0 0 16 16">
                        <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
                        <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
                      </svg>
                      <p class="mb-0">Clique para selecionar foto</p>
                    </div>
                  </div>
                </div>
                
                <div class="row g-3">
                  <div class="col-6">
                    <label class="form-label small text-uppercase fw-bold">Complemento 1</label>
                    <input type="file" name="complementary_image_1" class="form-control rounded-0 form-control-sm">
                  </div>
                  <div class="col-6">
                    <label class="form-label small text-uppercase fw-bold">Complemento 2</label>
                    <input type="file" name="complementary_image_2" class="form-control rounded-0 form-control-sm">
                  </div>
                </div>
              </div>
              
              <!-- Right Column: Settings -->
              <div class="col-md-6">
                <h4 class="h5 mb-3 fw-bold">2. Customização do Modelo</h4>
                
                <div class="mb-3">
                  <label class="form-label small text-uppercase fw-bold">Gênero</label>
                  <select name="gender" class="form-select rounded-0">
                    <option value="F">Feminino</option>
                    <option value="M">Masculino</option>
                    <option value="N">Não-binário</option>
                  </select>
                </div>
                
                <div class="mb-3">
                  <label class="form-label small text-uppercase fw-bold">Tom de Pele</label>
                  <div class="d-flex gap-2">
                    <input type="radio" class="btn-check" name="skin_tone" id="skin_light" value="light" autocomplete="off">
                    <label class="btn btn-outline-dark rounded-0 px-3" for="skin_light">Claro</label>
                    
                    <input type="radio" class="btn-check" name="skin_tone" id="skin_medium" value="medium" autocomplete="off" checked>
                    <label class="btn btn-outline-dark rounded-0 px-3" for="skin_medium">Médio</label>
                    
                    <input type="radio" class="btn-check" name="skin_tone" id="skin_dark" value="dark" autocomplete="off">
                    <label class="btn btn-outline-dark rounded-0 px-3" for="skin_dark">Escuro</label>
                  </div>
                </div>
                
                <div class="mb-3">
                  <label class="form-label small text-uppercase fw-bold">Idade: <span id="age_val">25</span> anos</label>
                  <input type="range" name="age" class="form-range" min="18" max="65" step="1" value="25" id="age_range">
                </div>
                
                <div class="mb-3">
                  <label class="form-label small text-uppercase fw-bold">Biotipo</label>
                  <select name="body_type" class="form-select rounded-0">
                    <option value="athletic">Atlético</option>
                    <option value="slim">Magro</option>
                    <option value="plus">Plus-size</option>
                    <option value="muscular">Musculoso</option>
                  </select>
                </div>
                
                <div class="mb-4">
                  <label class="form-label small text-uppercase fw-bold">Formato de Saída</label>
                  <div class="d-flex gap-2">
                    <input type="radio" class="btn-check" name="format" id="f916" value="9:16" autocomplete="off" checked>
                    <label class="btn btn-outline-dark rounded-0 flex-fill py-3" for="f916">9:16 (Stories/Reels)</label>
                    
                    <input type="radio" class="btn-check" name="format" id="f169" value="16:9" autocomplete="off">
                    <label class="btn btn-outline-dark rounded-0 flex-fill py-3" for="f169">16:9 (Feed/Site)</label>
                  </div>
                </div>
                
                <button type="submit" class="btn btn-fashion w-100 py-3">GERAR MOCKUPS</button>
                <p class="text-center mt-3 small text-muted">A geração leva aprox. 1-2 minutos.</p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  document.getElementById('age_range').addEventListener('input', function(e) {
    document.getElementById('age_val').textContent = e.target.value;
  });
  
  const uploadBox = document.querySelector('.upload-box');
  const fileInput = document.getElementById('main_image_input');
  
  uploadBox.addEventListener('click', () => fileInput.click());
  
  fileInput.addEventListener('change', function(e) {
    if (this.files && this.files[0]) {
      document.getElementById('upload_label').innerHTML = `<p class='mb-0 fw-bold'>Arquivo selecionado:</p><small>${this.files[0].name}</small>`;
      uploadBox.style.borderColor = 'var(--accent-blue)';
      uploadBox.style.backgroundColor = 'rgba(41, 98, 255, 0.05)';
    }
  });
</script>
{% endblock %}
