@extends('layouts.template')

@section('content')					
	<!--begin::Row-->
	<div class="card mb-5 mb-xl-10">
		<!--begin::Header-->
		<div class="card-header border-0 pt-5">
			<h3 class="card-title align-items-start flex-column">
				<span class="card-label fw-bolder fs-3 mb-1">Créer Devis</span>
			</h3>
		</div>
		<!--end::Header-->

		<div class="card-body pt-9 col-md-6 offset-md-3 pb-0">
			<form class="row g-3" action="{{ url('tarification') }}" method="POST">
			@csrf

				<div class="col-md-4">
					<label for="" class="form-label">N° Devis</label>
					<input type="text" class="form-control" name="nDevis" 
							value="{{ sprintf('%04d', count($countID)+1) }}" 
							readonly="readonly">
				</div>

				<!-- Quantité commandée -->
				<div class="col-md-6 offset-md-2">
						<label for="" class="form-label">Quantité Commandée</label>
						<input type="text" class="form-control" name="QteCommande" 
								 id="QteCommande" >
				</div>

				<!-- laize Etiquette -->
				<div class="col-md-6">
						<label for="" class="form-label">laize Etiquette</label>
						<input type="text" class="form-control" name="LaizeEtq" 
								 id="LaizeEtq" >
				</div>

				<!-- Nombre de pose Laize -->
				<div class="col-md-6">
						<label for="" class="form-label">Nombre de pose Laize</label>
						<input type="text" class="form-control" name="NbrPoseLaize" id="NbrPoseLaize" 
								>
				</div>

				<!-- Développe Etiquette -->
				<div class="col-md-6">
						<label for="" class="form-label">Développe Etiquette</label>
						<input type="text" class="form-control" name="DeveloppeEtq" 
								>
				</div>

				<!-- Nombre de pose Développe -->
				<div class="col-md-6">
						<label for="" class="form-label">Nombre de pose Développe</label>
						<input type="text" class="form-control" name="NbrPoseDev" id="NbrPoseDev" 
								>
				</div>

				<!-- Outils Z -->
				<div class="col-md-4">
						<label for="" class="form-label">Outil Z</label>
						<select id="outil_id" name="outil_id" aria-label="Select a Language" data-control="select2" data-placeholder="Selectionner un Outil..." class="form-select mb-2" onchange ="calculate()">
							<option selected>...</option>
							@foreach($outils as $outil)
							<option value="{{ $outil->densite }}">
								{{ $outil->outil }} - {{ $outil->densite }}
							</option>
							@endforeach
						</select>
				</div>

				<div class="col-md-3 offset-md-2">
						<label for="" class="form-label">Mètre linéaire</label>
						<input type="text" class="form-control" name="metrLineaire" 
								value="" id="metrLineaire" readonly="readonly">
				</div>

				<div class="col-md-3">
						<label for="" class="form-label">Mètre Carré</label>
						<input type="text" class="form-control" name="metrCarre" 
								value="" id="metrCarre" readonly="readonly">
				</div>
				
						  	
				<div class="col-12 mt-3">
						<button type="submit" class="btn btn-sm btn-primary mb-5">Créer</button>
				</div>

			</form>
		</div>
	</div>
	<!--end::Row-->	
<script type="text/javascript">
	calculate = function()
				{
					var QC, OU, result1, LP, DL, result2, LE, result3;
				    var QC = document.getElementById('QteCommande').value;
				    var OU = document.getElementById('outil_id').value; 
				    result1 = QC * (OU/1000);
				    //document.getElementById('metrLineaire').value = parseInt(QC)*parseInt(LE);
				    

				    var LP = document.getElementById('NbrPoseLaize').value;
				    var DL = document.getElementById('NbrPoseDev').value;
				    result2 = LP * DL;

				    document.getElementById("metrLineaire").value = (result1/result2).toFixed(2);


				    var LE = document.getElementById('LaizeEtq').value;
				    result3 = ((result1/result2)*LE)/1000;

				    /*som1 = ((LE+3) * LP)+10;*/
				    som1 = parseFloat(LE) + parseFloat(3);
				    som2 = parseFloat(som1*LP)+parseFloat(10);
				    som3 = (som2 * (result1/result2))/1000;

				    document.getElementById("metrCarre").value = som3.toFixed(2);
			   	}
</script>	
		
<style type="text/css">
	#metrCarre, #metrLineaire{background-color: #8af2ef;}
</style>
@endsection