@extends('layout.menu4')

@section('content2')  

   

<div class="page-body">



    
                <div class="container-fluid">
                    <div class="">
                        <div class="row">
                         
                           							<div class="clr"></div>

							
                                                    
					 <div class="">
                       
                   <!--  <ul class="nav nav-pills nav-secondary" id="pills-successtab" role="tablist">
                      <li class="nav-item"><a class="nav-link active" id="pills-successhome-tab" data-bs-toggle="pill" href="#pills-successhome" role="tab" aria-controls="pills-successhome" aria-selected="true"><i class="icofont icofont-check-circled"></i>Chauffeur affecté</a></li>
                      <li class="nav-item"><a class="nav-link" id="pills-successprofile-tab" data-bs-toggle="pill" href="#pills-successprofile" role="tab" aria-controls="pills-successprofile" aria-selected="false"><i class="icofont icofont-close-circled"></i>Chauffeur non affecté</a></li>
                    </ul> -->
                    <div class="tab-content" id="pills-successtabContent">
                      <div class="tab-pane fade show active" id="pills-successhome" role="tabpanel" aria-labelledby="pills-successhome-tab">
                        <p class="mb-0 m-t-30">
						
						
						<div class="flerf">
						<div class="backiw">
						<div class="infchuf">Infos chauffeur</div>
            <div class="lini"></div>

                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label iyw crlwhite">Nom & prénom</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z21.png') }}" alt=""> Said Saadaoui</div>

                          </div>
                        </div>


                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label iyw crlwhite">Matricule</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z23.png') }}" alt=""> IF1024578124</div>
                          </div>
                        </div>



                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label iyw crlwhite">Téléphone</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z22.png') }}" alt=""> 0661334393</div>
                          </div>
                        </div>
                        <div class="kalimenu crlwhite">Plus d'infos</div>

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



            



                        <div class="backiw">
						<div class="infchuf">Infos véhicule</div>
            <div class="lini"></div>

                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label crlwhite">Type</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z25.png') }}" alt=""> Camion Container 40"</div>                          </div>
                        </div>


                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label crlwhite">Véhicule</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z24.png') }}" alt="">Man 200 L</div>                          </div>
                        </div>

                    
                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label crlwhite">Matricule</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z18.png') }}" alt="">14528 | A | 55</div>                          </div>
                        </div>
                    

                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label crlwhite">Cubage</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z19.png') }}" alt="">20,00 M3</div>                          </div>
                        </div>
                        
                      
                        <div class="col-md-12">
                          <div class="mb-3">
                            <label class="form-label crlwhite">Poid total</label>
                            <div class="infchuf2"><img style="    float: left;    margin: 4px 7px 0 0;" src="{{ asset('theme/assets/images/z20.png') }}" alt="">3000,00 Kg</div>                          </div>
                        </div>
                     



                        


                      
                        
                        <div class="kalimenu crlwhite">Plus d'infos</div>
<div class="clr"></div>

						</div>





						</div>
						
						
						<div class="frieght">
						<div class="backiw2 ">
					<div class="crlwhite ordira">	Ordre de mission</div>
						</div>

            <div class="backiw5 ">
					<div class="crlwhite kiloa"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="paperclip"></i>N° <b>FGD 123456</b></div>
          <div class="crlwhite kiloa"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="calendar"></i>Date : <b>12/02/2022</b></div>
          <div class="crlwhite kiloa"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="user"></i>Par : <b>Ahmed Ahmadi</b></div>
          <div class="clr"></div>
						</div>




            <div class="backiw3 ">
					<div class=" kiloa2"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="paperclip"></i>Réf : <b>FGD123456</b></div>
          <div class=" kiloa2"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="calendar"></i>Date départ : <b>15/02/2022</b></div>
          
          
          <div class=" kiloa2"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="map"></i>Trajet : <b>Berrechid - Agadir - Berrechid</b></div>
          <div class=" kiloa2"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="stop-circle"></i>Escale : <b>1</b></div>

          
          
          <div class=" kiloa2"><i style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="watch"></i>Durée de mission : <b>Du 15/02/2022 au 16/02/2022</b></div>
          <div class=" kiloa2"><i class="iconify" style="    font-size: 9px !important;color: #000;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="navigation-2"></i>Distance (KM) : <b>1020 Km</b></div>
          <div class="clr"></div>
						</div>


            <div class="backiw3 ">
					<div class=" sitdcharg">Feuille de route</div>
          <div class="lini"></div>
          

          <table class="table card-table table-vcenter text-nowrap">
          <thead>
                                              <tr>
                                                  <th class="tith01">Ville</th>
                                                  <th class="tith01">Entité</th>
                                                  
                                                  <th class="tith01">Mode</th>
                                                  <th class="tith01">Date / Heure</th>
                                                  <th class="tith01">Chargement</th>
												  </tr>
												  </thead>



                          <tbody>
                                              <tr style="font-size:13px;">
                                                  
                                                  <td><i style="    font-size: 12px !important;color: #10d38b;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="map-pin"></i><b style="    font-size: 12px;">Marrakech</b></td>
                                                  <td>FGD</td>
                                                  <td>Ramassage</td>
                                                  <td>15/02/2022 à 8h00</td>
                                                  <td style="    color: #279b01;font-weight: 600;">100%</td>
												  
												  </tr>


                          <tr style="font-size:13px;">
                                                  
                                                  <td><i style="    font-size: 12px !important;color: #10d38b;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="map-pin"></i><b style="    font-size: 12px;">Agadir</b></td>
                                                  <td>Grossiste Hassan</td>
                                                  <td>Livraison</td>
                                                  <td>15/02/2022 à 8h00</td>
                                                  <td style="    color: #d50707;font-weight: 600;">25%</td>
												  
												  </tr>


                          <tr style="font-size:13px;">
                                                  
                                                  <td><i style="    font-size: 12px !important;color: #10d38b;float: left;width: 13px;margin: -3px 5px 0 0;" data-feather="map-pin"></i><b style="    font-size: 12px;">Berrechid</b></td>
                                                  <td>Grossiste Ahmed</td>
                                                  <td>Livraison</td>
                                                  <td>15/02/2022 à 8h00</td>
                                                  <td style="    color: #a79b10;font-weight: 600;">75%</td>
												  
												  </tr>
</tbody>
</table>

						</div>







            <div class="backiw3 ">
					<div class=" sitdcharg">Frais de mission</div>
          <div class="lini"></div>


          <div class="frgt" id="check2" onclick="detecter()">+ Frais de mission</div>

          <table class="table card-table table-vcenter text-nowrap">
          <thead>
                                              <tr>
                                                  <th class="tith01">Type frais</th>
                                                  <th class="tith01">Désignation</th>
                                                  
                                                  <th class="tith01">P.U</th>
                                                  <th class="tith01">QTE</th>
                                                  <th class="tith01">Prix totale</th>
												  </tr>
												  </thead>



                          <tbody>
                                              <tr style="font-size:13px;">
                                                  
                                                  <td>   <select class="form-select" id="validationTooltip04" required="">
                          <option>Carburant</option>
						  <option>Hébérgement</option>
              <option>Autoroute</option>
              <option>Repas</option>
              <option>Divers</option>
                        </select></td>
                                                  <td>  
                                                  <input class="form-control" type="text" value="Diesel" ></td>
                                                  <td><input class="form-control" type="text" value="10" ></td>
                                                  <td><input class="form-control" type="text" value="120" ></td>
                                                  <td style="    color: #279b01;font-weight: 600;  line-height: 39px;">1200.00</td>
												  
												  </tr>
                          <tr style="font-size:13px;">
                                                  
                                                  <td>   <select class="form-select" id="validationTooltip04" required="">
                                                  <option>Divers</option>
						  <option>Hébérgement</option>
              <option>Autoroute</option>
              <option>Repas</option>
              <option>Carburant</option>
					
                        </select></td>
                                                  <td>  
                                                  <input class="form-control" type="text" value="" ></td>
                                                  <td><input class="form-control" type="text" value="50" ></td>
                                                  <td><input class="form-control" type="text" value="1" ></td>
                                                  <td style="    color: #279b01;font-weight: 600;  line-height: 39px;">50.00</td>
												  
												  </tr>

                        


</tbody>

</table>



<tbody>
<table class="table card-table table-vcenter text-nowrap">

<tr style="display:none;font-size:13px;"  id="bloc2">


                        
                        <td>   <select class="form-select">
                        <option>Choisissez</option>
                        <option>Divers</option>
<option>Hébérgement</option>
<option>Autoroute</option>
<option>Repas</option>
<option>Carburant</option>

</select></td>
                        <td>  
                        <input class="form-control" type="text" value="" ></td>
                        <td><input class="form-control" type="text" value="" ></td>
                        <td><input class="form-control" type="text" value="" ></td>
                        <td style="    color: #279b01;font-weight: 600;  line-height: 39px;">0.00</td>
</tr>
</tbody>
</table>

<div class="dikoli">
<div class="totli">Total frais : <b><span>1250.00 Dh</span></b></div>
<div class="totli2">Avance : <input class="form-control" type="text"  ></div>

<div class="polia">
<div class="totli5">Reste : <b><span>1250.00 Dh</span></b></div>
<div class="clr"></div>
</div>
</div>
<div class="clr"></div>
<div class="btnenrg5"><i style="        font-size: 17px !important;
    color: #000000;
    float: left;
    width: 20px;
    margin: -3px 0px 0 0px;" data-feather="printer"></i>Imprimer</div>

<div class="btnenrg">Enregistrer</div>

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

						</div>






						</div>
						
						
						<div class="clr"></div>
						
					
		  
		  
		  
		  
		  
		  
		  
		   
			  
		  
		  
                        </div>
                    </div>
                </div>
                <!-- Container-fluid starts-->
                
                <!-- Container-fluid Ends-->
                </div> </div> </div> </div>






               







	
	@stop

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