@extends('layouts.yellow')

@section('content')
<main class="container-fluid">
  <!-- Encabezado de la página -->
  <section class="row mb-3">
    <div class="col-12">
      <div class="card">
        <div class="card-header bg-dark">
          <h2 class="text-white">{{ __('create-representative.titleView') }}</h2>
        </div>
      </div>
    </div>
  </section>

  <!-- Botón e input para selección de padre/madre -->
  <section class="row mb-3">
    <div class="col-md-2 col-12 mb-2">
      <button id="btnParents" class="btn btn-danger">
        {{ __('create-representative.selectParent') }}
      </button>
    </div>
    <div class="col-md-4 col-12">
      <input class="form-control" type="text" readonly id="parentValue" name="parentValue">
    </div>
  </section>

  <!-- Formulario del Representante -->
  <section class="mb-3">
    <x-RepresentativeForm 
      :representative="$representative" 
      :bloodTypes="$bloodTypes" 
      :action=" URL::route('/admin/create-representative')"
      :patientId="$patientId">
    </x-RepresentativeForm>
  </section>

  <!-- Alerta de valores requeridos -->
  <section class="row mb-3">
    <div class="col-12">
      <div class="alert alert-warning">
        <h4>{{ __("create-representative.valuesRequired") }}</h4>
        <ul>
          <li>{{ __("com-form-representative.firstname") }}</li>
          <li>{{ __("com-form-representative.lastname") }}</li>
          <li>{{ __("com-form-representative.age") }}</li>
          <li>{{ __("com-form-representative.birthday") }}</li>
          <li>{{ __("com-form-representative.gender") }}</li>
        </ul>
      </div>
    </div>
  </section>
</main>

<!-- Overlay para selección de padres -->
<div class="parents-container" role="dialog" aria-modal="true" aria-labelledby="parentsModalTitle">
  <div class="modal-content-wrapper">
    <div class="card">
      <!-- Cabecera de la modal con botón de cierre -->
      <div class="card-header bg-dark d-flex justify-content-between align-items-center">
        <h4 id="parentsModalTitle" class="text-white m-0">{{ __('create-representative.selectParent') }}</h4>
        <button type="button" id="closeParents" class="close text-white" aria-label="{{ __('Close') }}">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- Cuerpo de la modal -->
      <div class="card-body">
        <div class="container-fluid">
          <div class="row">
            @foreach(config("app.parents")() as $key => $parent)
              <div class="col-md-3 col-sm-6 cell-patient text-center mb-3">
                <label class="d-block parent-label">
                  <img class="parent-img" src="{{ asset('img/patients.png') }}" alt="{{ __('Parent image') }}">
                  <span class="parent-title d-block">{{ $parent }}</span>
                  <input type="radio" name="parents" value="{{ $key }}">
                </label>
              </div>
            @endforeach
          </div>
        </div>
      </div>
      <!-- Pie de la modal -->
      <div class="card-footer">
        <button id="btnNextParents" class="btn btn-danger btn-block">
          {{ __('create-representative.parentNext') }}
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Estilos adicionales para la modal y alineación -->
<style>
  .parents-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; /* Se muestra con JavaScript */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
  }
  .modal-content-wrapper {
    max-width: 800px;
    margin: 50px auto;
  }
  .parent-label {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .parent-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .parent-title {
    font-weight: bold;
  }
  @media (max-width: 575px) {
    .modal-content-wrapper {
      width: 100%;
      margin: 20px auto;
    }
  }
</style>

<!-- Scripts para manejo de la modal -->
<script>
  // Abrir overlay al pulsar btnParents
  document.getElementById('btnParents').addEventListener('click', function() {
    document.querySelector('.parents-container').style.display = 'block';
  });

  // Cerrar overlay al pulsar el botón de cierre
  document.getElementById('closeParents').addEventListener('click', function() {
    document.querySelector('.parents-container').style.display = 'none';
  });
</script>

<script src="{{ asset('js/create-representative.js') }}"></script>
@endsection
