{% extends 'Admin/admin.html.twig' %}

{% block title %}{{"Détail du personnage"|trans}} {{player.Name}}{% endblock %}

{% block body %}

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">{{'Détail du personnage'|trans}}</h6>
    </div>
    <div class="card-body border-0">
        {% for message in app.flashes('success') %}
        <div class="alert alert-success text-dark">
            {{ message }}
        </div>
        {% endfor %}

        {% for message in app.flashes('error') %}
        <div class="alert alert-danger text-dark">
            {{ message }}
        </div>
        {% endfor %}

        <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#add-items">{{'Ajouter un
            item'|trans}}</button>

        <!-- Modal for admin action give item -->
        <div class="modal fade" id="add-items" tabindex="-1" aria-labelledby="add-itemsLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add-itemsLabel">{{'Ajouter un item'|trans}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post">
                            <div class="mb-3">
                                <label for="item">{{"Entrez l'id de l'item"|trans}}</label>
                                <input type="text" name="item" id="item" class="form-control w-100">
                                <input type="hidden" name="action" value="give">
                            </div>

                            <div class="mt-3 mb-3">
                                <label for="quantity">{{"Saisir une quantité"|trans}}</label>
                                <input type="number" name="quantity" min="1" max="9999"
                                    class="form-control rounded-0 w-100 mt-3">
                            </div>
                            <button type="submit" class="btnb btn-success w-100">{{"Envoyez"|trans}}</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!-- Modal for admin action in inventory -->

        <h1 class="text-center mb-3">
            {{player.Name}}
        </h1>
 {% if player.MapName is defined and player.MapName is not null %}
        <h2 class="text-center mb-3">
            {{"Position"|trans}} {{player.MapName}}
        </h2>
        {% endif %}

        {% if player.PlayTimeSeconds is defined and player.PlayTimeSeconds is not null %}
        <h2 class="text-center mb-3">
            {{"Temps de jeu"|trans}} : {{player.PlayTimeSeconds|ago}}
        </h2>
        {% endif %}

        <label>
            {{"Vie"|trans}} : {{player.Vitals[0]}} / {{player.MaxVitals[0]}}

        </label>
        <div class="progress mb-3" style="height: 20px;">
            <div class="progress-bar bg-danger" role="progressbar"
                style="width: {{player.Vitals[0] * 100 / player.MaxVitals[0]}}%;" aria-valuenow="25" aria-valuemin="0"
                aria-valuemax="100">
                {{player.Vitals[0] * 100 / player.MaxVitals[0]}}%</div>
        </div>
        <label>
            {{"Mana"|trans}} : {{player.Vitals[1]}} / {{player.MaxVitals[1]}}
        </label>
        <div class="progress mb-3" style="height: 20px;">
            <div class="progress-bar bg-primary" role="progressbar"
                style="width: {{player.Vitals[1] * 100 / player.MaxVitals[1]}}%;" aria-valuenow="25" aria-valuemin="0"
                aria-valuemax="100">
                {{player.Vitals[1] * 100 / player.MaxVitals[1]}}%</div>
        </div>
        <label>
            {{"Exp"|trans}} : {{player.Exp}} / {{player.ExperienceToNextLevel}}
        </label>
        <div class="progress mb-3" style="height: 20px;">
            <div class="progress-bar bg-warning" role="progressbar"
                style="width: {{player.Exp * 100 / player.ExperienceToNextLevel}}%;" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100">
                {{(player.Exp * 100 / player.ExperienceToNextLevel)|round(1,'floor')}}%
            </div>
        </div>
        <ul class="list-group list-group-flush mt-5">
            <h1 class="text-center">
                Stats
            </h1>
            <li class="list-group-item">
                {{"Attaque"|trans}} : {{player.BaseStats[0] +
                player.StatPointAllocations[0]}}
            </li>
            <li class="list-group-item">
                {{"Ability Power"|trans}} : {{player.BaseStats[1] +
                player.StatPointAllocations[1]}}
            </li>
            <li class="list-group-item">
                {{"Défense"|trans}} : {{player.BaseStats[2] +
                player.StatPointAllocations[2]}}
            </li>
            <li class="list-group-item">
                {{"Résistence magique"|trans}} : {{player.BaseStats[3] +
                player.StatPointAllocations[3]}}
            </li>
            <li class="list-group-item">
                {{"Vitesse"|trans}} : {{player.BaseStats[4] +
                player.StatPointAllocations[4]}}
            </li>
        </ul>
		
  <!-- Placeholder objets -->
 <h1 class="text-center mb-5">
            {{"Inventaire"|trans}}
        </h1>
  <div id="inventory-container" class="d-flex flex-wrap gap-2">
    {% for id, qty in inventoryItems %}
      <div id="loader-inventory-{{ id }}">
        <img src="{{ asset('images/loader.gif') }}" width="48" height="48" alt="Loading">
      </div>
    {% endfor %}
  </div>

 <h1 class="text-center mb-5">
            {{"Banque"|trans}}
        </h1>
  <div id="bank-container" class="d-flex flex-wrap gap-2">
    {% for id, qty in bankItems %}
      <div id="loader-bank-{{ id }}">
        <img src="{{ asset('images/loader.gif') }}" width="48" height="48" alt="Loading">
      </div>
    {% endfor %}
  </div>

 <h1 class="text-center mb-5">
            {{"Sac à dos"|trans}}
        </h1>
  <div id="bag-container" class="d-flex flex-wrap gap-2">
    {% for id, qty in bagItems %}
      <div id="loader-bag-{{ id }}">
        <img src="{{ asset('images/loader.gif') }}" width="48" height="48" alt="Loading">
      </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
const inventoryItems = {{ inventoryItems|json_encode|raw }};
const bankItems = {{ bankItems|json_encode|raw }};
const bagItems = {{ bagItems|json_encode|raw }};
</script>
<script src="{{ asset('js/admin/character_details_ajax.js') }}"></script>
{% endblock %}