{% 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('achat_index') }}">Achats</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('achat_show', { 'id': achat.id }) }}">Achat</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Modifier</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="row">
        <div class="col-lg-9 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> Qtt dispo. </th>
											<th> Qtt à commander </th>
											<th> PU brut </th>
											<th> Taux remise (%) </th>
											<th> PU net</th>
											<th> Total HT </th>
										</tr>
									</thead>
									<tbody id="list-produit">
										
									</tbody>
								</table>
							</div>
                            
						</div><!--End portlet-->
					</div>
				</div>
			</div>
        </div>

        <div class="col-lg-3 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;" id="total_ttc">0.00</td>
                        </tr>
                        <tr>
                            <td><strong>Fournisseur:</strong></td>
                            <td style="text-align:right;"><a href="#change_client" data-target="#change_client" data-toggle="modal" class="client-label"></a></td>
                        </tr>
                        <tr>
                            <td><strong>Remise (%):</strong></td>
                            <td style="text-align:right;"><input id="taux_remise" type="text" class="form-control input_caisse" value="0"></td>
                        </tr>
                    </table>
					
					<div class="portlet-body">
						<a href="javascript:;" class="btn green btn-block" id="save-achat">
							<i class="fa fa-check"></i>
							Enregistrer les modifications
						</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" aria-hidden="true"></button>
					<h4 class="modal-title">Détails 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="text" class="form-control col-md-9" value="{{ achat.getNumCommande() }}">
									</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="{{ achat.getDateCommande()|date('d-m-Y') }}">
									</div>
									<div class="form-group">
										<label for="input_total_ht" class="control-label">Total HT</label>
										<input id="input_total_ht" type="text" class="form-control col-md-9" value="{{ achat.getTotalHt() }}">
									</div>
									<div class="form-group">
										<label for="input_total_tva" class="control-label">Total TVA</label>
										<input id="input_total_tva" type="text" class="form-control col-md-9" value="{{ achat.getTotalTva() }}">
									</div>
									<div class="form-group">
										<label for="input_total_ttc" class="control-label">Total TTC</label>
										<input id="input_total_ttc" type="text" class="form-control col-md-9" value="{{ achat.getTotalTtc() }}">
									</div>
									
									<div class="form-group">
										<label for="notes_commande" class="control-label">Notes</label>
										<textarea id="notes_commande" class="form-control">{{ achat.getNotes() }}</textarea>
									</div>
									
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label for="num_facture" class="control-label">N° facture</label>
										<input id="num_facture" type="text" class="form-control col-md-9" value="{{ achat.getNumFacture() }}">
									</div>
									<div class="form-group">
										<label for="date_facturation" class="control-label">Date facturation</label>
										<input id="date_facturation" type="text" class="form-control col-md-9 date-picker" value="{{ achat.getDateFacturation()|date('d-m-Y') }}">
									</div>
								</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 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 bancaire</option>
									<option value="versement">Versement bancaire</option>
									<option value="carte">Carte bancaire</option>
									<option value="compte">En compte</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="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="est_comptabilise" class="control-label">Comptabilisé</label>
								<input id="est_comptabilise" type="checkbox" class="form-control col-md-9" checked="checked">
							</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_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>
					</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 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">Fournisseur</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">
							<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('fournisseur_ajout') %}
					<a class="btn green" data-toggle="modal" href="{{ path('fournisseur_new') }}" target="_blank"> Nouveau fournisseur </a>
					{% endif %}
					<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" aria-hidden="true"></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">
					{% 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>

   
{% endblock %}

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