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

{% block title %}Mes Tickets{% endblock %}

{% block body %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" type="module"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
    .form-control-focus {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .was-validated :valid + .form-control-focus {
        border-color: #198754;
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    }

    .was-validated :invalid + .form-control-focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    .criticity-tooltip {
        --bs-tooltip-bg: var(--bd-violet-bg);
        --bs-tooltip-color: var(--bs-white);
    }

</style>
<script>

    /*const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const popoverList = [popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));*/

    $(document).ready(function () {
        $(".page-title h1").text("Nouvelle demande");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        //$('#ticket_tags').select2();
        var data = {
            id: 1,
            text: 'Barn owl'
        };
        
        $('#ticket_tags').select2({
            placeholder: 'Associer des tags',
            allowClear: true,
            ajax: true,
            multiple: true,
            tags: true,
            ajax: {
                url: "/tags/ajax-list",
                cache: true
            },
            tokenSeparators: [';']
        });

        $('#ticket_tags').on("select2:select", function(e) {
            //var tag = $('#ticket_tags :selected +1').text();
            //var tag = $('#ticket_tags :selected').text();
            var data = e.params.data;
            var tag = data['text'];
            console.log("Tag à insérer : " + tag);

            var idTicket = '{{ ticketID }}';
            console.log('ticketID = ' + idTicket);

            $.ajax({
                url: '/tags/ajax-add/',
                method: "get",
                dataType: "json",
                data: {
                    tagName: tag,
                    idTicket: idTicket
                }
            }).done(function (response) {
                console.log('Le tag ' + tag + ' a bien été inséré dans la base.');
            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du tag. Veuillez réessayer plus tard.");
            });
            
        });
        
    })
</script>
<script>
  var app_tags_ajax_list = "{{ url('app_tags_ajax_list') }}";
</script>
<!--script type="module">
    import Tags from "https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-tags@master/tags.js";
    Tags.init("select");
</script-->
<div class="container-page">
    <div class="app-form">
        <div style="display: flow-root;">
            <div style="float:left;"><h1>Créez une demande</h1></div>
            <div style="float:right;"></div>
        </div>
        {{ form_start(ticketForm) }}
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Type de demande</label>
                <select name="{{ field_name(ticketForm.type) }}" class="form-control">
                    {% for label, value in field_choices(ticketForm.type) %}
                        {% set selected = '' %}
                            {% if label == ticket.type %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            &nbsp;
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Projet</label>
                <select name="{{ field_name(ticketForm.project) }}" class="form-control">
                    {% for label, value in field_choices(ticketForm.project) %}
                        {% set selected = '' %}
                            {% if label == ticket.project %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            &nbsp;
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Statut</label>
                <select name="{{ field_name(ticketForm.ticketStatus) }}" class="form-control">
                    {% for label, value in field_choices(ticketForm.ticketStatus) %}
                        {% set selected = '' %}
                            {% if label == ticket.ticketStatus %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label" 
                    data-bs-toggle="tooltip" 
                    data-bs-placement="top"
                    data-bs-custom-class="criticity-tooltip"
                    data-bs-title="This top tooltip is themed via CSS variables.">Criticité</label>
                <select name="{{ field_name(ticketForm.ticketCriticity) }}" class="form-control">
                    {% for label, value in field_choices(ticketForm.ticketCriticity) %}
                        {% set selected = '' %}
                            {% if label == ticket.ticketCriticity %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Priorité</label>
                <select name="{{ field_name(ticketForm.ticketPriority) }}" class="form-control">
                    {% for label, value in field_choices(ticketForm.ticketPriority) %}
                        {% set selected = '' %}
                            {% if label == ticket.ticketPriority %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketTitle" class="form-label">Titre</label>
                <input type="text" name="{{ field_name(ticketForm.ticketTitle) }}" class="form-control" id="ticket_ticketTitle" placeholder="Saisir un titre pour la demande">
                <div id="emailHelp" class="form-text">C'est le titre de la demande</div>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketExcerpt" class="form-label">Extrait</label>
                <textarea id="ticket_ticketExcerpt" class="form-control" name="{{ field_name(ticketForm.ticketExcerpt) }}" placeholder="Saisir un extrait pour la demande" rows="2" cols="33"></textarea>
                <div id="emailHelp" class="form-text">Décrivez succintement votre demande</div>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketDescription" class="form-label">Description</label>
                <textarea id="ticket_ticketDescription" class="form-control" name="{{ field_name(ticketForm.ticketDescription) }}" placeholder="Saisir une description détaillée de la demande" rows="5" cols="33"></textarea>
                <div id="emailHelp" class="form-text">Décrivez votre demande plus précisément</div>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketComments" class="form-label">Commentaire</label>
                <textarea id="ticket_ticketComments" class="form-control" name="{{ field_name(ticketForm.ticketComments) }}" placeholder="Saisir un commentaire" rows="3" cols="33"></textarea>
            </div>
            <div class="mb-3" style="display: inline-flex;">
                <div>
                    <label for="ticket_ticketEstimation" class="form-label">Estimation</label>
                    <input type="number" id="ticket_ticketEstimation" class="form-control" name="{{ field_name(ticketForm.ticketEstimation) }}" placeholder="Saisir une estimation">
                </div>
                &nbsp; &nbsp; 
                <div>
                    <label for="exampleInputEmail1" class="form-label">Unité d'estimation</label>
                    <select name="{{ field_name(ticketForm.ticketCostUnit) }}" class="form-control">
                        {% for label, value in field_choices(ticketForm.ticketCostUnit) %}
                        {% set selected = '' %}
                            {% if label == ticket.ticketCostUnit %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                &nbsp; &nbsp; 
                <div>
                    <label for="exampleInputEmail1" class="form-label">% d'avancement</label>
                    <select name="{{ field_name(ticketForm.progressPercent) }}" class="form-control">
                        {% for label, value in field_choices(ticketForm.progressPercent) %}
                        {% set selected = '' %}
                            {% if label == ticket.progressPercent %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Assigné à</label>
                <select name="{{ field_name(ticketForm.assignee) }}" class="form-control">
                    {% for label, value in field_choices(ticketForm.assignee) %}
                        {% set selected = '' %}
                            {% if label == ticket.assignee %}
                                {% set selected = 'selected' %}
                            {% endif %}
                            <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Tags</label>
                <select id="ticket_tags" class="form-control" name="tags" multiple="multiple">
                </select>
                <div id="tagHelp" class="form-text">Saisissez des tags et sélectionnez-les pour les ajouter au ticket</div>
            </div>
            <div class="mb-3">
                <label for="ticket_estimatedStartDate" class="form-label">Date de début souhaitée</label>
                <input id="ticket_estimatedStartDate" type="date" name="{{ field_name(ticketForm.estimatedStartDate) }}" class="form-control" placeholder="Date de début planifiée">
                <div id="emailHelp" class="form-text">Date de début souhaitée</div>
            </div>
            
            <br>
            <button type="submit" class="btn-glossy">Enregistrer la demande</button>
            {{ form_rest(ticketForm) }}
    {{ form_end(ticketForm) }}
    </div> 
</div>  
{% endblock %}