{% extends 'base.html.twig' %}

{% block title %}Instrument Lister !{% endblock %}

{% block body %}

    <div class="tab-lister-instrument">

        <h1>Information sur {{ instrument.type.libelle }} {{ instrument.name }}</h1>
        <div class="row">

            <div class="col-lg-6">

                <div class="row">

                    <!-- Earnings (Monthly) Card Example -->
                    <div class="col-xl-6 col-md-6 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            Numéro de Série</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ instrument.numSerie }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Earnings (Annual) Card Example -->
                    <div class="col-xl-6 col-md-6 mb-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                            Date d'achat</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ instrument.dateAchat|date('d/m/Y') }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <!-- Tasks Card Example -->
                    <div class="col-xl-6 col-md-6 mb-4">
                        <div class="card border-left-info shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Utilisation
                                        </div>
                                        <div class="row no-gutters align-items-center">
                                            <div class="col-auto">
                                                <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{ instrument.utilisation }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pending Requests Card Example -->
                    <div class="col-xl-6 col-md-6 mb-4">
                        <div class="card border-left-warning shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                            Prix acheté</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ instrument.prixAchat }}€</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-comments fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="text" id="instrumentId" hidden="hidden" disabled value="{{ instrument.id }}">
                </div>

            </div>

            <div class="col-lg-6">

                <!-- Dropdown Card Example -->
                <div class="card shadow mb-4">
                    <!-- Card Header - Dropdown -->
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">Accessoires</h6>
                        {% if 'ROLE_ADMIN' in app.user.roles or 'ROLE_GEST' in app.user.roles %}

                        <div class="dropdown no-arrow">
                            <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400">⚙</i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink" style="">
                                <div class="dropdown-header">Action :</div>
                                <a class="dropdown-item" href="#" id="addAccessoryBtn">Ajouter</a>
                                <div class="dropdown-divider"></div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <!-- Card Body -->
                    <div class="card-body">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <tbody>
                            {% for i in pAccessoires %}
                                <tr>
                                    <td>{{ i.libelle }}</a></td>
                                </tr>
                            {% else %}
                                <tr>
                                    <th>Aucun accessoire n'a été trouvé.</th>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <img src="{{ asset("design/img/piano.jpg") }}" alt="Image de l'instrument">
        </div>


    </div>
{% endblock %}
{% block javascripts %}
    {% if 'ROLE_ADMIN' in app.user.roles or 'ROLE_GEST' in app.user.roles %}
    <script>

        $(document).ready(function () {

            $('#addAccessoryBtn').click(function () {
                const instrumentId = $('#instrumentId').val();
                const newRow = createAccessoryRow(instrumentId);


                $('#dataTable tbody').append(newRow);
            });

            $('.accDelBTN').click(function () {
                deleteAccessory(this.attributes.data.value);
            });

            // Function to create a new accessory row
            function createAccessoryRow(instrumentId) {
                const newRow = $('<tr id="createAccessoryRow">');
                newRow.append('<td><input type="text" class="accessory-input" id="accessory-input" placeholder="Nom de l\'accessoire"></td>');
                newRow.append('<td><button class="btn btn-primary" onclick="addAccessory(\'' + instrumentId + '\')">Valider</button></td>');
                return newRow;
            }

            // Function to add a new accessory row dynamically
            function addAccessoryRow(libelleAccessoire) {
                const newRow = $('<tr>');
                newRow.append('<td>' + libelleAccessoire + '</td>');
                return newRow;

            }


            window.deleteAccessory = function (accid) {
                console.log(accid);
                var settings = {
                    "url": "{{ path("ajax_del_accessory") }}",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                        "Content-Type": "application/json"
                    },
                    "data": JSON.stringify({
                        "accid": accid,
                    }),
                };
                $.ajax(settings).done(function (response) {
                    if (response.success !== undefined) {
                        if (!response.success) {
                            alert('Delete : Failed');
                            console.log(response.e);
                        }else{
                            alert('Delete : Success');
                        }
                    } else {
                        alert('Format de réponse invalide. Clé "success" manquante.');
                    }
                });
            };

            // Function to add an accessory with AJAX
            window.addAccessory = function (instrumentId) {
                const accLibelle = $('#accessory-input').val();
                var settings = {
                    "url": "{{ path("ajax_add_accessory") }}",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                        "Content-Type": "application/json"
                    },
                    "data": JSON.stringify({
                        "libelle": accLibelle,
                        "instrumentId": instrumentId
                    }),
                };
                $.ajax(settings).done(function (response) {
                    if (response.success !== undefined) {
                        if (!response.success) {
                            alert('Échec de l\'ajout de l\'accessoire.');
                        }else{
                            const newRow = addAccessoryRow(accLibelle);
                            $('#createAccessoryRow').remove();
                            $('#dataTable tbody').append(newRow);
                        }
                    } else {
                        alert('Format de réponse invalide. Clé "success" manquante.');
                    }
                });
            }
        });

    </script>
    {% endif %}

{% endblock %}