<?php
require_once 'includes/auth.php';
exigir_rol('propietario');
require_once 'conexion.php';
require_once 'includes/layout.php';

page_header('Nuevo Arrendatario', 'nuevo_arrendatario');
?>

<form method="POST" action="registrar_arrendatario_guardar.php" enctype="multipart/form-data" id="formRegistro">
<?= csrf_field() ?>

<div class="row g-4">
  <div class="col-lg-8">

    <!-- ====== DATOS PERSONALES ====== -->
    <div class="card mb-4">
      <div class="card-header"><i class="bi bi-person me-2 text-primary"></i> Datos del arrendatario</div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Nombre completo *</label>
            <input id="nombre" name="nombre" class="form-control" required autocomplete="off"
                   placeholder="Escribe para buscar arriendos anteriores…">
            <div class="form-text">Si ya arrendó antes, selecciónalo y se completan sus datos.</div>
          </div>
          <div class="col-md-6">
            <label class="form-label">RUT *</label>
            <input id="rut" name="rut" class="form-control" required placeholder="12345678-9"
                   onblur="revisarRut(this)" oninput="marcarRut(this)">
            <div id="avisoListaNegra" class="alert alert-danger aviso-lista-negra mt-2 py-2 d-none" style="font-size:13px"></div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Dirección</label>
            <input id="direccion" name="direccion" class="form-control" placeholder="Comuna / ciudad">
          </div>
          <div class="col-md-3">
            <label class="form-label">Celular</label>
            <input id="celular" name="celular" class="form-control" placeholder="+56 9 ...">
          </div>
          <div class="col-md-3">
            <label class="form-label">Patente(s) vehículo</label>
            <input id="patente_vehiculo" name="patente_vehiculo" class="form-control" placeholder="ABCD12">
          </div>
          <div class="col-md-6">
            <label class="form-label">Email *</label>
            <input id="email" type="email" name="email" class="form-control" required placeholder="correo@ejemplo.cl">
            <div class="form-text">Aquí llegará la ficha de arriendo en PDF.</div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Autorizado para recibir visitas *</label>
            <select name="autorizado_visitas" class="form-select" required>
              <option value="">Seleccione…</option>
              <option value="SI">SI</option>
              <option value="NO">NO</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- ====== ACOMPAÑANTES ====== -->
    <div class="card mb-4">
      <div class="card-header d-flex align-items-center">
        <i class="bi bi-people me-2 text-primary"></i> Acompañantes
        <button type="button" class="btn btn-sm btn-outline-primary ms-auto" onclick="agregarAcomp()">
          <i class="bi bi-plus-lg"></i> Agregar
        </button>
      </div>
      <div class="card-body">
        <div id="acompanantes"></div>
        <p id="sinAcomp" class="text-secondary mb-0" style="font-size:14px">Sin acompañantes registrados.</p>
      </div>
    </div>
  </div>

  <div class="col-lg-4">

    <!-- ====== FECHAS ====== -->
    <div class="card mb-4">
      <div class="card-header"><i class="bi bi-calendar-range me-2 text-primary"></i> Estadía</div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-7">
            <label class="form-label">Fecha ingreso *</label>
            <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control" required>
          </div>
          <div class="col-5">
            <label class="form-label">Hora *</label>
            <input type="time" name="hora_ingreso" class="form-control" value="16:00" required>
          </div>
          <div class="col-7">
            <label class="form-label">Fecha salida *</label>
            <input type="date" name="fecha_salida" id="fecha_salida" class="form-control" required>
          </div>
          <div class="col-5">
            <label class="form-label">Hora *</label>
            <input type="time" name="hora_salida" class="form-control" value="12:00" required>
          </div>
        </div>
        <div id="resumenDias" class="alert alert-primary mt-3 py-2 mb-0 d-none" style="font-size:13px"></div>
      </div>
    </div>

    <!-- ====== ACCESOS ====== -->
    <div class="card mb-4">
      <div class="card-header"><i class="bi bi-key me-2 text-primary"></i> Accesos (opcional)</div>
      <div class="card-body">
        <div class="mb-3">
          <label class="form-label">Imagen código de acceso</label>
          <input type="file" name="imagen" class="form-control" accept="image/*">
          <div class="form-text">Código de la cerradura electrónica. Se envía en el correo de ingreso.</div>
        </div>
        <div>
          <label class="form-label">URL externa (QR condominio)</label>
          <input type="url" name="url_externa" class="form-control" placeholder="https://">
          <div class="form-text">Enlace de invitación (Comunidad Feliz u otro).</div>
        </div>
      </div>
    </div>

    <div class="d-grid gap-2">
      <button class="btn btn-primary py-2" id="btnGuardar">
        <i class="bi bi-check-lg me-1"></i> Registrar y enviar ficha por correo
      </button>
      <a href="propietario_dashboard.php" class="btn btn-outline-secondary">Cancelar</a>
    </div>
  </div>
</div>
</form>

<?php
$js = <<<'JS'
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>.ui-autocomplete{z-index:2000;max-height:220px;overflow-y:auto;border-radius:10px;font-size:14px}</style>
<script>
let i = 0;

/* Autocompletar arrendatario existente */
$("#nombre").autocomplete({
  minLength: 2,
  source: "buscar_arrendatarios.php",
  select: function (event, ui) {
    $("#rut").val(ui.item.rut).trigger('input');
    $("#direccion").val(ui.item.direccion);
    $("#celular").val(ui.item.celular);
    $("#email").val(ui.item.email);
    $("#patente_vehiculo").val(ui.item.patente_vehiculo);
    revisarRut(document.getElementById('rut'));

    $("#acompanantes").html('');
    i = 0;
    $.getJSON("buscar_acompanantes.php", { id_arrendatario: ui.item.id }, function (data) {
      (data || []).forEach(a => agregarAcomp(a.nombre, a.rut));
    });
  }
});

/* Acompañantes dinámicos */
function agregarAcomp(nombre = "", rut = "") {
  i++;
  $("#sinAcomp").hide();
  const fila = $(`
    <div class="row g-2 mb-2 fila-acomp">
      <div class="col-6">
        <input class="form-control acomp-nombre" name="acompanantes[${i}][nombre]" value="" placeholder="Nombre completo" autocomplete="off">
      </div>
      <div class="col-5">
        <input class="form-control" name="acompanantes[${i}][rut]" value="" placeholder="RUT" oninput="marcarRut(this)">
      </div>
      <div class="col-1 d-grid">
        <button type="button" class="btn btn-outline-danger btn-quitar" title="Quitar"><i class="bi bi-x-lg"></i></button>
      </div>
    </div>`);
  fila.find('.acomp-nombre').val(nombre);
  fila.find('input[name$="[rut]"]').val(rut);
  fila.find('.btn-quitar').on('click', function () {
    fila.remove();
    if ($('.fila-acomp').length === 0) $("#sinAcomp").show();
  });
  $("#acompanantes").append(fila);

  /* autocompletar acompañantes anteriores */
  fila.find('.acomp-nombre').autocomplete({
    minLength: 2,
    source: "buscar_acompanantes_autocomplete.php",
    select: function (event, ui) {
      $(this).val(ui.item.nombre);
      fila.find('input[name$="[rut]"]').val(ui.item.rut);
      return false;
    }
  });
}

/* Chequeo de lista negra en vivo */
function revisarRut(input) {
  marcarRut(input);
  const rut = input.value.trim();
  const aviso = document.getElementById('avisoListaNegra');
  aviso.classList.add('d-none');
  if (rut.length < 7) return;
  fetch('verificar_lista_negra.php?rut=' + encodeURIComponent(rut))
    .then(r => r.json())
    .then(d => {
      if (d.en_lista) {
        aviso.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-1"></i>' +
          '<strong>¡RUT en lista negra!</strong> ' + d.nombre + ' — ' + d.motivo +
          '<br>No podrás registrar este arriendo.';
        aviso.classList.remove('d-none');
      }
    })
    .catch(() => {});
}

/* Resumen de noches */
function actualizarDias() {
  const fi = document.getElementById('fecha_inicio').value;
  const fs = document.getElementById('fecha_salida').value;
  const box = document.getElementById('resumenDias');
  if (fi && fs) {
    const dias = Math.round((new Date(fs) - new Date(fi)) / 86400000);
    if (dias > 0) {
      box.innerHTML = '<i class="bi bi-moon-stars me-1"></i> Estadía de <strong>' + dias + '</strong> noche(s).';
      box.classList.remove('d-none', 'alert-danger');
      box.classList.add('alert-primary');
    } else {
      box.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i> La fecha de salida debe ser posterior al ingreso.';
      box.classList.remove('d-none', 'alert-primary');
      box.classList.add('alert-danger');
    }
  }
}
document.getElementById('fecha_inicio').addEventListener('change', actualizarDias);
document.getElementById('fecha_salida').addEventListener('change', actualizarDias);

/* Validación al enviar */
document.getElementById('formRegistro').addEventListener('submit', function (e) {
  const fi = document.getElementById('fecha_inicio').value;
  const fs = document.getElementById('fecha_salida').value;
  if (fi && fs && fs <= fi) {
    e.preventDefault();
    Swal.fire('Fechas incorrectas', 'La fecha de salida debe ser posterior a la de ingreso.', 'error');
    return;
  }
  if (!document.getElementById('avisoListaNegra').classList.contains('d-none')) {
    e.preventDefault();
    Swal.fire('Lista negra', 'El RUT ingresado está en la lista negra. No es posible registrar el arriendo.', 'error');
    return;
  }
  const btn = document.getElementById('btnGuardar');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Guardando y enviando correo…';
});
</script>
JS;
page_footer($js);
