@extends('layouts.horizontal', ['title' => 'Nuevo Doctor / Técnico'])

@section('content')
@include('layouts.partials.page-title', [
  'subtitle' => '<a href="'.route('doctores.index').'" class="text-decoration-none text-primary">Doctores</a>',
  'title' => 'Nuevo Registro'
])

<div class="container-fluid">
  <form method="POST" action="{{ route('doctores.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-12">
              <label class="form-label d-block fw-bold">Seleccione un Tipo</label>

              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="tecnico" value="0" checked>
                <label class="form-check-label">Doctor</label>
              </div>

              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="tecnico" value="1">
                <label class="form-check-label">Técnico</label>
              </div>
            </div>

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

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

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

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

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

            {{-- Contraseña SOLO si es doctor --}}
            <div class="col-md-6 password-group">
              <label class="form-label">Contraseña</label>
              <input type="password" name="password" class="form-control">
            </div>

            <div class="col-md-6 password-group">
              <label class="form-label">Confirmar Contraseña</label>
              <input type="password" name="password_confirmation" class="form-control">
            </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">Tipo</label>
              <select name="tipo" class="form-select" required>
                <option value="">Selecciona una opción</option>
                <option value="1">Médico Generador</option>
                <option value="2">Médico Reportador</option>
                <option value="3">Ejecutor (Técnico)</option>
              </select>
            </div>

            <div class="col-md-12">
              <label class="form-label">Color</label>
              <input type="color" name="color" value="#0055ff" class="form-control form-control-color">
            </div>

            <div class="col-md-12">
              <label class="form-label">¿Es doctor de la clínica?</label><br>
              <input type="hidden" name="origen" value="0">
              <input class="form-check-input" type="checkbox" name="origen" value="1">
              <label class="ms-1">Sí</label>
            </div>

          </div>
        </div>

      </div>
    </div>

    <div class="card-footer text-end">
      <button type="submit" class="btn btn-primary">
        <i class="ti ti-send"></i> Crear Registro
      </button>
    </div>

  </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const radios = document.querySelectorAll('input[name="tecnico"]');
  const passwordFields = document.querySelectorAll('.password-group');

  function togglePassword() {
    const tecnico = document.querySelector('input[name="tecnico"]:checked').value;
    passwordFields.forEach(el => {
      el.style.display = tecnico == "0" ? "block" : "none";
    });
  }

  radios.forEach(r => r.addEventListener('change', togglePassword));
  togglePassword();
});
</script>

@endsection