356 lines
17 KiB
HTML
356 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Agendar Cita - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
/* FONDO MARSALVA */
|
|
body {
|
|
background-color: #f8fafc;
|
|
background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
|
|
background-size: 24px 24px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* UTILIDADES */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* ESTADOS DE BOTONES */
|
|
.slot-btn { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.slot-btn.selected {
|
|
background-color: #2563eb !important;
|
|
color: white !important;
|
|
border-color: #2563eb !important;
|
|
transform: scale(1.02);
|
|
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
.day-chip { transition: all 0.3s ease; border: 2px solid transparent; }
|
|
.day-chip.active {
|
|
background-color: #2563eb !important;
|
|
color: white !important;
|
|
border-color: #2563eb !important;
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 20px -8px rgba(37, 99, 235, 0.5);
|
|
}
|
|
.day-chip.inactive { background-color: white; color: #475569; border-color: #f1f5f9; }
|
|
|
|
/* TEXTURA CUBOS CABECERA */
|
|
.bg-cubes {
|
|
background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
|
|
opacity: 0.1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-slate-800 font-sans antialiased flex flex-col items-center">
|
|
|
|
<div id="loader" class="fixed inset-0 bg-slate-50 z-[100] flex flex-col items-center justify-center">
|
|
<div class="relative">
|
|
<div class="w-16 h-16 border-4 border-blue-100 border-t-blue-600 rounded-full animate-spin"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="calendar" class="w-6 h-6 text-blue-600"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-6 text-sm font-black text-slate-400 uppercase tracking-[0.2em] animate-pulse">Sincronizando Agenda...</p>
|
|
</div>
|
|
|
|
<main id="mainContent" class="hidden w-full max-w-md mx-auto min-h-screen flex flex-col relative pb-10">
|
|
|
|
<header class="bg-blue-600 p-8 pt-14 text-center relative overflow-hidden shadow-2xl mb-8 rounded-b-[3.5rem]">
|
|
<div class="absolute inset-0 bg-cubes"></div>
|
|
|
|
<button onclick="window.history.back()" class="absolute left-6 top-10 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-2xl flex items-center justify-center text-white transition-all z-20 backdrop-blur-md">
|
|
<i data-lucide="chevron-left" class="w-6 h-6"></i>
|
|
</button>
|
|
|
|
<div class="relative z-10 flex flex-col items-center">
|
|
<div class="w-14 h-14 bg-white rounded-[1.25rem] flex items-center justify-center shadow-xl mb-4 text-blue-600">
|
|
<i data-lucide="clock" class="w-7 h-7"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-black text-white tracking-tight leading-none uppercase">Reserva tu cita</h1>
|
|
<p class="text-blue-100 text-[10px] mt-3 font-bold uppercase tracking-[0.15em] opacity-80">Selecciona el tramo de llegada</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="px-6 flex-1 flex flex-col gap-8 fade-in">
|
|
|
|
<div id="step1" class="space-y-4">
|
|
<div class="flex items-center gap-2 ml-2">
|
|
<div class="w-1 h-4 bg-blue-500 rounded-full"></div>
|
|
<h3 class="font-black text-slate-400 uppercase tracking-widest text-[10px]">¿Qué turno prefieres?</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<button onclick="selectPreference('morning')" id="btnMorning" class="bg-white border-2 border-white p-6 rounded-[2.5rem] shadow-xl shadow-slate-200/50 flex flex-col items-center gap-3 hover:scale-105 transition-all text-slate-600 group">
|
|
<div class="w-14 h-14 bg-amber-50 rounded-2xl flex items-center justify-center text-amber-500 group-hover:bg-amber-500 group-hover:text-white transition-colors duration-300">
|
|
<i data-lucide="sun" class="w-7 h-7"></i>
|
|
</div>
|
|
<span class="font-black uppercase text-[11px] tracking-widest">Mañanas</span>
|
|
</button>
|
|
|
|
<button onclick="selectPreference('afternoon')" id="btnAfternoon" class="bg-white border-2 border-white p-6 rounded-[2.5rem] shadow-xl shadow-slate-200/50 flex flex-col items-center gap-3 hover:scale-105 transition-all text-slate-600 group">
|
|
<div class="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-500 group-hover:bg-indigo-500 group-hover:text-white transition-colors duration-300">
|
|
<i data-lucide="sunset" class="w-7 h-7"></i>
|
|
</div>
|
|
<span class="font-black uppercase text-[11px] tracking-widest">Tardes</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="step2" class="hidden space-y-10 fade-in">
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-2 ml-2">
|
|
<div class="w-1 h-4 bg-blue-500 rounded-full"></div>
|
|
<h3 class="font-black text-slate-400 uppercase tracking-widest text-[10px]">1. Elige un día disponible</h3>
|
|
</div>
|
|
<div id="dayCarousel" class="flex overflow-x-auto gap-4 pb-4 no-scrollbar px-1">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hoursContainer" class="hidden space-y-5 fade-in">
|
|
<div class="flex items-center justify-between px-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-1 h-4 bg-blue-500 rounded-full"></div>
|
|
<h3 class="font-black text-slate-400 uppercase tracking-widest text-[10px]">2. Ventana de llegada</h3>
|
|
</div>
|
|
<span class="text-[9px] font-black text-blue-600 bg-blue-50 px-2 py-1 rounded-lg uppercase tracking-tighter">Margen 1 hora</span>
|
|
</div>
|
|
|
|
<div id="slotsGrid" class="grid grid-cols-2 gap-4 px-1">
|
|
</div>
|
|
|
|
<div class="p-4 bg-slate-100/50 rounded-2xl border border-slate-200/50">
|
|
<p class="text-[10px] text-slate-500 leading-relaxed font-medium">
|
|
* El técnico llegará al domicilio dentro del tramo horario seleccionado. Recibirás un aviso cuando esté de camino.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-10 px-2">
|
|
<button id="btnConfirm" onclick="confirmBooking()" class="w-full bg-blue-600 text-white font-black py-5 rounded-[2rem] shadow-2xl shadow-blue-500/40 opacity-50 pointer-events-none transition-all flex justify-center items-center gap-3 uppercase tracking-[0.2em] text-xs">
|
|
Confirmar Cita <i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<div id="successScreen" class="hidden fixed inset-0 z-[100] flex-col items-center justify-center p-8 text-center bg-blue-600 text-white overflow-hidden fade-in">
|
|
<div class="absolute inset-0 bg-cubes opacity-20"></div>
|
|
|
|
<div class="w-32 h-32 bg-white text-blue-600 rounded-[3rem] flex items-center justify-center mb-10 shadow-2xl relative z-10">
|
|
<i data-lucide="calendar-check" class="w-16 h-16"></i>
|
|
</div>
|
|
|
|
<h2 class="text-4xl font-black mb-4 relative z-10 tracking-tight leading-none">¡Cita<br>Solicitada!</h2>
|
|
<p class="font-bold opacity-80 mb-12 relative z-10 max-w-xs leading-relaxed">
|
|
Hemos avisado a tu técnico. Te enviaremos una confirmación final por WhatsApp en unos minutos.
|
|
</p>
|
|
|
|
<button onclick="window.close()" class="bg-slate-900 text-white font-black py-5 px-12 rounded-[2rem] shadow-2xl uppercase text-[10px] tracking-[0.3em] relative z-10 active:scale-95 transition-transform">
|
|
Cerrar Portal
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
// CONFIGURACIÓN
|
|
const API_URL = 'https://integrarepara-api.integrarepara.es';
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const TOKEN = urlParams.get('token');
|
|
const SERVICE_ID = urlParams.get('service');
|
|
|
|
// ESTADO GLOBAL
|
|
let agendaData = [];
|
|
let currentPreference = null;
|
|
let selectedDate = null;
|
|
let selectedTime = null;
|
|
let filteredDays = [];
|
|
|
|
// INICIALIZACIÓN
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
lucide.createIcons();
|
|
if (!TOKEN || !SERVICE_ID) return alert("Enlace de cita no válido.");
|
|
await fetchAvailability();
|
|
});
|
|
|
|
// 📡 OBTENER DISPONIBILIDAD
|
|
async function fetchAvailability() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/public/portal/${TOKEN}/slots?serviceId=${SERVICE_ID}`);
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
agendaData = data.days;
|
|
document.getElementById('loader').classList.add('hidden');
|
|
document.getElementById('mainContent').classList.remove('hidden');
|
|
} else {
|
|
alert(data.error || "No hay citas disponibles para este servicio.");
|
|
}
|
|
} catch (e) {
|
|
alert("Error de conexión. Por favor, recarga la página.");
|
|
}
|
|
}
|
|
|
|
// 🌙 SELECCIONAR TURNO (MAÑANA/TARDE)
|
|
function selectPreference(pref) {
|
|
currentPreference = pref;
|
|
selectedDate = null;
|
|
selectedTime = null;
|
|
updateConfirmButton();
|
|
|
|
// Reset UI de botones grandes
|
|
document.getElementById('btnMorning').classList.remove('bg-blue-600', 'text-white', 'scale-105', 'shadow-blue-500/40');
|
|
document.getElementById('btnAfternoon').classList.remove('bg-blue-600', 'text-white', 'scale-105', 'shadow-blue-500/40');
|
|
|
|
const activeId = pref === 'morning' ? 'btnMorning' : 'btnAfternoon';
|
|
const btn = document.getElementById(activeId);
|
|
btn.classList.add('bg-blue-600', 'text-white', 'scale-105', 'shadow-blue-500/40');
|
|
|
|
// Filtrar días que tengan al menos 1 hueco en ese turno
|
|
filteredDays = agendaData.filter(day => {
|
|
return pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
|
|
});
|
|
|
|
document.getElementById('step2').classList.remove('hidden');
|
|
renderDayCarousel();
|
|
document.getElementById('hoursContainer').classList.add('hidden');
|
|
|
|
// Scroll suave hacia abajo
|
|
setTimeout(() => window.scrollTo({ top: 300, behavior: 'smooth' }), 100);
|
|
}
|
|
|
|
// 🗓️ RENDERIZAR CARRUSEL DE DÍAS
|
|
function renderDayCarousel() {
|
|
const carousel = document.getElementById('dayCarousel');
|
|
carousel.innerHTML = "";
|
|
|
|
if (filteredDays.length === 0) {
|
|
carousel.innerHTML = '<p class="text-[11px] text-slate-400 font-bold italic p-4">Lo sentimos, no hay rutas próximas en ese turno.</p>';
|
|
return;
|
|
}
|
|
|
|
filteredDays.forEach(day => {
|
|
const dObj = new Date(day.date);
|
|
const dayName = dObj.toLocaleDateString('es-ES', { weekday: 'short' }).replace('.', '').toUpperCase();
|
|
const dayNum = dObj.getDate();
|
|
const monthName = dObj.toLocaleDateString('es-ES', { month: 'short' }).toUpperCase();
|
|
const isSelected = day.date === selectedDate;
|
|
|
|
carousel.innerHTML += `
|
|
<button onclick="selectDay('${day.date}')" class="day-chip flex flex-col items-center justify-center min-w-[5.5rem] h-28 rounded-[2rem] shrink-0 ${isSelected ? 'active' : 'inactive'} shadow-lg">
|
|
<span class="text-[9px] font-black tracking-[0.2em] opacity-50 mb-1">${dayName}</span>
|
|
<span class="text-3xl font-black leading-none">${dayNum}</span>
|
|
<span class="text-[9px] font-black opacity-40 mt-1">${monthName}</span>
|
|
</button>
|
|
`;
|
|
});
|
|
}
|
|
|
|
// 📍 SELECCIONAR DÍA
|
|
function selectDay(dateStr) {
|
|
selectedDate = dateStr;
|
|
selectedTime = null;
|
|
renderDayCarousel();
|
|
renderSlots();
|
|
}
|
|
|
|
// 🕒 RENDERIZAR HUECOS HORARIOS
|
|
function renderSlots() {
|
|
updateConfirmButton();
|
|
const grid = document.getElementById('slotsGrid');
|
|
const dayObj = agendaData.find(d => d.date === selectedDate);
|
|
const slots = currentPreference === 'morning' ? dayObj.morning : dayObj.afternoon;
|
|
|
|
grid.innerHTML = slots.map(time => {
|
|
const endTime = calculateEndTime(time);
|
|
const isSelected = time === selectedTime;
|
|
return `
|
|
<button onclick="selectTime('${time}', this)" class="slot-btn bg-white border-2 border-white py-6 px-4 rounded-[2rem] shadow-xl shadow-slate-200/50 hover:border-blue-200 flex flex-col items-center justify-center gap-1">
|
|
<span class="text-[9px] uppercase tracking-widest text-slate-400 font-black">Llegada</span>
|
|
<span class="text-base font-black">${time} - ${endTime}</span>
|
|
</button>
|
|
`;
|
|
}).join('');
|
|
|
|
document.getElementById('hoursContainer').classList.remove('hidden');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// ⏱️ CÁLCULO DE VENTANA (1 HORA)
|
|
function calculateEndTime(timeStr) {
|
|
let [h, m] = timeStr.split(':').map(Number);
|
|
let totalMins = h * 60 + m + 60;
|
|
let newH = Math.floor(totalMins / 60);
|
|
let newM = totalMins % 60;
|
|
return `${String(newH).padStart(2,'0')}:${String(newM).padStart(2,'0')}`;
|
|
}
|
|
|
|
// ✅ SELECCIONAR HORA
|
|
function selectTime(time, btnEl) {
|
|
selectedTime = time;
|
|
document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));
|
|
btnEl.classList.add('selected');
|
|
updateConfirmButton();
|
|
}
|
|
|
|
// 🔘 ESTADO DEL BOTÓN CONFIRMAR
|
|
function updateConfirmButton() {
|
|
const btn = document.getElementById('btnConfirm');
|
|
if (selectedDate && selectedTime) {
|
|
btn.classList.remove('opacity-50', 'pointer-events-none');
|
|
btn.classList.add('scale-100');
|
|
} else {
|
|
btn.classList.add('opacity-50', 'pointer-events-none');
|
|
btn.classList.remove('scale-100');
|
|
}
|
|
}
|
|
|
|
// 📤 ENVIAR RESERVA AL BACKEND
|
|
async function confirmBooking() {
|
|
const btn = document.getElementById('btnConfirm');
|
|
const originalHtml = btn.innerHTML;
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Procesando...';
|
|
lucide.createIcons();
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/public/portal/${TOKEN}/book`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
serviceId: SERVICE_ID,
|
|
date: selectedDate,
|
|
time: selectedTime
|
|
})
|
|
});
|
|
|
|
if (res.ok) {
|
|
document.getElementById('mainContent').classList.add('hidden');
|
|
document.getElementById('successScreen').classList.remove('hidden');
|
|
document.getElementById('successScreen').classList.add('flex');
|
|
} else {
|
|
alert("No se ha podido confirmar el hueco. Es posible que acabe de ser reservado.");
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalHtml;
|
|
lucide.createIcons();
|
|
}
|
|
} catch(e) {
|
|
alert("Error de conexión con el servidor.");
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalHtml;
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |