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

{% block activeLiSta %}class="active"{% endblock %}
{% block activeSta %}class="active"{% endblock %}
{% block body %}
    <link href="{{ asset("assets/Backoffice/css/bootstrap-material-datetimepicker.css") }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset("assets/Backoffice/css/fileinput.css") }}">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
                <li><a href="#">Statistiques</a></li>
                <li class="active">Nouvelle statistique</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Statistiques</h3>
            </div>
            {% if response != "" %}
                {% if response == "OK" %}
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="fa fa-ok-sign"></i><strong>OK !</strong> Statistique ajoutée avec succès</a>.
                    </div>
                {% else %}
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="fa fa-ban-circle"></i><strong>Erreur !</strong> {{ response }}
                    </div>
                {% endif %}
            {% endif %}
            <form method="POST" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-sm-6">
                        <section class="panel panel-default">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Type de statistique :</label>
                                    <select name="type" class="form-control" id="typeStatistique">
                                        <option value="">-- Choisir --</option>
                                        <option value="1" {% if formData.type == '1' %}selected{% endif %}>Bar</option>
                                        <option value="2" {% if formData.type == '2' %}selected{% endif %}>Pie</option>
                                        <option value="3" {% if formData.type == '3' %}selected{% endif %}>Line</option>
                                        <option value="5" {% if formData.type == '5' %}selected{% endif %}>Images</option>
                                        <option value="4" {% if formData.type == '4' %}selected{% endif %}>Fichier Excel</option>
                                    </select>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-sm-6">
                        <section class="panel panel-default">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Date :</label>
                                    <input type="text" data-format="yyyy-MM-dd" name="date" class="form-control p-input" id="dateStatistique" placeholder="YYYY-mm-dd" value="{{ formData.date }}">
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <section class="panel panel-default">
                            <header class="panel-heading font-bold">Français</header>
                            <div class="panel-body">
                                <label>
                                    <input type="checkbox" name="showFr" {% if formData.showFr %}checked{% endif %}> Afficher en français
                                </label>
                                <div class="form-group">
                                    <label>Nom (FR)</label>
                                    <input type="text" class="form-control" name="nomFr" value="{{ formData.nomFr }}">
                                </div>

                                <div class="form-group">
                                    <label>Description</label>
                                    <textarea name="textFr" class="form-control p-input" rows="5">{{ formData.textFr }}</textarea>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-sm-6" style="direction: rtl;">
                        <section class="panel panel-default">
                            <header class="panel-heading font-bold">العربية</header>
                            <div class="panel-body">
                                <label style="margin-left:20px;">
                                    <input type="checkbox" name="showAr" {% if formData.showAr %}checked{% endif %}> عرض باللغة العربية
                                </label>
                                <div class="form-group" style="direction: rtl;">
                                    <label>الاسم (AR)</label>
                                    <input type="text" class="form-control" name="nomAr" value="{{ formData.nomAr }}">
                                </div>

                                <div class="form-group">
                                    <label>الوصف</label>
                                    <textarea name="textAr" class="form-control p-input" rows="5">{{ formData.textAr }}</textarea>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <!-- Advanced details section -->
                <div class="row" id="detailsRow">
                    <div class="col-sm-12">
                        <section class="panel panel-default">
                            <header class="panel-heading font-bold">Détails avancés</header>
                            <div class="panel-body">
                                <table class="table table-bordered" id="detailsTable">
                                    <thead>
                                        <tr>
                                            <th>Nom (FR)</th>
                                            <th>Nom (AR)</th>
                                            <th>Valeur</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for d in formData.details %}
                                        <tr>
                                            <td><input type="text" name="details[{{ loop.index0 }}][nomFr]" class="form-control" value="{{ d.nomFr }}"></td>
                                            <td><input type="text" name="details[{{ loop.index0 }}][nomAr]" class="form-control" value="{{ d.nomAr }}"></td>
                                            <td><input type="number" step="any" name="details[{{ loop.index0 }}][valeur]" class="form-control" value="{{ d.valeur }}"></td>
                                            <td><button type="button" class="btn btn-danger btn-sm" onclick="removeDetailRow(this)">Supprimer</button></td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                <button type="button" class="btn btn-success btn-sm" onclick="addDetailRow()">Ajouter un détail</button>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="row" id="fileRow" style="display:none;">
                    <div class="col-sm-12">
                        <section class="panel panel-default">
                            <header class="panel-heading font-bold">Fichier</header>
                            <div class="panel-body">
                                <div class="form-group" id="imageInput" style="display:none;">
                                    <label>Images</label>
                                    <input type="file" name="images[]" class="form-control" multiple accept="image/*">
                                </div>
                                <div class="form-group" id="excelInput" style="display:none;">
                                    <label>Fichier Excel</label>
                                    <input type="file" name="excel" class="form-control" accept=".xls,.xlsx,.csv">
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="text-center" style="margin-bottom: 50px;">
                    <button type="submit" class="btn btn-sm btn-primary ">Enregistrer la statistique</button>
                </div>
            </form>
        </section>
    </section>
    <br/><br/>
{% endblock %}
{% block js %}
<script type="text/javascript" src="{{ asset("assets/Backoffice/js/bootstrap-material-datetimepicker.js") }}"></script>
<script>

function addDetailRow() {
    var idx = $('#detailsTable tbody tr').length;
    var row = `<tr>
        <td><input type="text" name="details[${idx}][nomFr]" class="form-control"></td>
        <td><input type="text" name="details[${idx}][nomAr]" class="form-control"></td>
        <td><input type="number" step="any" name="details[${idx}][valeur]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger btn-sm" onclick="removeDetailRow(this)">Supprimer</button></td>
    </tr>`;
    $('#detailsTable tbody').append(row);
}
function removeDetailRow(btn) {
    $(btn).closest('tr').remove();
}

// Show/hide details or file input based on type
function toggleDetailsOrFile() {
    var type = $('#typeStatistique').val();
    if (type === '5') { // Images
        $('#detailsRow').hide();
        $('#fileRow').show();
        $('#imageInput').show();
        $('#excelInput').hide();
    } else if (type === '4') { // Fichier Excel
        $('#detailsRow').hide();
        $('#fileRow').show();
        $('#imageInput').hide();
        $('#excelInput').show();
    } else {
        $('#detailsRow').show();
        $('#fileRow').hide();
        $('#imageInput').hide();
        $('#excelInput').hide();
    }
}
$('#typeStatistique').on('change', toggleDetailsOrFile);
$(document).ready(function() {
    toggleDetailsOrFile();
});
</script>
{% endblock %}