{% extends 'admin/layout.html.twig' %}

{% block body_id 'admin_post_index' %}

{% block main %}
    <ul class="nav nav-tabs" role="tablist" id="content-tab" data-tabs="tabs">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="1-tab" data-bs-toggle="tab" data-bs-target="#tab-1" type="button" role="tab"  aria-selected="true">Intervention</button>
        </li>
    </ul>
    <div class="tab-content bg-primary px-3 pb-3" id="myTabContent">
        <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="1-tab">
            <div class="d-flex justify-content-between flex-wrap">
                <div class="d-flex bg-primary flex-column h-auto" style="width:49.5%">
                    <div class="text-center py-1" style="color:white">Informations Client</div>
                    <div class="px-2 py-2 bg-white w-100 h-100">
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Numéro client   <input type="text"  class="form-control-sm" value="456787121" disabled> </div>
                            </div>
                            <div>L'utilisateur de l'équipement est-il le souscripteur ? NON</div>
                        </div>
                         <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Nom utilisateur   <input type="text"  class="form-control-sm" value="MARC" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Nom souscripteur  <input type="text"  class="form-control-sm" value="PARIS" disabled></div>
                            </div>
                         </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Contrat <input type="text"  class="form-control-sm" value="GT" disabled style="width: 60px;"></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Date de fin <input type="text"  class="form-control-sm" value="30/09/21" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">N° Chaudière <input type="text"  class="form-control-sm" value="123456789" disabled></div>
                            </div>
                        </div>
                         <div class="d-flex my-2">
                            <div class="me-3 w-100">
                                <div class="me-2 white form-label control-label" for="contrat_type">Observation   <input type="text"  class="form-control-sm" value="..." disabled style="width: 80%"></div>
                            </div>
                         </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Canal d’envoi des documents d’interventions: <input type="text"  class="form-control-sm" value="E-mail" disabled> <button class="btn btn-success">Renvoyer</button></div>
                            </div>
                        </div>
                        <div class="d-flex bg-primary px-2 py-2 mb-2" style="color:white; width:276px;">
                            <div class="text-center me-3">Documents <br>générés</div>
                            <div class="d-flex">
                                <div  class="me-2" style="width:45px;"> {{ source('@public_path'~asset('build/images/picto-doc.svg')) }}</div>
                                <div  class="me-2" style="width:45px;"> {{ source('@public_path'~asset('build/images/picto-checklist.svg')) }}</div>
                                <div  class="me-2" style="width:45px;"> {{ source('@public_path'~asset('build/images/picto-letter.svg')) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex bg-primary flex-column h-auto" style="width:49.5%" >
                    <div class="text-center py-1" style="color:white">Informations intervention</div>
                    <div class="px-2 py-2 bg-white w-100 h-100">
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Date   <input type="text"  class="form-control-sm" value="16/03/2021" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Heure début  <input type="text"  class="form-control-sm" value="10:02" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Heure fin  <input type="text"  class="form-control-sm" value="11:00" disabled></div>
                            </div>
                        </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                    <div class="me-2 white form-label control-label" for="contrat_type">Code   <input type="text"  class="form-control-sm" value="AUTRE-VISITE" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Agent  <input type="text"  class="form-control-sm" value="82 : Alexandre Didier" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Fiche  <input type="text"  class="form-control-sm" value="160601502" disabled></div>
                            </div>
                        </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Programmé le   <input type="text"  class="form-control-sm" value="16/03/2021" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Par  <input type="text"  class="form-control-sm" value="" disabled></div>
                            </div>
                        </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">N.Papier  <input type="text"  class="form-control-sm" value="" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Devis  <input type="text"  class="form-control-sm" value="" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Bon de comm.  <input type="text"  class="form-control-sm" value="" disabled></div>
                            </div>
                        </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Anomalies  <input type="text"  class="form-control-sm" value="00000000" disabled></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Raison du retour  <input type="text"  class="form-control-sm" value="41" disabled></div>
                            </div>
                        </div>
                        <div class="d-flex my-2">
                            <div class="me-3 w-100">
                                <div class="me-2 white form-label control-label" for="contrat_type">Commentaire client   <input type="text"  class="form-control-sm" value="..." disabled style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="d-flex my-2">
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">La personne sur place a refusé de signer  <input type="text"  class="form-control-sm" value="" disabled style="width: 55px"></div>
                            </div>
                            <div class="me-3">
                                <div class="me-2 white form-label control-label" for="contrat_type">Motif  <input type="text"  class="form-control-sm" value="" disabled></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex bg-primary flex-column h-auto w-100">
                    <div class="text-center py-1" style="color:white">Informations Facturation</div>
                    <div class="px-2 py-2 bg-white w-100 h-100"></div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

 {% block javascripts %}
     <script>
         var page = '{{ page|default(null) }}';
     </script>
    {{ parent() }}
 {% endblock %}