@extends('layouts.admin')

@section('content')
 <style type="text/css">
   
   .form-control {
    display: block;
    width: 100%;
    padding: 0.2rem 1rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #637381;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #c4cdd5;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
}
.form-label {
  font-weight: bold;
  color: #333; /* Adjust color as desired */
}
 </style> 



        <div class="container-fluid"> 
          <div class="bg-success-soft mx-n2 mt-n2 pt-2 mb-2">
             <h1 class=" h3 ml-4 mt-3" style="margin-left: 10px">{{__('Création utilisateur')}}:</h1>

        <div class="px-2"> 
          <hr>

        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            
                            <div class="card">
                              <div class="card-body p-6">
                                <form method="POST" action="{{ route('admin.utilisateurs.store') }}" enctype="multipart/form-data">
                                   @method('POST')
                                    @csrf
                                  
                                        @php
                            $locale = app()->getLocale();
                            if($locale=='gb')
                                $locale='en';
                        @endphp
                                    <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="first_name" class="form-label">{{ __('Nom') }}</label>
                                        <input id="first_name" value="{{old('first_name')}}" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name"  autocomplete="first_name" autofocus>
                                        @error('first_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                       <div class="col-md-6 mb-3">
                                        <label for="last_name" class="form-label">{{ __('Prénom') }}</label>
                                        <input id="last_name" value="{{old('last_name')}}" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name"  autocomplete="last_name" autofocus>
                                        @error('last_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="telephone" class="form-label">{{ __('Télephone') }}</label>
                                        <input id="telephone" value="{{old('telephone')}}" type="text" class="form-control @error('mobile') is-invalid @enderror" name="telephone"  autocomplete="telephone" autofocus>
                                        @error('telephone')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                       <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">{{ __('email') }}</label>
                                        <input id="email" type="text" value="{{old('email')}}"  class="form-control @error('email') is-invalid @enderror" name="email"  autocomplete="email" autofocus>
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="password" class="form-label">{{ __('Mot de passe') }}</label>
                                         <input type="password"  name="password" class="form-control @error('email') is-invalid @enderror"
                                    autocomplete="current-password">
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                       <div class="col-md-6 mb-3">
                                        <label for="sexe" class="form-label">{{ __('Sexe') }}</label>
                                               <select name="sexe" id="sexe" class="form-control">
                                                    <option disabled>--------</option>
                                                    @foreach ($genders as $gender)
                                                    <option value="{{ $gender->value }}" 
                                                        >{{ $gender->label() }}</option>
                                                    @endforeach
                                                </select>
                                        @error('sexe')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                               <div class="row"> 
                                  <div class="col-md-12 mb-3">
                                        <label for="adresse" class="form-label">{{ __('Adresse') }}</label>
                                        <input id="adresse" type="text" value="{{old('adresse')}}" class="form-control @error('adresse') is-invalid @enderror" name="adresse"  autocomplete="adresse" autofocus>
                                        @error('adresse')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                 <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="pays_id" class="form-label">{{ __('Pays') }}</label>
                                        <select name="pays_id" id="country_id" class="form-control">
                                                    <option disabled value=''>--------</option>
                                                    @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}" 
                                                        >{{ $country->{"nom_" . $locale}  }}</option>
                                                    @endforeach
                                         </select>
                                        @error('pays_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="region_id" class="form-label">{{ __('Région') }}</label>
                                        <select name="region_id" id="region_id" class="form-control">
                                                    <option disabled value=''>--------</option>
                                                    @foreach ($states as $state)
                                                    <option value="{{ $state->id }}" 
                                                        >{{ $state->nom }}</option>
                                                    @endforeach
                                         </select>
                                        @error('region_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
                                 <div class="row"> 
                                      <div class="col-md-6 mb-3">
                                        <label for="ville" class="form-label">{{ __('Ville') }}</label>
                                        <input id="ville" value="{{old('ville')}}" type="text" class="form-control @error('ville') is-invalid @enderror" name="ville"  autocomplete="ville" autofocus>
                                        @error('ville')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                      <div class="col-md-6 mb-3">
                                        <label for="code_postal" class="form-label">{{ __('Code postal') }}</label>
                                        <input id="code_postal" value="{{old('code_postal')}}"   type="text" class="form-control @error('code_postal') is-invalid @enderror" name="code_postal"  autocomplete="code_postal" autofocus>
                                        @error('code_postal')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                      </div>
                                </div>
     
                                   <hr>
                                  <div class="mt-6 ">
                                    <!-- Button -->
                                    <div class="col-md-2 d-grid ">
                                      <button type="submit" class="btn btn-primary">
                                        Enregistrer
                                      </button>
                                    </div>

                         
                                  </div>

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

          </div>
    
        



          </div>
        
          </div>


      </div>

        </div>

@push('scripts')
<script>

    function getStates(id){
        fetch(`/api/getstates/${id}`)
        .then(response => response.json())
        .then(data => {

            const states = data.states;
            let options = '';
            states.forEach(state => {
                var selectedval='';
                options += `<option value="${state.id}" ${selectedval}>${state.nom}</option>`;
            });
            document.getElementById('region_id').innerHTML = options;
           // $('#subcategories').select2('destroy');
           // $('#subcategories').select2();
        })
    }
    $('#country_id').on('change', function(){
        const pays_id = this.value;
        getStates(pays_id);
    });



    function getCities(id){
        fetch(`/api/getcities/${id}`)
        .then(response => response.json())
        .then(data => {

            const cities = data.cities;
            let options = '';
            cities.forEach(city => {
                var selectedval='';
                options += `<option value="${city.id}" ${selectedval}>${city.nom}</option>`;
            });
            document.getElementById('ville_id').innerHTML = options;
           // $('#subcategories').select2('destroy');
           // $('#subcategories').select2();
        })
    }
    $('#region_id').on('change', function(){
        const region_id = this.value;
        getCities(region_id);
    });



 
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this).hide();
        });
    }
});

</script>
@endpush

@endsection