{% block title %}Personal Profile Creation{% endblock %}

{% block content %}
<style>
  :root {
    --primary: #0ea5e9;
    --border: #e5e7eb;
    --muted: #6b7280;
    --card-bg: #ffffff;
  }
  .layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
  }
  @media (max-width: 980px) {
    .layout { grid-template-columns: 1fr; }
  }

  .intro {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
  }

  .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }
  .card-body { padding: 20px; }

  /* Tabs */
  .tabs { display: none; }
  .tab-btn { display: none; }
  .tab-panels { padding: 16px; }
  .tab-panel { display: block; }

  /* Form */
  .form-row {
    display: grid; grid-template-columns: 1fr 240px; align-items: center;
    gap: 12px; margin-bottom: 12px;
  }
  @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
  .form-row label { font-weight: 700; }
  .short-select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ccc; }
  .actions { text-align: center; margin-top: 18px; }

  /* Avatar wrapper proportions */
  #avatarWrapperPreview {
    position: relative;
    width: 150px;
    height: 155px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
  }
  #avatarImagePreview {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
  }
  .preview-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    font-size: 1.1rem; color: #111827; margin-top: 12px;
  }
  .preview-grid div { background: #f9fafb; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
  .muted { color: var(--muted); font-size: 0.9rem; }
  .cost { text-align: center; font-weight: 700; color: #0284c7; margin-top: 8px; }
  .pill {
    display: inline-block; background: #e0f2fe; color: #075985; padding: 2px 10px;
    border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  }
  .preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 8px;
  }
</style>

<div class="intro">
 <p>In this part, you will create a personal profile with an avatar.
  You are endowed with <strong>50 tokens</strong> to customize your avatar. You can see the prices of each item in parentheses.
  Any leftover tokens will be added to your final payment.</p>
    <p>
  For the profile fields-birth month, country of birth, first language, and gender-<strong>please use your real information.</strong>
     For the month of birth select the quarter you were born. </p>

{% if player.session.config.who == 'dictator' %}
  <p>You will be able to see other players’ profiles in the next stages of the study.</p>
{% elif player.session.config.who == 'receiver' %}
  <p>Other players will be able to see your profile.</p>
{% endif %}
</div>

<form method="post" id="avatarForm">
  <div class="layout">
    <div class="card">
      <div class="tab-panels">
        <div class="tab-panel" id="avatar-controls">
          <div class="form-row">
            <label for="genderSelect">Gender:</label>
            <select id="genderSelect" name="genderSelect" class="short-select" required>
              <option value="">-------</option>
              <option value="Man">Man</option>
              <option value="Woman">Woman</option>
              <option value="Transgender">Transgender</option>
              <option value="Other">Other</option>
              <option value="Prefer not to say">Prefer not to say</option>
            </select>
            <input type="hidden" name="gender" id="hiddenGenderField">
          </div>

          <div class="form-row">
            <label for="topType">Hair Type:</label>
            <select id="topType" name="hair" class="short-select" onchange="both()">
              </select>
          </div>

          <div class="form-row">
            <label for="clothingType">Top Type:</label>
            <select id="clothingType" class="short-select" onchange="both()">
              </select>
          </div>

          <div class="form-row">
            <label for="clothingColor">Top Color (Free):</label>
            <select id="clothingColor" class="short-select" onchange="both()">
              <option value="Gray01">Gray</option>
              <option value="Black">Black</option>
              <option value="Blue03">Blue</option>
              <option value="White">White</option>
            </select>
          </div>

          <input type="hidden" name="top" id="hiddenTopField">

          <div class="form-row">
            <label for="backgroundImage">Background:</label>
            <select id="backgroundImage" name="background" class="short-select" onchange="both()">
              <option value="{% static 'global/Pic_1.jpeg' %}">Option 1 (10 Tokens)</option>
              <option value="{% static 'global/Pic_2.jpeg' %}">Option 2 (20 Tokens)</option>
              <option value="{% static 'global/Pic_3.jpeg' %}">Option 3 (20 Tokens)</option>
              <option value="{% static 'global/Pic_4.jpeg' %}">Option 4 (30 Tokens)</option>
            </select>
          </div>

         <div id="costDisplay" class="cost"></div>

         <div id="demographics-section" style="margin-top:12px; padding-top:8px; border-top:1px dashed var(--border);">
          <div class="form-row">
            <label for="QoB">Month of Birth:</label>
            {{ form.QoB }}
          </div>

          <div class="form-row">
            <label for="country_of_birth">Country of Birth:</label>
            <select id="country_of_birth" name="country_of_birth" class="short-select" required>
            <option value="">--------</option>
              <option value="Argentina">Argentina</option>
              <option value="Australia">Australia</option>
              <option value="Austria">Austria</option>
              <option value="Belgium">Belgium</option>
              <option value="Brazil">Brazil</option>
              <option value="Bulgaria">Bulgaria</option>
              <option value="Canada">Canada</option>
              <option value="China">China</option>
              <option value="Denmark">Denmark</option>
              <option value="Estonia">Estonia</option>
              <option value="Finland">Finland</option>
              <option value="France">France</option>
              <option value="Germany">Germany</option>
              <option value="Greece">Greece</option>
              <option value="India">India</option>
              <option value="Indonesia">Indonesia</option>
              <option value="Ireland">Ireland</option>
              <option value="Italy">Italy</option>
              <option value="Japan">Japan</option>
              <option value="Mexico">Mexico</option>
              <option value="Netherlands">Netherlands</option>
              <option value="Norway">Norway</option>
              <option value="Pakistan">Pakistan</option>
              <option value="Portugal">Portugal</option>
              <option value="Romania">Romania</option>
              <option value="Russia">Russia</option>
              <option value="Saudi Arabia">Saudi Arabia</option>
              <option value="South Korea">South Korea</option>
              <option value="Spain">Spain</option>
              <option value="Sweden">Sweden</option>
              <option value="Switzerland">Switzerland</option>
              <option value="Thailand">Thailand</option>
              <option value="Turkey">Turkey</option>
                <option value="United Kingdom">United Kingdom</option>
                            <option value="United States">United States</option>

              <option value="Vietnam">Vietnam</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div class="form-row">
            <label for="first_language">First Language:</label>
            <select id="first_language" name="first_language" class="short-select" required>
                          <option value="">--------</option>

              <option value="Arabic">Arabic</option>
              <option value="Chinese">Chinese (Mandarin)</option>
              <option value="Dutch">Dutch</option>
                <option value="English">English</option>
              <option value="French">French</option>
              <option value="German">German</option>
              <option value="Hindi">Hindi</option>
              <option value="Italian">Italian</option>
              <option value="Korean">Korean</option>
              <option value="Portuguese">Portuguese</option>
              <option value="Russian">Russian</option>
              <option value="Spanish">Spanish</option>
              <option value="Turkish">Turkish</option>
              <option value="Urdu">Urdu</option>
              <option value="Other">Other</option>
            </select>
          </div>
         </div>

        </div>
      </div>

      <input type="hidden" name="total_cost" id="total_cost" />
      <div class="actions">
        <button class="otree-btn-next btn btn-primary" style="margin-bottom: 16px;">Submit Profile</button>
      </div>
    </div>

    <div class="card profile-preview">
      <div class="card-body">
        <div class="preview-header">
          <h3 style="margin:0; display:flex; justify-content:center;">Your Profile</h3>
        </div>

        <div id="avatarWrapperPreview">
          <img id="avatarImagePreview"
               src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairMiaWallace&clotheType=Hoodie&clotheColor=Gray01&skinColor=Yellow" />
        </div>

        <p style="text-align:center; margin:10px 0 0 0;">
          Prolific ID: <strong id="pv_prolific">—</strong>
        </p>

        <div class="preview-grid">
          <div>Month of Birth:<br><strong><span id="pv_QoB" >—</span></strong></div>
          <div>Country of Birth:<br><strong><span id="pv_country">—</span></strong></div>
          <div>Gender:<br><strong> <span id="pv_gender" >—</span></strong></div>
          <div>First language:<br><strong><span id="pv_lang" >—</span></strong></div>
        </div>

      </div>
    </div>
  </div>
</form>

<script>
   const participantLabelRaw = "{{ participant.label}}";
  // Ensure it's a string and take the first 5 characters
  const participantLabelShown = (String(participantLabelRaw).slice(0, 5)) + ".....";

  document.addEventListener('DOMContentLoaded', function () {
    const pvProlific = document.getElementById('pv_prolific');
    if (pvProlific) {
      pvProlific.innerText = participantLabelShown || '-----';
    }

    // NEW: Randomize the Top Color on initial load
    const colorSelect = document.getElementById("clothingColor");
    if (colorSelect) {
      const colors = ["Gray01", "Black", "Blue03", "White"];
      const randomColor = colors[Math.floor(Math.random() * colors.length)];
      colorSelect.value = randomColor;
    }
  });

  /* ----- Avatar Options by Gender ----- */
  function onGenderChange() {
    const genderSelect = document.getElementById("genderSelect");
    genderSelect.removeEventListener("change", onGenderChange);
    genderSelect.addEventListener("change", onGenderChange);

    const gender = genderSelect.value;
    const topTypeSelect = document.getElementById("topType");
    const hiddenGenderField = document.getElementById("hiddenGenderField");
    hiddenGenderField.value = gender;
    topTypeSelect.innerHTML = "";

    const hairOptions = {
      Man: [
        { val: "ShortHairShortWaved", txt: "Short wavy (10 Tokens)" },
        { val: "ShortHairShortRound", txt: "Short (20 Tokens)" },
        { val: "ShortHairDreads01", txt: "Dreads (20 Tokens)" },
        { val: "ShortHairTheCaesarSidePart", txt: "Buzz (30 Tokens)" }
      ],
      Woman: [
        { val: "LongHairStraight", txt: "Straight (10 Tokens)" },
        { val: "LongHairBob", txt: "Bob (20 Tokens)" },
        { val: "LongHairFrida", txt: "Flowers (20 Tokens)" },
        { val: "LongHairCurly", txt: "Curly (30 Tokens)" }
      ],
      default: [
        { val: "LongHairStraight", txt: "Straight (10 Tokens)" },
        { val: "ShortHairShortWaved", txt: "Short wavy (10 Tokens)" },
        { val: "ShortHairTheCaesarSidePart", txt: "Short (20 Tokens)" },
        { val: "ShortHairDreads01", txt: "Dreads (20 Tokens)" },
        { val: "LongHairBob", txt: "Bob (20 Tokens)" },
        { val: "LongHairFrida", txt: "Flowers (20 Tokens)" },
        { val: "ShortHairShortRound", txt: "Buzz (30 Tokens)" },
        { val: "LongHairCurly", txt: "Curly (30 Tokens)" }
      ]
    };

    const options = hairOptions[gender] || hairOptions.default;
    options.forEach(opt => {
      topTypeSelect.innerHTML += `<option value="${opt.val}">${opt.txt}</option>`;
    });

    const clothingTypeSelect = document.getElementById("clothingType");
    clothingTypeSelect.innerHTML = "";

    // UPDATED: Removed hardcoded colors from the values so we can combine them later
    const clothingOptions = {
      Man: [
        { val: "ShirtCrewNeck", txt: "T-shirt (10 Tokens)" },
        { val: "GraphicShirt", txt: "Graphic T-shirt (20 Tokens)" },
        { val: "Hoodie", txt: "Hoodie (30 Tokens)" }
      ],
      Woman: [
        { val: "ShirtScoopNeck", txt: "T-shirt (10 Tokens)" },
        { val: "GraphicShirt", txt: "Graphic T-shirt (20 Tokens)" },
        { val: "Hoodie", txt: "Hoodie (30 Tokens)" }
      ],
      default: [
        { val: "ShirtScoopNeck", txt: "Scoop Neck (10 Tokens)" },
        { val: "GraphicShirt", txt: "Graphic Shirt (20 Tokens)" },
        { val: "Hoodie", txt: "Hoodie (30 Tokens)" }
      ]
    };
    const clothOpts = clothingOptions[gender] || clothingOptions.default;
    clothOpts.forEach(opt => {
      clothingTypeSelect.innerHTML += `<option value="${opt.val}">${opt.txt}</option>`;
    });

    updateAvatar();
    updatePreviewDemographics();
  }

  /* ----- Avatar Rendering + Cost ----- */
  function updateAvatar() {
    const topType = document.getElementById("topType").value || "LongHairStraight";
    const clotheType = document.getElementById("clothingType").value || "Hoodie";
    const clotheColor = document.getElementById("clothingColor").value || "Gray01";

    // Bridge data correctly to hidden input to save formatted properly
    document.getElementById("hiddenTopField").value = clotheType + "-" + clotheColor;

    const bg = document.getElementById("backgroundImage").value || "{% static 'global/Pic_1.jpeg' %}";

    const imageUrl = `https://avataaars.io/?avatarStyle=Transparent&skinColor=Yellow&graphicType=Deer&topType=${encodeURIComponent(topType)}&clotheType=${encodeURIComponent(clotheType)}&clotheColor=${encodeURIComponent(clotheColor)}`;

    // Preview avatar
    document.getElementById("avatarImagePreview").src = imageUrl;
    document.getElementById("avatarWrapperPreview").style.backgroundImage = `url('${bg}')`;

    calculateCost();
  }

  function extractCost(sel) {
    const text = sel && sel.options && sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].text : '';
    const match = text && text.match(/\((\d+)\sToken/);
    return match ? parseInt(match[1]) : 0;
  }

 function calculateCost() {
  const topElem = document.getElementById("topType");
  const clothElem = document.getElementById("clothingType");
  const bgElem = document.getElementById("backgroundImage");

  // Note: clothingColor is omitted from this sum, remaining effectively free

  const cost =
    extractCost(topElem) +
    extractCost(clothElem) +
    extractCost(bgElem);

  document.getElementById("costDisplay").innerText = `Your total cost is: ${cost} Tokens`;

  const pvCostElement = document.getElementById("pv_cost");
  if (pvCostElement) {
    pvCostElement.innerText = `Your total cost is: ${cost} Tokens`;
  }

  document.getElementById("total_cost").value = cost;
}

  function both() { updateAvatar(); }

  /* ----- Live Demographics Preview ----- */
  function updatePreviewDemographics() {
    const g = document.getElementById('genderSelect').value || '—';
    const aSel = document.querySelector('[name="QoB"]');
    const a = aSel && aSel.options && aSel.selectedIndex >= 0 ? aSel.options[aSel.selectedIndex].text : '—';
    const cSel = document.getElementById('country_of_birth');
    const c = cSel && cSel.options && cSel.selectedIndex >= 0 ? cSel.options[cSel.selectedIndex].text : '—';
    const lSel = document.getElementById('first_language');
    const l = lSel && lSel.options && lSel.selectedIndex >= 0 ? lSel.options[lSel.selectedIndex].text : '—';

    document.getElementById('pv_gender').innerText = g || '—';
    document.getElementById('pv_QoB').innerText = a || '—';
    document.getElementById('pv_country').innerText = c || '—';
    document.getElementById('pv_lang').innerText = l || '—';
  }

  /* ----- Init ----- */
  window.addEventListener('load', function () {
    onGenderChange();
    updateAvatar();
    updatePreviewDemographics();

    document.getElementById('genderSelect').addEventListener('change', updatePreviewDemographics);
    const QoBField = document.querySelector('[name="QoB"]');
    if (QoBField) QoBField.addEventListener('change', updatePreviewDemographics);
    document.getElementById('country_of_birth').addEventListener('change', updatePreviewDemographics);
    document.getElementById('first_language').addEventListener('change', updatePreviewDemographics);

    document.getElementById('topType').addEventListener('change', both);
    document.getElementById('clothingType').addEventListener('change', both);
    document.getElementById('clothingColor').addEventListener('change', both); // Add event listener for the new color drop-down
    document.getElementById('backgroundImage').addEventListener('change', both);
  });
</script>
{% endblock %}