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

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



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

    {% set client = cmd.client %}
    <div class="p-3 mb-5 absolute">
        {{ form_start(form) }}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="shadow rounded w-25 p-3 d-flex justify-content-around  align-items-center mb-3">
                <img src="{{ asset('img/tools.svg') }}" alt="tools" width="40">
                <div class="fs-4 fw-bold">SAV</div>
            </div>
            <div class="shadow rounded w-25 p-3 d-flex justify-content-around  align-items-center mb-3">
                <div class="fs-4 fw-bold">
                    {% if sav is defined %}
                        {% if sav.hasType() %}
                            {{ sav.type }}
                        {% else %}
                            <a href="{{ path('crud_sav_set_type',{sav : sav.id , type : 1}) }}" class="btn btn-warning">
                                <span>Panne</span>
                            </a>
                            <a href="{{ path('crud_sav_set_type',{sav : sav.id , type : 2}) }}"
                               class="btn btn-light ms-3">
                                <span>Entretien</span>
                            </a>
                        {% endif %}
                    {% else %}
                        {{ type | default('Panne') | capitalize }}
                    {% endif %}
                </div>
            </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 %}
                            <button type="button" class="btn-info btn" data-bs-toggle="modal"
                                    data-bs-target="#displayOrderContent">
                            <i class="far fa-eye"></i>
                            <span>Voir les details</span>
                        </button>
                        <hr>
					</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 %}
                            {% set tech = sav.technicien %}
                        {% else %}
                            {% set tech = app.user %}
                        {% endif %}
                        <div class="d-flex justify-content-center align-items-center py-2 bg-light rounded w-50">
                            {{ tech.icone | raw }}
                            <div class="ms-3 fs-5 fw-bold">{{ tech | capitalize }}</div>
                        </div>
                    </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>

            <hr>

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

            </div>
            <div class="my-3 pb-3 border-bottom d-flex justify-content-between">
                <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>
                        <h6>OCCT Après :</h6>
                        <div class="d-flex mx-3">
                            <div class="d-flex flex-column me-5">
                                {% if sav is defined %} {% set occt = sav.getOcctCpu2() %} {% endif %}

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


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

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

                                <label for="max_gpu2">Max</label>
                                <input type="text" class="form-control" name="max_gpu2" 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>
                    <!-- Example single danger button -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Ajouter un composant
                        </button>
                        <ul class="dropdown-menu">
                            <li><button type="button" class="dropdown-item" onclick="goAndSave('add_compo')">Sans Serial Number connu</button></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><button type="button" class="dropdown-item" onclick="goAndSave('create_sn')">Sans Serial Number enregistré</button></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><button type="button" class="dropdown-item" onclick="goAndSave('add_sn')">Avec Serial Number enregistré</button></li>
                        </ul>
                    </div>



                <div class="d-flex">
                    {% if sav is defined and (sav.hasComposant() or sav.hasSerialNumber()) %}
                        <table class="table table-striped text-center">
                            <thead>
                            <th></th>
                            <th>Article</th>
                            <th>EAN</th>
                            <th>S/N</th>
                            <th>Fournisseur</th>
                            <th></th>
                            </thead>
                            <tbody>
                            {% for item in sav.composant %}
                                <tr>
                                    <td>{{ item }}</td>
                                    <td>{{ item.ISBN }}</td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <button class="btn btn-success">Assigner un numéro de série</button>
                                    </td>
                                </tr>
                            {% endfor %}
                            {% for item in sav.serialNumber %}
                                <tr>
                                    <td>{{ item.composant.displayImage() | raw }}</td>
                                    <td>{{ item.composant }}</td>
                                    <td>{{ item.composant.ISBN }}</td>
                                    <td>{{ item.serialNumber }}</td>
                                    <td>{{ item.fournisseur }}</td>
                                    <td>
                                        <a href="{{ path('app_serial_number_show',{id: item.id}) }}" target="_blank" class="btn btn-dark">Voir</a>
                                    </td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                        
                    {% endif %}
                </div>
                <hr>

            </div>

            <div class="d-flex justify-content-between">
                <div class="w-50">
                    <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 class="w-50">
                    <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 %}
                {% if sav is defined %}
                <div class="btn-group mx-3 pt-3 pb-3">
                    <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                        <i class="fal fa-print fs-3"></i>
                        <span>Imprimer</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="{{ path('commande.sav.print',{num : sav.getId()}) }}" target="_blank"
                               class="cmd-icon  ms-3" data-toggle="tooltip" data-placement="top"
                               title="Impression du Rapport">
                                Rapport SAV
                            </a>
                        </li>
                        {% if sav.hasReparation() %}
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" target="_blank"
                                   href="{{ path('reparation.print',{submenu : 'entree'}) }}?num={{ sav.reparation.numero }}">Bon
                                    d'entrée</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" target="_blank"
                                   href="{{ path('reparation.print',{submenu : 'diag'}) }}?num={{ sav.reparation.numero }}">Diagnostic</a>
                            </li>
                            {% if sav.reparation.hasDevis() %}
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" target="_blank"
                                       href="{{ path('reparation.print',{submenu : 'devis'}) }}?num={{ sav.reparation.numero }}">Devis</a>
                                </li>
                            {% endif %}
                            {% if sav.reparation.hasValidateDevis() %}
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" target="_blank"
                                       href="{{ path('reparation.print',{submenu : 'invoice'}) }}?num={{ sav.reparation.numero }}">Facture</a>
                                </li>
                            {% endif %}
                        {% endif %}
                    </ul>
                </div>
                {% endif %}
            </div>

        </div>
        {{ form_end(form) }}


    </div>
    {% include 'CRUD/composant/searchModal.html.twig' with {selectable : 'serial_number_composant'} %}
    {% 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>

    <!-- Modal Display equipement-->
    <div class="modal fade" id="displayOrderContent" 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">Contenu de la commande</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <table class="table table-striped table-bordered text-center">
                        <thead>
                        <th></th>
                        <th>
                            Type
                        </th>
                        <th>Article</th>
                        <th>EAN</th>
                        <th>Quantité</th>
                        </thead>
                        <tbody>
                        {% for item in cmd.contenu %}
                            {% set article = item.article %}
                            <tr>
                                <td>
                                    {% if article.hasImage() %}
                                        {% if item.isComposant %}
                                            {{ article.displayImage() | raw }}

                                        {% endif %}
                                    {% endif %}
                                </td>
                                <td>{{ item.type }}</td>
                                <td>{{ article }}</td>
                                <td></td>
                                <td>{{ item.quantite }}</td>
                            </tr>


                        {% endfor %}

                        </tbody>

                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>


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


    <script>
        function goAndSave(next){
            let form = document.getElementsByName('sav_ticket')[0];
            form.action = '?next='+next;
            form.submit();
        }
    </script>


{% endblock %}