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

{% block title %}Nouveau client{% endblock %}

{% block body %}
<script src="https://cdn.tiny.cloud/1/eswlws0xwwgd8crb6m5jwr5i5oi4o4yvwl5bxr4swki9mj8b/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  /*tinymce.init({
    selector: 'textarea',
    plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
      { value: 'First.Name', title: 'First Name' },
      { value: 'Email', title: 'Email' },
    ],
    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
  });*/
</script>
<script>
      /*tinymce.init({
        selector: 'textarea'
            plugins: [
            'a11ychecker','advlist','advcode','advtable','autolink','checklist','export',
            'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
            'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
            ],
            toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify |' +
            'bullist numlist checklist outdent indent | removeformat | code table help'
      })*/
</script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Nouveau devis (Etape 2/2)");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_office.png");

        /* Récupération de l'ID du devis */
        var currentPath = window.location.pathname;
        var pathParts = currentPath.split("/");
        var devisID = pathParts[2];

        $('#btn-estimation-devis').click(function() {
            $('#devisID').text(devisID);
            $('#chiffrageDevisPopup').modal('show');
        })

        /* Datatable des chiffrages */
        $('#QuotationTable').DataTable({
            "columnDefs": [
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/quotation/ajax-list/' + devisID,
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            columns: [
                { data: 'quotationID' },
                { data: 'activityType' },
                { data: 'activityName' },
                { data: 'JobName' },
                { data: 'Description' },
                { data: 'Quantity' },
                { data: 'TJM' },
                { data: 'Cost' },
                { data: 'actions' }
            ],
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();
        
                // Remove the formatting to get integer data for summation
                /*var intVal = function (i) {
                    return typeof i === 'string'
                        ? i.replace(/[\$,]/g, '') * 1
                        : typeof i === 'number'
                        ? i
                        : 0;
                };*/
        
                // Total over all pages
                total = api
                    .column(7)
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);
        
                // Total over this page
                pageTotal = api
                    .column(7, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);
        
                // Update footer
                /*$(api.column(4).footer()).html(
                    '$' + pageTotal + ' ( $' + total + ' total)'
                );*/

                var tva = $('#devis_devisTVA').val();
                var remise = $('#devis_devisRemise').val();

                var ttc = pageTotal + (tva/100) * pageTotal - remise;

                $('#devis_devisTotalHT').val(pageTotal);
                $('#devis_devisTotalTTC').val(ttc);
            }
        });
    })
</script> 
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="/devis" class="text-muted text-hover-primary">
                                Liste des devis                                  
							</a>
						</li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Nouveau devis                    
						</li>
                        <!--end::Item-->            
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">

                <!-- Bloc du chiffrage du ticket -->
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title" data-bs-toggle="tooltip" title="Ajoutez les différentes activités concernées par le devis avec le chiffrage correspondant. Le calcul du coût sera réalisé de façon automatique.">
                            <h3>CHIFFRAGE DES PRESTATIONS
                                <span class="ms-1 digi-tooltip"  aria-label="Ajoutez les différentes activités concernées par le devis avec le chiffrage correspondant. Le calcul du coût sera réalisé de façon automatique." data-bs-original-title="Phone number must be active" data-kt-initialized="1">
                                    <i class="fa-solid fa-circle-question fs-7">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                    </i>
                                </span>
                            </h3>
                        </div>
                        
                        <!--begin::Actions-->
                        <div id="btn-estimation-devis"  class="digi-card-action">
                            <a href="#" class="btn btn-digi">
                                <i class="fa-solid fa-plus" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Ajouter / chiffrer des activités</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->

                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                </div>
                                <!--end::Title-->
                                <!-- Datatable du temps passé -->
                                <table id="QuotationTable" class="dataTable hover striped" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>ID chiffrage</th>
                                            <th>Type d'activité</th>
                                            <th>Activité</th>
                                            <th>Poste</th>
                                            <th>Description</th>
                                            <th>Quantité</th>
                                            <th>TJM (€)</th>
                                            <th>Coût(€)</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-2 gap-2 gap-md-2">
                        <div class="digi-card-title" data-bs-toggle="tooltip" title="Suite au chiffrage réalisé dans le bloc de chiffrage des prestations, le coût HT sera mis à jour en fonction des TJM saisis pour chacun des postes.">
                            <h3>COUTS
                                <span class="ms-1 digi-tooltip"  aria-label="Ajoutez les différentes activités concernées par le devis avec le chiffrage correspondant. Le calcul du coût sera réalisé de façon automatique." data-bs-original-title="Phone number must be active" data-kt-initialized="1">
                                    <i class="fa-solid fa-circle-question fs-7">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                    </i>
                                </span>
                            </h3>
                        </div>
                    </div>
                    <!-- Bloc Entreprise -->
                    <div class="card-body pt-0">
                        <br>
                        {{ form_start(devisForm) }}

                        <div style="display: flex; justify-content: space-between;">

                            <!-- Total HT -->
                            <div class="mb-3 choice-object">
                                <label for="devis_devisTotalHT" class="form-label">Total € (HT)</label>
                                <input type="number" name="{{ field_name(devisForm.totalHT) }}" class="form-control" id="devis_devisTotalHT" placeholder="Saisir le montant HT">
                            </div>

                            <!-- TVA -->
                            <div class="mb-3 choice-object">
                                <label for="devis_devisTVA" class="form-label">TVA (€)</label>
                                <input type="number" name="{{ field_name(devisForm.tva) }}" value="20" class="form-control" value=20 id="devis_devisTVA" placeholder="Saisir le montant TVA">
                            </div>

                            <!-- Remise -->
                            <div class="mb-3 choice-object">
                                <label for="devis_devisRemise" class="form-label">Remise (€)</label>
                                <input type="number" name="{{ field_name(devisForm.remise) }}" value=0 class="form-control" id="devis_devisRemise" placeholder="Saisir une remise en €">
                            </div>
                            
                            <!-- Total TTC -->
                            <div class="mb-3 choice-object">
                                <label for="devis_devisTotalTTC" class="form-label">Total € (TTC)</label>
                                <input type="number" name="{{ field_name(devisForm.totalttc) }}" class="form-control" id="devis_devisTotalTTC" placeholder="Saisir le montant TTC">
                            </div>

                        </div>
                        <br>
                        <button type="submit" class="btn btn-digi"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Enregistrer</button>
                        {{ form_rest(devisForm) }}
                        {{ form_end(devisForm) }}
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>
<!--end::Row-->
{% endblock %}