Autosave: 20260430-222744

pedidos_en_transito.php

@@ -98,18 +98,20 @@ include 'layout_header.php';
 
 <!-- Modal for tracking status -->
 <div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl" style="max-width: 950px;">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="trackingModalLabel">Estado del Envío - Shalom</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body">
-        <p><strong>Nº De Orden:</strong> <span id="modal-order-number"></span></p>
-        <p><strong>Código De Orden:</strong> <span id="modal-order-code"></span></p>
-        <hr>
+      <div class="modal-body" style="padding: 0;">
+        <div class="p-3">
+            <p class="mb-1"><strong>Nº De Orden:</strong> <span id="modal-order-number"></span></p>
+            <p class="mb-0"><strong>Código De Orden:</strong> <span id="modal-order-code"></span></p>
+        </div>
+        <hr class="my-0">
         <div id="modal-tracking-status">
-            <p class="text-center">Consultando estado en Shalom...</p>
+            <p class="text-center p-5">Consultando estado en Shalom...</p>
         </div>
       </div>
       <div class="modal-footer">
@@ -375,150 +377,143 @@ document.addEventListener('DOMContentLoaded', function() {
                     const searchData = data.search.data;
                     const statusData = data.statuses.data;
                     const statusMessage = data.statuses.message || 'No disponible';
-
-                    let statusIcon = '';
-                    let statusColor = '#003399';
-                    let statusBg = '#fff9e6'; // Light yellow background
-
                     const upperStatus = statusMessage.toUpperCase();
+
+                    // Determine progress and description
+                    let progressWidth = 0;
+                    let activeStep = 0;
+                    let descriptionText = 'Su pedido está siendo procesado.';
+
                     if (upperStatus.includes('ENTREGADO')) {
-                        statusColor = '#198754';
-                        statusBg = '#e9f7ef';
-                        statusIcon = `
-                            <svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <circle cx="70" cy="70" r="65" fill="#198754" fill-opacity="0.1" stroke="#198754" stroke-width="2"/>
-                                <!-- Box -->
-                                <g transform="translate(40, 60)">
-                                    <path d="M0 10L30 20V50L0 40V10Z" fill="#e30613"/>
-                                    <path d="M30 20L60 10V40L30 50V20Z" fill="#b90510"/>
-                                    <path d="M0 10L30 0L60 10L30 20L0 10Z" fill="#f14b55"/>
-                                    <text x="5" y="35" fill="white" font-family="Arial Black, sans-serif" font-weight="900" font-style="italic" font-size="7" transform="skewY(15)">SHALOM</text>
-                                </g>
-                                <!-- Checkmark -->
-                                <circle cx="100" cy="40" r="25" fill="#198754"/>
-                                <path d="M88 40L96 48L112 32" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-                            </svg>`;
-                    } else if (upperStatus.includes('DESTINO')) {
-                        statusColor = '#003399';
-                        statusBg = '#eef2ff';
-                        statusIcon = `
-                            <svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <!-- Dashed Path -->
-                                <path d="M30 60C40 60 45 90 65 90C85 90 90 60 100 60" stroke="#cbd5e1" stroke-width="3" stroke-dasharray="6 6" />
-                                
-                                <!-- Small Pin -->
-                                <g transform="translate(22, 45) scale(0.6)">
-                                    <path d="M12 0C5.37 0 0 5.37 0 12C0 21 12 34 12 34C12 34 24 21 24 12C24 5.37 18.63 0 12 0Z" fill="#1e293b"/>
-                                    <circle cx="12" cy="12" r="4" fill="white"/>
-                                </g>
-
-                                <!-- Box -->
-                                <g transform="translate(45, 75)">
-                                    <!-- Front Face -->
-                                    <path d="M0 15L35 25V55L0 45V15Z" fill="#e30613"/>
-                                    <!-- Right Face -->
-                                    <path d="M35 25L60 15V45L35 55V25Z" fill="#b90510"/>
-                                    <!-- Top Face -->
-                                    <path d="M0 15L25 5L60 15L35 25L0 15Z" fill="#f14b55"/>
-                                    <!-- White Stripe -->
-                                    <path d="M12 10L30 16L50 10L32 4L12 10Z" fill="white"/>
-                                    <!-- Shalom Text -->
-                                    <text x="4" y="40" fill="white" font-family="Arial Black, sans-serif" font-weight="900" font-style="italic" font-size="7" transform="skewY(15)">SHALOM</text>
-                                </g>
-
-                                <!-- Large Pin -->
-                                <g transform="translate(70, 30)">
-                                    <path d="M20 0C8.95 0 0 8.95 0 20C0 35 20 55 20 55C20 55 40 35 40 20C40 8.95 31.05 0 20 0Z" fill="#003399"/>
-                                    <circle cx="20" cy="20" r="8" fill="white"/>
-                                </g>
-                            </svg>`;
+                        progressWidth = 100;
+                        activeStep = 4;
+                        descriptionText = 'El pedido ha sido entregado satisfactoriamente.';
+                    } else if (upperStatus.includes('DESTINO') || upperStatus.includes('REPARTO')) {
+                        progressWidth = 66;
+                        activeStep = 3;
+                        descriptionText = 'Está listo para su recojo.';
                     } else if (upperStatus.includes('TRANSITO') || upperStatus.includes('TRÁNSITO')) {
-                        statusColor = '#ffc107';
-                        statusBg = '#fff9e6';
-                        statusIcon = `
-                            <svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <circle cx="70" cy="70" r="65" fill="#ffc107" fill-opacity="0.1" stroke="#ffc107" stroke-width="2"/>
-                                <!-- Road -->
-                                <path d="M20 105H120" stroke="#6c757d" stroke-width="4" stroke-linecap="round" stroke-dasharray="8 8"/>
-                                <!-- Truck Body -->
-                                <rect x="30" y="55" width="60" height="40" rx="2" fill="#003399"/>
-                                <!-- Truck Cabin -->
-                                <path d="M90 65H105L115 80V95H90V65Z" fill="#003399"/>
-                                <!-- Window -->
-                                <path d="M95 70H103L108 80H95V70Z" fill="#eef2ff"/>
-                                <!-- Wheels -->
-                                <circle cx="45" cy="100" r="8" fill="#1e293b"/>
-                                <circle cx="45" cy="100" r="4" fill="#94a3b8"/>
-                                <circle cx="75" cy="100" r="8" fill="#1e293b"/>
-                                <circle cx="75" cy="100" r="4" fill="#94a3b8"/>
-                                <circle cx="105" cy="100" r="8" fill="#1e293b"/>
-                                <circle cx="105" cy="100" r="4" fill="#94a3b8"/>
-                                <!-- Shalom Text on Truck -->
-                                <text x="35" y="80" fill="white" font-family="Arial Black, sans-serif" font-weight="900" font-style="italic" font-size="8">SHALOM</text>
-                                <!-- Speed lines -->
-                                <path d="M10 65H25M5 75H20M10 85H25" stroke="#ffc107" stroke-width="3" stroke-linecap="round"/>
-                            </svg>`;
-                    } else if (upperStatus.includes('ORIGEN')) {
-                        statusColor = '#6c757d';
-                        statusBg = '#f8f9fa';
-                        statusIcon = `
-                            <svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <circle cx="70" cy="70" r="65" fill="#6c757d" fill-opacity="0.1" stroke="#6c757d" stroke-width="2"/>
-                                <!-- Warehouse -->
-                                <path d="M30 100V50L70 30L110 50V100H30Z" fill="#6c757d"/>
-                                <path d="M40 100V60H60V100H40Z" fill="white"/>
-                                <path d="M80 100V60H100V100H80Z" fill="white"/>
-                                <path d="M70 30L110 50L120 45L70 20L20 45L30 50L70 30Z" fill="#495057"/>
-                                <!-- Shalom Text -->
-                                <text x="45" y="90" fill="white" font-family="Arial Black, sans-serif" font-weight="900" font-style="italic" font-size="8">SHALOM</text>
-                            </svg>`;
+                        progressWidth = 33;
+                        activeStep = 2;
+                        descriptionText = 'Su pedido se encuentra en camino a la ciudad de destino.';
                     } else {
-                        statusIcon = `
-                            <svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <circle cx="70" cy="70" r="65" fill="#0dcaf0" fill-opacity="0.1" stroke="#0dcaf0" stroke-width="2"/>
-                                <!-- Box -->
-                                <g transform="translate(40, 60)">
-                                    <path d="M0 10L30 20V50L0 40V10Z" fill="#e30613"/>
-                                    <path d="M30 20L60 10V40L30 50V20Z" fill="#b90510"/>
-                                    <path d="M0 10L30 0L60 10L30 20L0 10Z" fill="#f14b55"/>
-                                    <text x="5" y="35" fill="white" font-family="Arial Black, sans-serif" font-weight="900" font-style="italic" font-size="7" transform="skewY(15)">SHALOM</text>
-                                </g>
-                            </svg>`;
+                        progressWidth = 0;
+                        activeStep = 1;
+                        descriptionText = 'El pedido ha sido recibido en nuestra agencia de origen.';
                     }
 
+                    // Format date
+                    let formattedDate = new Date().toLocaleString('es-PE', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
+                    if (statusData.registrado && statusData.registrado.fecha) {
+                        formattedDate = new Date(statusData.registrado.fecha).toLocaleString('es-PE', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
+                    }
+
+                    const steps = ['En origen', 'En tránsito', 'En destino', 'Entregado'];
+                    let stepsHtml = '';
+                    steps.forEach((step, index) => {
+                        const stepNum = index + 1;
+                        const isActive = stepNum <= activeStep;
+                        const isCurrent = stepNum === activeStep;
+                        
+                        stepsHtml += `
+                            <div class="text-center" style="width: 100px; position: relative; z-index: 2;">
+                                <div style="width: 32px; height: 32px; background-color: ${isActive ? '#e30613' : 'white'}; border: 2px solid ${isActive ? '#e30613' : '#fce4e4'}; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;">
+                                    ${isActive ? '<i class="fas fa-check" style="color: white; font-size: 16px;"></i>' : ''}
+                                </div>
+                                <span style="font-size: 1rem; font-weight: ${isCurrent ? 'bold' : 'normal'}; color: ${isActive ? '#1a1a6e' : '#999'}; display: block; white-space: nowrap;">${step}</span>
+                            </div>
+                        `;
+                    });
+
                     let html = `
-                        <div id="status-capture-area" class="text-center mb-4 p-4" style="background: ${statusBg}; border-radius: 20px; border: 3px solid ${statusColor}; box-shadow: 0 10px 20px rgba(0,0,0,0.1);">
-                            <div class="mb-3">${statusIcon}</div>
-                            <h1 class="mt-2" style="color: ${statusColor}; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;">${statusMessage}</h1>
-                            <div class="badge bg-dark px-3 py-2 mt-2" style="font-size: 1rem;">Guía: ${orderNumber}</div>
-                            <hr style="border-top: 2px dashed ${statusColor}; opacity: 0.3;">
-                            <p class="mb-0" style="font-weight: bold; color: #555;">Destino: ${searchData.destino.nombre}</p>
-                            <p class="text-muted small">Consulta realizada: ${new Date().toLocaleString('es-PE')}</p>
+                        <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; background: white; padding: 40px 50px; border-radius: 15px; border: 1px solid #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
+                            <!-- Header Section -->
+                            <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap">
+                                <div class="d-flex align-items-center mb-2">
+                                    <div class="me-4">
+                                        <!-- Illustration -->
+                                        <svg width="160" height="160" viewBox="0 0 200 200">
+                                            <!-- Dashed path -->
+                                            <path d="M40 80C60 80 70 130 100 130C130 130 140 80 160 80" stroke="#94a3b8" stroke-width="3" stroke-dasharray="6 6" fill="none" />
+                                            
+                                            <!-- Small pin in distance -->
+                                            <g transform="translate(30, 65) scale(0.6)">
+                                                <path d="M15 0C6.7 0 0 6.7 0 15C0 26 15 40 15 40C15 40 30 26 30 15C30 6.7 23.3 0 15 0Z" fill="#1a1a6e"/>
+                                                <circle cx="15" cy="15" r="6" fill="white"/>
+                                            </g>
+
+                                            <!-- The Box -->
+                                            <g transform="translate(85, 95)">
+                                                <!-- Front face -->
+                                                <path d="M0 20 L55 38 V90 L0 72 Z" fill="#e30613"/>
+                                                <!-- Side face -->
+                                                <path d="M55 38 L95 22 V74 L55 90 Z" fill="#b90510"/>
+                                                <!-- Top face -->
+                                                <path d="M0 20 L40 0 L95 22 L55 38 Z" fill="#f14b55"/>
+                                                
+                                                <!-- White stripe on top -->
+                                                <path d="M18 9 L58 27 L78 36 L38 18 Z" fill="white"/>
+                                                <!-- White stripe on side -->
+                                                <path d="M75 30 L95 22 V35 L75 43 Z" fill="white"/>
+
+                                                <!-- SHALOM Text -->
+                                                <text x="6" y="58" fill="white" font-family="Arial Black" font-weight="900" font-style="italic" font-size="11" transform="skewY(18)">SHALOM</text>
+                                            </g>
+
+                                            <!-- Large pin on box -->
+                                            <g transform="translate(108, 40)">
+                                                <path d="M25 0C11.2 0 0 11.2 0 25C0 43.3 25 66.7 25 66.7C25 66.7 50 43.3 50 25C50 11.2 38.8 0 25 0Z" fill="#1a1a6e"/>
+                                                <circle cx="25" cy="25" r="10" fill="white"/>
+                                            </g>
+                                        </svg>
+                                    </div>
+                                    <div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <h1 style="color: #e30613 !important; font-weight: 900; margin: 0; margin-right: 15px; text-transform: uppercase; font-size: 2.8rem;">${statusMessage.toUpperCase()}</h1>
+                                            <span style="border: 3px solid #e30613; color: #e30613; border-radius: 25px; padding: 4px 15px; font-size: 1.1rem; font-weight: bold;">
+                                                <i class="fas fa-download"></i> GRT
+                                            </span>
+                                        </div>
+                                        <p class="mb-1" style="color: #666; font-size: 1.1rem;">${descriptionText}</p>
+                                        <p style="color: #e30613; font-weight: bold; font-size: 1rem; margin: 0;">
+                                            <i class="fas fa-chevron-right"></i> Tiempo referencial de llegada 1 día.
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="text-sm-end">
+                                    <p class="mb-1" style="font-weight: bold; font-size: 1.1rem; color: #1a1a6e;">N° DE ORDEN: ${orderNumber}</p>
+                                    <p class="text-muted" style="font-size: 1rem;">Desde el ${formattedDate}</p>
+                                </div>
+                            </div>
+
+                            <!-- Progress Bar -->
+                            <div class="position-relative mb-4 mt-4" style="padding: 0 40px;">
+                                <div class="progress" style="height: 10px; background-color: #fce4e4; border-radius: 5px;">
+                                    <div class="progress-bar" role="progressbar" style="width: ${progressWidth}%; background-color: #e30613;"></div>
+                                </div>
+                                <div class="d-flex justify-content-between position-absolute top-50 start-0 translate-middle-y w-100" style="padding: 0 20px;">
+                                    ${stepsHtml}
+                                </div>
+                            </div>
+
+                            <!-- Footer Section -->
+                            <div class="row mt-4 pt-4 border-top">
+                                <div class="col-md-6 mb-2 mb-md-0">
+                                    <p class="mb-1" style="font-weight: bold; color: #1a1a6e; font-size: 1.1rem;">Origen: <span style="color: #888; font-weight: normal;">${searchData.origen.nombre || 'N/A'}</span></p>
+                                </div>
+                                <div class="col-md-6">
+                                    <p class="mb-1" style="font-weight: bold; color: #1a1a6e; font-size: 1.1rem;">Destino: <span style="color: #888; font-weight: normal;">${searchData.destino.nombre || 'N/A'}</span></p>
+                                    <p class="text-muted mb-0" style="font-size: 1rem;">${searchData.destino.direccion || ''}</p>
+                                </div>
+                            </div>
                         </div>
-                        <div class="d-grid gap-2 mb-3">
-                            <button class="btn btn-success" onclick="copyStatusToClipboard('${statusMessage}', '${orderNumber}', '${searchData.destino.nombre}')">
+                        <div class="d-grid gap-2 mt-4">
+                            <button class="btn btn-success btn-lg" onclick="copyStatusToClipboard('${statusMessage}', '${orderNumber}', '${searchData.destino.nombre}')">
                                 <i class="fab fa-whatsapp"></i> Copiar Resumen para Cliente
                             </button>
                         </div>
                     `;
                     
-                    const timeline = [
-                        { name: 'Registrado', data: statusData.registrado },
-                        { name: 'En Origen', data: statusData.origen },
-                        { name: 'En Tránsito', data: statusData.transito },
-                        { name: 'En Destino', data: statusData.destino },
-                        { name: 'En Reparto', data: statusData.reparto },
-                        { name: 'Entregado', data: statusData.entregado }
-                    ];
-                    html += '<div class="card mt-3"><div class="card-header"><strong>Historial de Estados</strong></div><div class="card-body" style="font-size: 0.9rem;">';
-                    timeline.forEach(item => {
-                        if (item.data && item.data.fecha) {
-                            html += `<p class="mb-1"><strong>${item.name}:</strong> <span class="text-success">${new Date(item.data.fecha).toLocaleString('es-PE', { timeZone: 'America/Lima' })}</span></p>`;
-                        } else {
-                            html += `<p class="mb-1"><strong>${item.name}:</strong> <span class="text-muted">Pendiente</span></p>`;
-                        }
-                    });
-                    html += '</div></div>';
                     modalStatusDiv.innerHTML = html;
                 } else {
                      modalStatusDiv.innerHTML = `<p class="text-warning text-center">No se pudo encontrar la guía.</p>`;