@extends('layouts.horizontal', ['title' => 'Editar 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' => 'Editar Registro'
])

<div class="container-fluid">
  <form method="POST" action="{{ route('doctores.update', $doctor->idDoctor) }}" class="card shadow-sm">
    @csrf
    @method('PUT')

    <div class="card-body">
      <div class="row g-4">

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

            {{-- TIPO DOCTOR / TÉCNICO --}}
            <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"
                       {{ $doctor->tecnico == 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"
                       {{ $doctor->tecnico == 1 ? 'checked' : '' }}>
                <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" value="{{ $doctor->nombre }}" required>
            </div>

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

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

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

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

            {{-- CONTRASEÑA --}}
            <div class="col-md-6 password-group">
              <label class="form-label">Nueva Contraseña (opcional)</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="1" {{ $doctor->tipo == 1 ? 'selected' : '' }}>Médico Generador</option>
                <option value="2" {{ $doctor->tipo == 2 ? 'selected' : '' }}>Médico Reportador</option>
                <option value="3" {{ $doctor->tipo == 3 ? 'selected' : '' }}>Ejecutor (Técnico)</option>
              </select>
            </div>

            <div class="col-md-12">
              <label class="form-label">Color</label>
              <input type="color" name="color" value="{{ $doctor->color }}" 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"
                     {{ $doctor->origen == 1 ? 'checked' : '' }}>
              <label class="ms-1">Sí</label>
            </div>

          </div>
        </div>

      </div>
    </div>

<div class="card-footer d-flex justify-content-between">

  <a href="{{ route('doctores.index') }}" class="btn btn-light">
    <i class="ti ti-arrow-left"></i> Volver
  </a>

  <div class="d-flex gap-2">
    @permiso('doctores-crud.autorizar')
    <a href="{{ route('doctores.bloqueos.index', $doctor->idDoctor) }}"
       class="btn btn-warning">
       <i class="ti ti-calendar-x"></i> Bloqueos / Horarios
    </a>
    @endpermiso
    <button type="submit" class="btn btn-primary">
      <i class="ti ti-device-floppy"></i> Guardar cambios
    </button>

  </div>
</div>

  </form>

  {{-- BOTÓN ELIMINAR --}}
  @permiso('doctores-crud.eliminar')
  <form method="POST" action="{{ route('doctores.destroy', $doctor->idDoctor) }}"
        onsubmit="return confirm('¿Eliminar este doctor? Esta acción no se puede deshacer.')"
        class="mt-3 text-end">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-danger">
      <i class="ti ti-trash"></i> Eliminar Doctor
    </button>
  </form>
  @endpermiso
</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