@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">{{__('Compte')}}: <strong>{{ $user->email }} </strong></h1>

        <div class="px-2"> 
          <hr>
      <nav class="nav-wrapper d-flex align-items-center justify-content-between bg-gradient-dark text-light py-3 px-4 rounded-pill shadow-lg" style="margin-bottom: 2px">
          <div class="nav nav-pills nav-justified flex-grow-1">
            <button class="nav-item nav-link active  fw-bold rounded-pill border border-light py-2 px-4" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
              INFOS
            </button>

            <button class="nav-item nav-link  rounded-pill border border-light py-2 px-4 " id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-factures" type="button" role="tab" aria-controls="nav-factures" aria-selected="false">
              PAIEMENTS
            </button>

          
          </div>
      </nav>
        <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="" enctype="multipart/form-data">
                                   @method('PATCH')
                                    @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', $user->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', $user->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', $user->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="{{$user->email}}" readonly="readonly" 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="nickname" class="form-label">{{ __('User name') }}</label>
                                        <input id="email" value="{{$user->email}}" readonly="readonly" type="text" 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 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 }}" @if($user->sexe==$gender->value) selected @endif
                                                        >{{ $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="{{$user->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 }}"  @if($user->pays_id==$country->id) selected @endif
                                                        >{{ $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 }}"  @if($user->region_id==$state->id) selected @endif
                                                        >{{ $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_id" class="form-label">{{ __('Ville') }}</label>
                                        <select name="ville_id" id="ville_id" class="form-control">
                                                    <option value='' disabled>--------</option>
                                                    @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}" @if($user->ville_id==$city->id) selected @endif
                                                        >{{ $city->nom }}</option>
                                                    @endforeach
                                         </select>
                                        @error('ville_id')
                                            <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', $user->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="button" 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='';
                if(state.id=={{$user->region_id}})
                  selectedval='selected';
                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);
    });

    getStates({{$user->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='';
                if(city.id=={{$user->ville_id}})
                  selectedval='selected';
                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);
    });

    getCities({{$user->region_id }});

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

</script>
@endpush

@endsection