@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="truck"></i>    <h4 class="tit01 card-title mb-0">Véhicule 1/3</h4>
                   
															

                  </div>
				  
				  
				  
				  
				  
			
				  
				  
				  <div class="row">
				  
				  
				  
				  <div class="leftis1">
				  
				  
				  
				  
				  
                  <div class="card-body row switch-showcase">
                    <div class="inwa row">
                     
                
				
				
				
				
				
				
				
						<div class="col-md-12">
							<div class="mb-3">
							  <label class="form-label">Référence chargement							</label>
							  <input class="form-control" type="text" >
							</div>
						  </div>
					



							 <div class="col-md-6">
								<div class="mb-3">
								  <label class="form-label">Départ le</label>
								  <input class="form-control" type="date" >
								</div>
							  </div>
							
							
							  <div class="col-md-3">
								<div class="mb-3">
								  <label class="form-label">Heure</label>
								  <input class="form-control" type="time" value="12:00">
								</div>
							  </div>

							  <div class="col-md-3">
								<div class="mb-3">
								  <label class="form-label">-</label>
								  <input class="form-control" type="time" value="15:00">
								</div>
							  </div>
					
					
					


							  <div class="col-md-12">
								<div class="mb-3">
								  <label class="form-label">Ville ramassage</label>
								  <select class="form-select" id="validationTooltip04" required="">
									<option selected="" disabled="" value="">Séléctionner...</option>
									<option>Casablanca</option>
									<option>Rabat</option>
									<option>Marrakech</option>
									<option>Agadir</option>
									<option selected>Berrchid</option>
									<option>Mohammedia</option>
								  </select>
								</div>
							  </div>
							
							
							  <div class="col-md-12">
								<div class="mb-3">
								  <label class="form-label">Site</label>
								  <input class="form-control" type="text" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">
								</div>
							  </div>
					
							
					
							  <div class="pikol modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
								<div class="modal-dialog modal-lg">
								  <div class="modal-content">
									<div class="modal-header">
									  <h4 class="modal-title" id="myLargeModalLabel">Spécifier vos point de ramassage  </h4>
									  <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
									</div>
									<div class="modal-body">
										


										<div class="leftis1">
										<div class="card-body">
											<div id="the-basics">
											  <form class="theme-form">
												<div>
													<label class="form-label">Nom de l'entité</label>

												  <input class="layali typeahead form-control" type="text" placeholder="Nom de l'entité">
												</div>






												<div class="">
													<div class="">
													  <label class="form-label">Adresse expéditeur</label>
													  <input class="layali form-control" type="text" >
													</div>
												  </div>
		
												  <div class="">
													<div class="">
													  <label class="form-label">Contact</label>
													  <input class="layali form-control" type="text" >
													</div>
												  </div>
		
		
												  <div class="">
													<div class="">
													  <label class="form-label">Num de tél</label>
													  <input class="layali form-control" type="text" >
													</div>
												  </div>


<div class="layali2" data-bs-dismiss="modal" aria-label="Close">Enregistrer</div>


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


										 
										</div>





										<div class="leftis2">
											<img class="img-dt" src="{{ asset('theme/assets/images/map002.png') }}" alt="">
											</div>
											
											<div class="clr"></div>
									</div>
								  </div>
								</div>
								<div class="clr"></div>
							  </div>




							  <div class="col-md-12 ">
								<div class="" id="heading33">
								  <h5 class="mb-0">
									<button class="btn2s btn-link collapsed text-wh" data-bs-toggle="collapse" data-bs-target="#collapse44" aria-expanded="false" aria-controls="collapse44"><i class="primo icofont icofont-plus-circle"></i>Arrêt</button>
								  </h5>
								</div>
								<div class="clr"></div>
								<div class="collapse" id="collapse44" data-bs-parent="#accordionicon">

	<div class="clr"></div>
	<img class="img-d12t" src="{{ asset('theme/assets/images/z19.png') }}" alt="">
<div class="piknw row">

	
									<div class="col-md-6">
										<div class="mb-3">
										  <label class="form-label">Ville ramassage</label>
										  <select class="form-select" id="validationTooltip04" required="">
											<option selected="" disabled="" value="">Séléctionner...</option>
											<option>Casablanca</option>
											<option>Rabat</option>
											<option>Marrakech</option>
											<option>Agadir</option>
											<option>Berrchid</option>
											<option>Mohammedia</option>
										  </select>
										</div>
									  </div>
									
									
									  <div class="col-md-6">
										<div class="mb-3">
										  <label class="form-label">Site</label>
										  <input class="form-control" type="text" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">
										</div>
									  </div>
							
									</div>


								</div>
							  </div>

							



							  <div class="col-md-12">
								<div class="mb-3">
								  <label class="form-label">Ville Livraison</label>
								  <select class="form-select" id="validationTooltip04" required="">
									<option selected="" disabled="" value="">Séléctionner...</option>
									<option>Casablanca</option>
									<option>Rabat</option>
									<option>Marrakech</option>
									<option>Agadir</option>
									<option>Berrchid</option>
									<option>Mohammedia</option>
								  </select>
								</div>
							  </div>
							
							
							  <div class="col-md-12">
								<div class="mb-3">
								  <label class="form-label">Site</label>
								  <input class="form-control" type="text" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">
								</div>
							  </div>



							  <div class="col-md-12 ">
							
								<div class="clr"></div>
								<div class="collapse" id="collapse44" data-bs-parent="#accordionicon">

	<div class="clr"></div>
<div class="piknw row">
									<div class="col-md-6">
										<div class="mb-3">
										  <label class="form-label">Ville ramassage</label>
										  <select class="form-select" id="validationTooltip04" required="">
											<option selected="" disabled="" value="">Séléctionner...</option>
											<option>Casablanca</option>
											<option>Rabat</option>
											<option>Marrakech</option>
											<option>Agadir</option>
											<option>Berrchid</option>
											<option>Mohammedia</option>
										  </select>
										</div>
									  </div>
									
									
									  <div class="col-md-6">
										<div class="mb-3">
										  <label class="form-label">Site</label>
										  <input class="form-control" type="text" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">
										</div>
									  </div>
							
									</div>


								</div>
							  </div>


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

							</div>
							  






                  </div>
				 
                </div>


				<div class="leftis2">
					<img class="img-d8t" src="http://localhost/jibril_client/public/theme/assets/images/ikan.png" alt="">
					</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">Conditionnement et voluméterie</h4>
                   
															

                  </div>
				  
								  
				  
				  
                  <div class="card-body ji row switch-showcase">
                    <div class="inwa  col-sm-12">
                     
                
					
						<div class="clr"></div>
				
						
				
				
						<div class="piknw row">
			

							
							<div class="titchargement">Palette</div>
							<div class="lineh7"></div>
							<div class="espace"></div>		
													 
							<div class="col-md-2">
								<div class="mb-3">
									
									<label class="form-label">Quantité</label>
						
								  <input class="form-control" type="text" placeholder="5">
								</div>
							  </div>
						
						
							  <div class="col-md-2">
								<div class="mb-3">
									<label class="form-label">L</label>
						
								  <input class="form-control" type="text" placeholder="L">
								</div>
							  </div>
						
						
							  <div class="col-md-2">
								<div class="mb-3">
									<label class="form-label">l</label>
						
								  <input class="form-control" type="text" placeholder="l">
								</div>
							  </div>
						
						
						
						
							  <div class="col-md-2">
								<div class="mb-3">
									<label class="form-label">H</label>
						
								  <input class="form-control" type="text" placeholder="H">
								</div>
							  </div>
						
						
						
							  <div class="col-md-2">
								<div class="mb-3">
									<label class="form-label">Volume (m3)</label>
						
								  <input class="form-control" type="text" placeholder="0.00">
								</div>
							  </div>
						
							  <div class="col-md-2">
								<div class="mb-3">
									<label class="form-label">Poids Totale (kg)</label>
						
								  <input class="form-control" type="text" placeholder="0">
								</div>
							  </div>
						
						
							</div>
				











							<div class="piknw row">
			

							
								<div class="titchargement">Caisses / Cartons</div>
								<div class="lineh7"></div>
								<div class="espace"></div>		
														 
								<div class="col-md-2">
									<div class="mb-3">
										
										<label class="form-label">Quantité</label>
							
									  <input class="form-control" type="text" placeholder="5">
									</div>
								  </div>
							
							
								  <div class="col-md-2">
									<div class="mb-3">
										<label class="form-label">L</label>
							
									  <input class="form-control" type="text" placeholder="L">
									</div>
								  </div>
							
							
								  <div class="col-md-2">
									<div class="mb-3">
										<label class="form-label">l</label>
							
									  <input class="form-control" type="text" placeholder="l">
									</div>
								  </div>
							
							
							
							
								  <div class="col-md-2">
									<div class="mb-3">
										<label class="form-label">H</label>
							
									  <input class="form-control" type="text" placeholder="H">
									</div>
								  </div>
							
							
							
								  <div class="col-md-2">
									<div class="mb-3">
										<label class="form-label">Volume (m3)</label>
							
									  <input class="form-control" type="text" placeholder="0.00">
									</div>
								  </div>
							
								  <div class="col-md-2">
									<div class="mb-3">
										<label class="form-label">Poids Totale (kg)</label>
							
									  <input class="form-control" type="text" placeholder="0">
									</div>
								  </div>
							
							
								</div>

				
				<div class="clr"></div>
				<div class="espace"></div>
				
				
				
				
				
				
				</div>
				
				
				<div class="inwa  col-sm-12">
                     
						
				
				
				<div class="titchargement">Voluméterie</div>
				<div class="lineh"></div>
				
				<div class="clr"></div>
					<div class="espace"></div>
				<div class="row">
			



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

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



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

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




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

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



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

							  <input class="form-control" type="text" placeholder="M3">
							</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 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="col-md-2">
							<div class="mb-3">
								<label class="form-label">Poids</label>

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




						  <div class="kiloi col-md-1">
						 					
							<div class="form-check form-check-inline radio radio-primary">
							  <input class="form-check-input" id="radioinline10" type="radio" name="radio2" value="option2" checked>
							  <label class="form-check-label mb-0" for="radioinline10" >Kg</label>
							</div>
							<div class="form-check form-check-inline radio radio-primary">
								<input class="form-check-input" id="radioinline20" type="radio" name="radio2" value="option2">
								<label class="form-check-label mb-0" for="radioinline20">Tonnes</label>
							  </div>
					  </div>
			  
					 

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

						</div>


						<div class="clr"></div>
						<div class="espace"></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">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="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>











                </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