@extends('content.dashboard.dashboards-analytics')

@section('content')
<div class="container mt-0">
<section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-11">
                  <h4 class="py-1 mb-1">
                    <span class="text-muted fw-light"> <a href="/">Accueil</a></span> / <span> <a href="/redevebles">Redevebles</a></span> / </span> <span class="breadcrumb-item active"><a href="#">Identification manuelle</a></span>
                  </h4>
                </div>
            </div>
        </div>
    </section>
  <!-- Cadrant autour du formulaire -->
  <div class="card shadow-sm border-primary">
    <div class="card-body">

      <!-- Formulaire de Recherche -->
      <form action="{{ route('redevables.rechercher') }}" method="post" class="mb-2">
        @csrf
        <div class="row">
          <div class="col-md-8">
            <input type="text" name="code_foner" class="form-control" placeholder="Entrer le code FONER" required>
          </div>
          <div class="col-md-4">
            @can('identification-manuelle.rechercher')<button type="submit" class="btn btn-primary w-100">Rechercher</button>@endcan
          </div>
        </div>
      </form>

      <!-- Affichage des erreurs si présentes -->
      @if (session('error'))
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif

    </div>
  </div>
<br/>


  <div class="card shadow-sm mb-4">
  <div class="card-body">
    <!-- Formulaire d'Affichage des Informations -->
    @isset($redevable)
    <form action="{{ route('redevables.valider', $redevable->id) }}" method="POST" class="mt-4">
      @csrf
      @method('PATCH')

      <div class="row mb-3">
        <div class="d-none">
          {!! Form::text('id', $redevable->id ?? null, ['class' => 'form-control', 'id' => 'floatingInputidnom_redevable', 'placeholder' => 'Le nom redevable', 'aria-describedby' => 'floatingInputHelp', 'maxlength' => 254]) !!}
          {!! Form::label('is', 'id du redevable :', ['for' => 'floatingInputidnom_redevable']) !!}
        </div>
        <div class="form-floating col-sm-6">
          {!! Form::text('nom_redevable', $redevable->nom_redevable ?? null, ['class' => 'form-control', 'id' => 'floatingInputnom_redevable', 'placeholder' => 'Le nom redevable', 'aria-describedby' => 'floatingInputHelp', 'maxlength' => 254]) !!}
          {!! Form::label('nom_redevable', 'Nom du redevable :', ['for' => 'floatingInputnom_redevable']) !!}
        </div>
        <div class="form-floating col-sm-6">
          {!! Form::text('prenom_redevable', $redevable->prenom_redevable ?? null, ['class' => 'form-control', 'id' => 'floatingInputpnom_redevable', 'placeholder' => 'Le prénom du redevable', 'aria-describedby' => 'floatingInputHelp', 'maxlength' => 254]) !!}
          {!! Form::label('prenom_redevable', 'Prénom du redevable :', ['for' => 'floatingInputpnom_redevable']) !!}
        </div>
      </div>

      <div class="row mb-3">
        <div class="form-floating col-sm-6">
          {!! Form::text('montant_du', $redevable->montant_du ?? null, ['class' => 'form-control', 'id' => 'floatingInputmontant_du', 'placeholder' => 'Le montant', 'aria-describedby' => 'floatingInputHelp', 'maxlength' => 254]) !!}
          {!! Form::label('montant_du', 'Montant dû :', ['for' => 'floatingInputmontant_du']) !!}
        </div>
        <div class="form-floating col-sm-6">
          {!! Form::text('code_foner', $redevable->code_foner ?? null, ['class' => 'form-control', 'id' => 'floatingInputcode_foner', 'placeholder' => 'Code FONER', 'aria-describedby' => 'floatingInputHelp', 'maxlength' => 254]) !!}
          {!! Form::label('code_foner', 'Code FONER :', ['for' => 'floatingInputcode_foner']) !!}
        </div>
      </div>

      <div class="row mb-3">
        <div class="form-floating col-sm-6">
          {!! Form::label('id_employeur', 'Nom employeur :', ['style' => 'padding-top:1px']) !!}
          <input class="form-control" list="employeurOptions" id="employeurSearch" placeholder="Saisir pour chercher l'employeur du redevable" required>
          <datalist id="employeurOptions">
            @foreach ($employeurs as $employeur)
              <option data-id="{{ $employeur->id }}" value="{{ $employeur->libelle_employeur }}">
            @endforeach
          </datalist>
          <select name="id_employeur" id="id_employeur" class="form-control" style="display: none;">
            @foreach ($employeurs as $employeur)
              <option value="{{ $employeur->id }}">{{ $employeur->libelle_employeur }}</option>
            @endforeach
          </select>
        </div>

        <div class="form-check col-sm-6">
          <input class="form-check-input" type="checkbox" name="identifie" id="identifieCheck" required checked>
          <label class="form-check-label" for="identifieCheck">
            Confirmer l'identification
          </label>
        </div>
      </div>

      <button type="submit" class="btn btn-success w-100 mt-3">Valider l'Identification</button>
    </form>
    @endisset
  </div>
</div>

<!-- Script JavaScript -->
<script>
  document.getElementById('employeurSearch').addEventListener('input', function() {
    var inputText = this.value.trim();
    var datalistOptions = document.getElementById('employeurOptions').childNodes;

    for (var i = 0; i < datalistOptions.length; i++) {
      var option = datalistOptions[i];
      if (option.nodeName === 'OPTION') {
        var optionText = option.value.trim();
        if (optionText === inputText) {
          var employeurId = option.getAttribute('data-id');
          document.getElementById('id_employeur').value = employeurId;
          break;
        }
      }
    }
  });
</script>

@endsection