@extends('layouts.admin')

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Gestion des commerciaux</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ url('home') }}">Accueil</a></li>
              <li class="breadcrumb-item active">Commercial</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
	
	
<div class="content">
<div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <!-- general form elements -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Ajouter un commercial</h3>
              </div>
			  
			  @if ($errors->any())
				<div class="alert alert-danger alert-dismissible">
                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                  <h5><i class="icon fas fa-ban"></i> Alert!</h5>
                  <ul>
						@foreach ($errors->all() as $error)
						  <li>{{ $error }}</li>
						@endforeach
					</ul>
                </div>
				@endif
              <!-- /.card-header -->
              <!-- form start -->
              <form role="form" method="post" action="{{ route('commercials.store') }}">
                <div class="card-body">
				@csrf
					
					<div class="form-group">
                    <label for="exampleInputEmail1">Code *</label>
                    <input type="text" class="form-control" name="code" id="code" placeholder="Entrer le code">
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputEmail1">Matricule *</label>
                    <input type="text" class="form-control" name="matricule" id="matricule" placeholder="Entrer le matricule">
                  </div>
			
					<div class="form-group">
                    <label for="exampleInputEmail1">Nom *</label>
                    <input type="name" class="form-control" name="nom" id="nom" placeholder="Entrer le nom">
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputEmail1">Prénom *</label>
                    <input type="name" class="form-control" name="prenom" id="prenom" placeholder="Entrer le prénom">
                  </div>
				  
                  <div class="form-group">
                    <label for="exampleInputEmail1">Téléphone *</label>
                    <input type="tel" name="tel" class="form-control" id="tel" placeholder="Entrer le téléphone">
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputEmail1">Whatsup</label>
                    <input type="tel" name="whatsup" class="form-control" id="whatsup" placeholder="Entrer le N° whatsup">
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputEmail1">Adresse</label>
                    <input type="tel" name="adresse" class="form-control" id="adresse" placeholder="Entrer l'adresse">
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputEmail1">Email *</label>
                    <input type="email" name="email" class="form-control" id="email" placeholder="Enter l'email">
                  </div>
				
				  <div class="form-group">
                    <label for="exampleInputPassword1">Fonction *</label>
					<select class="form-control select2" style="width: 100%;" name="fonction_id">
						<option value="">Choisir la fonction</option>	
						@foreach($fonctions as $fonction)
						<option value="{{ $fonction->id }}">{{ $fonction->libelle }}</option>
						@endforeach
					</select>
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputPassword1">Departement *</label>
					<select class="form-control select2" style="width: 100%;" name="departement_id">
						<option value="">Choisir le departement</option>	
						@foreach($departements as $departement)
						<option value="{{ $departement->id }}">{{ $departement->libelle }}</option>
						@endforeach
					</select>
                  </div>
				  
				  <div class="form-group">
                    <label for="exampleInputPassword1">Service *</label>
					<select class="form-control select2" style="width: 100%;" name="service_id">
						<option value="">Choisir le service</option>	
						@foreach($services as $service)
						<option value="{{ $service->id }}">{{ $service->libelle }}</option>
						@endforeach
					</select>
                  </div>
				 
				 
				  <div class="form-group">
                    <label for="exampleInputPassword1">Statut *</label>
					<select class="form-control select2" style="width: 100%;" name="statuts_id">
						<option value="">Choisir le statut</option>	
						@foreach($statuts as $statut)
						<option value="{{ $statut->id }}">{{ $statut->libelle }}</option>
						@endforeach
					</select>
                  </div>
				  
                </div>
                <!-- /.card-body -->

                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">Ajouter</button>
                </div>
              </form>
            </div>
            


		</div>
	</div>
</div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function(){

	$('#villes_id').on('change', function() {
		//debugger;	
		if($(this).val() != ""){			
			var villes = $(this).val();
			var selectList = $('#zones_id');
			selectList.find("option:not(:first)").remove();
			var selectListQ = $('#quartiers_id');
			selectListQ.find("option:not(:first)").remove();
				$.ajax({
					type:'get',
					url:"{{ route('getZonesforVille.get') }}",
					data:{id:parseInt(villes)},
					async: false,
					success:function(data){
						for(let i=0;i<data.length;i++){
							o = new Option(data[i]['libelle'], data[i]['id']);
							$(o).html(data[i]['libelle']);
							selectList.append(o);	
						}
					}
				});
				//get quartiers for given city
				$.ajax({
					type:'get',
					url:"{{ route('getQuartiersforVille.get') }}",
					data:{id:parseInt(villes)},
					async: false,
					success:function(data){
						for(let i=0;i<data.length;i++){
							oQ = new Option(data[i]['libelle'], data[i]['id']);
							$(oQ).html(data[i]['libelle']);
							selectListQ.append(oQ);
						}
					}
				});	
		}
	});
	
	
});
</script>
@endsection