{% block title %} Part 1: Personal Avatar Creation{% endblock %}
{% block content %}
<div class="card bg-light m-3">
<div class="card-body">

    {{ if player.session.config.who == 'dictator' }}
    <p>
In this part of the study, you are asked to create a personal avatar to represent you during the experiment. You will be able to see other players' avatars on the screen.
    </p>
    {{ elif player.session.config.who == 'punisher' }}
     <p>
In this part of the study, you are asked to create a personal avatar to represent you during the experiment. The other players will be able to see your avatar on the screen.
     </p>
    {{ elif player.session.config.who == 'receiver' }}
 <p>
In this part of the study, you are asked to create a personal avatar to represent you during the experiment. The other players will be able to see your avatar on the screen.
    </p>
    {{ endif }}
    <p>
    For this part, you are endowed with 100 tokens to customize your avatars. The leftover amount will be transferred to your payment account.
    </p>
<p id="costDisplay"></p>

</div>
</div>

    <div id="avatarContainer">
        <div id="imageWrapper">
            <img id="avatarImage" src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairMiaWallace&accessoriesType=Blank&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=Gray01&graphicType=Resist&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Yellow">
            <img id="topImage" src="" style="display: none;" height="45" width="110">
        </div>
    </div>

    <form id="avatarForm">
        <label for="topType">Hair Type:</label>
        <select id="topType"  class="custom-select" name="hair" onchange="both()">
            {% if Cins == 1 %}
                <option value="LongHairStraight"selected>Straight (10 Tokens)</option>
                <option value="LongHairBob" >Bob (30 Tokens)</option>
                <option value="LongHairFrida">Flowers (30 Tokens)</option>
                <option value="LongHairCurly">Curly (50 Tokens)</option>
            {% else %}
                <option value="ShortHairShortWaved" selected >Short wavy (10 Tokens)</option>
                <option value="ShortHairTheCaesarSidePart" >Short (30 Tokens)</option>
                <option value="ShortHairDreads01">Dreads (30 Tokens)</option>
                <option value="ShortHairShortRound">Buzz (50 Tokens)</option>
            {% endif %}
        </select>

       <label for="clothingType">Top Type:</label>
    <select id="clothingType" name="top"  class="custom-select" onchange="both()">
        {% if LGBT == 0 %}
                 <option value="ShirtCrewNeck-Gray02"selected> Graphic T-Shirt (10 Tokens)</option>
                 <option value="ShirtCrewNeck-Gray01" > Graphic T-Shirt (30 Tokens)</option>
                <option value="ShirtCrewNeck-Heather">T-shirt (30 Tokens)</option>
                 <option value="Hoodie-Blue02">Hoodie (50 Tokenss)</option>
            {% elif LGBT == 1 %}
                 <option value="ShirtCrewNeck-Heather" >T-Shirt (10 Tokens)</option>
                <option value="ShirtCrewNeck-Gray02"selected>Graphic T-Shirt (30 Tokens)</option>
                 <option value="ShirtCrewNeck-Gray01">Graphic T-Shirt (30 Tokens)</option>
                <option value="Hoodie-Blue02">Hoodie (50 Tokens)</option>
            {% else %}
                <option value="ShirtCrewNeck-Gray01"selected>Graphic T-Shirt (10 Tokens)</option>
                 <option value="ShirtCrewNeck-Heather" >T-Shirt (30 Tokens)</option>
                <option value="ShirtCrewNeck-Gray02">Graphic T-Shirt (30 Tokens)</option>
                <option value="Hoodie-Blue02">Hoodie (50 Tokens)</option>
            {% endif %}
    </select>

        <label for="backgroundImage">Background:</label>
        <select id="backgroundImage" name="background"  class="custom-select" onchange="both()">
            <option value="https://i.imgur.com/l5sL9Vr.jpg" selected>Option 1 (10 Token)</option>
            <option value="https://i.imgur.com/A4u4hri.jpg">Option 2 (30 Tokens)</option>
            <option value="https://i.imgur.com/cybCpf7.jpg" >Option 3 (30 Tokens)</option>
            <option value="https://i.imgur.com/xg97vio.jpg">Option 4 (50 Tokens)</option>
        </select>
    </form>
<input type="hidden" name="total_cost" id="total_cost" />
    <script>

function updateAvatar() {
    // Get the selected top type
    var topTypeSelect = document.getElementById("topType");
    var topType = topTypeSelect.value;
    var topTypeCost = parseInt(topTypeSelect.options[topTypeSelect.selectedIndex].text.match(/\((\d+)\sToken/)[1]);

    // Get the selected clothing type and color
    var clothingTypeSelect = document.getElementById("clothingType");
    var selectedOption = clothingTypeSelect.value;
    var clothingType = selectedOption.split("-")[0];
    var clothingColor = selectedOption.split("-")[1];
    var clothingTypeCost = parseInt(clothingTypeSelect.options[clothingTypeSelect.selectedIndex].text.match(/\((\d+)\sToken/)[1]);

    // Get the selected background
    var backgroundImageSelect = document.getElementById("backgroundImage");
    var selectedBackground = backgroundImageSelect.value;
    var backgroundCost = parseInt(backgroundImageSelect.options[backgroundImageSelect.selectedIndex].text.match(/\((\d+)\sToken/)[1]);

    // Construct the dynamic image link
    var imageUrl = "https://avataaars.io/?avatarStyle=Transparent&skinColor=Yellow&graphicType=Resist";
    imageUrl += "&topType=" + encodeURIComponent(topType);
    imageUrl += "&clotheType=" + encodeURIComponent(clothingType);
    imageUrl += "&clotheColor=" + encodeURIComponent(clothingColor);
    // Append other query parameters for different avatar attributes

    // Update the image source
    var avatarImage = document.getElementById("avatarImage");
    avatarImage.src = imageUrl;

    // Show or hide the top image based on clothing type
    var topImage = document.getElementById("topImage");
    if ( clothingColor ==="Gray01" ) {
        topImage.src =  "{{ static 'rainbow.png' }}";
        topImage.style.display = "block";
        topImage.height= 45;
        topImage.width= 110;
        topImage.style.position= "relative";
        topImage.style.bottom= '43px';
        topImage.style.left= '80px';
    }else if( clothingColor ==="Gray02") {
        topImage.src = "{{ static 'Peace.png' }}";
        topImage.style.display = "block";
        topImage.height= 80;
        topImage.width= 80;
        topImage.style.position= "relative";
        topImage.style.bottom= '70px';
        topImage.style.left= '92px';
    }
    else {
        topImage.style.display = "none";
    }

    // Calculate and display the total cost
    var totalCost = topTypeCost + clothingTypeCost + backgroundCost;
    var costDisplay = document.getElementById("costDisplay");
    costDisplay.innerHTML = "<b>Your total cost is: " + totalCost + " Tokens</b>";
}

function updateBackground() {
    var backgroundImageSelect = document.getElementById("backgroundImage");
    var selectedBackground = backgroundImageSelect.value;
    var backgroundCost = parseInt(backgroundImageSelect.options[backgroundImageSelect.selectedIndex].text.match(/\((\d+)\sToken/)[1]);

    var imageWrapper = document.getElementById("imageWrapper");
    imageWrapper.style.backgroundImage = "url('" + selectedBackground + "')";

    // Update the total cost when the background changes
    var topTypeSelect = document.getElementById("topType");
    var clothingTypeSelect = document.getElementById("clothingType");
    var topTypeCost = parseInt(topTypeSelect.options[topTypeSelect.selectedIndex].text.match(/\((\d+)\sToken/)[1]);
    var clothingTypeCost = parseInt(clothingTypeSelect.options[clothingTypeSelect.selectedIndex].text.match(/\((\d+)\sToken/)[1]);

    var totalCost = topTypeCost + clothingTypeCost + backgroundCost;
    var costDisplay = document.getElementById("costDisplay");
    costDisplay.innerHTML = "<b>Your total cost is: " + totalCost + " Tokens</b>";
    document.getElementById('total_cost').value = totalCost
}
function both() {
      updateBackground();
      updateAvatar();
    }
window.onload = function() {
    updateBackground();
    updateAvatar();
};


    </script>

<style>
    #avatarContainer {
        text-align: center;
        padding-bottom:20px;
    }

    #imageWrapper {
        display: inline-block;
        width: 264px; /* Adjust the width to fit your image */
        height: 280px; /* Adjust the height to fit your image */
        background-size: cover;
        background-position: center;
        border-radius: 47%;
    }
    h2 {text-decoration: underline;}
.custom-select {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        color: #495057;
        padding: 0.375rem 0.75rem;
    }

</style>
<div style="margin-bottom: 20px;"></div>
<div style="text-align: center;">
  {{ next_button }}
</div>
{{ endblock }}