2312 lines
135 KiB
HTML
2312 lines
135 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>Pacific Trans GO | Transporte Especial & Mensajería Cali - Buenaventura</title>
|
||
<meta name="description" content="Plataforma tecnológica de transporte especial intermunicipal y mensajería en el corredor Cali - Buenaventura. Agrupación inteligente de 4 pasajeros, Waze TSP y pagos 100% seguros en línea y QR Bre-B.">
|
||
<meta property="og:title" content="Pacific Trans GO - Corredor Cali ↔ Buenaventura">
|
||
<meta property="og:description" content="Servicio puerta a puerta de 4 cupos y paquetería express. Monitoreo satelital y conductores asignados por cercanía de residencia.">
|
||
<meta property="og:type" content="website">
|
||
<meta name="theme-color" content="#080c14">
|
||
|
||
<!-- PWA & Apple iOS Support -->
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="Pacific Trans GO">
|
||
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192.png">
|
||
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512.png">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
|
||
<!-- Leaflet Standard Map CSS (Local Autónomo con Fallback) -->
|
||
<link rel="stylesheet" href="css/leaflet.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- BANNER NATIVO DE ESTADO DE RED & DESCONEXIÓN EN RUTA -->
|
||
<div id="native-offline-banner" class="native-offline-banner" style="display: none;">
|
||
<div class="offline-banner-content">
|
||
<span class="offline-dot"></span>
|
||
<span>📡 Sin conexión a internet en ruta (Modo Seguro Activo). Tus datos y reservas están seguros localmente.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NAVBAR -->
|
||
<header class="navbar">
|
||
<a href="#" class="brand">
|
||
<div class="brand-badge">P</div>
|
||
<div class="brand-text">
|
||
<h1 class="brand-title">Pacific Trans <span>GO</span></h1>
|
||
<span>Cali ↔ Buenaventura</span>
|
||
</div>
|
||
</a>
|
||
|
||
<nav class="nav-links">
|
||
<a href="#reservas" id="nav-link-reservas" class="active">🚗 Viajar</a>
|
||
<a href="#fletes" id="nav-link-fletes">📦 Envíos</a>
|
||
<a href="#estadisticas" id="nav-link-reviews">⭐ Reseñas</a>
|
||
<a href="/PacifictransGo.apk" download="PacifictransGo.apk" id="nav-link-app" style="background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 999px; padding: 0.35rem 0.85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem;">📲 Descargar App</a>
|
||
|
||
<!-- Botón de apertura de Dashboard Administrativo (visible solo para Administrador) -->
|
||
<button type="button" class="btn-open-dashboard-header" id="nav-btn-open-admin" style="display: none;">
|
||
🛡️ Dashboard Administrativo
|
||
</button>
|
||
|
||
<!-- Botón de apertura de Portal Conductor (visible solo para Conductor) -->
|
||
<button type="button" class="btn-open-driver-header" id="nav-btn-open-driver" style="display: none;">
|
||
🚗 Mi Portal de Conductor
|
||
</button>
|
||
|
||
<!-- Autenticación Usuario Pacific Trans GO -->
|
||
<div id="auth-nav-container">
|
||
<button type="button" class="btn-auth-nav" id="btn-open-auth-modal">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="12" cy="7" r="4"></circle>
|
||
</svg>
|
||
<span>🔐 Ingresar / Registro</span>
|
||
</button>
|
||
<div class="user-pill-nav" id="user-profile-badge" style="display: none;">
|
||
<span style="cursor: pointer;" id="btn-open-user-profile" title="Ver y Editar Mi Información Personal">👤 <strong id="user-display-name">Usuario</strong> <span class="badge-verified" id="user-role-badge">✅ Verificado</span></span>
|
||
<button type="button" id="btn-edit-profile-nav" class="btn-logout-small" style="background: rgba(6, 182, 212, 0.18); color: #38bdf8; border: 1px solid rgba(6, 182, 212, 0.35); margin-right: 4px;" title="Editar Información Personal">⚙️ Mi Perfil</button>
|
||
<button type="button" id="btn-logout" class="btn-logout-small" title="Cerrar Sesión">Salir</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Centro de Notificaciones & Contador de Mensajes Pendientes -->
|
||
<div class="notification-wrapper" id="notif-wrapper">
|
||
<button type="button" class="btn-notif-bell" id="btn-toggle-notifs" title="Notificaciones y Mensajes Pendientes">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
||
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
||
</svg>
|
||
<span class="notif-badge" id="notif-unread-count" style="display: none;">0</span>
|
||
</button>
|
||
|
||
<!-- Dropdown de Notificaciones -->
|
||
<div class="notif-dropdown" id="notif-dropdown-panel">
|
||
<div class="notif-header">
|
||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||
<strong>🔔 Notificaciones</strong>
|
||
<span class="notif-header-badge" id="notif-header-unread" style="display: none;">0 nuevas</span>
|
||
</div>
|
||
<button type="button" class="btn-mark-all-read" id="btn-mark-all-read">Marcar leídas</button>
|
||
</div>
|
||
|
||
<div class="notif-list" id="notif-items-list">
|
||
<!-- Renderizado dinámicamente por app.js -->
|
||
</div>
|
||
|
||
<div class="notif-footer">
|
||
<a href="#" target="_blank" id="notif-wa-link" style="color: var(--accent-cyan); text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem;">
|
||
<span>💬 Contactar a Central de Soporte WhatsApp</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- HERO SECTION -->
|
||
<main>
|
||
<!-- VISTA 1: PORTAL PÚBLICO LIMPIO (CLIENTES Y PASAJEROS) -->
|
||
<div id="view-public-portal">
|
||
<!-- HERO SECTION -->
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<div class="hero-pill">
|
||
<span>⚡ Corredor Exclusivo Especial</span>
|
||
<span>•</span>
|
||
<span>100% Seguro con QR Bre-B y En Línea</span>
|
||
</div>
|
||
<h2 class="hero-title">Transporte Puerta a Puerta y Mensajería Express <span>Cali - Buenaventura</span></h2>
|
||
<p class="hero-desc">
|
||
Viajes agrupados inteligentemente en vehículos de 4 pasajeros. Salidas puntuales, geolocalización satelital en tiempo real, optimización de rutas TSP con Waze y asignación de conductores según cercanía de su residencia.
|
||
</p>
|
||
|
||
<div class="hero-badges">
|
||
<div class="badge-item">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="9" cy="7" r="4"></circle>
|
||
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||
</svg>
|
||
<span><strong>4 Cupos</strong> por Vehículo</span>
|
||
</div>
|
||
|
||
<div class="badge-item">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||
</svg>
|
||
<span><strong>$35.000 COP</strong> Tarifa Fija</span>
|
||
</div>
|
||
|
||
<div class="badge-item">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
<span>Seguro Contractual & Pagos Seguros</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||
<a href="#reservas" id="hero-btn-book" class="btn-primary" style="width: auto; padding: 0.9rem 1.8rem;">
|
||
🚗 Reservar Mi Cupo Ahora
|
||
</a>
|
||
<a href="#fletes" id="hero-btn-flete" class="btn-primary" style="width: auto; padding: 0.9rem 1.8rem; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border-glass);">
|
||
📦 Cotizar Flete de Encomienda
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-visual">
|
||
<div class="visual-container">
|
||
<img src="/images/hero-banner.jpg" alt="Pacific Trans GO Cali Buenaventura" class="hero-image">
|
||
|
||
<div class="floating-pool-card">
|
||
<div class="pool-status-row">
|
||
<div>
|
||
<span style="font-size: 0.75rem; text-transform: uppercase; color: var(--accent-cyan); font-weight: 700; letter-spacing: 0.05em;">Agrupación en Vivo</span>
|
||
<div style="font-weight: 700; font-size: 1.05rem;" id="seat-counter-text">3/4 Pasajeros Confirmados</div>
|
||
</div>
|
||
<div class="pool-seats">
|
||
<div class="seat-dot active">1</div>
|
||
<div class="seat-dot active">2</div>
|
||
<div class="seat-dot active">3</div>
|
||
<div class="seat-dot pending">4</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.4;">
|
||
📍 Recogida en Cali: <strong>Puerta a puerta en su domicilio</strong>.<br>
|
||
🏁 Llegada en Buenaventura: <strong>Terminal, Muelle Turístico o El Piñal</strong>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SERVICIOS PÚBLICOS PRINCIPALES (SELECTOR ELEGANTE) -->
|
||
<div class="main-wrapper" id="reservas">
|
||
<div class="public-service-switcher">
|
||
<button type="button" class="service-pill-btn active" id="btn-service-pasajeros" data-target="tab-pasajeros">
|
||
🚗 1. Viajes de Pasajeros Puerta a Puerta
|
||
</button>
|
||
<button type="button" class="service-pill-btn" id="btn-service-fletes" data-target="tab-fletes">
|
||
📦 2. Mensajería & Fletes Especiales
|
||
</button>
|
||
</div>
|
||
|
||
<!-- TAB 1: RESERVA PASAJEROS -->
|
||
<section class="tab-content active" id="tab-pasajeros">
|
||
<div class="glass-panel">
|
||
<div class="panel-header">
|
||
<h2>Reserva de Cupo de Transporte</h2>
|
||
<p>Servicio especial intermunicipal puerta a puerta entre Cali y Buenaventura en vehículos ejecutivos de 4 pasajeros.</p>
|
||
</div>
|
||
|
||
<div class="grid-2col">
|
||
<!-- Formulario de Reserva -->
|
||
<div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="pool-origin">Sentido del Viaje</label>
|
||
<select class="form-select" id="pool-origin">
|
||
<option value="CALI">Cali ➔ Buenaventura (Recogida Domicilio)</option>
|
||
<option value="BUENAVENTURA">Buenaventura ➔ Cali (Puntos Oficiales)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" id="cali-address-group">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
||
<label class="form-label" for="cali-address" style="margin-bottom: 0;">Dirección Principal de Recogida en Cali (Domicilio)</label>
|
||
<button type="button" id="btn-native-gps-cali" class="btn-gps-chip" title="Detectar mi ubicación exacta por GPS satelital">
|
||
📍 Mi Ubicación GPS
|
||
</button>
|
||
</div>
|
||
<input type="text" class="form-input" id="cali-address" placeholder="Ej: Calle 5 #66-20, Barrio Limonar, Cali" value="">
|
||
</div>
|
||
|
||
<div class="form-group" id="buena-stop-group">
|
||
<label class="form-label" for="buena-stop">Parada de Destino en Buenaventura</label>
|
||
<select class="form-select" id="buena-stop">
|
||
<option value="TERMINAL">Terminal de Transporte de Buenaventura</option>
|
||
<option value="MUELLE">Muelle Turístico</option>
|
||
<option value="PINAL">El Piñal</option>
|
||
<option value="SENA">Sena Buenaventura</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- MODALIDAD DE TIEMPO DEL VIAJE: INMEDIATO VS PROGRAMADO -->
|
||
<div class="time-modality-container" id="pool-time-modality-container">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
|
||
<label class="form-label" style="margin-bottom: 0; display: flex; align-items: center; gap: 0.4rem;">
|
||
<span>🕒</span> Horario del Servicio
|
||
</label>
|
||
<span id="pool-time-badge" class="badge-time-selected">⚡ Salida Inmediata</span>
|
||
</div>
|
||
|
||
<div class="time-mode-selector">
|
||
<button type="button" class="btn-time-mode active" id="btn-pool-mode-immediate" data-mode="INMEDIATO">
|
||
<span style="font-size: 1.35rem;">⚡</span>
|
||
<div>
|
||
<div style="font-weight: 700; font-size: 0.92rem;">Salida Inmediata</div>
|
||
<div style="font-size: 0.75rem; color: #94a3b8;">Asignación prioritaria ya</div>
|
||
</div>
|
||
</button>
|
||
|
||
<button type="button" class="btn-time-mode" id="btn-pool-mode-scheduled" data-mode="PROGRAMADO">
|
||
<span style="font-size: 1.35rem;">📅</span>
|
||
<div>
|
||
<div style="font-weight: 700; font-size: 0.92rem;">Viaje Programado</div>
|
||
<div style="font-size: 0.75rem; color: #94a3b8;">Planifica fecha y hora</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- OPCIONES DE PROGRAMACIÓN (Ocultas por defecto si es Inmediato) -->
|
||
<div class="scheduled-options-card" id="pool-scheduled-options" style="display: none; margin-top: 1rem;">
|
||
<div style="font-size: 0.85rem; font-weight: 600; color: #38bdf8; margin-bottom: 0.75rem;">
|
||
📅 Especifica tu tiempo de viaje:
|
||
</div>
|
||
|
||
<!-- Radio: Hora de Recogida vs Hora Requerida en Destino -->
|
||
<div style="display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem;">
|
||
<label class="radio-schedule-type" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||
<input type="radio" name="pool-schedule-type" id="pool-type-recogida" value="HORA_RECOGIDA" checked>
|
||
<span style="font-size: 0.88rem; color: #fff;">🚪 <strong>Hora deseada de recogida</strong> (a la puerta de tu domicilio)</span>
|
||
</label>
|
||
|
||
<label class="radio-schedule-type" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||
<input type="radio" name="pool-schedule-type" id="pool-type-destino" value="HORA_LLEGADA_DESTINO">
|
||
<span style="font-size: 0.88rem; color: #fff;">🏁 <strong>Hora que requiero estar en el destino</strong> (Pacific Trans calcula la hora de recogida)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 0.75rem; margin-bottom: 0.5rem;">
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label" for="pool-schedule-date" style="font-size: 0.82rem;">Fecha del Servicio</label>
|
||
<input type="date" class="form-input" id="pool-schedule-date" style="padding: 0.65rem 0.85rem; font-size: 0.9rem;">
|
||
</div>
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label" for="pool-schedule-time" id="pool-label-time" style="font-size: 0.82rem;">Hora de Recogida</label>
|
||
<input type="time" class="form-input" id="pool-schedule-time" style="padding: 0.65rem 0.85rem; font-size: 0.9rem;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Caja inteligente de cálculo de ETA / Hora sugerida -->
|
||
<div class="smart-eta-box" id="pool-smart-eta" style="margin-top: 0.85rem; font-size: 0.82rem; padding: 0.65rem 0.85rem; background: rgba(6, 182, 212, 0.08); border-left: 3px solid var(--accent-cyan); border-radius: 4px; display: none;">
|
||
<!-- Se llena con JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SELECTOR DE CANTIDAD DE CUPOS (1 a 4 Pasajeros) -->
|
||
<div class="form-group" style="margin-top: 1.25rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
|
||
<label class="form-label" style="margin-bottom: 0;">👥 ¿Cuántos cupos deseas reservar?</label>
|
||
<span id="badge-cupos-selected" class="badge-seats-counter">1 Cupo Seleccionado</span>
|
||
</div>
|
||
<div class="seat-qty-selector" id="seat-qty-selector">
|
||
<button type="button" class="btn-qty-seat active" data-seats="1">
|
||
<span class="seat-qty-number">1</span>
|
||
<span class="seat-qty-desc">Solo Yo</span>
|
||
</button>
|
||
<button type="button" class="btn-qty-seat" data-seats="2">
|
||
<span class="seat-qty-number">2</span>
|
||
<span class="seat-qty-desc">2 Cupos</span>
|
||
</button>
|
||
<button type="button" class="btn-qty-seat" data-seats="3">
|
||
<span class="seat-qty-number">3</span>
|
||
<span class="seat-qty-desc">3 Cupos</span>
|
||
</button>
|
||
<button type="button" class="btn-qty-seat" data-seats="4">
|
||
<span class="seat-qty-number">4</span>
|
||
<span class="seat-qty-desc">Vehículo 4/4</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTENEDOR DINÁMICO DE DATOS DE CADA PASAJERO -->
|
||
<div style="margin-top: 1.25rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
||
<label class="form-label" style="margin-bottom: 0;">📋 Información de los Pasajeros</label>
|
||
<span style="font-size: 0.75rem; color: #94a3b8;">Requerido para Seguro SOAT y Planilla</span>
|
||
</div>
|
||
<div id="passengers-cards-container" style="display: flex; flex-direction: column; gap: 1rem;">
|
||
<!-- Se genera dinámicamente con JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SELECTOR DE MÉTODO DE PAGO -->
|
||
<div class="form-group" style="margin-top: 1.5rem;">
|
||
<label class="form-label">💳 Método de Pago</label>
|
||
<div class="payment-method-selector" id="payment-method-options">
|
||
<label class="payment-method-card active" data-method="BRE_B">
|
||
<input type="radio" name="pool-payment-radio" value="BRE_B" checked>
|
||
<div class="payment-card-body">
|
||
<span class="payment-title">⚡ Transferencia QR Bre-B</span>
|
||
<span class="payment-sub">Inmediato 24/7 (Cualquier banco o billetera)</span>
|
||
</div>
|
||
</label>
|
||
<label class="payment-method-card" data-method="BOLD">
|
||
<input type="radio" name="pool-payment-radio" value="BOLD">
|
||
<div class="payment-card-body">
|
||
<span class="payment-title">💳 Pago en Línea</span>
|
||
<span class="payment-sub">Tarjetas Débito / Crédito, PSE y Nequi</span>
|
||
</div>
|
||
</label>
|
||
<label class="payment-method-card" data-method="EFECTIVO">
|
||
<input type="radio" name="pool-payment-radio" value="EFECTIVO">
|
||
<div class="payment-card-body">
|
||
<span class="payment-title">💵 Efectivo al Conductor</span>
|
||
<span class="payment-sub">Pagas directamente al abordar el vehículo</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BONO O CUPÓN DE DESCUENTO (PASAJEROS) -->
|
||
<div class="coupon-input-group" style="margin-top: 1.25rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
|
||
<label class="form-label" for="pool-coupon-code" style="margin-bottom: 0; font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem;">
|
||
<span>🎟️</span> ¿Tienes un Bono o Cupón de Descuento?
|
||
</label>
|
||
<span style="font-size: 0.72rem; color: #38bdf8; font-weight: 600;">(Ej: PACIFICO10, BONOVIAJE5K)</span>
|
||
</div>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="text" class="form-input" id="pool-coupon-code" placeholder="Código (ej: PACIFICO10)" style="text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0;">
|
||
<button type="button" class="btn-toggle-payment" id="btn-apply-pool-coupon" style="white-space: nowrap; padding: 0.5rem 1.2rem; font-weight: 700;">
|
||
Aplicar
|
||
</button>
|
||
</div>
|
||
<div id="pool-coupon-feedback" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Resumen y Pasarela Bold -->
|
||
<div class="summary-box">
|
||
<div>
|
||
<h3 style="font-size: 1.25rem; color: #fff; margin-bottom: 1rem;">Resumen de la Reserva</h3>
|
||
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Servicio:</span>
|
||
<span style="color: #fff; font-weight: 600;">Transporte Especial Intermunicipal</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Capacidad del Vehículo:</span>
|
||
<span style="color: #fff; font-weight: 600;" id="summary-capacity-text">Máximo 4 Pasajeros (1 cupo solicitado)</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Cupos a Reservar:</span>
|
||
<span style="color: var(--accent-cyan); font-weight: 700;" id="summary-seats-pill">1 Pasajero (1 cupo)</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Recogida Puerta a Puerta:</span>
|
||
<span style="color: var(--accent-cyan); font-weight: 600;">Incluida en Cali</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Seguro Contractual:</span>
|
||
<span style="color: var(--accent-emerald); font-weight: 600;">Póliza y Planilla SOAT</span>
|
||
</div>
|
||
<div class="summary-item" id="pool-summary-schedule-row">
|
||
<span style="color: var(--text-muted);">Modalidad y Horario:</span>
|
||
<span style="color: #fff; font-weight: 600;" id="pool-summary-schedule-text">⚡ Inmediato (Próxima Salida)</span>
|
||
</div>
|
||
|
||
<div class="summary-item" id="summary-subtotal-row" style="display: none; border-top: 1px dashed var(--border-glass); padding-top: 0.5rem; margin-top: 0.5rem;">
|
||
<span style="color: var(--text-muted);">Subtotal:</span>
|
||
<span style="color: #fff; font-weight: 600;" id="summary-subtotal-price">$35.000 COP</span>
|
||
</div>
|
||
|
||
<div class="summary-discount-row" id="summary-discount-row" style="display: none;">
|
||
<span>🎟️ Descuento Cupón:</span>
|
||
<span id="summary-discount-amount">- $0 COP</span>
|
||
</div>
|
||
|
||
<div class="bold-gateway-badge" id="summary-gateway-badge">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="2" y="5" width="20" height="14" rx="2"></rect>
|
||
<line x1="2" y1="10" x2="22" y2="10"></line>
|
||
</svg>
|
||
<span id="summary-gateway-badge-text">⚡ Transferencia directa por <strong>QR Bre-B</strong> o Pago en Línea Seguro</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="summary-total" style="display: flex; justify-content: space-between; align-items: baseline;">
|
||
<span style="font-weight: 600; color: #fff;" id="summary-price-label">Total a Pagar (1 Cupo):</span>
|
||
<span class="total-price" id="summary-total-price">$35.000 COP</span>
|
||
</div>
|
||
|
||
<button class="btn-primary" id="btn-book-pool" style="margin-top: 1rem;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
|
||
</svg>
|
||
<span id="btn-book-text">Confirmar y Pagar 1 Cupo ($35.000 COP)</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alerta tras completar cupo o confirmación -->
|
||
<div id="pool-dispatch-alert" style="display: none; margin-top: 2rem; background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.4); border-radius: 14px; padding: 1.5rem;">
|
||
<div style="display: flex; gap: 1rem; align-items: flex-start;">
|
||
<span style="font-size: 2.2rem;" id="alert-icon">🚗💨</span>
|
||
<div style="flex: 1;">
|
||
<h4 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.4rem;" id="alert-title">¡Reserva de Cupos Confirmada!</h4>
|
||
<p style="color: #cbd5e1; font-size: 0.92rem; margin-bottom: 0.75rem;" id="alert-message">
|
||
Tu reserva ha sido procesada exitosamente en el sistema de pooling inteligente de Pacific Trans GO.
|
||
</p>
|
||
<div id="alert-passengers-breakdown" style="margin-bottom: 0.75rem; font-size: 0.88rem; color: #e2e8f0;"></div>
|
||
<div id="alert-bold-payment-area" style="display: none; margin-top: 1rem;"></div>
|
||
<div style="font-size: 0.85rem; color: #94a3b8;" id="alert-footer-note">
|
||
📲 Notificaciones de confirmación e itinerario enviadas por WhatsApp oficial (+57 316 745 5877).
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TAB 2: FLETES Y ENCOMIENDAS -->
|
||
<section class="tab-content" id="tab-fletes">
|
||
<div class="glass-panel">
|
||
<div class="panel-header">
|
||
<h2>Cotizador Inteligente de Mensajería & Fletes</h2>
|
||
<p>Envíos seguros en el corredor Cali - Buenaventura. Tarifa exacta calculada por distancia, factor de peso/volumen y seguro obligatorio.</p>
|
||
</div>
|
||
|
||
<div class="grid-2col">
|
||
<div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="package-type">Tipo de Encomienda / Paquete</label>
|
||
<select class="form-select" id="package-type">
|
||
<option value="1.0">Sobre / Documentos Urgentes (Factor 1.0)</option>
|
||
<option value="1.2" selected>Paquete Pequeño (hasta 5 kg) - Factor 1.2</option>
|
||
<option value="1.6">Paquete Mediano (hasta 15 kg) - Factor 1.6</option>
|
||
<option value="2.2">Carga Grande / Caja Pesada (hasta 30 kg) - Factor 2.2</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="declared-value">Valor Declarado de la Mercancía ($ COP)</label>
|
||
<input type="number" class="form-input" id="declared-value" placeholder="100000" value="150000">
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">El seguro corresponde al 1% del valor declarado ante extravío o siniestro.</span>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="sender-name">Nombre del Remitente</label>
|
||
<input type="text" class="form-input" id="sender-name" placeholder="Ej: Carlos Almeira" value="">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="sender-phone">Teléfono Remitente (WhatsApp)</label>
|
||
<input type="tel" class="form-input" id="sender-phone" placeholder="Ej: 300 123 4567" value="">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="receiver-phone">Teléfono Destinatario (WhatsApp)</label>
|
||
<input type="tel" class="form-input" id="receiver-phone" placeholder="Ej: 310 987 6543" value="">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="package-desc">Descripción del Contenido</label>
|
||
<input type="text" class="form-input" id="package-desc" placeholder="Repuestos automotrices / Ropa / Medicamentos">
|
||
</div>
|
||
|
||
<!-- DIRECCIONES DE RECOGIDA Y ENTREGA CON UBICACIÓN GPS -->
|
||
<div class="form-group">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
||
<label class="form-label" for="freight-pickup-address" style="margin-bottom: 0;">📍 Dirección de Recogida del Paquete (Origen)</label>
|
||
<button type="button" id="btn-freight-gps-pickup" class="btn-gps-chip" title="Detectar mi ubicación actual para la recogida del paquete">
|
||
📍 Mi Ubicación Actual
|
||
</button>
|
||
</div>
|
||
<input type="text" class="form-input" id="freight-pickup-address" placeholder="Ej: Calle 5 #66-20, Cali (o pulsa 'Mi Ubicación Actual')">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
||
<label class="form-label" for="freight-delivery-address" style="margin-bottom: 0;">🏁 Dirección de Entrega del Paquete (Destino)</label>
|
||
<button type="button" id="btn-freight-gps-delivery" class="btn-gps-chip" title="Detectar mi ubicación actual para la entrega del paquete">
|
||
📍 Mi Ubicación Actual
|
||
</button>
|
||
</div>
|
||
<input type="text" class="form-input" id="freight-delivery-address" placeholder="Ej: Terminal Buenaventura, Muelle o Dirección exacta">
|
||
</div>
|
||
|
||
<!-- MODALIDAD DE DESPACHO DE ENCOMIENDA: URGENTE INMEDIATO VS PROGRAMADO -->
|
||
<div class="time-modality-container" id="freight-time-modality-container">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
|
||
<label class="form-label" style="margin-bottom: 0; display: flex; align-items: center; gap: 0.4rem;">
|
||
<span>⚡</span> Modalidad de Entrega del Envío
|
||
</label>
|
||
<span id="freight-time-badge" class="badge-time-selected" style="color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.15);">🚨 Envío Urgente Inmediato</span>
|
||
</div>
|
||
|
||
<div class="time-mode-selector">
|
||
<button type="button" class="btn-time-mode active" id="btn-freight-mode-urgent" data-mode="URGENTE" style="border-color: rgba(251, 191, 36, 0.4);">
|
||
<span style="font-size: 1.35rem;">🚨</span>
|
||
<div>
|
||
<div style="font-weight: 700; font-size: 0.92rem; color: #fbbf24;">Envío Urgente Inmediato</div>
|
||
<div style="font-size: 0.75rem; color: #94a3b8;" id="freight-urgent-surcharge-hint">Despacho en el primer carro (+<span id="freight-urgent-amount-label">$15.000</span>)</div>
|
||
</div>
|
||
</button>
|
||
|
||
<button type="button" class="btn-time-mode" id="btn-freight-mode-scheduled" data-mode="PROGRAMADO">
|
||
<span style="font-size: 1.35rem;">📅</span>
|
||
<div>
|
||
<div style="font-weight: 700; font-size: 0.92rem;">Envío Programado</div>
|
||
<div style="font-size: 0.75rem; color: #94a3b8;">Sin recargo de urgencia</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- OPCIONES DE PROGRAMACIÓN FLETES (Ocultas si es Urgente) -->
|
||
<div class="scheduled-options-card" id="freight-scheduled-options" style="display: none; margin-top: 1rem;">
|
||
<div style="font-size: 0.85rem; font-weight: 600; color: #fbbf24; margin-bottom: 0.75rem;">
|
||
📅 Especifica fecha y hora de tu encomienda:
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem;">
|
||
<label class="radio-schedule-type" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||
<input type="radio" name="freight-schedule-type" id="freight-type-recogida" value="HORA_RECOGIDA" checked>
|
||
<span style="font-size: 0.88rem; color: #fff;">📦 <strong>Hora deseada de recogida del paquete</strong></span>
|
||
</label>
|
||
|
||
<label class="radio-schedule-type" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||
<input type="radio" name="freight-schedule-type" id="freight-type-destino" value="HORA_LLEGADA_DESTINO">
|
||
<span style="font-size: 0.88rem; color: #fff;">🏁 <strong>Hora que se requiere entregado en destino</strong></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 0.75rem; margin-bottom: 0.5rem;">
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label" for="freight-schedule-date" style="font-size: 0.82rem;">Fecha de Despacho/Entrega</label>
|
||
<input type="date" class="form-input" id="freight-schedule-date" style="padding: 0.65rem 0.85rem; font-size: 0.9rem;">
|
||
</div>
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label" for="freight-schedule-time" id="freight-label-time" style="font-size: 0.82rem;">Hora de Recogida</label>
|
||
<input type="time" class="form-input" id="freight-schedule-time" style="padding: 0.65rem 0.85rem; font-size: 0.9rem;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="smart-eta-box" id="freight-smart-eta" style="margin-top: 0.85rem; font-size: 0.82rem; padding: 0.65rem 0.85rem; background: rgba(251, 191, 36, 0.08); border-left: 3px solid var(--accent-amber); border-radius: 4px; display: none;">
|
||
<!-- Se llena con JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BONO O CUPÓN DE DESCUENTO (ENCOMIENDAS) -->
|
||
<div class="coupon-input-group" style="margin-top: 1.25rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
|
||
<label class="form-label" for="freight-coupon-code" style="margin-bottom: 0; font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem;">
|
||
<span>🎟️</span> ¿Tienes un Bono o Cupón para tu Envío?
|
||
</label>
|
||
<span style="font-size: 0.72rem; color: #fbbf24; font-weight: 600;">(Ej: ENVIOYA, PACIFICO10)</span>
|
||
</div>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="text" class="form-input" id="freight-coupon-code" placeholder="Código de cupón (ej: ENVIOYA)" style="text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0;">
|
||
<button type="button" class="btn-toggle-payment" id="btn-apply-freight-coupon" style="white-space: nowrap; padding: 0.5rem 1.2rem; font-weight: 700;">
|
||
Aplicar
|
||
</button>
|
||
</div>
|
||
<div id="freight-coupon-feedback" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-box">
|
||
<div>
|
||
<h3 style="font-size: 1.25rem; color: #fff; margin-bottom: 1rem;">Fórmula Oficial de Liquidación</h3>
|
||
<div style="background: rgba(0,0,0,0.4); border-radius: 8px; padding: 0.75rem; font-family: monospace; font-size: 0.8rem; color: #38bdf8; margin-bottom: 1rem;">
|
||
Tarifa = (Base + [115 Km × $1.200]) × Factor + Seguro + Recargo Urgencia
|
||
</div>
|
||
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Tarifa Base Logística:</span>
|
||
<span style="color: #fff; font-weight: 600;" id="freight-base-cost">$25.000 COP</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Costo por Distancia (115 km):</span>
|
||
<span style="color: #fff; font-weight: 600;" id="freight-dist-cost">$165.600 COP</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Seguro de Mercancía:</span>
|
||
<span style="color: var(--accent-emerald); font-weight: 600;" id="freight-insurance-cost">$1.500 COP</span>
|
||
</div>
|
||
<div class="summary-item" id="freight-summary-urgent-row" style="display: flex;">
|
||
<span style="color: var(--text-muted);">Recargo Envío Urgente:</span>
|
||
<span style="color: #fbbf24; font-weight: 700;" id="freight-urgent-cost">+$15.000 COP</span>
|
||
</div>
|
||
<div class="summary-item" id="freight-summary-schedule-row" style="display: none;">
|
||
<span style="color: var(--text-muted);">Modalidad y Horario:</span>
|
||
<span style="color: #38bdf8; font-weight: 600;" id="freight-summary-schedule-text">📅 Programado</span>
|
||
</div>
|
||
|
||
<div class="summary-item" id="freight-subtotal-row" style="display: none; border-top: 1px dashed var(--border-glass); padding-top: 0.5rem; margin-top: 0.5rem;">
|
||
<span style="color: var(--text-muted);">Subtotal Flete:</span>
|
||
<span style="color: #fff; font-weight: 600;" id="freight-subtotal-price">$197.100 COP</span>
|
||
</div>
|
||
|
||
<div class="summary-discount-row" id="freight-discount-row" style="display: none;">
|
||
<span>🎟️ Descuento Cupón:</span>
|
||
<span id="freight-discount-amount">- $0 COP</span>
|
||
</div>
|
||
|
||
<div class="bold-gateway-badge">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
<span>100% Prepagado antes del despacho con Pago en Línea o QR Bre-B</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="summary-total">
|
||
<span style="font-weight: 600; color: #fff;">Flete Total Liquidado:</span>
|
||
<span class="total-price" id="freight-total-price">$197.100 COP</span>
|
||
</div>
|
||
|
||
<button class="btn-primary" id="btn-book-freight" style="margin-top: 1rem;">
|
||
Generar Guía y Proceder al Pago
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</div> <!-- /main-wrapper (servicios publicos) -->
|
||
|
||
<!-- TAB 4: ESTADÍSTICAS & RESEÑAS -->
|
||
<section class="main-wrapper reviews-section" id="estadisticas" style="padding-top: 0.5rem;">
|
||
<div class="glass-panel">
|
||
<div class="panel-header">
|
||
<h2>Estadísticas Oficiales & Calificaciones de la Comunidad</h2>
|
||
<p>Métricas transparentes de puntualidad, seguridad y satisfacción en el corredor Cali - Buenaventura tanto para pasajeros como para conductores.</p>
|
||
</div>
|
||
|
||
<!-- Métricas Globales del Corredor -->
|
||
<div class="stats-overview-grid">
|
||
<div class="stat-kpi-card">
|
||
<div class="stat-kpi-icon">🚗</div>
|
||
<div class="stat-kpi-val" id="stat-total-viajes">384+</div>
|
||
<div class="stat-kpi-label">Viajes Completados</div>
|
||
<div class="stat-kpi-sub">Corredor Cali ↔ Buenaventura</div>
|
||
</div>
|
||
|
||
<div class="stat-kpi-card">
|
||
<div class="stat-kpi-icon">⭐</div>
|
||
<div class="stat-kpi-val" id="stat-rating-avg">4.9 / 5.0</div>
|
||
<div class="stat-kpi-label">Satisfacción General</div>
|
||
<div class="stat-kpi-sub">Basado en 128+ calificaciones</div>
|
||
</div>
|
||
|
||
<div class="stat-kpi-card">
|
||
<div class="stat-kpi-icon">⏱️</div>
|
||
<div class="stat-kpi-val" id="stat-puntualidad">98.4%</div>
|
||
<div class="stat-kpi-label">Índice de Puntualidad</div>
|
||
<div class="stat-kpi-sub">Recogidas a tiempo en Cali</div>
|
||
</div>
|
||
|
||
<div class="stat-kpi-card">
|
||
<div class="stat-kpi-icon">🛡️</div>
|
||
<div class="stat-kpi-val" id="stat-conductores-activos">18</div>
|
||
<div class="stat-kpi-label">Conductores Verificados</div>
|
||
<div class="stat-kpi-sub">Pólizas y antecedentes al día</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Comparativa Analítica: Pasajeros vs Conductores -->
|
||
<div class="grid-2col">
|
||
<!-- Bloque Pasajeros -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 14px; padding: 1.5rem;">
|
||
<h3 style="color: var(--accent-cyan); font-size: 1.15rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>👥</span> Métricas Clave para Pasajeros
|
||
</h3>
|
||
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Tasa de Satisfacción Pasajeros:</span>
|
||
<span style="color: #fff; font-weight: 700;">99.2% de aprobación</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Tiempo Promedio en Ruta (Vía 40):</span>
|
||
<span style="color: #fff; font-weight: 700;">2h 15m puerta a puerta</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Cupos de Transporte Reservados:</span>
|
||
<span style="color: var(--accent-cyan); font-weight: 700;">1.536 cupos completados</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Seguridad Calificada por Usuarios:</span>
|
||
<span style="color: #10b981; font-weight: 700;">5.0 / 5.0 (Cero siniestros)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bloque Conductores -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 14px; padding: 1.5rem;">
|
||
<h3 style="color: var(--accent-amber); font-size: 1.15rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🚗</span> Métricas Clave para Conductores
|
||
</h3>
|
||
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Tasa de Ocupación por Salida:</span>
|
||
<span style="color: #fff; font-weight: 700;">4 / 4 cupos (100% de ocupación)</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Ingreso Neto Promedio por Viaje:</span>
|
||
<span style="color: #10b981; font-weight: 700;">$119.000 COP netos</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Tasa de Aceptación de Despacho:</span>
|
||
<span style="color: #fff; font-weight: 700;">97.8% de cumplimiento</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span style="color: var(--text-muted);">Calificación Promedio de Conductores:</span>
|
||
<span style="color: #fbbf24; font-weight: 700;">4.9 ⭐ (Excelente servicio)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Muro de Reseñas y Testimonios -->
|
||
<div class="reviews-container">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
|
||
<div>
|
||
<h3 style="color: #fff; font-size: 1.35rem; margin-bottom: 0.25rem;">Opiniones y Calificaciones de la Comunidad</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.9rem;">Experiencias verificadas de pasajeros y conductores en la ruta Cali - Buenaventura.</p>
|
||
</div>
|
||
|
||
<button type="button" class="btn-primary" id="btn-open-review-modal" style="width: auto; padding: 0.75rem 1.4rem;">
|
||
✍️ Calificar un Viaje o Conductor
|
||
</button>
|
||
</div>
|
||
|
||
<div class="reviews-grid" id="reviews-list-grid">
|
||
<!-- Renderizado dinámicamente con app.js -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECCIÓN DESCARGA APK -->
|
||
|
||
|
||
<!-- SECCIÓN DESCARGA APK -->
|
||
<section class="download-card" id="descarga-apk">
|
||
<div>
|
||
<span style="color: #22c55e; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em;">App Oficial Android</span>
|
||
<h3 style="font-size: 2.2rem; color: #fff; margin-top: 0.25rem; margin-bottom: 0.75rem;">Pacific Trans GO Móvil</h3>
|
||
<p style="color: var(--text-muted); max-width: 500px; font-size: 1rem;">
|
||
Instala la aplicación nativa en tu dispositivo Android. Accede a navegación por Waze en un toque, pagos instantáneos con QR Bre-B o en línea y seguimiento en vivo de tu viaje.
|
||
</p>
|
||
</div>
|
||
|
||
<a href="/PacifictransGo.apk" class="btn-apk-large" id="btn-download-apk-footer">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-1.0001s.4482-1.0001.9993-1.0001c.552 0 1.0001.4486 1.0001 1.0001s-.4481 1.0001-1.0001 1.0001m-11.046 0c-.5511 0-.9993-.4486-.9993-1.0001s.4482-1.0001.9993-1.0001c.552 0 1.0001.4486 1.0001 1.0001s-.4481 1.0001-1.0001 1.0001m11.4045-6.02l1.997-3.4589c.1408-.2439.0573-.5552-.1866-.696-.2438-.1408-.5551-.0573-.696.1866l-2.0238 3.5054c-1.5037-.6873-3.1979-1.0772-4.9691-1.0772s-3.4654.3899-4.9691 1.0772l-2.0238-3.5054c-.1409-.2439-.4522-.3274-.696-.1866-.2439.1408-.3274.4521-.1866.696l1.997 3.4589c-3.7997 2.0623-6.375 5.9863-6.446 10.5369h24.646c-.071-4.5506-2.6463-8.4746-6.446-10.5369"/>
|
||
</svg>
|
||
Descargar App
|
||
</a>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
|
||
</div> <!-- /view-public-portal -->
|
||
|
||
|
||
<!-- VISTA 2: DASHBOARD EXCLUSIVO PARA ADMINISTRADORES -->
|
||
<div id="view-admin-dashboard" class="admin-dashboard-container" style="display: none;">
|
||
<!-- ESCUDO DE SEGURIDAD SI NO ES ADMINISTRADOR -->
|
||
<div id="admin-security-gate" class="security-shield-card" style="display: none;">
|
||
<div class="security-shield-icon">🛡️</div>
|
||
<h2 style="color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem;">Zona Restringida: Central de Mando Administrativo</h2>
|
||
<p style="color: #cbd5e1; font-size: 0.95rem; margin-bottom: 1.5rem;">
|
||
Esta central de control, radar satelital y despacho financiero Bre-B requiere permisos exclusivos con rol de <strong>Administrador</strong>.
|
||
</p>
|
||
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||
<button type="button" class="btn-primary" id="btn-gate-admin-login" style="width: auto; padding: 0.75rem 1.75rem;">
|
||
🔐 Iniciar Sesión como Administrador
|
||
</button>
|
||
<button type="button" class="btn-return-public" id="btn-gate-back-public" style="width: auto; padding: 0.75rem 1.5rem;">
|
||
← Volver al Sitio Público
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONSOLA EJECUTIVA ADMINISTRATIVA -->
|
||
<div id="admin-console-content">
|
||
<!-- TOPBAR EJECUTIVO DE CONTROL -->
|
||
<div class="admin-topbar">
|
||
<div class="admin-topbar-title">
|
||
<span class="brand-badge" style="width: 38px; height: 38px; font-size: 1rem;">🛡️</span>
|
||
<div>
|
||
<h2 style="color: #fff; font-size: 1.35rem; margin: 0; line-height: 1.2;">
|
||
Central de Mando Administrativo & Despacho
|
||
</h2>
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; flex-wrap: wrap;">
|
||
<span class="admin-status-indicator">● Radar GPS Conectado</span>
|
||
<span class="admin-wa-badge" id="admin-wa-group-badge">👥 Grupo: Pacific Trans Notificaciones</span>
|
||
<span style="font-size: 0.8rem; color: #94a3b8;">Admin: <strong style="color: #fff;" id="admin-user-name">Administrador General</strong></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
|
||
<button type="button" class="btn-return-public" id="btn-admin-view-public">
|
||
🌐 Ver Portal Público
|
||
</button>
|
||
<button type="button" class="btn-logout-small" id="btn-admin-logout" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
|
||
Cerrar Sesión
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BARRA DE MENÚ DE NAVEGACIÓN ADMINISTRATIVA POR ROLES -->
|
||
<nav class="role-nav-menubar" id="admin-role-nav-menubar">
|
||
<div class="menubar-items">
|
||
<button type="button" id="btn-admin-subtab-radar" class="menu-item-btn active" data-subtab="radar">
|
||
<span class="menu-item-icon">🛰️</span>
|
||
<span class="menu-item-label">Radar Satelital & Despacho</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
<button type="button" id="btn-admin-subtab-liquidaciones" class="menu-item-btn" data-subtab="liquidaciones">
|
||
<span class="menu-item-icon">💰</span>
|
||
<span class="menu-item-label">Liquidaciones & Bre-B</span>
|
||
<span id="admin-payouts-badge" class="menu-badge" style="display:none;">0</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
<button type="button" id="btn-admin-subtab-tarifas" class="menu-item-btn" data-subtab="tarifas">
|
||
<span class="menu-item-icon">⚙️</span>
|
||
<span class="menu-item-label">Tarifas Base & Canales</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
<button type="button" id="btn-admin-subtab-cupones" class="menu-item-btn" data-subtab="cupones">
|
||
<span class="menu-item-icon">🎟️</span>
|
||
<span class="menu-item-label">Bonos & Cupones</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
<button type="button" id="btn-admin-subtab-administradores" class="menu-item-btn" data-subtab="administradores">
|
||
<span class="menu-item-icon">👥</span>
|
||
<span class="menu-item-label">Equipo de Administradores</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
<button type="button" id="btn-admin-subtab-facturacion" class="menu-item-btn" data-subtab="facturacion">
|
||
<span class="menu-item-icon">📑</span>
|
||
<span class="menu-item-label">Cierres & Facturación DIAN</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- CONTENEDOR PRINCIPAL DE MÓDULOS ADMINISTRATIVOS -->
|
||
<div class="glass-panel" id="admin-modules-container" style="padding: 1.5rem;">
|
||
|
||
<!-- SUB-PANEL 1: RADAR SATELITAL GPS & MAPA ESTÁNDAR CON TOOLTIPS -->
|
||
<div id="admin-view-radar">
|
||
<div class="radar-map-wrapper">
|
||
<div class="radar-map-header">
|
||
<div class="radar-live-indicator">
|
||
<span class="live-dot"></span>
|
||
<div>
|
||
<strong>Radar Satelital en Mapa Estándar</strong>
|
||
<div style="font-size: 0.78rem; color: #94a3b8;">Ubicación geográfica en tiempo real y telemetría de flota (Cali - Buenaventura)</div>
|
||
</div>
|
||
</div>
|
||
<div class="radar-stats-quick">
|
||
<span id="map-fleet-count">4 Vehículos en Flota</span>
|
||
<span>•</span>
|
||
<span style="color: var(--accent-emerald);">🟢 GPS Activo</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTENEDOR DEL MAPA LEAFLET -->
|
||
<div id="fleet-live-map"></div>
|
||
</div>
|
||
|
||
<!-- Sugerencia de Conductores por Residencia -->
|
||
<div style="margin-top: 1.5rem;">
|
||
<h3 style="font-size: 1.25rem; color: #fff; margin-bottom: 0.5rem;">Conductores Sugeridos para el Viaje Actual</h3>
|
||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem;">
|
||
Ordenados según la cercanía entre su domicilio registrado en Cali y la 1ª recogida del grupo de pasajeros.
|
||
</p>
|
||
|
||
<div id="suggested-drivers-list">
|
||
<!-- Renderizado dinámicamente por app.js -->
|
||
</div>
|
||
|
||
<div id="schedule-dispatch-result" style="display: none; margin-top: 1.5rem;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUB-PANEL 2: CONFIGURACIÓN DE TARIFAS Y CANALES OFICIALES -->
|
||
<div id="admin-view-tarifas" style="display: none;">
|
||
<form id="form-tariffs-config">
|
||
|
||
<!-- CANALES OFICIALES & WHATSAPP CONFIG (CON GRUPOS SEPARADOS POR APP) -->
|
||
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem;">
|
||
<h3 style="color: #38bdf8; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>👥</span> Canales de Atención & Grupos de WhatsApp por App
|
||
</h3>
|
||
<button type="button" class="btn-toggle-payment" id="btn-detect-wa-groups" style="font-size: 0.8rem; padding: 0.35rem 0.85rem;">
|
||
🔍 Auto-Detectar Grupos en WhatsApp
|
||
</button>
|
||
</div>
|
||
<p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.25rem;">
|
||
Las notificaciones operativas y de despacho de viajes de Pacific Trans GO se envían automáticamente al grupo oficial <strong>Pacific Trans Notificaciones</strong>.
|
||
</p>
|
||
|
||
<div class="form-group" style="margin-bottom: 1rem;">
|
||
<label class="form-label" for="cfg-group-pacifictrans">👥 Grupo WhatsApp Oficial: Pacific Trans GO</label>
|
||
<input type="text" class="form-input" id="cfg-group-pacifictrans" value="Pacific Trans Notificaciones" placeholder="Pacific Trans Notificaciones" required>
|
||
<span id="badge-pacific-jid" style="font-size: 0.75rem; color: #34d399; margin-top: 4px; display: block;">✓ Conectado a grupo oficial de despacho</span>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1.25rem; margin-bottom: 0;">
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label" for="cfg-admin-phone">Número de WhatsApp Administrador (+57)</label>
|
||
<input type="tel" class="form-input" id="cfg-admin-phone" value="" placeholder="Ej: 573001234567" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Número de WhatsApp oficial para alertas prioritarias directas.</span>
|
||
</div>
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label" for="cfg-admin-name">Nombre del Canal de Atención</label>
|
||
<input type="text" class="form-input" id="cfg-admin-name" value="Atención Pacific Trans GO" placeholder="Atención Pacific Trans GO" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Identificador en enlaces y botones de soporte.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="grid-2col">
|
||
<!-- Columna 1: Transporte de Pasajeros y Plataforma -->
|
||
<div>
|
||
<h3 style="color: var(--accent-cyan); font-size: 1.15rem; margin-bottom: 1.25rem;">👥 Transporte de Pasajeros</h3>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-tarifa-pasajero">Tarifa Fija por Pasajero ($ COP)</label>
|
||
<input type="number" class="form-input" id="cfg-tarifa-pasajero" value="35000" min="5000" step="1000" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Cobro fijo por cupo en vehículo de 4 pasajeros Cali ↔ Buenaventura.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-radio-pooling">Radio Máximo de Agrupación en Cali (Metros)</label>
|
||
<input type="number" class="form-input" id="cfg-radio-pooling" value="4000" min="500" step="500" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Distancia máxima geoespacial ($near) para agrupar pasajeros en el mismo vehículo.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-penalidad">Penalidad por Cancelación Tardía ($ COP)</label>
|
||
<input type="number" class="form-input" id="cfg-penalidad" value="15000" min="0" step="1000" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Cobro de penalidad si el usuario cancela con viaje ya asignado/activo.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-comision">Comisión de la Plataforma (%)</label>
|
||
<input type="number" class="form-input" id="cfg-comision" value="15" min="0" max="50" step="1" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Porcentaje retenido por Pacific Trans GO sobre cada servicio completado.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Columna 2: Mensajería y Fletes -->
|
||
<div>
|
||
<h3 style="color: var(--accent-amber); font-size: 1.15rem; margin-bottom: 1.25rem;">📦 Mensajería y Fletes Especiales</h3>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-base-paquete">Tarifa Base Logística ($ COP)</label>
|
||
<input type="number" class="form-input" id="cfg-base-paquete" value="25000" min="5000" step="1000" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Costo base fijo de recepción y despacho de paquetería.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-km-paquete">Costo por Kilómetro Recorrido ($ COP / Km)</label>
|
||
<input type="number" class="form-input" id="cfg-km-paquete" value="1200" min="100" step="50" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Multiplicador por distancia en el corredor (115 km Cali-Buenaventura).</span>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-factor-sobre">Factor Sobre (Doc.)</label>
|
||
<input type="number" class="form-input" id="cfg-factor-sobre" value="1.0" min="0.5" max="3" step="0.1" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-factor-mediano">Factor Mediano (15kg)</label>
|
||
<input type="number" class="form-input" id="cfg-factor-mediano" value="1.6" min="0.5" max="5" step="0.1" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-factor-grande">Factor Grande (30kg)</label>
|
||
<input type="number" class="form-input" id="cfg-factor-grande" value="2.2" min="1" max="10" step="0.1" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="cfg-seguro-base">Seguro Base ($ COP)</label>
|
||
<input type="number" class="form-input" id="cfg-seguro-base" value="5000" min="0" step="500" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-top: 1rem;">
|
||
<label class="form-label" for="cfg-recargo-urgente">🚨 Recargo por Envío Urgente Inmediato ($ COP)</label>
|
||
<input type="number" class="form-input" id="cfg-recargo-urgente" value="15000" min="0" step="1000" required>
|
||
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Valor adicional cobrado para fletes y encomiendas que solicitan despacho inmediato prioritario.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Botón de Guardado y Estado -->
|
||
<div style="margin-top: 2rem; border-top: 1px solid var(--border-glass); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
||
<div id="tariffs-save-status" style="font-size: 0.92rem; color: #94a3b8;">
|
||
💾 Configuración y tarifas sincronizadas con MongoDB.
|
||
</div>
|
||
<button type="submit" class="btn-primary" id="btn-save-tariffs" style="width: auto; padding: 0.9rem 2.5rem;">
|
||
💾 Guardar y Aplicar Configuración
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- SUB-PANEL 3: CONTROL DE PAGOS, COMISIONES & TRANSFERENCIAS BRE-B -->
|
||
<div id="admin-view-liquidaciones" style="display: none;">
|
||
<!-- BANNER INFORMATIVO BRE-B -->
|
||
<div style="background: linear-gradient(135deg, rgba(30, 27, 75, 0.85), rgba(88, 28, 135, 0.5)); border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
||
<div>
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
|
||
<span class="breb-brand-badge">⚡ Bre-B BANREP</span>
|
||
<strong style="color: #fff; font-size: 1.15rem;">Control Financiero & Pagos Interoperables</strong>
|
||
</div>
|
||
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 650px;">
|
||
Monitorea el estado de pago individual de cada pasajero (en línea o efectivo). Al terminar el recorrido, la plataforma calcula la comisión oficial (15%) y asigna automáticamente el saldo al conductor para transferencias inmediatas 24/7 vía <strong>Bre-B</strong>.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<button type="button" id="btn-refresh-settlements" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem;">
|
||
🔄 Actualizar Balances
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPIS GLOBALES DE RECAUDO Y COMISIONES -->
|
||
<div class="financial-summary-grid">
|
||
<div class="fin-metric-card" style="border-top: 3px solid #06b6d4;">
|
||
<div class="fin-metric-label">Recaudo Online Plataforma</div>
|
||
<div class="fin-metric-val" id="metric-recaudo-plataforma" style="color: #38bdf8;">$0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">En Línea / Bre-B</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #f59e0b;">
|
||
<div class="fin-metric-label">Recaudos en Efectivo</div>
|
||
<div class="fin-metric-val" id="metric-recaudo-efectivo" style="color: #fbbf24;">$0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Cobrado en Mano por Chofer</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #10b981;">
|
||
<div class="fin-metric-label">Comisión Pacific Trans GO (15%)</div>
|
||
<div class="fin-metric-val" id="metric-comision-total" style="color: #34d399;">$0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Ingresos Operativos</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #ec4899;">
|
||
<div class="fin-metric-label">Transferido vía Bre-B</div>
|
||
<div class="fin-metric-val" id="metric-transferido-breb" style="color: #f472b6;">$0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Pagos Inmediatos 24/7</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BANDEJA DE CONTROL DE SOLICITUDES DE TRANSFERENCIA BRE-B (ADMINISTRACIÓN) -->
|
||
<div style="background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(236, 72, 153, 0.35); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;">
|
||
<div>
|
||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||
<span class="breb-brand-badge">⚡ Control Bre-B</span>
|
||
<h3 style="color: #fff; font-size: 1.25rem; margin: 0;">
|
||
Solicitudes de Transferencia de Conductores
|
||
</h3>
|
||
</div>
|
||
<p style="color: var(--text-muted); font-size: 0.85rem; margin: 0.35rem 0 0;">
|
||
Bandeja de solicitudes enviadas por los conductores. El administrador encargado autoriza y ejecuta la transferencia inmediata por <strong>Bre-B</strong>.
|
||
</p>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
|
||
<select id="filter-payout-requests-status" class="form-select" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.82rem;">
|
||
<option value="TODAS">Todas las Solicitudes</option>
|
||
<option value="PENDIENTE" selected>🟡 Solo Pendientes</option>
|
||
<option value="TRANSFERIDA_BRE_B">🟢 Transferidas Bre-B</option>
|
||
<option value="RECHAZADA">🔴 Rechazadas</option>
|
||
</select>
|
||
<button type="button" id="btn-refresh-payout-requests" class="btn-toggle-payment" style="padding: 0.4rem 0.85rem; font-size: 0.82rem;">
|
||
🔄 Actualizar Solicitudes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTENEDOR DE SOLICITUDES -->
|
||
<div id="admin-payout-requests-list">
|
||
<div style="text-align: center; padding: 2rem; color: #94a3b8;">
|
||
Consultando solicitudes de transferencia...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GESTIÓN DEL VIAJE PLANIFICADO SELECCIONADO -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;">
|
||
<div>
|
||
<h3 style="color: #fff; font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🚗</span> Control de Pagos del Viaje Planificado
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.85rem; margin: 0.25rem 0 0;">
|
||
Verifica qué pasajero ya pagó en línea y quién tiene pago pendiente en efectivo al abordar.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label for="select-trip-to-settle" style="font-size: 0.8rem; color: var(--text-muted); margin-right: 0.5rem;">Seleccionar Viaje:</label>
|
||
<select id="select-trip-to-settle" class="form-select" style="width: auto; display: inline-block; padding: 0.45rem 1rem;">
|
||
<!-- Cargado dinámicamente con app.js -->
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTENEDOR DINÁMICO DEL DETALLE DEL VIAJE -->
|
||
<div id="trip-settlement-detail-container">
|
||
<div style="text-align: center; padding: 2rem; color: #94a3b8;">
|
||
Cargando información del viaje planificado...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HISTORIAL DE VIAJES LIQUIDADOS RECIENTES -->
|
||
<div style="background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>📋</span> Historial de Recorridos Completados & Liquidaciones
|
||
</h3>
|
||
<div id="settlements-history-list">
|
||
<!-- Renderizado por app.js -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUB-PANEL 4: SISTEMA DE BONOS Y CUPONES DE DESCUENTO -->
|
||
<div id="admin-view-cupones" style="display: none;">
|
||
<!-- BANNER INFORMATIVO CUPONES -->
|
||
<div style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(14, 165, 233, 0.2)); border: 1px solid rgba(14, 165, 233, 0.35); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
||
<div>
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
|
||
<span style="font-size: 1.4rem;">🎟️</span>
|
||
<strong style="color: #fff; font-size: 1.15rem;">Sistema Centralizado de Bonos & Cupones de Descuento</strong>
|
||
</div>
|
||
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 680px;">
|
||
Crea y administra promociones para el corredor Cali - Buenaventura. Define descuentos en <strong>Porcentaje (%)</strong> o <strong>Monto Fijo ($ COP)</strong> aplicables a viajes de pasajeros, encomiendas o ambos.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<button type="button" id="btn-refresh-coupons" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem;">
|
||
🔄 Actualizar Cupones
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPIS DE CUPONES -->
|
||
<div class="financial-summary-grid" style="margin-bottom: 1.75rem;">
|
||
<div class="fin-metric-card" style="border-top: 3px solid #38bdf8;">
|
||
<div class="fin-metric-label">Total Cupones Creados</div>
|
||
<div class="fin-metric-val" id="kpi-total-coupons" style="color: #38bdf8;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">En base de datos MongoDB</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #34d399;">
|
||
<div class="fin-metric-label">Cupones Activos</div>
|
||
<div class="fin-metric-val" id="kpi-active-coupons" style="color: #34d399;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Listos para canje inmediato</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #f59e0b;">
|
||
<div class="fin-metric-label">Total de Canjes</div>
|
||
<div class="fin-metric-val" id="kpi-redeemed-coupons" style="color: #fbbf24;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Usados en reservas o envíos</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #c084fc;">
|
||
<div class="fin-metric-label">Modalidades de Bono</div>
|
||
<div class="fin-metric-val" style="color: #c084fc; font-size: 1.25rem; font-weight: 700; margin-top: 0.35rem;">% y $ COP</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Porcentaje y Monto Fijo</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem;">
|
||
<!-- FORMULARIO DE CREACIÓN DE CUPÓN -->
|
||
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<h3 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>➕</span> Crear Nuevo Bono / Cupón de Descuento
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||
Completa los datos para habilitar una nueva promoción en la pasarela y en las reservas directas.
|
||
</p>
|
||
|
||
<form id="form-create-coupon">
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-code-input">Código Promocional (Mayúsculas) *</label>
|
||
<input type="text" class="form-input" id="coupon-code-input" placeholder="Ej: CALIBUENA15" style="text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em;" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-desc-input">Descripción / Motivo de la Campaña</label>
|
||
<input type="text" class="form-input" id="coupon-desc-input" placeholder="Ej: 15% de descuento especial por lanzamiento">
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-type-select">Tipo de Descuento *</label>
|
||
<select class="form-select" id="coupon-type-select">
|
||
<option value="PORCENTAJE">Porcentaje (% de Descuento)</option>
|
||
<option value="MONTO_FIJO">Monto Fijo ($ COP de Descuento)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-value-input" id="label-coupon-value">Valor (% Descuento) *</label>
|
||
<input type="number" class="form-input" id="coupon-value-input" placeholder="Ej: 15" min="1" step="1" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-service-select">Aplica Para *</label>
|
||
<select class="form-select" id="coupon-service-select">
|
||
<option value="TODOS">🌟 Todos (Viajes y Encomiendas)</option>
|
||
<option value="VIAJES">🚗 Exclusivo Viajes de Pasajeros</option>
|
||
<option value="ENCOMIENDAS">📦 Exclusivo Fletes de Encomiendas</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-min-subtotal">Subtotal Mínimo ($ COP)</label>
|
||
<input type="number" class="form-input" id="coupon-min-subtotal" placeholder="0 (Sin mínimo)" min="0" step="1000" value="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-usage-limit">Límite Máximo de Canjes</label>
|
||
<input type="number" class="form-input" id="coupon-usage-limit" placeholder="Dejar vacío para ilimitado" min="1" step="1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="coupon-exp-date">Fecha de Expiración</label>
|
||
<input type="date" class="form-input" id="coupon-exp-date">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="same-address-toggle" for="coupon-active-check" style="margin-bottom: 0;">
|
||
<input type="checkbox" id="coupon-active-check" checked>
|
||
<span>🟢 Activar cupón inmediatamente para su uso público</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div id="coupon-form-feedback" style="display: none; margin-bottom: 1rem;"></div>
|
||
|
||
<button type="submit" class="btn-primary" id="btn-submit-coupon" style="margin-top: 0.5rem;">
|
||
➕ Crear y Publicar Cupón de Descuento
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- LISTADO DE CUPONES VIGENTES -->
|
||
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🎟️</span> Catálogo de Cupones en MongoDB
|
||
</h3>
|
||
<span style="font-size: 0.8rem; color: #94a3b8;" id="coupons-counter-label">Cargando...</span>
|
||
</div>
|
||
|
||
<div class="coupons-table-responsive">
|
||
<table class="coupons-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Código</th>
|
||
<th>Descuento</th>
|
||
<th>Aplica Para</th>
|
||
<th>Canjes / Límite</th>
|
||
<th>Estado</th>
|
||
<th>Acción</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="coupons-table-body">
|
||
<tr>
|
||
<td colspan="6" style="text-align: center; padding: 2rem; color: #94a3b8;">
|
||
Cargando catálogo de cupones...
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUB-PANEL 5: EQUIPO DE ADMINISTRADORES (GESTIÓN SUPERADMINISTRADOR) -->
|
||
<div id="admin-view-administradores" style="display: none;">
|
||
<!-- BANNER GESTIÓN DE ADMINISTRADORES -->
|
||
<div style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(245, 158, 11, 0.18)); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
||
<div>
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
|
||
<span class="superadmin-badge">👑 Superadministrador</span>
|
||
<strong style="color: #fff; font-size: 1.15rem;">Gestión del Equipo de Administradores & Control de Acceso</strong>
|
||
</div>
|
||
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 720px;">
|
||
El <strong>Superadministrador Principal</strong> es la autoridad máxima permanente e inmutable. Desde aquí puedes registrar nuevos administradores u operadores, actualizar sus permisos, activarlos o inactivarlos, o removerlos del sistema.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<button type="button" id="btn-refresh-administrators" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem;">
|
||
🔄 Actualizar Equipo
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPIS DE ADMINISTRACIÓN -->
|
||
<div class="financial-summary-grid" style="margin-bottom: 1.75rem;">
|
||
<div class="fin-metric-card" style="border-top: 3px solid #fbbf24;">
|
||
<div class="fin-metric-label">Superadministrador</div>
|
||
<div class="fin-metric-val" style="color: #fbbf24; font-size: 1.15rem; margin-top: 0.35rem;">Superadministrador</div>
|
||
<span style="font-size: 0.72rem; color: #34d399;">🔒 Permanente e Inmutable</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #38bdf8;">
|
||
<div class="fin-metric-label">Administradores Activos</div>
|
||
<div class="fin-metric-val" id="kpi-admins-count" style="color: #38bdf8;">1</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Con acceso a Central de Mando</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #c084fc;">
|
||
<div class="fin-metric-label">Operadores de Despacho</div>
|
||
<div class="fin-metric-val" id="kpi-operators-count" style="color: #c084fc;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Monitoreo y asignación de ruta</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #10b981;">
|
||
<div class="fin-metric-label">Autenticación Requerida</div>
|
||
<div class="fin-metric-val" style="color: #34d399; font-size: 1.15rem; margin-top: 0.35rem;">100% OTP</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">WhatsApp 2FA Obligatorio</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem;">
|
||
<!-- FORMULARIO REGISTRAR ADMINISTRADOR -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<h3 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>➕</span> Registrar Nuevo Administrador
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||
Asigna privilegios de administración u operador de despacho a un nuevo colaborador.
|
||
</p>
|
||
|
||
<form id="form-create-admin">
|
||
<div class="form-group">
|
||
<label class="form-label" for="new-admin-name">Nombre y Apellidos *</label>
|
||
<input type="text" class="form-input" id="new-admin-name" placeholder="Ej: Diana Marcela López" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="new-admin-phone">WhatsApp / Celular (+57) *</label>
|
||
<input type="tel" class="form-input" id="new-admin-phone" placeholder="Ej: 315 123 4567" required>
|
||
<span style="font-size: 0.73rem; color: var(--text-dim); margin-top: 3px; display: block;">
|
||
Identificador de acceso y destino obligatorio para el código OTP de ingreso.
|
||
</span>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="new-admin-doc">Documento (C.C.)</label>
|
||
<input type="text" class="form-input" id="new-admin-doc" placeholder="Ej: 1144123456">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="new-admin-email">Correo Electrónico</label>
|
||
<input type="email" class="form-input" id="new-admin-email" placeholder="admin@pacifictrans.almeira.com.co">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="new-admin-role">Rol y Nivel de Permisos *</label>
|
||
<select class="form-select" id="new-admin-role">
|
||
<option value="ADMIN">🛡️ ADMINISTRADOR (Control total de panel, tarifas y liquidaciones)</option>
|
||
<option value="OPERADOR">🎧 OPERADOR (Monitoreo de radar satelital y despacho de viajes)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="admin-create-feedback" style="display: none; margin-bottom: 1rem;"></div>
|
||
|
||
<button type="submit" class="btn-primary" id="btn-submit-new-admin" style="margin-top: 0.5rem;">
|
||
➕ Registrar Administrador
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- LISTADO DE ADMINISTRADORES -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🛡️</span> Administradores & Operadores Autorizados
|
||
</h3>
|
||
<span style="font-size: 0.8rem; color: #94a3b8;" id="admins-counter-label">Cargando...</span>
|
||
</div>
|
||
|
||
<div class="coupons-table-responsive">
|
||
<table class="coupons-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Administrador</th>
|
||
<th>WhatsApp (OTP)</th>
|
||
<th>Rol</th>
|
||
<th>Estado</th>
|
||
<th>Acción</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-administrators-body">
|
||
<tr>
|
||
<td colspan="5" style="text-align: center; padding: 2rem; color: #94a3b8;">
|
||
Cargando equipo de administradores...
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUB-PANEL 6: CIERRES MENSUALES & FACTURACIÓN DIAN -->
|
||
<div id="admin-view-facturacion" style="display: none;">
|
||
<!-- BANNER GESTIÓN DE FACTURACIÓN -->
|
||
<div style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(16, 185, 129, 0.18)); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
||
<div>
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
|
||
<span class="superadmin-badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399; border-color: #10b981;">📑 Facturación & Fiscal</span>
|
||
<strong style="color: #fff; font-size: 1.15rem;">Consolidación Mensual de Comisiones & Reportes DIAN</strong>
|
||
</div>
|
||
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 760px;">
|
||
Consolidación oficial de comisiones de software cobradas a cada conductor por mes calendario. Estructurado para facilitar el copiado/pegado masivo o importación en el <strong>portal gratuito de la DIAN</strong> y futura transición a proveedor tecnológico (API).
|
||
</p>
|
||
</div>
|
||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||
<button type="button" id="btn-billing-run-cut" class="btn-primary" style="padding: 0.6rem 1.25rem; font-size: 0.85rem; width: auto; background: linear-gradient(135deg, #10b981, #059669);">
|
||
⚡ Ejecutar Corte Mensual Ahora
|
||
</button>
|
||
<button type="button" id="btn-billing-download-csv" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem; font-size: 0.85rem; width: auto; background: rgba(56, 189, 248, 0.15); border-color: #38bdf8; color: #38bdf8;">
|
||
📥 Descargar CSV para DIAN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BARRA DE FILTROS Y CONTROL DE PERÍODO -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.75rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
|
||
<div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
|
||
<div>
|
||
<label style="font-size: 0.75rem; color: #94a3b8; display: block; margin-bottom: 0.25rem;">Mes Calendario:</label>
|
||
<select id="select-billing-month" class="form-input" style="padding: 0.45rem 0.75rem; font-size: 0.88rem; width: auto; background: #0f172a; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;">
|
||
<option value="1">01 - Enero</option>
|
||
<option value="2">02 - Febrero</option>
|
||
<option value="3">03 - Marzo</option>
|
||
<option value="4">04 - Abril</option>
|
||
<option value="5">05 - Mayo</option>
|
||
<option value="6">06 - Junio</option>
|
||
<option value="7">07 - Julio</option>
|
||
<option value="8">08 - Agosto</option>
|
||
<option value="9">09 - Septiembre</option>
|
||
<option value="10" selected>10 - Octubre</option>
|
||
<option value="11">11 - Noviembre</option>
|
||
<option value="12">12 - Diciembre</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label style="font-size: 0.75rem; color: #94a3b8; display: block; margin-bottom: 0.25rem;">Año Calendario:</label>
|
||
<select id="select-billing-year" class="form-input" style="padding: 0.45rem 0.75rem; font-size: 0.88rem; width: auto; background: #0f172a; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;">
|
||
<option value="2025">2025</option>
|
||
<option value="2026" selected>2026</option>
|
||
<option value="2027">2027</option>
|
||
</select>
|
||
</div>
|
||
<div style="align-self: flex-end;">
|
||
<button type="button" id="btn-billing-filter" class="btn-toggle-payment" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
|
||
🔄 Consultar Período
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ACCIONES EN MASA -->
|
||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||
<button type="button" id="btn-billing-mark-invoiced" class="btn-primary" style="padding: 0.5rem 1.15rem; font-size: 0.85rem; width: auto; background: #0284c7;" disabled>
|
||
✅ Marcar Seleccionados como Facturado Manual
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPIS DE FACTURACIÓN -->
|
||
<div class="financial-summary-grid" style="margin-bottom: 1.75rem;">
|
||
<div class="fin-metric-card" style="border-top: 3px solid #10b981;">
|
||
<div class="fin-metric-label">Conductores Liquidados</div>
|
||
<div class="fin-metric-val" id="kpi-billing-conductores" style="color: #34d399;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Con corte en este período</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #38bdf8;">
|
||
<div class="fin-metric-label">Total Comisiones de Software</div>
|
||
<div class="fin-metric-val" id="kpi-billing-total-comisiones" style="color: #38bdf8;">$0</div>
|
||
<span style="font-size: 0.72rem; color: #34d399;">Base de facturación (no viajes)</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #fbbf24;">
|
||
<div class="fin-metric-label">Total Viajes Realizados</div>
|
||
<div class="fin-metric-val" id="kpi-billing-total-viajes" style="color: #fbbf24;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;">Agrupados en el mes</span>
|
||
</div>
|
||
<div class="fin-metric-card" style="border-top: 3px solid #ec4899;">
|
||
<div class="fin-metric-label">Pendientes por Facturar</div>
|
||
<div class="fin-metric-val" id="kpi-billing-pendientes" style="color: #f43f5e;">0</div>
|
||
<span style="font-size: 0.72rem; color: #94a3b8;" id="kpi-billing-facturados-label">0 facturados manual</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TABLA DE CIERRES MENSUALES -->
|
||
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>📋</span> Consolidado de Cierres para la DIAN
|
||
</h3>
|
||
<span id="billing-results-badge" style="font-size: 0.8rem; color: #94a3b8;">0 registros</span>
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40px; text-align: center;">
|
||
<input type="checkbox" id="chk-billing-select-all" title="Seleccionar todos">
|
||
</th>
|
||
<th>ID Cierre</th>
|
||
<th>NIT / Cédula</th>
|
||
<th>Conductor (Razón Social)</th>
|
||
<th>Correo Electrónico</th>
|
||
<th>Total Comisión</th>
|
||
<th>Cantidad Viajes</th>
|
||
<th>Estado Facturación</th>
|
||
<th>Fecha Cierre</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-billing-cierres-body">
|
||
<tr>
|
||
<td colspan="9" style="text-align: center; padding: 2rem; color: #94a3b8;">
|
||
Cargando información fiscal...
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- VISTA 3: PORTAL DEDICADO DE CONDUCTORES -->
|
||
<div id="view-driver-portal" class="admin-dashboard-container" style="display: none;">
|
||
<!-- ESCUDO DE SEGURIDAD SI NO ES CONDUCTOR -->
|
||
<div id="driver-security-gate" class="security-shield-card" style="display: none;">
|
||
<div class="security-shield-icon">🚗</div>
|
||
<h2 style="color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem;">Portal Exclusivo para Conductores Vinculados</h2>
|
||
<p style="color: #cbd5e1; font-size: 0.95rem; margin-bottom: 1.5rem;">
|
||
Esta consola está reservada para choferes registrados en la flota de Pacific Trans GO. Inicia sesión con tu número de conductor para acceder a tu billetera y transferencias Bre-B.
|
||
</p>
|
||
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||
<button type="button" class="btn-primary" id="btn-gate-driver-login" style="width: auto; padding: 0.75rem 1.75rem;">
|
||
🚗 Iniciar Sesión como Conductor
|
||
</button>
|
||
<button type="button" class="btn-return-public" id="btn-gate-driver-back" style="width: auto; padding: 0.75rem 1.5rem;">
|
||
← Volver al Sitio Público
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONSOLA OPERATIVA DEL CONDUCTOR -->
|
||
<div id="driver-console-content">
|
||
<div class="admin-topbar">
|
||
<div class="admin-topbar-title">
|
||
<span class="brand-badge" style="width: 38px; height: 38px; font-size: 1rem; background: linear-gradient(135deg, #06b6d4, #10b981);">🚗</span>
|
||
<div>
|
||
<h2 style="color: #fff; font-size: 1.35rem; margin: 0; line-height: 1.2;">
|
||
Consola Oficial del Conductor
|
||
</h2>
|
||
<div style="display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; flex-wrap: wrap;">
|
||
<span class="admin-status-indicator">● Chofer Activo</span>
|
||
<span style="font-size: 0.8rem; color: #94a3b8;">Conductor: <strong style="color: #fff;" id="driver-topbar-name">Mario Fernando Gómez (WLZ-890)</strong></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
|
||
<button type="button" class="btn-return-public" id="btn-driver-view-public">
|
||
🌐 Ver Portal Público
|
||
</button>
|
||
<button type="button" class="btn-logout-small" id="btn-driver-logout" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
|
||
Cerrar Sesión
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BARRA DE MENÚ OFICIAL DEL CONDUCTOR -->
|
||
<nav class="role-nav-menubar" id="driver-role-nav-menubar">
|
||
<div class="menubar-items">
|
||
<button type="button" id="btn-driver-subtab-billetera" class="menu-item-btn active" data-subtab="billetera">
|
||
<span class="menu-item-icon">💼</span>
|
||
<span class="menu-item-label">Mi Billetera & Retiros Bre-B</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
<button type="button" id="btn-driver-subtab-registro" class="menu-item-btn" data-subtab="registro">
|
||
<span class="menu-item-icon">📝</span>
|
||
<span class="menu-item-label">Registro & Documentación Vehicular</span>
|
||
<span class="menu-item-indicator"></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="glass-panel" id="driver-modules-container" style="padding: 1.5rem;">
|
||
|
||
<!-- SUB-PANEL 1: BILLETERA DIGITAL & PAGOS INMEDIATOS BRE-B -->
|
||
<div id="driver-view-billetera">
|
||
<!-- TARJETA PRINCIPAL DE SALDO -->
|
||
<div class="driver-wallet-container">
|
||
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;">
|
||
<div>
|
||
<span class="breb-brand-badge">⚡ Bre-B Interoperable BanRep</span>
|
||
<div style="color: #94a3b8; font-size: 0.85rem; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;">
|
||
Saldo Disponible para Transferir
|
||
</div>
|
||
<div class="wallet-balance-display">
|
||
<span class="wallet-balance-amount" id="driver-wallet-balance-val">$119.000</span>
|
||
<span class="wallet-balance-currency">COP</span>
|
||
</div>
|
||
<div style="color: #cbd5e1; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🚗 Conductor: <strong id="driver-wallet-name" style="color: #fff;">Mario Fernando Gómez</strong></span>
|
||
<span>•</span>
|
||
<span>Placa: <strong id="driver-wallet-plate" style="color: var(--accent-cyan);">WLZ-890</strong></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align: right;">
|
||
<button type="button" id="btn-driver-refresh-wallet" class="btn-toggle-payment" style="margin-bottom: 0.75rem;">
|
||
🔄 Actualizar Saldo
|
||
</button>
|
||
<div style="font-size: 0.8rem; color: #94a3b8;">
|
||
Total viajes completados: <strong id="driver-total-trips-count" style="color: #fff;">0</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GRID OPERACIONES BRE-B -->
|
||
<div class="grid-2col" style="gap: 1.5rem;">
|
||
<!-- COLUMNA 1: SOLICITAR TRANSFERENCIA BRE-B -->
|
||
<div style="background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>💸</span> Solicitar Transferencia Inmediata vía Bre-B
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||
Transfiere tus ganancias acumuladas de inmediato (24/7) sin cobro de comisión bancaria ($0 COP).
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="breb-payout-amount">Monto a Transferir ($ COP)</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="number" class="form-input" id="breb-payout-amount" placeholder="Ej: 119000" min="5000" step="1000" style="flex: 1;">
|
||
<button type="button" id="btn-breb-amount-all" class="btn-toggle-payment" style="white-space: nowrap;">
|
||
Todo el Saldo
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: rgba(139, 92, 246, 0.08); border: 1px dashed rgba(139, 92, 246, 0.3); border-radius: 8px; padding: 0.85rem; margin-bottom: 1.25rem;">
|
||
<div style="font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between; margin-bottom: 0.35rem;">
|
||
<span>Destino:</span>
|
||
<strong id="breb-summary-bank" style="color: #fff;">Bancolombia</strong>
|
||
</div>
|
||
<div style="font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between; margin-bottom: 0.35rem;">
|
||
<span>Llave Bre-B:</span>
|
||
<strong id="breb-summary-key" style="color: #a855f7;">+57 316 745 5877</strong>
|
||
</div>
|
||
<div style="font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between;">
|
||
<span>Comisión de Transferencia:</span>
|
||
<strong style="color: #10b981;">$0 COP (Gratis BanRep)</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" id="btn-submit-breb-payout" class="btn-breb-action" style="width: 100%;">
|
||
📩 Solicitar Transferencia vía Bre-B a Administración
|
||
</button>
|
||
<p style="font-size: 0.76rem; color: #94a3b8; text-align: center; margin-top: 0.5rem; line-height: 1.35;">
|
||
Tu solicitud será enviada al administrador encargado para realizar la transferencia inmediata por Bre-B directamente a tu cuenta.
|
||
</p>
|
||
<div id="breb-payout-status" style="margin-top: 0.75rem; font-size: 0.85rem; text-align: center;"></div>
|
||
</div>
|
||
|
||
<!-- COLUMNA 2: CONFIGURACIÓN DE LLAVE BRE-B -->
|
||
<div style="background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🔑</span> Mi Llave Bre-B Oficial
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||
Registra tu identificador único en el sistema de pagos interoperables del Banco de la República.
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="driver-breb-key-type">Tipo de Llave Bre-B</label>
|
||
<select class="form-select" id="driver-breb-key-type">
|
||
<option value="CELULAR">Número de Celular (+57)</option>
|
||
<option value="CEDULA">Cédula de Ciudadanía (C.C.)</option>
|
||
<option value="EMAIL">Correo Electrónico</option>
|
||
<option value="ALFANUMERICA">Código Alfanumérico Único</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="driver-breb-key-value">Valor de la Llave Bre-B</label>
|
||
<input type="text" class="form-input" id="driver-breb-key-value" value="3109876543" placeholder="Ej: 3109876543">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="driver-breb-bank">Entidad Financiera de Destino</label>
|
||
<select class="form-select" id="driver-breb-bank">
|
||
<option value="Bancolombia">Bancolombia</option>
|
||
<option value="Nequi">Nequi</option>
|
||
<option value="Davivienda">Davivienda</option>
|
||
<option value="Daviplata">Daviplata</option>
|
||
<option value="Dale!">Dale!</option>
|
||
<option value="Nu Colombia">Nu Colombia</option>
|
||
<option value="Banco de Bogotá">Banco de Bogotá</option>
|
||
<option value="Banco Agrario">Banco Agrario de Colombia</option>
|
||
<option value="Lulo Bank">Lulo Bank</option>
|
||
<option value="Banco de Occidente">Banco de Occidente</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button type="button" id="btn-save-driver-breb-key" class="btn-primary" style="width: 100%;">
|
||
💾 Guardar Llave Bre-B
|
||
</button>
|
||
<div id="driver-breb-key-status" style="margin-top: 0.75rem; font-size: 0.85rem; text-align: center;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ESTADO DE MIS SOLICITUDES DE TRANSFERENCIA (CONDUCTOR) -->
|
||
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-top: 1.75rem;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>⏳</span> Estado de Mis Solicitudes de Transferencia
|
||
</h3>
|
||
<button type="button" id="btn-driver-refresh-requests" class="btn-toggle-payment" style="padding: 2px 10px; font-size: 0.78rem;">
|
||
🔄 Actualizar
|
||
</button>
|
||
</div>
|
||
<p style="color: var(--text-muted); font-size: 0.82rem; margin-bottom: 1rem;">
|
||
Seguimiento de las peticiones de retiro enviadas para transferencia por el administrador encargado.
|
||
</p>
|
||
<div id="driver-my-payout-requests-list">
|
||
<div style="text-align: center; color: #94a3b8; padding: 1rem;">
|
||
No tienes solicitudes de retiro activas.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HISTORIAL DE TRANSFERENCIAS CONDUCTOR -->
|
||
<div style="background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-top: 1.75rem;">
|
||
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>📜</span> Historial de Transferencias Inmediatas Bre-B
|
||
</h3>
|
||
<div id="driver-breb-history-list">
|
||
<div style="text-align: center; color: #94a3b8; padding: 1.5rem;">
|
||
No hay transferencias registradas aún.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUB-PANEL 2: VINCULACIÓN OFICIAL VEHICULAR -->
|
||
<div id="driver-view-registro" style="display: none;">
|
||
<div class="grid-2col">
|
||
<div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="driver-name">Nombre y Apellidos</label>
|
||
<input type="text" class="form-input" id="driver-name" placeholder="Nombre del conductor">
|
||
</div>
|
||
|
||
<div class="form-group" id="conductores">
|
||
<label class="form-label" for="driver-residence">Lugar de Residencia en Cali (Barrio / Comuna)</label>
|
||
<input type="text" class="form-input" id="driver-residence" placeholder="Ej: Barrio Granada, Comuna 2, Cali">
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="driver-plate">Placa del Vehículo</label>
|
||
<input type="text" class="form-input" id="driver-plate" placeholder="Ej: WLZ-890">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="driver-model">Marca y Modelo</label>
|
||
<input type="text" class="form-input" id="driver-model" placeholder="Renault Duster 2024">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="form-group">
|
||
<label class="form-label">Documentación Obligatoria (Appwrite Storage)</label>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
||
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 SOAT Vigente</span>
|
||
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
|
||
</div>
|
||
|
||
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 Revisión Técnico-Mecánica</span>
|
||
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
|
||
</div>
|
||
|
||
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 Tarjeta de Operación Especial</span>
|
||
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
|
||
</div>
|
||
|
||
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 Licencia de Conducción C1 / C2</span>
|
||
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-primary" style="margin-top: 1rem;">
|
||
Enviar Solicitud de Vinculación
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
|
||
<footer class="footer">
|
||
<div style="max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
||
<div>
|
||
<strong style="color: #fff;">Pacific Trans GO</strong> — Transporte Especial Cali - Buenaventura
|
||
</div>
|
||
<div>
|
||
Atención y Soporte WhatsApp: <a id="footer-support-link" href="#" target="_blank" style="color: var(--accent-cyan); text-decoration: none;"><span id="footer-support-phone">Central de Soporte</span></a>
|
||
</div>
|
||
<div>
|
||
© 2026 Almeira Group. Todos los derechos reservados.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- MODAL 1: AUTENTICACIÓN PACIFIC TRANS GO CON OTP WHATSAPP + EMAIL -->
|
||
<div class="pwa-modal-overlay" id="modal-auth-pacifictrans">
|
||
<div class="pwa-modal-card">
|
||
<button type="button" class="pwa-modal-close" id="btn-close-auth-modal">✕</button>
|
||
|
||
<div style="text-align: center; margin-bottom: 1.5rem;">
|
||
<span style="display: inline-block; padding: 4px 12px; background: rgba(16, 185, 129, 0.15); border: 1px solid var(--accent-emerald); color: #10b981; border-radius: 20px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;">
|
||
🛡️ Seguridad y Verificación 2FA
|
||
</span>
|
||
<h3 style="font-size: 1.5rem; color: #fff; margin-top: 0.5rem; margin-bottom: 0.35rem;" id="auth-modal-title">
|
||
Acceso Seguro con Verificación OTP
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.88rem;">
|
||
Ingresa tu número de celular para recibir tu código de seguridad OTP vía WhatsApp.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- PASO 1: Formulario de Celular -->
|
||
<div id="auth-step-1">
|
||
<form id="form-auth-request-otp">
|
||
<div class="form-group" style="text-align: center;">
|
||
<label class="form-label" for="auth-input-phone" style="font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem;">
|
||
Número de Celular / WhatsApp (+57)
|
||
</label>
|
||
<input type="tel" class="form-input" id="auth-input-phone" placeholder="Ej: 300 123 4567 o 312 987 6543" required autofocus style="font-size: 1.15rem; font-weight: 700; text-align: center; letter-spacing: 0.05em; padding: 0.85rem;">
|
||
<span style="font-size: 0.76rem; color: var(--text-dim); margin-top: 6px; display: block;">
|
||
Recibirás un código de 6 dígitos al instante en tu WhatsApp para ingresar de forma segura.
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Campos opcionales ocultos para compatibilidad -->
|
||
<div id="group-auth-name" style="display: none;">
|
||
<input type="text" id="auth-input-name" value="">
|
||
</div>
|
||
<div style="display: none;">
|
||
<input type="email" id="auth-input-email" value="">
|
||
</div>
|
||
|
||
<div id="auth-request-error" style="display: none; color: #f87171; font-size: 0.85rem; margin-bottom: 1rem; text-align: center;"></div>
|
||
|
||
<button type="submit" class="btn-primary" id="btn-submit-send-otp" style="margin-top: 0.5rem; padding: 0.85rem; font-size: 1rem;">
|
||
📲 Enviar Código de Verificación OTP
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- PASO 2: Ingreso de los 6 dígitos OTP -->
|
||
<div id="auth-step-2" style="display: none; text-align: center;">
|
||
<p style="color: #cbd5e1; font-size: 0.92rem; margin-bottom: 0.5rem;">
|
||
Ingresa el código de 6 dígitos que enviamos a tu WhatsApp:
|
||
</p>
|
||
<strong style="color: var(--accent-cyan); font-size: 1.05rem;" id="auth-sent-target">+57 •••••••</strong>
|
||
|
||
<!-- 6 Cajas OTP -->
|
||
<div class="otp-boxes-wrapper">
|
||
<input type="text" maxlength="1" class="otp-box" id="otp-1" autofocus>
|
||
<input type="text" maxlength="1" class="otp-box" id="otp-2">
|
||
<input type="text" maxlength="1" class="otp-box" id="otp-3">
|
||
<input type="text" maxlength="1" class="otp-box" id="otp-4">
|
||
<input type="text" maxlength="1" class="otp-box" id="otp-5">
|
||
<input type="text" maxlength="1" class="otp-box" id="otp-6">
|
||
</div>
|
||
|
||
<div id="auth-verify-error" style="display: none; color: #f87171; font-size: 0.85rem; margin-bottom: 1rem;"></div>
|
||
|
||
<button type="button" class="btn-primary" id="btn-submit-verify-otp">
|
||
✅ Validar y Acceder
|
||
</button>
|
||
|
||
<div style="margin-top: 1rem;">
|
||
<button type="button" id="btn-auth-resend-otp" style="background: transparent; border: none; color: var(--accent-cyan); font-size: 0.85rem; cursor: pointer; text-decoration: underline;">
|
||
¿No recibiste el código? Reenviar OTP
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL 2: CALIFICAR VIAJE Y COMENTARIOS -->
|
||
<div class="pwa-modal-overlay" id="modal-add-review">
|
||
<div class="pwa-modal-card">
|
||
<button type="button" class="pwa-modal-close" id="btn-close-review-modal">✕</button>
|
||
|
||
<div style="text-align: center; margin-bottom: 1.5rem;">
|
||
<span style="font-size: 2rem;">⭐</span>
|
||
<h3 style="font-size: 1.4rem; color: #fff; margin-top: 0.35rem; margin-bottom: 0.25rem;">
|
||
Calificar Experiencia de Viaje
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.88rem;">
|
||
Tu reseña ayuda a mantener los más altos estándares de calidad y seguridad en Pacific Trans GO.
|
||
</p>
|
||
</div>
|
||
|
||
<form id="form-submit-review">
|
||
<div style="text-align: center; margin-bottom: 1.25rem;">
|
||
<label class="form-label" style="margin-bottom: 0.25rem;">Puntuación</label>
|
||
<div class="star-rating-select" id="star-picker">
|
||
<span data-star="1" class="selected">★</span>
|
||
<span data-star="2" class="selected">★</span>
|
||
<span data-star="3" class="selected">★</span>
|
||
<span data-star="4" class="selected">★</span>
|
||
<span data-star="5" class="selected">★</span>
|
||
</div>
|
||
<input type="hidden" id="review-input-score" value="5">
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="review-input-name">Tu Nombre</label>
|
||
<input type="text" class="form-input" id="review-input-name" placeholder="Tu Nombre" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="review-input-role">Tu Rol</label>
|
||
<select class="form-select" id="review-input-role">
|
||
<option value="PASAJERO" selected>Pasajero</option>
|
||
<option value="CONDUCTOR">Conductor</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="review-input-target">Conductor o Grupo Calificado</label>
|
||
<input type="text" class="form-input" id="review-input-target" placeholder="Ej: Mario Fernando G. (Conductor)" value="Mario Fernando G.">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="review-input-comment">Tu Comentario / Experiencia</label>
|
||
<textarea class="form-input" id="review-input-comment" rows="3" placeholder="Describe qué tal fue la puntualidad, el trato, la comodidad del vehículo y la seguridad en la ruta..." required></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary" id="btn-submit-review" style="margin-top: 0.5rem;">
|
||
⭐ Publicar Mi Calificación
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL 3: INSTALACIÓN PWA IPHONE / IPAD & ANDROID -->
|
||
<div class="pwa-modal-overlay" id="modal-pwa-install">
|
||
<div class="pwa-modal-card">
|
||
<button type="button" class="pwa-modal-close" id="btn-close-pwa-modal">✕</button>
|
||
|
||
<div style="text-align: center; margin-bottom: 1.5rem;">
|
||
<span style="font-size: 2.2rem;">📲</span>
|
||
<h3 style="font-size: 1.4rem; color: #fff; margin-top: 0.35rem; margin-bottom: 0.25rem;">
|
||
Instalar Pacific Trans GO en tu Móvil
|
||
</h3>
|
||
<p style="color: var(--text-muted); font-size: 0.88rem;">
|
||
Accede instantáneamente sin barras de navegación y con soporte offline.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Pasos para iPhone / iPad Safari -->
|
||
<div style="margin-bottom: 1.5rem;">
|
||
<h4 style="color: #38bdf8; font-size: 1rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;">
|
||
<span>🍏</span> En iPhone / iPad (Safari)
|
||
</h4>
|
||
|
||
<div class="pwa-step-box">
|
||
<div class="pwa-step-num">1</div>
|
||
<div class="pwa-step-content">
|
||
Abre esta página en el navegador <strong>Safari</strong> de tu iPhone.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pwa-step-box">
|
||
<div class="pwa-step-num">2</div>
|
||
<div class="pwa-step-content">
|
||
Toca el botón <strong>Compartir</strong> (icono de cuadrado con flecha hacia arriba ⬆️ o ⎋) en la barra inferior.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pwa-step-box">
|
||
<div class="pwa-step-num">3</div>
|
||
<div class="pwa-step-content">
|
||
Desliza hacia abajo y selecciona <strong>"Agregar al inicio"</strong> (o <em>"Añadir a pantalla de inicio"</em> ➕).
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pwa-step-box" style="margin-bottom: 0;">
|
||
<div class="pwa-step-num">4</div>
|
||
<div class="pwa-step-content">
|
||
Toca <strong>"Agregar"</strong> en la esquina superior derecha. ¡Listo! Quedará instalada como app nativa.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Opción para Android -->
|
||
<div style="border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.25rem; display: flex; gap: 0.75rem; justify-content: center;">
|
||
<button type="button" class="btn-primary" id="btn-trigger-android-pwa" style="width: auto; padding: 0.65rem 1.25rem;">
|
||
🤖 Instalar en Android
|
||
</button>
|
||
<a href="/PacifictransGo.apk" class="btn-primary" style="width: auto; padding: 0.65rem 1.25rem; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid var(--border-glass);">
|
||
Descargar App
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL 4: COMPROBANTE OFICIAL TRANSFERENCIA BRE-B BANCO DE LA REPÚBLICA -->
|
||
<div class="breb-modal-overlay" id="modal-breb-receipt" style="display: none;">
|
||
<div class="breb-receipt-container">
|
||
<div class="breb-receipt-header">
|
||
<button type="button" id="btn-close-breb-modal" style="position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; font-size: 1.25rem; cursor: pointer;">✕</button>
|
||
<span class="breb-brand-badge" style="margin-bottom: 0.5rem;">⚡ Bre-B BANREP</span>
|
||
<h3 style="color: #fff; font-size: 1.35rem; margin: 0.25rem 0 0.15rem;">Comprobante de Transferencia Inmediata</h3>
|
||
<p style="color: #fbcfe8; font-size: 0.8rem; margin: 0;">Sistema Nacional de Pagos Interoperables de Colombia</p>
|
||
</div>
|
||
|
||
<div class="breb-receipt-body">
|
||
<div style="text-align: center; margin-bottom: 1.25rem;">
|
||
<div style="display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); padding: 0.35rem 0.85rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 700;">
|
||
✓ TRANSFERENCIA APROBADA 24/7
|
||
</div>
|
||
<div style="font-size: 2.2rem; font-weight: 900; color: #fff; margin-top: 0.5rem;" id="modal-receipt-amount">
|
||
$119.000 COP
|
||
</div>
|
||
<div style="font-size: 0.78rem; color: #94a3b8;" id="modal-receipt-datetime">
|
||
14 de Octubre de 2026, 08:35 PM
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem;">
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Referencia Oficial Bre-B:</span>
|
||
<span class="receipt-val" id="modal-receipt-ref" style="color: #38bdf8; font-family: monospace;">BREB-CO-20261014-94F2B0</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">No. Autorización BanRep:</span>
|
||
<span class="receipt-val" id="modal-receipt-auth" style="font-family: monospace;">AUT-98E1A4</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Ciclo de Compensación:</span>
|
||
<span class="receipt-val" id="modal-receipt-cycle" style="font-size: 0.78rem;">Inmediato 24/7</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Entidad Emisora:</span>
|
||
<span class="receipt-val">Pacific Trans GO (Bre-B BanRep)</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Entidad Receptora:</span>
|
||
<span class="receipt-val" id="modal-receipt-bank" style="color: #fbbf24;">Bancolombia</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Llave Bre-B Destino:</span>
|
||
<span class="receipt-val" id="modal-receipt-key">+57 310 987 6543</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Titular de la Cuenta:</span>
|
||
<span class="receipt-val" id="modal-receipt-owner">Mario Fernando Gómez</span>
|
||
</div>
|
||
<div class="receipt-row">
|
||
<span class="receipt-label">Costo de Transferencia:</span>
|
||
<span class="receipt-val" style="color: #10b981;">$0 COP (Bre-B Gratuito)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 0.75rem;">
|
||
<button type="button" class="btn-primary" id="btn-share-breb-whatsapp" style="flex: 1; padding: 0.7rem; font-size: 0.88rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: #22c55e;">
|
||
<span>💬</span> Compartir por WhatsApp
|
||
</button>
|
||
<button type="button" class="btn-primary" id="btn-copy-breb-receipt" style="flex: 1; padding: 0.7rem; font-size: 0.88rem; background: rgba(255,255,255,0.08); border: 1px solid var(--border-glass);">
|
||
📋 Copiar Referencia
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL 5: PERFIL DE USUARIO (INFORMACIÓN PERSONAL INMUTABLE DE CELULAR) -->
|
||
<div class="pwa-modal-overlay" id="modal-user-profile">
|
||
<div class="pwa-modal-card" style="max-width: 480px;">
|
||
<button type="button" class="pwa-modal-close" id="btn-close-profile-modal">✕</button>
|
||
|
||
<div style="display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem;">
|
||
<span style="font-size: 1.6rem;">👤</span>
|
||
<div>
|
||
<h3 style="font-size: 1.35rem; color: #fff; margin: 0;">Mi Información Personal</h3>
|
||
<p style="font-size: 0.82rem; color: var(--text-muted); margin: 0;">Actualiza tus datos para tus reservas y seguros de viaje</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form id="form-update-profile" style="margin-top: 1.25rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="profile-name">Nombre Completo *</label>
|
||
<input type="text" class="form-input" id="profile-name" placeholder="Tu nombre y apellidos" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="profile-phone">Número Celular / WhatsApp de Registro</label>
|
||
<input type="tel" class="form-input input-locked" id="profile-phone" readonly disabled>
|
||
<div class="input-locked-note">
|
||
<span>🔒</span>
|
||
<span>Por seguridad y autenticación 2FA OTP, el número de celular registrado no puede ser modificado.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="profile-doc">Documento (C.C. / Pasaporte)</label>
|
||
<input type="text" class="form-input" id="profile-doc" placeholder="Ej: 1144123456">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="profile-email">Correo Electrónico</label>
|
||
<input type="email" class="form-input" id="profile-email" placeholder="tu@correo.com">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="profile-address">Dirección Principal en Cali (Domicilio)</label>
|
||
<input type="text" class="form-input" id="profile-address" placeholder="Ej: Calle 5 #66-20, Cali">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="profile-city">Ciudad Principal</label>
|
||
<input type="text" class="form-input" id="profile-city" value="Cali">
|
||
</div>
|
||
|
||
<div id="profile-feedback" style="display: none; margin-bottom: 1rem;"></div>
|
||
|
||
<div style="display: flex; gap: 0.75rem; margin-top: 1rem;">
|
||
<button type="submit" class="btn-primary" id="btn-save-profile" style="flex: 1;">
|
||
💾 Guardar Información Personal
|
||
</button>
|
||
<button type="button" class="btn-return-public" id="btn-cancel-profile" style="width: auto; padding: 0.75rem 1.25rem;">
|
||
Cerrar
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL 6: EDITAR ADMINISTRADOR (EXCLUSIVO SUPERADMIN) -->
|
||
<div class="pwa-modal-overlay" id="modal-edit-admin">
|
||
<div class="pwa-modal-card" style="max-width: 460px;">
|
||
<button type="button" class="pwa-modal-close" id="btn-close-edit-admin-modal">✕</button>
|
||
|
||
<div style="display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem;">
|
||
<span style="font-size: 1.6rem;">🛡️</span>
|
||
<div>
|
||
<h3 style="font-size: 1.35rem; color: #fff; margin: 0;">Editar Administrador</h3>
|
||
<p style="font-size: 0.82rem; color: var(--text-muted); margin: 0;" id="edit-admin-subtitle">Actualizar permisos y datos de contacto</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form id="form-edit-admin" style="margin-top: 1.25rem;">
|
||
<input type="hidden" id="edit-admin-id">
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="edit-admin-name">Nombre y Apellidos *</label>
|
||
<input type="text" class="form-input" id="edit-admin-name" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="edit-admin-phone">WhatsApp / Celular (+57)</label>
|
||
<input type="tel" class="form-input input-locked" id="edit-admin-phone" readonly disabled>
|
||
<span style="font-size: 0.73rem; color: #94a3b8; margin-top: 3px; display: block;">🔒 El teléfono celular no se modifica para preservar su identidad 2FA OTP.</span>
|
||
</div>
|
||
|
||
<div class="grid-2col" style="gap: 1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label" for="edit-admin-doc">Documento (C.C.)</label>
|
||
<input type="text" class="form-input" id="edit-admin-doc">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="edit-admin-email">Correo Electrónico</label>
|
||
<input type="email" class="form-input" id="edit-admin-email">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" id="edit-admin-role-group">
|
||
<label class="form-label" for="edit-admin-role">Rol de Administración</label>
|
||
<select class="form-select" id="edit-admin-role">
|
||
<option value="ADMIN">🛡️ ADMINISTRADOR (Control total)</option>
|
||
<option value="OPERADOR">🎧 OPERADOR (Monitoreo y despacho)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="edit-admin-feedback" style="display: none; margin-bottom: 1rem;"></div>
|
||
|
||
<div style="display: flex; gap: 0.75rem; margin-top: 1rem;">
|
||
<button type="submit" class="btn-primary" id="btn-save-edit-admin" style="flex: 1;">
|
||
💾 Guardar Cambios
|
||
</button>
|
||
<button type="button" class="btn-return-public" id="btn-cancel-edit-admin" style="width: auto; padding: 0.75rem 1.25rem;">
|
||
Cancelar
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LEAFLET JS PARA EL RADAR MAP (Local Autónomo) -->
|
||
<script src="js/leaflet.js"></script>
|
||
|
||
<!-- LÓGICA PRINCIPAL & PUENTE NATIVO ANDROID PACIFICTRANS GO -->
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|