@extends('client/layouts/contentNavbarLayout')

@section('title')
  {{ __('client.account') }}
@endsection

@section('page-script')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
<div class="row py-3 mb-4">
  <div class="col-md">
    <h4 class="fw-bold">{{ __('client.account') }}</h4>
  </div>
  <div class="col-md text-md-end">
    <a href="{{ route('client.password.edit') }}" class="btn btn-secondary">{{ __('client.change_password') }}</a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="card mb-4">
      <h5 class="card-header">{{ __('client.profile_details') }}</h5>
      <!-- Account -->
      <div class="card-body">
        @include('client.responses.messages')

        <form id="formAccountSettings" method="POST" action="{{ route('client.profile.update') }}">
          @csrf
          <div class="row">
            <div class="mb-3 col-md-6">
              <label for="first-name" class="form-label">{{ __('client.admin_first_name') }}</label>
              <input class="form-control" type="text" id="first-name" name="first_name" value="{{ $user->first_name }}" placeholder="{{ __('client.admin_first_name') }}" required minlength="3" maxlength="255"/>
            </div>
            <div class="mb-3 col-md-6">
              <label for="last-name" class="form-label">{{ __('client.admin_last_name') }}</label>
              <input class="form-control" type="text" name="last_name" id="last-name" value="{{ $user->last_name }}" placeholder="{{ __('client.admin_last_name') }}" required minlength="3" maxlength="255"/>
            </div>
            <div class="mb-3 col-md-6">
              <label for="company-name" class="form-label">{{ __('client.company_name') }}</label>
              <input type="text" class="form-control" id="company-name" name="name" value="{{ $user->name }}" placeholder="{{ __('client.company_name') }}" required minlength="3" maxlength="255"/>
            </div>
            <div class="mb-3 col-md-6">
              <label for="email" class="form-label">{{ __('client.email') }}</label>
              <input class="form-control" type="text" id="email" name="email" value="{{ $user->email }}" placeholder="{{ __('client.email') }}" required minlength="3" maxlength="255"/>
            </div>
            <div class="mb-3 col-md-6">
              <label class="form-label" for="phone">{{ __('client.phone') }}</label>
              <input type="text" id="phone" name="phone" class="form-control" value="{{ $user->phone }}" placeholder="{{ __('client.phone') }}" required />
            </div>
            <div class="mb-3 col-md-6">
              <label for="siren-number" class="form-label">{{ __('client.siren_number') }}</label>
              <input class="form-control" type="text" id="siren-number" name="siren_number" value="{{ $user->siren_number }}" placeholder="{{ __('client.siren_number') }}" required minlength="9" maxlength="9"/>
            </div>
            <div class="mb-3 col-md-6">
              <label class="form-label" for="activity_code">{{ __('client.activity_code') }}</label>
              <input type="text" id="activity_code" name="activity_code" class="form-control" value="{{ $user->activity_code }}" placeholder="{{ __('client.activity_code') }}" required minlength="5" maxlength="5"/>
            </div>
            <div class="mb-3 col-md-6">
              <label for="tva-number" class="form-label">{{ __('client.tva_number') }}</label>
              <input class="form-control" type="text" id="tva-number" name="tva_number" value="{{ $user->tva_number }}" placeholder="{{ __('client.tva_number') }}" required/>
            </div>

            <div class="mb-3 col-md-6">
              <label for="full-address" class="form-label">{{ __('client.full_address') }}</label>
              <select class="address-autocomplete form-control" required>
                  @if ($user->full_address)
                    <option value="0">{{ $user->full_address }}</option>
                  @endif
              </select>
              <input type="text" id="full-address" name="full_address" value="{{ $user->full_address }}" hidden>
            </div>

            <div class="mb-3 col-md-6">
              <label for="address" class="form-label">{{ __('client.address') }}</label>
              <input type="text" class="form-control" value="{{ $user->address }}" id="address" name="address" placeholder="{{ __('client.address') }}" required minlength="3" maxlength="255" readonly/>
            </div>
            <div class="mb-3 col-md-6">
              <label for="city" class="form-label">{{ __('client.city') }}</label>
              <input type="text" class="form-control" value="{{ $user->city }}" id="city" name="city" placeholder="{{ __('client.city') }}" required minlength="3" maxlength="255" readonly/>
            </div>
            <div class="mb-3 col-md-6">
              <label for="postal-code" class="form-label">{{ __('client.postal_code') }}</label>
              <input type="text" class="form-control" value="{{ $user->postal_code }}" id="postal-code" name="postal_code" placeholder="{{ __('client.postal_code') }}" required minlength="3" maxlength="255" readonly/>
            </div>
            <input type="text" name="lat" id="lat" hidden>
            <input type="text" name="long" id="long" hidden>
            <div class="mb-3 col-md-6">
              <label class="form-label" for="company-profile">{{ __('client.company_profile') }}</label>
              <select id="company-profile" value="{{ $user->company_profile }}" name="company_profile" class="select2 form-select" required>
                <option value="">{{ __('client.select') }}</option>
                <option value="L" @if($user->company_profile == 'L') selected @endif>{{ __('client.company_profile_first_choice') }}</option>
                <option value="C" @if($user->company_profile == 'C') selected @endif>{{ __('client.company_profile_second_choice') }}</option>
                <option value="F" @if($user->company_profile == 'F') selected @endif>{{ __('client.company_profile_third_choice') }}</option>
                <option value="O" @if($user->company_profile == 'O') selected @endif>{{ __('client.other') }}</option>
              </select>
            </div>
          </div>
          <div class="mt-2 text-end">
            <button type="submit" class="btn btn-primary me-2">{{ __('client.save') }}</button>
          </div>
        </form>
      </div>
      <!-- /Account -->
    </div>
  </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/i18n/fr.js"></script>

<script>
    $(document).ready(function() {
      $('.address-autocomplete').select2({
          placeholder: "Chercher l'adresse de l'entreprise",
          minimumInputLength: 3,
          language: "fr",
          ajax: {
              url: 'https://api-adresse.data.gouv.fr/search/',
              data: function (params) {
                  return {
                      q: params.term
                  };
              },
              processResults: function (response) {
                  features = response.features;
                  addresses = [];
                  for (let i = 0; i < response.features.length; i++) {
                      addresses.push({
                          'id': response.features[i].properties.id,
                          'text': response.features[i].properties.label,
                      })
                  }
                  return {
                      results: addresses
                  };
              },
              cache: true
          }
      }).on("change", function() {
          if(features) {
              const feature = features.find(e => e.properties.id === this.value);
              if(feature) {
                  document.getElementById('full-address').value = feature['properties']['label'];
                  document.getElementById('address').value = feature['properties']['name'];
                  document.getElementById('city').value = feature['properties']['city'];
                  document.getElementById('postal-code').value = feature['properties']['postcode'];
                  document.getElementById('lat').value = feature['geometry']['coordinates'][1];
                  document.getElementById('long').value = feature['geometry']['coordinates'][0];            
              }
          }
      });
    });
</script>
@endsection