{% 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>
<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);
    }   
</style>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Détail demande " + '{{ ticketRef }}');
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        $("#select-type").on('change', function (e) {
            console.log("clicked");
            $("#btn-modif-type").prop("disabled",false);

        })
    })
</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>Visualisation de la demande "{{ ticketRef }}"</h1></div>
            <!--div style="float:right;"><button type="submit" class="btn glossy-button">Enregistrer la demande</button></div-->
        </div>
            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <div style=""><h4>CLIENT</h4></div>
                    </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="company-panel">
                            <div class="company-logo">
                                <img src="/uploads/companies/{{ client.companyLogo }}" height=200 width=200 class="img-thumbnail" alt="logo-client">
                            </div>  
                            <div class="company-details">
                                <div class="client-name">&nbsp;<h2>{{ client.companyName }}</h2></div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <div style=""><h4>PROJET</h4></div>
                        
                    </button>
                    <!--div STYLE="background-color:#000000; height:2px; width:20%;"></div-->
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <h2>{{ projet.projectName }}</h2>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            <div style=""><h4>DEMANDE</h4></div>
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                        <div class="accordion-body">

                            <!-- Type de demande -->
                            <div class="d-flex bd-highlight">
                                <div class="p-2 bd-highlight">Type de demande</div>
                                <div class="p-2 flex-grow-1 bd-highlight">
                                    <select class="form-select" id="select-type" aria-label="Example select with button addon">
                                        <option value={{ type }} selected>{{ type }}</option>
                                        <option value="Bug">Bug</option>
                                        <option value="User story">User story</option>
                                        <option value="Fonctionnalité">Fonctionnalité</option>
                                        <option value="User story">User story</option>
                                        <option value="Tache">Tache</option>
                                        <option value="Besoin">Besoin</option>
                                        <option value="Epic">Epic</option>
                                    </select>
                                </div>
                                <div class="p-2 bd-highlight">
                                    <button id="btn-modif-type" class="glossy-button" disabled type="button">Enregistrer</button>
                                </div>
                            </div>


                            
                            <div class="ticket-field-row">
                                <div class="ticket-field-label">Type de demande</div>
                                <div class="ticket-field-value">{{ type }}</div>
                            </div>

                            <!-- Titre de la demande -->
                            <div class="ticket-field-row">
                                <div class="ticket-field-label">Titre de la demande</div>
                                <div class="ticket-field-value">{{ titre }}</div>
                            </div>

                            

                        </div>
                    </div>
                </div>
            </div>
            

            
            
            
            <!--div class="mb-3">
                <label for="separatorTags" class="form-label">Tags</label>
                <select class="form-select" id="separatorTags" data-allow-clear="true" name={#{ field_name(ticketForm.ticketTags) }#} multiple data-allow-new="true" data-separator=";">
                    <option value="">Saisir des tags pour mieux qualifier la demande...</option>
                </select>
            </div-->
    </div> 
</div>  
{% endblock %}