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

{% block javascripts %}
<script src="{{ asset('js/commande.js') }}"></script>
{% endblock %}



{% block body %}
 {% if sav is defined %}
 {% set client = sav.commande.client %} 
 {% else %} {% set client = cmd.client %} 
 {% endif %}


<div class="p-3 mb-5 absolute">
    {{form_start(form)}}
    <div class="shadow rounded w-25 p-3 d-flex justify-content-around  align-items-center mb-3">
                <img src="/img/tools.svg" alt="tools" width="40">
				<div class="fs-4 fw-bold">SAV</div>
	</div>
    <div class="shadow rounded p-3">
        <div class=" d-flex justify-content-between">
            <div>
                {% if sav is defined %}
                <span class=" fs-5">
						<b>Dernière modification :</b>


						{{sav.getDateUpdate()}}</span> {% endif %}

                <div class="m-3">
                    <b>Numéro de commande :</b>
                    <span>
						{% if sav is defined %}
							{{sav.commande.numero}}
						{% else %}
							{{cmd.numero}}
						{% endif %}
					</span>
                </div>
                {% if sav is defined %}
                <div class="m-3">
                    <b>Numéro du SAV :</b>
                    <span>
							{{ sav.numero }}</span>
                </div>
                {% endif %}
                <div class="m-3">
                    {% if sav is defined %} {{sav.technicien.username}} {% else %} {{app.user.username}} {% endif %}
                </div>
            </div>


            <div class="text-end">
                {% if client.type == 'Particulier' %} {{client.civilite}} {% endif %} {{client}}
                <br> {{client.mail}}
                <br> {{client.telephone}}
                <br> {{client.rue}}
                <br> {{client.cp}} {{client.ville}}
            </div>
        </div>
        <div>


            <fieldset class="my-3">
                <legend>Problèmes :</legend>
                <div class="d-flex ">
                    <select name="probleme" class="form-select" id="sav_ticket_probleme">

						{% for item in problemes %}
							<option value="{{item.getId()}}">{{item}}</option>
						{% endfor %}
					</select>
                    <button type="button" id="addPbButton" class="btn btn-success mx-3" onclick="addPbToList('{{path('reparation.template')}}')"><img src="/img/check.svg" alt="check" width="30"></button>
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createProblemeModal"><img src="/img/plus.svg" alt="plus" width="30"></button>
                </div>

                <div class="probleme_list container my-1">

                    {% if sav is defined %} {% for pb in sav.getProbleme() %} {% include "reparations/templates/problemeLine.html.twig" with {value : pb.getDescription()} %} {% endfor %} {% endif %}


                </div>

            </fieldset>

        </div>

        <div class="my-3 pb-3 border-bottom">
            {{form_row(form.probleme_info)}}

        </div>
        <div class="my-3 pb-3 border-bottom d-flex">
            <div>
                {{form_row(form.images)}} {% if sav is defined %}
                <div class="d-flex my-3">
                    {% for item in sav.getImages() %}
                    <div class="d-flex flex-column align-items-center justify-items-center">
                        <img src="/img/sav/{{item}}" alt="image" height="100">
                        <a href="/img/sav/{{item}}" target="_blank">
                            <img src="/img/eye.svg" alt="" width="20">Voir
                        </a>
                    </div>
                    {% endfor %}
                </div>

                {% endif %}
            </div>

            <div>
                {{form_row(form.pj)}} {% if sav is defined %}
                <div class="d-flex my-3">
                    {% for item in sav.getPj() %}
                    <div class="m-3 d-flex flex-column align-items-center justify-content-between" id="pj_{{item.id}}">
                        <div>{{item}}</div>
                        <div>{{item.originalName}}</div>
                        <div>
                            <button class="btn btn-danger mx-3 " type="button" onclick="removePj('{{path('pj.remove',{id:item.id})}}','pj_{{item.id}}')"><img src="/img/trash.svg" alt="delete" width="20"></button>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% endif %}

            </div>
        </div>


        <div class="my-3 pb-3 border-bottom">
            {{form_row(form.echange_client)}}
        </div>
        <div class="my-3 pb-3 border-bottom">
            {{form_row(form.echange_boutique)}}
        </div>

        <div class="my-3 pb-3 border-bottom">


            <div class="d-flex align-items-center">
                <h5 class="me-3">Informations Techniques :</h5>


                {{form_row(form.diagnostic_date)}}</div>


            <div class=" container d-flex justify-content-around">
                <div>
                    <h6>OCCT :</h6>
                    <div class="d-flex mx-3">
                        <div class="d-flex flex-column me-5">
                            {% if sav is defined %} {% set occt = sav.getOcctCpu() %} {% endif %}

                            <label for="cpu">CPU</label>
                            <input type="text" class="form-control" name="cpu" value="{{occt.item}}">
                            <label for="min_cpu">Min</label>
                            <input type="text" class="form-control" name="min_cpu" value="{{occt.min}}">
                            <label for="max_cpu">Max</label>
                            <input type="text" class="form-control" name="max_cpu" value="{{occt.max}}">
                        </div>
                        <div class="d-flex flex-column">
                            {% if sav is defined %} {% set occt = sav.getOcctGpu() %} {% endif %}


                            <label for="cpu">GPU</label>
                            <input type="text" class="form-control" name="gpu" value="{{occt.item}}">

                            <label for="min_gpu">Min</label>
                            <input type="text" class="form-control" name="min_gpu" value="{{occt.min}}">

                            <label for="max_gpu">Max</label>
                            <input type="text" class="form-control" name="max_gpu" value="{{occt.max}}">

                        </div>

                    </div>
                </div>
                <div>
                    <h6>Crystal Disk Info :</h6>

                    <div class="d-flex">
                        <button type="button" class="btn btn-info me-3" onclick="addDisqueToSav('SSD','{{path('commande.sav.add.disque')}}')">Ajouter un SSD</button>

                        <button type="button" class="btn btn-info" onclick="addDisqueToSav('HDD','{{path('commande.sav.add.disque')}}')">Ajouter un HDD</button>

                    </div>

                    <div id="disk_list">
                        {% if sav is defined %} {% for item in sav.getDisques() %} {% include "utils/disque.html.twig" with {disque : item , name : item.getType() ~ '_' ~ loop.index} %} {% endfor %} {% endif %}

                    </div>
                </div>

            </div>


        </div>

        <div class="d-flex justify-content-between">
            <div>
                <div class="d-flex align-items-center">
                    <h5>Operations</h5>
                    <button id="createOperationButton" class="btn btn-success mx-3" type="button" data-bs-toggle="modal" data-bs-target="#createOperationModal"><img src="/img/plus.svg" alt="plus"></button>
                </div>
                {{form_row(form.operations)}}

            </div>

            <div >
                <h5>Informations</h5>
                {% if sav is defined  %}
                    {{ render(path('information_table',{sav : sav.id})) }}

                    {% else %}

                        <button type="submit" name="add_infos" value="1"  class="btn btn-success">Ajouter des informations</button>
                {% endif %}

            </div>

        </div>


        <div class="d-flex justify-content-center">
            <a href="{{path('commande',{submenu : 'sav'})}}" class="btn btn-danger p-3 m-3">Annuler</a> {% if sav is defined %} {% if sav.isStatut('solved') %}
            <a href="{{path('commande.sav.update',{id : sav.id,status : 12})}}" class="btn bg-orange p-3 m-3">Ouvrir le ticket</a> {% else %}

            <a href="{{path('commande.sav.update',{id : sav.id,status : 11})}}" class="btn btn-success p-3 m-3">Resolu</a> {% endif %} {% endif %} {{form_row(form.submit)}} {% if sav is defined %}
            {% endif %}
        </div>
    </div>
    {{form_end(form)}}

</div>

    {% if sav is defined %}
        {% include 'CRUD/information/modal.html.twig' with {informationFrom : informationForm} %}

    {% endif %}

<!-- Modal Create Probleme-->
<div class="modal fade" id="createProblemeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Creer un probleme</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <label for="description">Description :</label>
                <input type="text" id="descrCreatePb" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-success" data-bs-dismiss="modal" onclick="createPb('{{path('reparation.create.pb')}}')">Créer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Create Operation-->
<div class="modal fade" id="createOperationModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Creer une operation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{form_start(createOp)}} {{form_row(createOp.libelle)}}

                <div class="hide">
                    {{ form_row(createOp.submit) }}
                </div>

                {{form_end(createOp)}}

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-success" id="createOperationButton" onclick="createOperation()" data-bs-dismiss="modal">Créer</button>


            </div>
        </div>
    </div>
</div>
{% endblock %}