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

@section('content')
@section('css')
<style>
  .ts-dropdown,
  .ts-control,
  .ts-dropdown-content {
    background: #fff !important;
    color: #000 !important;
  }

  .ts-control .item {
    background-color: #eef4ff !important;
    color: #0d6efd !important;
    border-radius: 12px !important;
    padding: 4px 10px !important;
    margin-right: 4px;
  }

  .ts-dropdown .option:hover {
    background-color: #f3f6fa !important;
  }

  .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' => 'Nuevo Paciente'
])

<div class="container-fluid">
  <form method="POST" action="{{ route('pacientes.store') }}" class="card shadow-sm">
    @csrf

    <div class="card-body">

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

            <div class="col-md-12">
              <label class="form-label">Nombre</label>
              <input type="text" class="form-control" name="nombre" required>
            </div>

            <div class="col-md-6">
              <label class="form-label">Apellido Paterno</label>
              <input type="text" class="form-control" name="ap_paterno" required>
            </div>

            <div class="col-md-6">
              <label class="form-label">Apellido Materno</label>
              <input type="text" class="form-control" name="ap_materno" required>
            </div>

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

            <div class="col-md-6">
              <label class="form-label">Teléfono</label>
              <input type="text" class="form-control" name="telefono" required>
            </div>

            <div class="col-md-12">
              <label class="form-label">Descripción</label>
              <textarea name="descripcion" class="form-control" rows="3"></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 required>
                @foreach($doctores as $dc)
                  <option value="{{ $dc->id }}">{{ $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 }}">{{ $dc->title }}</option>
                @endforeach
              </select>
            </div>

            <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 }}">{{ $dc->title }}</option>
                @endforeach
              </select>
            </div>

          </div>
        </div>

      </div> {{-- row --}}
    </div>

    <div class="card-footer text-end">
      <button type="submit" class="btn btn-primary">
        <i class="ti ti-send"></i> Crear Paciente
      </button>
    </div>
  </form>
</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 => {
    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>`;
        }
      }
    });
  });
});
</script>
@endpush