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

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('devis_index') }}">Devis</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('devis_show', { 'id': devis.id }) }}">Devis</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Editer le Devis</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="row">
        <div class="col-lg-8 col-xs-12 col-sm-12">

            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light bordered">

                        <div class="portlet-body tab-pane fade active in" id="tab_1_1">
                            <div class="input-icon input-icon-lg input-group input-group-lg">
                                <i class="fa fa-barcode font-green"></i>
                                <input type="text" id="produit-codebar" class="form-control input-lg" placeholder="Scanner ou saisir un code-barres produit…">
                                <span class="input-group-btn">
                                    <a class="btn default" type="button" data-toggle="modal" href="#select-products">Sélectionner</a>
                                </span>
                            </div>
                            <div class="ka-muted" style="margin-top:6px;">Astuce: tapez puis Entrée pour ajouter; ou cliquez sur Sélectionner pour parcourir le catalogue.</div>
                            <div class="table-responsive" style="margin-top:10px;">
                                <table class="table table-hover ka-table-tight">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th> Désignation </th>
                                            <th> Quantité </th>
                                            <th style='text-align:right'> Prix Unit. </th>
                                            <th> Remise </th>
                                            <th style='text-align:right'> Total HT </th>
                                        </tr>
                                    </thead>
                                    <tbody id="list-produit">
                                        
                                    </tbody>
                                </table>
                            </div>
                            
                        </div><!--End portlet-->
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-xs-12 col-sm-12">
            <div class="portlet solid grey-silver">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings font-white"></i>
                        <span class="caption-subject font-white sbold uppercase">Détails</span>
                    </div>
                    <div class="actions">
                        <div class="btn-group">
                            <a class="btn btn-sm default" aria-expanded="false" href="#commande_details" data-target="#commande_details" data-toggle="modal" title="Modifier les détails" data-toggle="tooltip">
                                <i class="fa fa-pencil"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="portlet-body">
                    
                    <table class="table table-light ka-table-tight">
                        <tr>
                            <th scope="row">Total TTC:</th>
                            <td style="text-align:right;font-size:18px;font-weight:bold;">
                                <a href="#modal-totaux" data-target="#modal-totaux" data-toggle="modal" class="total_ttc">0.00</a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">Client:</th>
                            <td style="text-align:right;">
                                <a href="#change_client" data-target="#change_client" data-toggle="modal" class="client-label">Divers</a>
                            </td>
                        </tr>
                        {% if app.user.aDroit('reparation_consultation') %}
                        <tr>
                            <th scope="row">O.R:</th>
                            <td style="text-align:right;">
                                <a href="#change_reparation" data-target="#change_reparation" data-toggle="modal" class="reparation-label">Sans</a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">Véhicule:</th>
                            <td style="text-align:right;">
                                <a href="#change_voiture" data-target="#change_voiture" data-toggle="modal" class="voiture-label">Sans</a>
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th scope="row">Remise (%):</th>
                            <td style="text-align:right;">
                                <input type="text" style="text-align:right;" class="form-control input_caisse" id="taux_remise" value="0">
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">Objet:</th>
                            <td style="text-align:right;">
                                <textarea id="objet_commande" class="form-control">{{ devis.objet }}</textarea>
                            </td>
                        </tr>
                        
                    </table>
                    
                    
                    <div class="portlet-body">
                        <a href="javascript:;" class="btn btn-lg blue hidden-print btn-block" id="save-vente">
                            <i class="fa fa-check"></i>
                            Enregistrer le devis
                        </a>
                        
                        
                         
                    </div>
                    
                    
                </div>
            </div>
        </div>
        
    </div>

    <!-- /.modal commande details -->
    <div id="commande_details" class="modal fade bs-modal-lg" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Détails</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="date_commande" class="control-label">Date du document</label>
                                        <input id="date_commande" type="text" class="form-control col-md-9 date-picker" value="{{ devis.getDateDevis()|date('d-m-Y')}}">
                                    </div>
                                    <div class="form-group">
                                        <label for="notes_commande" class="control-label">Notes</label>
                                        <textarea id="notes_commande" class="form-control">{{ devis.getNotes() }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>

                <div class="clearfix"> </div>

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- /.modal totaux -->
    <div id="modal-totaux" class="modal fade" tabindex="-1" data-width="100">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Résumé de la commande</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-light">
                        <tr>
                            <th scope="row">Total HT:</th>
                            <td style="text-align:right;" class="total_ht">0.00</td>
                        </tr>
                        <tr>
                            <th scope="row">Total TVA:</th>
                            <td style="text-align:right;" class="total_tva">0.00</td>
                        </tr>
                        <tr>
                            <th scope="row">Total remise:</th>
                            <td style="text-align:right;" class="total_remise">0.00</td>
                        </tr>
                        <tr>
                            <th scope="row">Total TTC:</th>
                            <td style="text-align:right;font-size:18px;font-weight:bold;" class="total_ttc">0.00</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-block btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>
    
    
    
    <!-- /.modal print documents -->
    <div id="print-docs" class="modal fade" tabindex="-1" data-width="200">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Imprimer documents</h4>
                </div>
                <div class="modal-body">
                    <a href="javascript:;" class="btn blue btn-block btn-print" data-val="ticket">Ticket</a>
                    <a href="javascript:;" class="btn blue btn-block btn-print" data-val="facture">Facture</a>
                    <a href="javascript:;" class="btn blue btn-block btn-print" data-val="devis">Devis</a>
                    <a href="javascript:;" class="btn blue btn-block btn-print" data-val="bl">Bon de livraison</a>
                    <hr>
                    <a href="javascript:;" class="btn dark btn-block btn-outline" data-dismiss="modal">Fermer</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- /.modal client -->
    <div id="change_client" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Client</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input id="nom-client" type="text" class="col-md-12 form-control" autocomplete="off">
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mt-element-list">
                                <div class="mt-list-container list-simple ext-1">
                                    <ul id="liste-clients">
                                    
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a id="btn_ajout_client" href="#ajout_client" data-target="#ajout_client" data-toggle="modal" class="btn green">Nouveau Client</a>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- /.modal add client -->
    <div id="ajout_client" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Nouveau Client</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12" style="padding:10px;">
                            <div class="form-group">
                                <div class="alert alert-warning"><b>Attention!</b> Merci de vous assurer que le client n'existe pas déjà avant d'ajouter un nouveau.</div>
                            </div>
                            <div class="form-group">
                                <label for="total_paye" class="control-label">Raison sociale</label>
                                <input id="raison_sociale_client" type="text" class="form-control col-md-9">
                            </div>
                            <div class="form-group">
                                <label for="total_paye" class="control-label">Adresse</label>
                                <input id="adresse_client" type="text" class="form-control col-md-9">
                            </div>
                            <div class="form-group">
                                <label for="total_paye" class="control-label">Tél</label>
                                <input id="telephone_client" type="text" class="form-control col-md-9">
                            </div>
                            <div class="form-group">
                                <label for="total_paye" class="control-label">ICE</label>
                                <input id="ice_client" type="text" class="form-control col-md-9">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id='enregistrer_client' class="btn green">Enregistrer</button>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Annuler</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- /.modal reparation -->
    <div id="change_reparation" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Réparation</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input id="num-reparation" type="text" class="col-md-12 form-control" autocomplete="off">
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mt-element-list">
                                <div class="mt-list-container list-simple ext-1">
                                    <ul id="liste-reparations">
                                    
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn green" data-toggle="modal" href="{{ path('reparation_new') }}" target="_blank"> Nouveau OR </a>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- /.modal voiture -->
    <div id="change_voiture" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Véhicule</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input id="nom-voiture" type="text" class="col-md-12 form-control" autocomplete="off">
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mt-element-list">
                                <div class="mt-list-container list-simple ext-1">
                                    <ul id="liste-voitures">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn green" data-toggle="modal" href="{{ path('vehicule_new') }}" target="_blank"> Nouveau Véhicule </a>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- /.modal selectionner produits -->
    <div id="select-products" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                    <h4 class="modal-title">Choisir les produits</h4>
                    <input type="hidden" id="select-products-category-id" value="0">
                    <input type="text" id="select-products-filter" class="col-md-12 form-control">
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12" style="height:480px;overflow:auto;">
                            <ul id="products-list" class="product-menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn green" data-toggle="modal" href="{{ path('produit_new') }}" target="_blank"> Nouveau Produit </a>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Terminer</button>
                </div>
            </div>
        </div>
    </div>

   
{% endblock %}

{% block javascripts %}
<script>
    var vente_id = {{ devis.id }};
</script>
    <script src="{{ asset('assets/global/scripts/palette.js') ~ '?' ~ random() }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/scripts/caisse-devis-edit.js') ~ '?' ~ random() }}" type="text/javascript"></script>
{% endblock %}