{% 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('vente_index') }}">Ventes</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Nouvelle commande</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="Ajouter un produit">
								<span class="input-group-btn">
									<a class="btn default" type="button" data-toggle="modal" href="#select-products">Selectionner</a>
								</span>
							</div>
							<div class="table-responsive">
								<table class="table table-hover">
									<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 light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings font-dark"></i>
                        <span class="caption-subject font-dark 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">
                                <i class="fa fa-pencil"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="portlet-body">
					
					<table class="table table-light">
						<tr>
                            <td><strong>Total TTC:</strong></td>
                            <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>
                            <td><strong>Client:</strong></td>
                            <td style="text-align:right;">
								<a href="#change_client" data-target="#change_client" data-toggle="modal" class="client-label">Divers</a>
							</td>
                        </tr>

                        <tr>
                            <td><strong>Organisme:</strong></td>
                            <td style="text-align:right;">
								<a href="#change_organisme" data-target="#change_organisme" data-toggle="modal" class="organisme-label">Aucun</a>
							</td>
                        </tr>

                        {% if app.user.aDroit('reparation_consultation') %}
                        <tr>
                            <td><strong>O.R:</strong></td>
                            <td style="text-align:right;">
								<a href="#change_reparation" data-target="#change_reparation" data-toggle="modal" class="reparation-label">Sans</a>
							</td>
                        </tr>
                        {% endif %}
                        
                        <tr>
                            <td><strong>Remise(%):</strong></td>
                            <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>
                            <td><strong>Objet:</strong></td>
                            <td style="text-align:right;">
								<textarea id="objet_commande" class="form-control"></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>
							Valider la commande
						</a>
						
						<!-- 
						<a href="javascript:;" class="btn green hidden-print btn-block" id="print-options" data-target="#print-docs" data-toggle="modal">
							<i class="fa fa-print"></i>
							Imprimer documents
						</a>
						-->
						 
						<a href="javascript:;" class="btn red hidden-print btn-block" id="annuler-commande">Réinitialiser la commande</a>
						<center><a href="#modele_vente" class="btn-block" id="save-modele" data-toggle="modal">Enregistrer comme modèle de commande</a></center>
					</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" aria-hidden="true"></button>
					<h4 class="modal-title">Détails de la commande</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="num_commande" class="control-label">N° commande</label>
										<input id="num_commande" type="number" class="form-control col-md-9" value="{{ numIncrement }}"> 
									</div>
									<div class="form-group">
										<label for="date_commande" class="control-label">Date commande</label>
										<input id="date_commande" type="text" class="form-control col-md-9 date-picker" value="{{ 'now'|date('d-m-Y')}}">
									</div>
									<div class="form-group">
										<label for="id-utilisateur" class="control-label">Commercial</label>
										<select id="id-utilisateur" class="col-md-12 form-control">
										{% for utilisateur in utilisateurs %}
											<option value="{{ utilisateur.id }}" {% if utilisateur.id == app.user.getId() %}selected{% endif %}>{{ utilisateur.nom }} {{ utilisateur.prenom }}</option>
										{% endfor %}
										</select>
									</div>
									<div class="form-group">
										<label for="exonore" class="control-label" data-toggle="tooltip" title="Exonération de la TVA"> 
											<input id="exonore" type="checkbox" class=""> Exonération de la TVA
										</label>
									</div>
									
									<div class="form-group">
										<label for="notes_commande" class="control-label">Notes</label>
										<textarea id="notes_commande" class="form-control"></textarea>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label for="est_interne" class="control-label"  data-toggle="tooltip" title="Commande interne"> 
											<input id="est_interne" type="checkbox" class=""> Commande Interne
										</label>
									</div>
									<div id="input_interne" class="mb-2">
										<div class="form-group">
											<label for="est_facturee" class="control-label" data-toggle="tooltip" title="Commande facturée immédiatement"> 
												<input id="est_facturee" type="checkbox" class=""> Commande Facturée
											</label>
										</div>
										<div id="input_facturation">
											<div class="form-group">
												<label for="date_facturation" class="control-label">Date  de facturation</label>
												<input id="date_facturation" type="text" class="form-control col-md-9 date-picker" value="{{ 'now'|date('d-m-Y')}}">
											</div>
											{% if app.user.aDroit('vente_modification') and missed %}
											<div class="form-group">
												<label for="num_facture" class="control-label">N° facturation</label>
												<input id="num_facture" type="text" class="form-control col-md-3" value="" disabled>
												<div class="form-control col-md-6">
													Utiliser un numéro depassé:
													{% for miss in missed %}
														<a href="#" class="item-num-missed" data-value="{{ miss.num }}">{{ miss.num }}</a> / 
													{% endfor %}
												</div>
											</div>
											{% endif %}
										</div>
									</div>

									{% if app.user.aDroit('vente_livraison') %}
									<div class="form-group">
										<label for="livraison_integrale" class="control-label" data-toggle="tooltip" title="Livraison de tous les articles de la commande immédiatement">
											<input type="checkbox" id="livraison_integrale" class=""> Livraison Intégrale
										</label>
									</div>
									<div id="input_livraison" class="mb-2">
										<div class="form-group">
											<label for="num_bl" class="control-label">N° Bon livraison</label>
											<input id="num_bl" type="text" class="form-control col-md-9" value="1">
										</div>
										<div class="form-group">
											<label for="date_livraison" class="control-label">Date de livraison</label>
											<input id="date_livraison" type="text" class="form-control col-md-9 date-picker" value="{{ 'now'|date('d-m-Y')}}">
										</div>
									</div>
									{% endif %}

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

					{% if app.user.aDroit('vente_paiement') %}
					<div class="row">
						<div class="col-md-12" style="padding:10px;">
							<h4>
								<label for="reglement_integrale" class="control-label" data-toggle="tooltip" title="Paiement de la commande en une seule fois">
									<input id="reglement_integrale" type="checkbox" class=""> Paiement Intégral
								</label>
							</h4>
							<div class="table-responsive" id="paiements_details">
								<table id="paiements_table" class="table table-hover" style="display:none;">
									<thead>
										<tr>
											<th> Mode paiement </th>
											<th> Montant </th>
											<th> Date paiement </th>
										</tr>
									</thead>
									<tbody id="list-paiements">
										
									</tbody>
								</table>
								<a class="btn green" data-toggle="modal" href="#ajout_paiement_modal">Nouveau paiement</a>
							</div>
							
						</div>
					</div>
					{% endif %}

				</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 ajout paiement -->
	<div id="ajout_paiement_modal" 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" aria-hidden="true"></button>
					<h4 class="modal-title">Nouveau paiement</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12" style="padding:10px;">
							<div class="form-group">
								<label for="total_paye" class="control-label">Montant</label>
								<input id="total_paye" type="text" class="form-control col-md-9">
							</div>
							<div class="form-group">
								<label for="mode_paiement" class="control-label">Mode paiement</label>
								<select id="mode_paiement" class="form-control col-md-9">
									<option value="espece">Espèce</option>
									<option value="cheque">Chèque</option>
									<option value="traite">Traite</option>
									<option value="virement">Virement</option>
									<option value="versement">Versement</option>
									<option value="carte">Carte bancaire</option>
									<option value="compte">En compte</option>
									<option value="reste">Reste</option>
									<option value="autre">Autre</option>
								</select>
							</div>
							<div class="form-group">
								<label for="reference_paiement" class="control-label">Réf paiement</label>
								<input id="reference_paiement" type="text" class="form-control col-md-9">
							</div>
							<div class="form-group">
								<label for="est_paye" class="control-label">Est payée</label>
								<input id="est_paye" type="checkbox" class="form-control col-md-9" checked="checked">
							</div>
							<div class="form-group">
								<label for="date_paiement" class="control-label">Date paiement</label>
								<input id="date_paiement" type="text" class="form-control col-md-9 date-picker" value="{{ 'now'|date('d-m-Y')}}">
							</div>
							<div class="form-group">
								<label for="date_echeance" class="control-label">Date échéance</label>
								<input id="date_echeance" type="text" class="form-control col-md-9 date-picker" value="{{ 'now'|date('d-m-Y')}}">
							</div>
							<div class="form-group">
								<label for="compte_id" class="control-label">Compte</label>
								<select id="compte_id" class="col-md-12 form-control">
								{% for compte in comptes %}
									<option value="{{ compte.id }}">{{ compte.libele }}</option>
								{% endfor %}
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<a class="btn green" data-toggle="modal" href="#" id="btn_ajouter_paiement">Valider</a>
					<button type="button" data-dismiss="modal" class="btn dark btn-outline">Annuler</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" aria-hidden="true"></button>
					<h4 class="modal-title">Résumé de la commande</h4>
				</div>
				<div class="modal-body">
					<table class="table table-light">
                        <tr>
                            <td><strong>Total HT:</strong></td>
                            <td style="text-align:right;" class="total_ht">0.00</td>
                        </tr>
                        <tr>
                            <td><strong>Total TVA:</strong></td>
                            <td style="text-align:right;" class="total_tva">0.00</td>
                        </tr>
                        <tr>
                            <td><strong>Total remise:</strong></td>
                            <td style="text-align:right;" class="total_remise">0.00</td>
                        </tr>
                        <tr>
                            <td><strong>Total TTC:</strong></td>
                            <td style="text-align:right;font-size:18px;font-weight:bold;" class="total_ttc">0.00</td>
                        </tr>
                        <tr>
                            <td><strong>Monnaie:</strong></td>
                            <td style="text-align:right;"><input type="text" class="form-control monnaie" style="text-align:right;"></td>
                        </tr>
                        <tr>
                            <td><strong>Rendu:</strong></td>
                            <td style="text-align:right;" class="rendu">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" aria-hidden="true"></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" aria-hidden="true"></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="no">
							<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">
					{% if app.user.aDroit('client_ajout') %}
					<a id="btn_ajout_client" href="#ajout_client" data-target="#ajout_client" data-toggle="modal" class="btn green">Nouveau Client</a>
					{% endif %}
					<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" aria-hidden="true"></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 organisme -->
	<div id="change_organisme" 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" aria-hidden="true"></button>
					<h4 class="modal-title">Organismes</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<input id="nom-organisme" type="text" class="col-md-12 form-control" autocomplete="no">
							<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-organismes">
									
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					{% if app.user.aDroit('organisme_ajout') %}
					<a href="#ajout_organisme" data-target="#ajout_organisme" data-toggle="modal" class="btn green">Nouvel Organisme</a>
					{% endif %}
					<button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
				</div>
			</div>
		</div>
	</div>

	<!-- /.modal add organisme -->
	<div id="ajout_organisme" 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" aria-hidden="true"></button>
					<h4 class="modal-title">Nouvel Organisme</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12" style="padding:10px;">
							<div class="form-group">
								<label for="total_paye" class="control-label">Raison sociale</label>
								<input id="raison_sociale_organisme" 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_organisme" 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_organisme" 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_organisme" type="text" class="form-control col-md-9">
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" id='enregistrer_organisme' 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" aria-hidden="true"></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="no">
							<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">
					{% if app.user.aDroit('reparation_ajout') %}
					<a class="btn green" data-toggle="modal" href="{{ path('reparation_new') }}" target="_blank"> Nouveau OR </a>
					{% endif %}
					<button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- /.modal modèle -->
	<div id="modele_vente" 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" aria-hidden="true"></button>
					<h4 class="modal-title">Sauvegarder un modèle</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<input type="radio" id="option-new-modele" name="option-modele" value="new" checked>
							<label for="option-new-modele">Nouveau modèle</label>
							<input id="titre-modele" type="text" class="col-md-12 form-control">
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<input type="radio" id="option-replace-modele" name="option-modele" value="save">
							<label for="option-replace-modele">Remplacer un modèle</label>
							<select id="id-modele" class="col-md-12 form-control">
							{% for modele in modeles %}
								<option value="{{ modele.id }}">{{ modele.titre }}</option>
							{% endfor %}
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn green" id="save-modele-vente">Sauvegarder</button>
					<button type="button" data-dismiss="modal" class="btn dark btn-outline">Annuler</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" aria-hidden="true"></button>
					<h4 class="modal-title">Choisir les produits</h4>
					<input type="hidden" id="select-products-category-id" value="0">

					<div class="input-icon input-icon-lg input-group input-group-lg">
						<i class="fa fa-barcode font-green"></i>
						<input type="text" id="select-products-filter" class="form-control input-lg">
						<span class="input-group-btn">
							<a href="javascript:;" class="btn green" id="cat-products">Produits</a>
							<a href="javascript:;" class="btn green" id="cat-modele">Modèles</a>
						</span>
					</div>
				</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">
					{% if app.user.aDroit('produit_ajout') %}
					<a class="btn green" data-toggle="modal" href="{{ path('produit_new') }}" target="_blank"> Nouveau produit </a>
					{% endif %}
					
					<button type="button" data-dismiss="modal" class="btn dark btn-outline">Terminer</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal for handling missing products from devis conversion -->
	<div id="modal-missing-products" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title"><i class="fa fa-warning"></i> Produits manquants du catalogue</h4>
				</div>
				<div class="modal-body">
					<p class="text-muted">Les produits suivants ne sont pas dans le catalogue. Veuillez fournir les informations manquantes ou les ignorer:</p>
					<div class="table-responsive">
						<table class="table table-striped" id="missing-products-table">
							<thead>
								<tr>
									<th>Désignation</th>
									<th>Référence</th>
									<th>Prix Unit.</th>
									<th>Quantité</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody id="missing-products-list">
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">Annuler</button>
					<button type="button" class="btn green" id="btn-proceed-with-missing">Continuer</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal for adding/editing a missing product -->
	<div id="modal-edit-missing-product" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title"><i class="fa fa-plus"></i> Ajouter au catalogue</h4>
				</div>
				<div class="modal-body">
					<form id="form-missing-product">
						<div class="form-group">
							<label>Désignation <span class="required">*</span></label>
							<input type="text" id="missing-product-titre" class="form-control" readonly>
						</div>
						<div class="form-group">
							<label>Référence <span class="required">*</span></label>
							<input type="text" id="missing-product-reference" class="form-control" placeholder="Ex: REF-001" required>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label>Prix Achat HT</label>
									<input type="number" id="missing-product-prixachat" class="form-control" step="0.01" min="0" placeholder="0.00">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Prix Vente HT</label>
									<input type="number" id="missing-product-prixvente" class="form-control" step="0.01" min="0" placeholder="0.00">
								</div>
							</div>
						</div>
						<div class="form-group">
							<label>Taux TVA (%)</label>
							<select id="missing-product-tauxtva" class="form-control">
								<option value="0">0% - Exonéré</option>
								<option value="10">10%</option>
								<option value="14">14%</option>
								<option value="20" selected>20% (Standard)</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">Annuler</button>
					<button type="button" class="btn green" id="btn-save-missing-product">Créer et ajouter</button>
				</div>
			</div>
		</div>
	</div>

   
{% endblock %}

{% block javascripts %}
	<script>
		var user_remise = {% if app.user.remise %}{{ app.user.remise }}{% else %}0{% endif %};
		var reparation_id = {{ or }};
		var client_id = {% if client %}{{ client.id }}{% else %}1{% endif %};
		var devis_id = {{ devis }};
	</script>
    <script src="{{ asset('assets/global/scripts/palette.js') ~ '?' ~ random() }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/scripts/caisse.js') ~ '?' ~ random() }}" type="text/javascript"></script>
{% endblock %}