<?php 
require_once 'config.php';
include "header.php"; 
?>
<?php
$mensaje = '';
$tipo_mensaje = ''; // 'exito' o 'error'

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  try {
    // Obtener conexión desde config.php
    $mysqli = getDBConnection();
    
    // Recoger y sanitizar datos del formulario
    $nombre = $mysqli->real_escape_string(trim($_POST['nombre']));
    $email = $mysqli->real_escape_string(trim($_POST['email']));
    $tipo = $mysqli->real_escape_string(trim($_POST['tipo']));
    $mensaje_texto = $mysqli->real_escape_string(trim($_POST['mensaje']));
    $fecha = date('Ymd');

    // Obtener correlativo para el día y tipo de requerimiento
    $sql_correlativo = "SELECT COUNT(*) as total FROM contactos WHERE fecha = CURDATE() AND tipo = '$tipo'";
    $resultado = $mysqli->query($sql_correlativo);
    $fila = $resultado->fetch_assoc();
    $correlativo = str_pad($fila['total'] + 1, 4, '0', STR_PAD_LEFT);

    // Número único de atención: fecha + 3 letras tipo + correlativo
    $tipo_abrev = strtoupper(substr($tipo, 0, 3));
    $numero_atencion = $fecha . "-" . $tipo_abrev . "-" . $correlativo;

    // Insertar datos en la tabla contactos
    $stmt = $mysqli->prepare("INSERT INTO contactos (nombre, email, tipo, mensaje, fecha, atencion) VALUES (?, ?, ?, ?, CURDATE(), ?)");
    $stmt->bind_param('sssss', $nombre, $email, $tipo, $mensaje_texto, $numero_atencion);
    
    if ($stmt->execute()) {
      // Enviar email de notificación interna
      $para = ADMIN_EMAIL;
      $asunto = "Nuevo(a) $tipo para SSR - Atención Nº $numero_atencion";
      $cuerpo = "Tiene un nuevo contacto del tipo: $tipo\n\nNombre: $nombre\nEmail: $email\nMensaje:\n$mensaje_texto\n\nNúmero de Atención: $numero_atencion";
      
      $cabeceras = "From: no-reply@ssrlaaguada.cl\r\n";
      $cabeceras .= "MIME-Version: 1.0\r\n";
      $cabeceras .= "Content-type: text/plain; charset=UTF-8\r\n";
      
      mail($para, $asunto, $cuerpo, $cabeceras);
      
      $mensaje = "Su requerimiento ha sido registrado con éxito. Su número de atención es: <strong>$numero_atencion</strong>";
      $tipo_mensaje = 'exito';
      
      // Registrar en log
      logError("Nuevo contacto registrado: $numero_atencion", 'INFO');
    } else {
      $mensaje = 'Hubo un error al registrar su requerimiento. Por favor, inténtelo nuevamente.';
      $tipo_mensaje = 'error';
      logError("Error al insertar contacto: " . $stmt->error, 'ERROR');
    }
    
    $stmt->close();
    
  } catch (Exception $e) {
    $mensaje = 'Error al procesar su solicitud. Por favor, inténtelo más tarde.';
    $tipo_mensaje = 'error';
    logError("Excepción en contacto.php: " . $e->getMessage(), 'ERROR');
  }
}
?>

<style>
  .contacto-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 8px;
  }
  
  .contacto-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .info-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s;
  }
  
  .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  .info-card-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
  }
  
  .info-card h3 {
    color: #1976d2;
    margin-bottom: 10px;
    font-size: 1.2em;
  }
  
  .form-group {
    margin-bottom: 25px;
  }
  
  .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 1em;
  }
  
  .form-label-required::after {
    content: ' *';
    color: #f44336;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    transition: all 0.3s;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  }
  
  .form-textarea {
    resize: vertical;
    min-height: 150px;
  }
  
  .mensaje-exito-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 5px solid #4caf50;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
    animation: slideIn 0.5s ease;
  }
  
  .mensaje-error-box {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 5px solid #f44336;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
</style>

<div class="contacto-header">
  <h1>📧 Formulario de Contacto</h1>
  <p style="color: #666; font-size: 1.1em; max-width: 700px; margin: 15px auto 0;">
    Estamos aquí para atenderte. Completa el formulario y recibe un número de atención único.
  </p>
</div>

<?php if ($mensaje): ?>
  <div class="<?php echo $tipo_mensaje === 'exito' ? 'mensaje-exito-box' : 'mensaje-error-box'; ?>">
    <div style="font-size: 2em; margin-bottom: 10px;">
      <?php echo $tipo_mensaje === 'exito' ? '✅' : '⚠️'; ?>
    </div>
    <div style="font-size: 1.1em;">
      <?php echo $mensaje; ?>
    </div>
    <?php if ($tipo_mensaje === 'exito'): ?>
      <p style="margin-top: 15px; font-size: 0.95em;">
        Recibirá una respuesta a la brevedad. Por favor, conserve su número de atención para futuras consultas.
      </p>
    <?php endif; ?>
  </div>
<?php endif; ?>

<!-- Información de contacto rápido -->
<div class="contacto-info">
  <div class="info-card">
    <div class="info-card-icon">📞</div>
    <h3>Teléfono</h3>
    <p style="color: #666;">
      <a href="tel:+56994500046" style="color: #1976d2; text-decoration: none; font-weight: 600;">
        +569 9450 0046
      </a>
    </p>
  </div>
  
  <div class="info-card">
    <div class="info-card-icon">✉️</div>
    <h3>Email</h3>
    <p style="color: #666;">
      <a href="mailto:administracion@ssrlaaguada.cl" style="color: #1976d2; text-decoration: none; font-weight: 600;">
        administracion@ssrlaaguada.cl
      </a>
    </p>
  </div>
  
  <div class="info-card">
    <div class="info-card-icon">🕒</div>
    <h3>Horario</h3>
    <p style="color: #666;">
      Lunes a Viernes<br>
      9:00 - 13:00 | 14:00 - 17:00
    </p>
  </div>
</div>

<!-- Formulario de contacto -->
<form method="post" action="contacto.php" autocomplete="off" style="max-width: 800px; margin: 0 auto;">
  <div style="background: #e3f2fd; padding: 20px; border-radius: 8px; margin-bottom: 30px;">
    <p style="color: #1976d2; margin: 0; line-height: 1.6;">
      <strong>ℹ️ Importante:</strong> Utilice este formulario para enviar sus <strong>consultas</strong>, 
      <strong>reclamos</strong> o <strong>felicitaciones</strong>. Al enviar su solicitud, recibirá un 
      número único de atención para el seguimiento de su requerimiento.
    </p>
  </div>
  
  <div class="form-group">
    <label for="nombre" class="form-label form-label-required">Nombre completo</label>
    <input type="text" id="nombre" name="nombre" class="form-input" required 
           placeholder="Ingrese su nombre completo">
  </div>

  <div class="form-group">
    <label for="email" class="form-label form-label-required">Correo electrónico</label>
    <input type="email" id="email" name="email" class="form-input" required 
           placeholder="ejemplo@correo.com">
  </div>

  <div class="form-group">
    <label for="tipo" class="form-label form-label-required">Tipo de requerimiento</label>
    <select id="tipo" name="tipo" class="form-select" required>
      <option value="">Seleccione una opción</option>
      <option value="Consulta">💬 Consulta</option>
      <option value="Reclamo">⚠️ Reclamo</option>
      <option value="Felicitaciones">⭐ Felicitaciones</option>
    </select>
  </div>

  <div class="form-group">
    <label for="mensaje" class="form-label form-label-required">Mensaje</label>
    <textarea id="mensaje" name="mensaje" class="form-textarea" required 
              placeholder="Describa su consulta, reclamo o felicitación..."></textarea>
  </div>

  <button type="submit" style="width: 100%; background: linear-gradient(135deg, #1976d2 0%, #0288d1 100%); color: white; padding: 16px 32px; border: none; border-radius: 50px; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3); text-transform: uppercase; letter-spacing: 0.5px;">
    📤 Enviar Requerimiento
  </button>
  
  <p style="text-align: center; margin-top: 20px; color: #666; font-size: 0.9em;">
    Los campos marcados con <span style="color: #f44336;">*</span> son obligatorios
  </p>
</form>

<script>
  // Validación adicional del formulario
  document.querySelector('form').addEventListener('submit', function(e) {
    const nombre = document.getElementById('nombre').value.trim();
    const email = document.getElementById('email').value.trim();
    const tipo = document.getElementById('tipo').value;
    const mensaje = document.getElementById('mensaje').value.trim();
    
    if (!nombre || !email || !tipo || !mensaje) {
      e.preventDefault();
      alert('Por favor, complete todos los campos obligatorios.');
      return false;
    }
    
    // Validar email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      e.preventDefault();
      alert('Por favor, ingrese un correo electrónico válido.');
      return false;
    }
    
    return true;
  });
</script>

<?php include "footer.php"; ?>
