@extends('layout.colis')

@section('content2')  

   
<div class="pikoli">
<div class=" page-body pikolo2">
                <div class="container-fluid">
                    <div class="page-title">
                        <div class="row">
                            <div class="col-6">
                               <i class="icona" data-feather="box"></i> <h3>Demande chargement par Colis</h3>
                            </div>
                         
							
							<div class="clr"></div>
							<div class="espace"></div>
							
							
							
							
							
							
							
							
			  
			  
			  
			  
			  
		  
		  
		  
		  
		  
		  
		  
		   <div class="col-sm-12">
                <div class="card">
                  <div class="card-header">
				  <i class="aliga" data-feather="calendar"></i>    <h4 class="tit01 card-title mb-0">Date & heures</h4>
                   
															

                  </div>
				  
				  
				  
				  
				  
			
				  
				  
				  <div class="row">
				  
				  
				  
				  <div class="">
				  
				  
				  
				  
				  
                  <div class="card-body row switch-showcase">
				  
				  
				
						
                    <div class="inwa row">
                     
                
				  	<div class="titchargement">Date Chargement </div>
						<div class="lis2neh"></div>
						<div class="clr"></div>
				
			
				
					<div class="espace"></div>
				
				
					 <div class="col-md-4">
								<div class="mb-3">
								  <label class="form-label">Date</label>
								  <input class="form-control" type="date" >
								</div>
							  </div>
					



							 <div class="col-md-4">
								<div class="mb-3">
								  <label class="form-label">De</label>
								  <input class="form-control" type="time" >
								</div>
							  </div>
							
							
							  <div class="col-md-4">
								<div class="mb-3">
								  <label class="form-label">A</label>
								  <input class="form-control" type="time" >
								</div>
							  </div>
					
										<div class="espace"></div>

					
	<div class="titchargement">Délai maximum de livraison
</div>
						<div class="lis2neh"></div>
						<div class="clr"></div>

							 										<div class="espace"></div>

							  <div class="col-md-6">
								<div class="mb-3">
								  <label class="form-label">Combien de jours maximum aprés le ramassage ?</label>
								  
								  <select class="form-control form-select">
								  <option>Le jour même</option>
								  <option>1 jour max</option>
								  <option>2 jours max</option>
								  <option>3 jours max</option>
								  </select>
								</div>
							  </div>
							
							 
					
							
					
							  




							  

							



							 
						



							  


							  <div class="clr"></div>
							

							</div>
							  






                  </div>
				 
                </div>


					

				
              </div>
			</div>
		     </div>
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 <div class="col-sm-12">
                <div class="card">
                  <div class="card-header">
				  <i class="aliga" data-feather="box"></i>    <h4 class="tit01 card-title mb-0">Infos colis</h4>
                   
															

                  </div>
				  
								  
				  
				  
                  <div class="card-body ji row switch-showcase">
				
                    <div class="inwa  col-sm-12">
                       <div class="row">
					   
					    
                <div class="col-md-8">
					 <img class="o1f12" src="{{ asset('theme/assets/images/39s.png') }}" alt="">
						 <div class="titchargementv1">Palette </div>
					
				</div>
						
				<div class="col-md-4">
				    <fieldset>
      <div class="input-group">
        <input class="touchspin" type="text" value="3">
      </div>
    </fieldset>
					</div>	
				</div>	
				
				
				
					<div class="clr"></div>
						<div class="espace"></div>
				
				
				
				
				</div>
				
				
				<div class="inwa  col-sm-12">
                     
						
				
				
				
				
		
				<div class="row">
			



						<div class="col-md-3">
							<div class="mb-3">
								
								<label class="form-label">Longueur</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>



						  <div class="col-md-3">
							<div class="mb-3">
								<label class="form-label">Largeur</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>




						  <div class="col-md-3">
							<div class="mb-3">
								<label class="form-label">Hauteur</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>

<div class="col-md-1">
							
						  </div>

						
						  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
								<input class="form-check-input" id="radioinline2" type="radio" name="radio1" value="option1" checked>
								<label class="form-check-label mb-0" for="radioinline2">M</label>
							  </div>
					  </div>  
					  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
							  <input class="form-check-input" id="radioinline1" type="radio" name="radio1" value="option1">
							  <label class="form-check-label mb-0" for="radioinline1" >Cm</label>
							</div>
					  </div>

						



					<div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label" for="inputFirstName">Photo</label>
                            <input class="form-control" type="file" id="inputFirstName" data-bs-original-title="" title="">
							                           

                          </div>
                        </div>	
			  
					 

					  
						
<div class="clr"></div>
						</div>




						




					</div>
				
				
					<div class="clr"></div>
					<div class="espace"></div>
				
				
				
                      
                     
                     
                    </div>
					<div class="lina001"></div>
					
					 <div class="card-body ji1 row switch-showcase">
				
                    <div class="inwa  col-sm-12">
                       <div class="row">
					   
					    
                <div class="col-md-8">
					 <img class="o1f12" src="{{ asset('theme/assets/images/39s.png') }}" alt="">
						 <div class="titchargementv1">Palette </div>
					
				</div>
						
				<div class="col-md-4">
				    <fieldset>
      <div class="input-group">
        <input class="touchspin" type="text" value="3">
      </div>
    </fieldset>
					</div>	
				</div>	
				
				
				
					<div class="clr"></div>
						<div class="espace"></div>
				
				
				
				
				</div>
				
				
				<div class="inwa  col-sm-12">
                     
						
				
				
				
				
		
				<div class="row">
			



						<div class="col-md-3">
							<div class="mb-3">
								
								<label class="form-label">Longueur</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>



						  <div class="col-md-3">
							<div class="mb-3">
								<label class="form-label">Largeur</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>




						  <div class="col-md-3">
							<div class="mb-3">
								<label class="form-label">Hauteur</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>

<div class="col-md-1">
							
						  </div>

						
						  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
								<input class="form-check-input" id="radioinline2" type="radio" name="radio1" value="option1" checked>
								<label class="form-check-label mb-0" for="radioinline2">M</label>
							  </div>
					  </div>  
					  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
							  <input class="form-check-input" id="radioinline1" type="radio" name="radio1" value="option1">
							  <label class="form-check-label mb-0" for="radioinline1" >Cm</label>
							</div>
					  </div>

						



					<div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label" for="inputFirstName">Photo</label>
                            <input class="form-control" type="file" id="inputFirstName" data-bs-original-title="" title="">
							                           

                          </div>
                        </div>	
			  
					 

					  
						
<div class="clr"></div>
						</div>

<div class="abc row">

<div class="col-md-8">
							<div class="mb-3">
								
								<label class="form-label">Poids Total
</label>

							  <input class="form-control" type="text" >
							</div>
						  </div>
						
  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
								<input class="form-check-input" id="radioinline2" type="radio" name="radio1" value="option1" checked>
								<label class="form-check-label mb-0" for="radioinline2">Kg</label>
							  </div>
					  </div>  
					  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
							  <input class="form-check-input" id="radioinline1" type="radio" name="radio1" value="option1">
							  <label class="form-check-label mb-0" for="radioinline1" >Qntl</label>
							</div>
					  </div>
					  
					  <div class="kiloi col-md-1">
						 			
							<div class="form-check form-check-inline radio radio-primary">
							  <input class="form-check-input" id="radioinline1" type="radio" name="radio1" value="option1">
							  <label class="form-check-label mb-0" for="radioinline1" >Tonne</label>
							</div>
					  </div>

					</div>
					</div>
				
					<div class="clr"></div>
					<div class="espace"></div>
				
				
				
                      
                     
                     
                    </div>
					
					
					
					
				

                  </div>
                </div>
			 
			 
			 
			 
			 
			 
			  


			 <div class="col-sm-12">
			 <div class="card">
			   <div class="card-header">
			   <i class="aliga" data-feather="box"></i>    <h4 class="tit01 card-title mb-0">Nature colis</h4>
				
														 

			   </div>
			   
			   <div class="card-body ji row switch-showcase">
				 <div class="inwa col-sm-12">
				  
			 
			 
			 
			 
					 <div class="megaoptions-border-space-sm">
						 <form class="">
						   <div class="row">
						  
							 <div class="col-sm-3">
							   <div class="card">
								 <div class="media p-20">
								   <div class="form-check  me-3">
									 <input class="form-check-input" checked id="radio19" type="checkbox" name="radio1" value="option1">
									 <label class="form-check-label" for="radio19"></label>
								   </div>
								   <div class="media-body">
								  <img class="palette" src="{{ asset('theme/assets/images/q01.png') }}">
									 <h6 class="mt-0 mega-title-badge">Colis <br>Standard</h6>
									
								   </div>
								 </div>
							   </div>
							 </div>
							 <div class="col-sm-3">
							   <div class="card">
								 <div class="media p-20">
								   <div class="form-check  me-3">
									 <input class="form-check-input" id="radio19" type="checkbox" name="radio1" value="option1">
									 <label class="form-check-label" for="radio19"></label>
								   </div>
								   <div class="media-body">
																<img class="palette" src="{{ asset('theme/assets/images/q02.png') }}">
	 
									 <h6 class="mt-0 mega-title-badge">Colis <br>fragile</h6>
									
								   </div>
								 </div>
							   </div>
							 </div>
							  <div class="col-sm-3">
							   <div class="card">
								 <div class="media p-20">
								   <div class="form-check  me-3">
									 <input class="form-check-input" id="radio19" type="checkbox" name="radio1" value="option1">
									 <label class="form-check-label" for="radio19"></label>
								   </div>
								   <div class="media-body">
																<img class="palette" src="{{ asset('theme/assets/images/q03.png') }}">
	 
									 <h6 class="mt-0 mega-title-badge"> Produits<br> dangereux</h6>
									
								   </div>
								 </div>
							   </div>
							 </div>
							 
							 
							   <div class="col-sm-3">
							   <div class="card">
								 <div class="media p-20">
								   <div class="form-check  me-3">
									 <input class="form-check-input" id="radio19" type="checkbox" name="radio1" value="option1">
									 <label class="form-check-label" for="radio19"></label>
								   </div>
								   <div class="media-body">
																<img class="palette" src="{{ asset('theme/assets/images/q04.png') }}">
	 
									 <h6 class="mt-0 mega-title-badge">Produits<br> périsable</h6>
									
								   </div>
								 </div>
							   </div>
							 </div>
						 </div>
						 </form>
					 </div>
			 
			 
			 
			 
			 
			 <div class="clr"></div>
			 <div class="espace"></div>
			 
			 
			 
			 
			 
			 
			 </div>
			 
			 
		 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
				   
				  
				  
				 </div>
				 
				 
				 
				 
				 
				 
				 
			 

			   </div>
			 </div>














				






















				













				  


				  


				  
					  
					  

				  <div class="col-sm-12">
				  <div class="card">
					<div class="card-header">
					<i class="aliga" data-feather="box"></i>    <h4 class="tit01 card-title mb-0">Conditions specifiques</h4>
					 
															  
  
					</div>
					
					<div class="card-body ji row switch-showcase">
					  <div class="inwa col-sm-12">
					   
				  
				  
						  <div class="col-sm-12">
				  
						  <div class="media mb-2">
							  <img class="o1f1" src="{{ asset('theme/assets/images/z11.png') }}" alt="">
							  <label class="col-form-label m-r-10">Retour BL obligatoire</label>
							  <div class="media-body text-end icon-state">
								<label class="switch">
								  <input type="checkbox" id="check2" onclick="detecter()" ><span class="switch-state"></span>
								</label>
							  </div>
							</div>
				  
  
							<div style="display:none;" id="bloc2">
  
							  
  <div class="row">
							  <div class="col-md-4">
								  <div class="mb-3">
									<label class="form-label">Délai max</label>
									<select class="form-select" id="validationTooltip04" required="">
									  <option selected="" disabled="" value="">Séléctionner...</option>
									  <option>1</option>
									  <option>2</option>
									  <option>3</option>
									  
									</select>
								  </div>
								</div>
  
								<div class="col-md-4">
								  <div class="mb-3">
									<label class="form-label">Lieu</label>
									<input class="form-control" type="text" >
								  </div>
								</div>
  
  
  
								<div class="col-md-4">
								  <div class="mb-3">
									<label class="form-label">Adresse</label>
									<input class="form-control" type="text">
  
								  </div>
								</div>
  
  
							  </div>
  
							</div>
  
  
  <div class="linami"></div>
  
  
						  </div>
				  
  
  <div class="clr"></div>
  
  <div class="clrr"></div>
  
  
  
  
  
  
  
  
  
						  <div class="col-sm-12">
				  
							  <div class="media mb-2">
								  <img class="o1f1" src="{{ asset('theme/assets/images/z12.png') }}" alt="">
  
								  <label class="col-form-label m-r-10">Retour immédiat marchandise								</label>
								  <div class="media-body text-end icon-state">
									<label class="switch">
									  <input type="checkbox" id="check3" onclick="detecter2()" ><span class="switch-state"></span>
									</label>
								  </div>
								</div>
					  
	  
								<div style="display:none;" id="bloc3">
	  
								  
	  <div class="row">
								  <div class="col-md-4">
									  <div class="mb-3">
										<label class="form-label">Délai max</label>
										<select class="form-select" id="validationTooltip04" required="">
										  <option selected="" disabled="" value="">Séléctionner...</option>
										  <option>1</option>
										  <option>2</option>
										  <option>3</option>
										  
										</select>
									  </div>
									</div>
	  
									<div class="col-md-4">
									  <div class="mb-3">
										<label class="form-label">Lieu</label>
										<input class="form-control" type="text" >
									  </div>
									</div>
	  
	  
	  
									<div class="col-md-4">
									  <div class="mb-3">
										<label class="form-label">Adresse</label>
										<input class="form-control" type="text">
	  
									  </div>
									</div>
	  
	  
								  </div>
	  
								</div>
	  
	  
	  <div class="linami"></div>
	  
	  
							  </div>
  
  
  
  
  
  
  
							  <div class="clr"></div>
  
							  <div class="clrr"></div>
  
  
  
  
							  <div class="col-sm-12">
				  
								  <div class="media mb-2">
									  <img class="o1f1" src="{{ asset('theme/assets/images/z13.png') }}" alt="">
  
									  <label class="col-form-label m-r-10">Assurance</label>
									  <div class="media-body text-end icon-state">
										<label class="switch">
										  <input type="checkbox" id="check4" onclick="detecter3()" ><span class="switch-state"></span>
										</label>
									  </div>
									</div>
						  
		  
									<div style="display:none;" id="bloc4">
		  
									  
		  <div class="row">
									  
		  
									   
		  
		  
		  
										<div class="col-md-12">
										  <div class="mb-3">
											<label class="form-label">Valeur assurée										</label>
											<input class="form-control" type="text" value="5000 DH">
		  
										  </div>
										</div>
		  
		  
									  </div>
		  
									</div>
		  
		  
		  <div class="linami"></div>
		  
		  
								  </div>
  
  
  
  
  
								  <div class="clr"></div>
  
								  <div class="clrr"></div>
  
  
  
								  <div class="col-sm-12">
				  
									  <div class="media mb-2">
										  <img class="o1f1" src="{{ asset('theme/assets/images/Z14.png') }}" alt="">
  
										  <label class="col-form-label m-r-10">Modalités de paiement</label>
										  <div class="media-body text-end icon-state">
											<label class="switch">
											  <input type="checkbox" id="check5" onclick="detecter4()" ><span class="switch-state"></span>
											</label>
										  </div>
										</div>
							  
			  
										<div style="display:none;" id="bloc5">
			  
										  
			  <div class="row">
										  
			  
										   
			  
			  
			  
											<div class="col-md-12">
											  <div class="mb-3">
												<label class="form-label">Modalités de paiement
											  </label>
												<select class="form-select" id="validationTooltip04" required="">
												  <option selected="" disabled="" value="">Séléctionner...</option>
												  <option>A l'enlévement</option>
												  <option>A la livraison</option>
												  <option>Retour POD</option>
												  <option>7 jours retour POD</option>
												  <option>20 jours retour POD</option>
												  <option>60 jours retour POD</option>
												</select>
											  </div>
											</div>
			  
			  
										  </div>
			  
										</div>
			  
			  
			  <div class="linami"></div>
			  
			  
									  </div>
  
  
  
  
  
  
				  
				  <div class="clr"></div>
				  <div class="espace"></div>
				  
				  
  
  
  
  
  
  
  
  
  
				  
				  
				  
				  
				  </div>
				  
				  
			  
				  
				  
				  
				  
				  
				  
				  
				  
				  
				  
				  
				  
				  
						
					   
					   
					  </div>
					  
					  
					  
					  
					  
					  
					  
				  
  
					</div>
				  </div>









					  <div class="col-sm-12">
				  <div class="card">
					<div class="card-header">
					<i class="aliga" data-feather="box"></i>    <h4 class="tit01 card-title mb-0">Budget</h4>
					 
															  
  
					</div>
					
									
					<div class="card-body row switch-showcase">
						<div class="inwacol-sm-12">
					
					
					   



						  
						<div class="titqb05">Quel est votre budget ? (facultatif)</div>
						<input id="pass3" type="text" class="deinput10 " value="1250 Dh">

						<div class="aliancxe">Tarif conventionnel est 1350 Dh</div>
						<div class="aliance">La tendance des prix pour ce type de trajet est <br>1500 Dh</div>
						
				  
  
						




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

					  
					  



					  <div class="c2rikit btn btn-primary" type="submit"> Suivant</div>
					  
					  
					  
				  
  
					</div>











                </div>




              </div>
			  
		     </div>
			 
			 
			 
			 
			 

			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 
			 






				














					

              </div>
			  

			  <script type="text/javascript">
				function detecter2() {
					if (document.getElementById('check3').checked) {
						document.getElementById('bloc3').style.display = 'inline';
					} else {
						document.getElementById('bloc3').style.display = 'none';
					}
				}
			</script>


			  <script type="text/javascript">
				function detecter() {
					if (document.getElementById('check2').checked) {
						document.getElementById('bloc2').style.display = 'inline';
					} else {
						document.getElementById('bloc2').style.display = 'none';
					}
				}
			</script>
		  <script type="text/javascript">
			function detecter3() {
				if (document.getElementById('check4').checked) {
					document.getElementById('bloc4').style.display = 'inline';
				} else {
					document.getElementById('bloc4').style.display = 'none';
				}
			}
		</script>

<script type="text/javascript">
	function detecter4() {
		if (document.getElementById('check5').checked) {
			document.getElementById('bloc5').style.display = 'inline';
		} else {
			document.getElementById('bloc5').style.display = 'none';
		}
	}
</script>


		
			
			  <script src="{{ asset('theme/assets/js/modal-animated.js') }}"></script>
	@stop