{% 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>

        <h1 class="text-center mb-5">
            {{"Inventaire"|trans}}
        </h1>

        {% for item in inventory %}
        <img src="{{asset('assets/general/gamedata/items/' ~ item.icon)}}" class="inventory slot" alt=""
            data-toggle="tooltip" data-placement="top" data-html="true" data-bs-trigger="hover focus"
            data-id="{{item.id}}" title="{{item.name}} x{{item.quantity}}" data-content="<p>Quantité : {{item.quantity}}</p>">

        <!-- Modal for admin action in inventory -->
        <div class="modal fade" id="inventory-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{item.name}} x {{item.quantity}}</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="mt-3 mb-3">
                                <label for="action">{{"Sélectionnez l'action que vous souhaitez faire"|trans}}</label>
                                <select class="form-control rounded-0 w-100 mt-3" name="action" id="action">
                                    <option value="add">{{"Ajouter"|trans}}</option>
                                    <option value="del">{{"Retirer"|trans}}</option>
                                </select>
                            </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">
                                <input type="hidden" name="item" value="{{item.id}}">
                            </div>
                            <button type="submit" class="btn btn-success w-100">{{"Envoyez"|trans}}</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!-- Modal for admin action in inventory -->
        {% else %}
        <div class="alert alert-info text-dark">
            {{"Aucun item dans l'inventaire"|trans}}
        </div>
        {% endfor %}

        <h1 class="text-center">
            {{"Banque"|trans}}
        </h1>

        {% for item in bank %}
        <img src="{{asset('assets/general/gamedata/items/' ~ item.icon)}}" class="slot mt-5" alt=""
            data-toggle="tooltip" data-placement="top" data-html="true" data-trigger="hover focus" title="{{item.name}} x{{item.quantity}}"
            data-content="<p>Quantité(s) : {{item.quantity}}</p>">
        {% else %}
        <div class="alert alert-info text-dark">
            {{"Aucun item en banque"|trans}}
        </div>
        {% endfor %}

        <h1 class="text-center">
            {{"Sac à dos"|trans}}
        </h1>

        {% if bag is defined %}
        {% for item in bag %}
        <img src="{{asset('assets/general/gamedata/items/' ~ item.icon)}}" class="slot mt-5" alt=""
            data-toggle="tooltip" data-placement="top" data-html="true" data-trigger="hover focus" title="{{item.name}} x{{item.quantity}}"
            data-content="<p>Quantité(s) : {{item.quantity}}</p>">
        {% else %}
        <div class="alert alert-info text-dark">
            {{"Aucun item dans le sac à dos"|trans}}
        </div>
        {% endfor %}
        {% endif %}




    </div>
</div>

{% endblock %}

{% block javascripts %}
<script src="{{asset('assets/themes/' ~ settings.get("theme") ~ '/js/admin/character_details.min.js' )}}"></script>
{% endblock %}