@extends('layouts.horizontal', ['title' => 'Editar Paciente'])

@section('content')
@section('css')
<style>
  /* Fondo blanco del menú desplegable */
  .ts-dropdown,
  .ts-control,
  .ts-dropdown-content {
    background: #fff !important;
    color: #000 !important;
  }

  /* Tags visuales (médicos seleccionados) */
  .ts-control .item {
    background-color: #eef4ff !important;
    color: #0d6efd !important;
    border-radius: 12px !important;
    padding: 4px 10px !important;
    margin-right: 4px;
  }

  /* Hover en opciones */
  .ts-dropdown .option:hover {
    background-color: #f3f6fa !important;
  }

  /* Bordes suaves */
  .ts-control {
    border-radius: 6px !important;
  }
</style>
@endsection

@include('layouts.partials.page-title', ['subtitle' => '<a href="' . route('pacientes.index') . '" class="text-decoration-none text-primary">Pacientes</a>', 'title' => 'Editar Paciente'])

<div class="container-fluid">
  @if ($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

  <form method="POST" action="{{ route('pacientes.update', $paciente->idPaciente) }}" class="card shadow-sm">
    @csrf
    @method('PUT')

    <div class="card-body">
      @if (session('ok'))
        <div class="alert alert-success">{{ session('ok') }}</div>
      @elseif (session('expediente_already_exist'))
        <div class="alert alert-warning">{{ session('expediente_already_exist') }}</div>
      @endif

      <div class="row g-4">
        {{-- COLUMNA IZQUIERDA --}}
        <div class="col-md-6">
          <div class="row g-3">
            <div class="col-md-6">
            <label class="form-label">No. Expediente</label>
            <input
                type="text"
                id="expedienteInput"
                class="form-control"
                name="expediente"
                value="{{ $paciente->expediente }}"
                readonly>
            </div>

            <div class="col-md-6 d-flex align-items-end">
            <div class="form-check mt-3">
                <input type="hidden" name="edit_expediente" value="0">
                <input class="form-check-input" type="checkbox" name="edit_expediente" value="1" id="editExpediente">
                <label class="form-check-label" for="editExpediente">Editar Expediente</label>
            </div>
            </div>


            <div class="col-md-12">
              <label class="form-label">Nombre</label>
              <input type="text" class="form-control" name="nombre" value="{{ $paciente->nombre }}">
            </div>

            <div class="col-md-6">
              <label class="form-label">Apellido Paterno</label>
              <input type="text" class="form-control" name="ap_paterno" value="{{ $paciente->apPaterno }}">
            </div>

            <div class="col-md-6">
              <label class="form-label">Apellido Materno</label>
              <input type="text" class="form-control" name="ap_materno" value="{{ $paciente->apMaterno }}">
            </div>

            <div class="col-md-6">
              <label class="form-label">Correo</label>
              <input type="email" class="form-control" name="correo" value="{{ $paciente->correo }}">
            </div>

            <div class="col-md-6">
              <label class="form-label">Teléfono</label>
              <input type="text" class="form-control" name="telefono" value="{{ $paciente->telefono }}">
            </div>

            <div class="col-md-12">
              <label class="form-label">Descripción</label>
              <textarea name="descripcion" class="form-control" rows="3">{{ strip_tags(html_entity_decode($paciente->descripcion)) }}</textarea>
            </div>
          </div>
        </div>

        {{-- COLUMNA DERECHA --}}
        <div class="col-md-6">
          <div class="row g-3">

            <div class="col-md-12">
              <label class="form-label fw-bold">Médicos Tratantes*</label>
              <select name="id_doctor[]" class="form-select tom-select" multiple>
                @foreach($doctores as $dc)
                  <option value="{{ $dc->id }}" {{ in_array($dc->id, $selected_doctors) ? 'selected' : '' }}>
                    {{ $dc->title }}
                  </option>
                @endforeach
              </select>
            </div>
            <div class="col-md-12">
              <label class="form-label fw-bold">Médicos Reportadores Adicionales</label>
              <select name="reportador[]" class="form-select tom-select" multiple>
                @foreach($doctores as $dc)
                  <option value="{{ $dc->id }}" {{ in_array($dc->id, $selected_reportador) ? 'selected' : '' }}>
                    {{ $dc->title }}
                  </option>
                @endforeach
              </select>
            </div>
            @permiso('interpretaciones.ver')
            <div class="col-md-12">
              <label class="form-label fw-bold">Médico Interpretador</label>
              <select name="idDoctorInterpretador" class="form-select tom-select">
                <option value="">Seleccionar...</option>
                @foreach($doctores as $dc)
                  <option value="{{ $dc->id }}" 
                    {{ $paciente->idDoctorInterpretador == $dc->id ? 'selected' : '' }}>
                    {{ $dc->title }}
                  </option>
                @endforeach
              </select>
            </div>
            @endpermiso
            <div class="col-md-12">
              <label class="form-label">Técnico Ejecutor</label>
              <select name="id_doctor_3" class="form-select">
                <option value="">Seleccionar...</option>
                @foreach($tecnicos as $dc)
                  <option value="{{ $dc->id }}" {{ $paciente->idDoctor3 == $dc->id ? 'selected' : '' }}>
                    {{ $dc->title }}
                  </option>
                @endforeach
              </select>
            </div>

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

    <div class="card-footer text-end">
      <button type="submit" class="btn btn-primary">
        <i class="ti ti-send"></i> Guardar cambios
      </button>
    </div>
  </form>
  @include('pacientes.historial_clinico_show', [
    'historial' => $historial
])
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">

<script>
document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('.tom-select').forEach(el => {

        const tom = new TomSelect(el, {
            plugins: ['remove_button'],
            create: false,
            persist: false,
            placeholder: 'Seleccionar...',

            render: {
                item: function(data, escape) {
                    return `
                        <div class="badge bg-primary-subtle text-primary border rounded-pill me-1">
                            ${escape(data.text)}
                        </div>
                    `;
                }
            },

            onItemAdd: function() {

                // Limpiar el texto que quedó escrito en el buscador
                this.setTextboxValue('');

                // Refrescar el input visual
                this.refreshOptions(false);
            }
        });

    });

});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const expedienteInput = document.getElementById('expedienteInput');
  const editCheckbox = document.getElementById('editExpediente');

  // Desactivar por defecto
  expedienteInput.readOnly = true;

  // Detectar cambios
  editCheckbox.addEventListener('change', (e) => {
    expedienteInput.readOnly = !e.target.checked; // si está checked -> editable
    expedienteInput.focus(); // opcional: enfoca el input
  });
});
</script>

@endpush