{"id":66949,"date":"2025-11-24T00:29:35","date_gmt":"2025-11-24T05:29:35","guid":{"rendered":"https:\/\/termont2.com\/container-inquiry\/"},"modified":"2026-04-07T07:59:20","modified_gmt":"2026-04-07T11:59:20","slug":"container-tracking","status":"publish","type":"page","link":"https:\/\/termont.com\/fr\/container-tracking\/","title":{"rendered":"Demande de conteneur et paiement"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"66949\" class=\"elementor elementor-66949 elementor-66686\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc4606f e-con-full e-flex e-con e-parent\" data-id=\"cc4606f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\r\n\t\t<div class=\"elementor-element elementor-element-3fc336ea elementor-widget elementor-widget-shortcode\" data-id=\"3fc336ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<!-- Main Content Container -->\n<div class=\"container container-workflow-main mb-5\">\n\n    <!-- Admin Control Panel (DevHelpers - Issue #2028, Enhancement 4) -->\n    \n            <!-- \ud83d\udeaa GUEST-PARTIAL VIEW \u2014 Steps 1+2 visible, Steps 3-5 gated with sign-in CTA -->\n\n        <!-- Workflow Information Banner (still useful for guests) -->\n        \n\n        <!-- UML Diagrams Section (Step-05 - Issue #2034) -->\n        \n        <!-- Progress Bar -->\n        \n<!-- Progress Bar Section -->\n<div class=\"workflow-progress\" id=\"workflowProgressWrapper\">\n        <h5 class=\"text-center mb-3 text-muted\">\n        <i class=\"fas fa-tasks\"><\/i> Progression du flux...    <\/h5>\n\n    <div class=\"d-flex justify-content-between position-relative\">\n        <!-- Progress Line Background -->\n        <div class=\"progress-line\"><\/div>\n\n                <!-- Step 1: Recherche de conteneur -->\n        <div class=\"progress-step active\" id=\"step1\" data-step=\"1\">\n            <div class=\"progress-step-icon\"\n                 data-bs-toggle=\"tooltip\"\n                 data-bs-placement=\"top\"\n                 title=\"Recherche de conteneur\">\n                <i class=\"fas fa-search\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Recherche de conteneur            <\/div>\n        <\/div>\n                <!-- Step 2: D\u00e9tails d'entreposage... -->\n        <div class=\"progress-step pending\" id=\"step2\" data-step=\"2\">\n            <div class=\"progress-step-icon\"\n                 data-bs-toggle=\"tooltip\"\n                 data-bs-placement=\"top\"\n                 title=\"D\u00e9tails d&#039;entreposage...\">\n                <i class=\"fas fa-info-circle\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                D\u00e9tails d&#039;entreposage...            <\/div>\n        <\/div>\n                <!-- Step 3: Paiement -->\n        <div class=\"progress-step pending\" id=\"step3\" data-step=\"3\">\n            <div class=\"progress-step-icon\"\n                 data-bs-toggle=\"tooltip\"\n                 data-bs-placement=\"top\"\n                 title=\"Paiement\">\n                <i class=\"fas fa-credit-card\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Paiement            <\/div>\n        <\/div>\n                <!-- Step 4: Guarantee Letter -->\n        <div class=\"progress-step pending\" id=\"step4\" data-step=\"4\">\n            <div class=\"progress-step-icon\"\n                 data-bs-toggle=\"tooltip\"\n                 data-bs-placement=\"top\"\n                 title=\"Guarantee Letter\">\n                <i class=\"fas fa-file-signature\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Guarantee Letter            <\/div>\n        <\/div>\n                <!-- Step 5: Confirmation -->\n        <div class=\"progress-step pending\" id=\"step5\" data-step=\"5\">\n            <div class=\"progress-step-icon\"\n                 data-bs-toggle=\"tooltip\"\n                 data-bs-placement=\"top\"\n                 title=\"Confirmation\">\n                <i class=\"fas fa-check-circle\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Confirmation            <\/div>\n        <\/div>\n            <\/div>\n\n    <!-- Progress Percentage -->\n    <div class=\"workflow-progress-bar mt-3\" style=\"height: 8px;\">\n        <div class=\"workflow-progress-bar-fill bg-gradient\"\n             role=\"progressbar\"\n             style=\"width: 0%; background: linear-gradient(90deg, var(--termont-blue), var(--termont-orange));\"\n             aria-valuenow=\"1\"\n             aria-valuemin=\"1\"\n             aria-valuemax=\"5\"\n             id=\"progressBarFill\">\n        <\/div>\n    <\/div>\n\n    <!-- Step Description -->\n    <div class=\"text-center mt-3\">\n        <small class=\"text-muted\" id=\"stepDescription\">\n            Saisissez votre num\u00e9ro de conteneur et la date de retrait pr\u00e9vue        <\/small>\n    <\/div>\n<\/div>\n\n<style>\n.workflow-progress {\n    background: white;\n    border-radius: var(--border-radius);\n    padding: 1.5rem;\n    margin-bottom: 2rem;\n    box-shadow: var(--box-shadow);\n    position: relative;\n}\n\n.progress-line {\n    position: absolute;\n    top: 45px;\n    left: 12.5%;\n    width: 75%;\n    height: 2px;\n    background: var(--termont-light-gray);\n    z-index: 0;\n}\n\n.progress-step {\n    flex: 1;\n    text-align: center;\n    position: relative;\n    padding: 0 0.5rem;\n    z-index: 1;\n}\n\n.progress-step::before {\n    content: '';\n    position: absolute;\n    top: 20px;\n    left: 50%;\n    width: calc(100% - 1rem);\n    height: 2px;\n    background: var(--termont-light-gray);\n    z-index: 0;\n    transition: background var(--transition-speed);\n}\n\n.progress-step:last-child::before {\n    display: none;\n}\n\n.progress-step.completed::before {\n    background: var(--termont-green);\n}\n\n.progress-step-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background: var(--termont-light-gray);\n    color: var(--termont-gray);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 0.5rem;\n    position: relative;\n    z-index: 2;\n    transition: all var(--transition-speed);\n    cursor: pointer;\n}\n\n.progress-step.pending .progress-step-icon {\n    background: white;\n    border: 2px solid var(--termont-light-gray);\n}\n\n.progress-step.active .progress-step-icon {\n    background: var(--termont-orange);\n    color: white;\n    transform: scale(1.1);\n    box-shadow: 0 0 0 4px rgba(253,126,20,0.2);\n    animation: pulse 2s infinite;\n}\n\n.progress-step.completed .progress-step-icon {\n    background: var(--termont-green);\n    color: white;\n}\n\n.progress-step.completed .progress-step-icon::after {\n    content: '\u2713';\n    position: absolute;\n    font-weight: bold;\n}\n\n.progress-step-label {\n    font-size: 0.85rem;\n    color: var(--termont-gray);\n    transition: all var(--transition-speed);\n}\n\n.progress-step.active .progress-step-label {\n    color: var(--termont-orange);\n    font-weight: 600;\n}\n\n.progress-step.completed .progress-step-label {\n    color: var(--termont-green);\n}\n\n@keyframes pulse {\n    0% {\n        box-shadow: 0 0 0 0 rgba(253,126,20,0.7);\n    }\n    70% {\n        box-shadow: 0 0 0 10px rgba(253,126,20,0);\n    }\n    100% {\n        box-shadow: 0 0 0 0 rgba(253,126,20,0);\n    }\n}\n\n\/* Custom Progress Bar (renamed to avoid Bootstrap conflict) *\/\n.workflow-progress-bar {\n    width: 100%;\n    background-color: #e9ecef;\n    border-radius: 0.25rem;\n    overflow: hidden;\n}\n\n.workflow-progress-bar-fill {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    overflow: hidden;\n    color: #fff;\n    text-align: center;\n    white-space: nowrap;\n    transition: width 0.6s ease;\n}\n\n\/* Responsive adjustments *\/\n@media (max-width: 768px) {\n    .progress-step-label {\n        display: none;\n    }\n\n    .progress-line {\n        left: 10%;\n        width: 80%;\n    }\n\n    #stepDescription {\n        padding: 0 1rem;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Update progress bar dynamically\nfunction updateProgress(step) {\n    \/\/ Update progress bar fill\n    const progressBar = document.getElementById('progressBarFill');\n    const percentage = ((step - 1) \/ 4) * 100; \/\/ Updated for 5-step workflow (Issue #2034 Step 1)\n    progressBar.style.width = percentage + '%';\n    progressBar.setAttribute('aria-valuenow', step);\n\n    \/\/ Update step statuses\n    document.querySelectorAll('.progress-step').forEach((el, index) => {\n        const stepNum = index + 1;\n        el.classList.remove('active', 'completed', 'pending');\n\n        if (stepNum < step) {\n            el.classList.add('completed');\n        } else if (stepNum === step) {\n            el.classList.add('active');\n        } else {\n            el.classList.add('pending');\n        }\n    });\n\n    \/\/ Update description\n    const descriptions = {\n        1: \"Enter your container number and planned pickup date\",\n        2: \"Review storage details and charges\",\n        3: \"Complete secure payment process\",\n        4: \"Sign the guarantee letter digitally\",\n        5: \"Receive confirmation and notifications\"\n    };\n\n    const descElement = document.getElementById('stepDescription');\n    if (descElement && descriptions[step]) {\n        descElement.textContent = descriptions[step];\n    }\n\n    \/\/ Save to session via AJAX\n    fetch('api\/update-step.php', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify({ step: step })\n    });\n}\n<\/script>\n        <!-- Main Accordion - guests get Steps 1+2 only -->\n        <div class=\"accordion\" id=\"workflowAccordion\">\n\n            <!-- Section 1: Container Lookup -->\n            \n<!-- Section 1: Container Lookup -->\n<div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"headingOne\">\n        <button class=\"accordion-button\"\n                id=\"accordionButton1\"\n                type=\"button\"\n                data-bs-toggle=\"collapse\"\n                data-bs-target=\"#collapseOne\"\n                aria-expanded=\"true\"\n                aria-controls=\"collapseOne\">\n                        <i class=\"accordion-button-icon fas fa-search text-primary\"><\/i>\n            <span>\u00c9tape 1 : Recherche de conteneur<\/span>\n            <span class=\"accordion-button-badge badge bg-warning\">Requis<\/span>\n        <\/button>\n    <\/h2>\n    <div id=\"collapseOne\"\n         class=\"accordion-collapse collapse show\"\n         aria-labelledby=\"headingOne\"\n         data-bs-parent=\"#workflowAccordion\">\n        <div class=\"accordion-body\">\n\n            <!-- SSO Gate \u2014 Issue #5089 + #5096: inline variant with VBS features -->\n            <div id=\"authRequiredAlert\" class=\"wcp-sso-gate wcp-sso-gate--inline\"><div class=\"wcp-sso-gate-card\"><div class=\"wcp-sso-gate-inline-row\"><div class=\"wcp-sso-gate-inline-left\"><i class=\"fa-solid fa-link wcp-sso-gate-icon\"><\/i><div class=\"wcp-sso-gate-inline-text\"><p class=\"wcp-sso-gate-title\">Connect to unlock the full power of Container Tracking<\/p><ul class=\"wcp-sso-gate-features\"><li><i class=\"fa-solid fa-check\"><\/i> Sync with VBS: retrieve operations created by your dispatchers<\/li><li><i class=\"fa-solid fa-check\"><\/i> 1-click inquiry, guarantee letter &amp; payment for each container<\/li><li><i class=\"fa-solid fa-check\"><\/i> Auto-sync payments and updates back to VBS and the terminal<\/li><\/ul><\/div><\/div><button class=\"wcp-btn-primary wcp-sso-gate-trigger\"><i class=\"fa-solid fa-right-to-bracket\"><\/i> Sign In<\/button><\/div><\/div><\/div>\n            <!-- Container Lookup Form -->\n            <form id=\"containerLookupForm\" novalidate>\n                <div class=\"row\">\n                    <!-- Container Numbers Input (Multiple Supported) -->\n                    <div class=\"col-md-6 mb-3\">\n                        <label for=\"containerNumbers\" class=\"form-label\">\n                            Num\u00e9ro de conteneur ou de r\u00e9servation <span class=\"required\">*<\/span>\n                            <i class=\"help-icon fas fa-question-circle\"\n                               data-bs-toggle=\"tooltip\"\n                               data-bs-placement=\"top\"\n                               title=\"Saisissez un ou plusieurs num\u00e9ros de conteneur (XXXX#######), ou un num\u00e9ro de r\u00e9servation\/B\/L. Notre IA d\u00e9tecte automatiquement les s\u00e9parateurs (virgule, espace, tabulation, saut de ligne).\"><\/i>\n                        <\/label>\n                        <div class=\"input-group\">\n                            <span class=\"input-group-text\">\n                                <i class=\"fas fa-boxes\"><\/i>\n                            <\/span>\n                            <!-- Issue #6538: Replaced textarea with text input for single-container UX.\n                                 Enter key submits naturally, mobile keyboards show \"Go\/Search\".\n                                 Original textarea kept below (commented out) for future multi-container paste workflow. -->\n                            <input type=\"text\" class=\"form-control text-uppercase\"\n                                   id=\"containerNumbers\"\n                                   name=\"containerNumbers\"\n                                   placeholder=\"TGHU1234567, MSKU2345678 ou num\u00e9ro de r\u00e9servation\/B\/L\"\n                                   required\n                                   autocomplete=\"off\"\n                                   aria-describedby=\"containerHelp containerFeedback\">\n                            <!-- ORIGINAL TEXTAREA \u2014 kept for future multi-container paste workflows\n                            <textarea class=\"form-control text-uppercase\"\n                                      id=\"containerNumbers\"\n                                      name=\"containerNumbers\"\n                                      placeholder=\"TGHU1234567, MSKU2345678, HLCU3456789\"\n                                      required\n                                      aria-describedby=\"containerHelp containerFeedback\"><\/textarea>\n                            -->\n                        <\/div>\n                        <div id=\"containerHelp\" class=\"form-text\">\n                            <!-- AI Agent Mode Checkbox - MILESTONE-13 -->\n                            <!-- Issue #5097: controlled by WP Admin \u2192 Settings \u2192 AI Agents \u2192 \"Show AI Agent Mode in Frontend\" -->\n                            \n                            <!-- Manual Parsing Help (default) -->\n                            <div id=\"manualParsingHelp\">\n                                <i class=\"fas fa-lightbulb text-warning\"><\/i>\n                                <strong>Analyse manuelle :<\/strong> S\u00e9parez les conteneurs par virgules, espaces, tabulations ou sauts de ligne.                                <br>\n                                <small class=\"text-muted\">Format du conteneur : 4 lettres + 7 chiffres (ex. TGHU1234567). Vous pouvez aussi saisir un num\u00e9ro de r\u00e9servation ou B\/L.<\/small>\n                            <\/div>\n\n                            <!-- AI Demo Texts Section (MILESTONE-13) -->\n                            <div id=\"aiDemoTextsSection\" style=\"display:none;\"> <!-- Hidden by default, shown when AI Agent enabled -->\n                                <div class=\"mt-3 p-3 bg-light rounded border border-success\">\n                                    <h6 class=\"mb-3\">\n                                        <i class=\"fas fa-flask text-success\"><\/i>\n                                        <strong>Exemples de textes pour tester l'agent IA<\/strong>\n                                        <small class=\"text-muted ms-2\">(Cliquez pour copier et coller dans la zone de texte ci-dessus)<\/small>\n                                    <\/h6>\n\n                                    <!-- Demo Text 1: Email (High Rawness) -->\n                                    <div class=\"mb-3\">\n                                        <div class=\"d-flex justify-content-between align-items-center mb-1\">\n                                            <span class=\"dms-badge dms-badge-danger\">High Rawness<\/span>\n                                            <button type=\"button\" class=\"btn btn-sm btn-outline-success demo-text-copy-btn\"\n                                                    data-demo-id=\"demo1\">\n                                                <i class=\"fas fa-copy me-1\"><\/i>Copy Demo 1\n                                            <\/button>\n                                        <\/div>\n                                        <div class=\"small text-muted\">\n                                            <strong>Courriel avec en-t\u00eates, signature, coordonn\u00e9es<\/strong> - Teste la capacit\u00e9 de l'IA \u00e0 extraire des conteneurs d'un courriel complet avec beaucoup de bruit                                        <\/div>\n                                        <textarea id=\"demoText1\" class=\"form-control form-control-sm mt-2 font-monospace\"\n                                                  rows=\"3\"\n                                                  readonly\n                                                  style=\"font-size:0.75rem;\">From: John Smith <john.smith@carrier-logistics.com>\nSubject: Container delivery for tomorrow\n\nTCNU8733484 \/ BKG123456 \/ 40HC\nCAAU7909865 BKG789012 20DV\n\nDriver: Michael Johnson, +1-555-234-5678\n\nBest regards,\nJohn Smith | Tel: +1-555-123-4567<\/textarea>\n                                    <\/div>\n\n                                    <!-- Demo Text 2: Excel (Medium Rawness) -->\n                                    <div class=\"mb-3\">\n                                        <div class=\"d-flex justify-content-between align-items-center mb-1\">\n                                            <span class=\"dms-badge dms-badge-warning\">Medium Rawness<\/span>\n                                            <button type=\"button\" class=\"btn btn-sm btn-outline-success demo-text-copy-btn\"\n                                                    data-demo-id=\"demo2\">\n                                                <i class=\"fas fa-copy me-1\"><\/i>Copy Demo 2\n                                            <\/button>\n                                        <\/div>\n                                        <div class=\"small text-muted\">\n                                            <strong>Collage depuis un tableau Excel<\/strong> - Teste la capacit\u00e9 de l'IA \u00e0 analyser des donn\u00e9es tabulaires avec en-t\u00eates                                        <\/div>\n                                        <textarea id=\"demoText2\" class=\"form-control form-control-sm mt-2 font-monospace\"\n                                                  rows=\"3\"\n                                                  readonly\n                                                  style=\"font-size:0.75rem;\">Container    Booking      Type    Seal       B\/L\nTGHU1234567  BK-45678     40HC    SL123456   BL-2024-001\nMSKU2345678  BK-45679     20DV    SL123457   BL-2024-002\nCMAU3456789  BKNG-45680   40DV    SEAL-789   BILL-2024-003<\/textarea>\n                                    <\/div>\n\n                                    <!-- Demo Text 3: Clean List (Low Rawness) -->\n                                    <div class=\"mb-2\">\n                                        <div class=\"d-flex justify-content-between align-items-center mb-1\">\n                                            <span class=\"dms-badge dms-badge-success\">Low Rawness<\/span>\n                                            <button type=\"button\" class=\"btn btn-sm btn-outline-success demo-text-copy-btn\"\n                                                    data-demo-id=\"demo3\">\n                                                <i class=\"fas fa-copy me-1\"><\/i>Copy Demo 3\n                                            <\/button>\n                                        <\/div>\n                                        <div class=\"small text-muted\">\n                                            <strong>Message texte \u00e9pur\u00e9<\/strong> - Teste l'analyse de base de l'IA avec un minimum de bruit                                        <\/div>\n                                        <textarea id=\"demoText3\" class=\"form-control form-control-sm mt-2 font-monospace\"\n                                                  rows=\"2\"\n                                                  readonly\n                                                  style=\"font-size:0.75rem;\">Containers for delivery:\nTCNU1122334 BKG-2024-111\nMAEU5566778 BKG-2024-112<\/textarea>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div id=\"containerFeedback\" class=\"invalid-feedback\">\n                            Veuillez saisir au moins un num\u00e9ro de conteneur ou de r\u00e9servation\/B\/L valide                        <\/div>\n                        <div id=\"containerCount\" class=\"form-text text-success d-none\">\n                            <!-- Will show count when containers are detected -->\n                        <\/div>\n                    <\/div>\n\n                    <!-- Planned Pickup Date -->\n                    <div class=\"col-md-6 mb-3\">\n                        <label for=\"pickupDate\" class=\"form-label\">\n                            Date de retrait pr\u00e9vue <span class=\"required\">*<\/span>\n                            <i class=\"help-icon fas fa-question-circle\"\n                               data-bs-toggle=\"tooltip\"\n                               data-bs-placement=\"top\"\n                               title=\"S\u00e9lectionnez la date pr\u00e9vue de retrait du conteneur. Les frais d&#039;entreposage seront calcul\u00e9s jusqu&#039;\u00e0 cette date.\"><\/i>\n                        <\/label>\n                        <div class=\"input-group\">\n                            <span class=\"input-group-text\">\n                                <i class=\"fas fa-calendar\"><\/i>\n                            <\/span>\n                            <input type=\"text\"\n                                   class=\"form-control\"\n                                   id=\"pickupDate\"\n                                   name=\"pickupDate\"\n                                   value=\"2026-06-14\"\n                                   placeholder=\"YYYY-MM-DD\"\n                                   required\n                                   readonly\n                                   aria-describedby=\"dateHelp dateFeedback\">\n                            <button class=\"btn btn-outline-secondary\"\n                                    type=\"button\"\n                                    onclick=\"setDateToday()\"\n                                    data-bs-toggle=\"tooltip\"\n                                    title=\"D\u00e9finir \u00e0 aujourd&#039;hui\">\n                                <i class=\"fas fa-calendar-day\"><\/i>\n                            <\/button>\n                        <\/div>\n                        <div id=\"dateHelp\" class=\"form-text\">\n                            Ne peut pas \u00eatre dans le pass\u00e9. Maximum 90 jours dans le futur.                        <\/div>\n                        <div id=\"dateFeedback\" class=\"invalid-feedback\">\n                            Veuillez s\u00e9lectionner une date de retrait valide (aujourd'hui ou une date future dans les 90 jours)                        <\/div>\n\n                        <!-- Issue #6692: Flatpickr with disabled closed days -->\n                        <script>\n                        \/\/ Issue #6692: DRY helpers \u2014 detect if container has left terminal (shared with Step 2)\n                        \/\/ Issue #6998: customs-inspection dray-out is NOT a real departure \u2014 when the\n                        \/\/ container is currently in the yard or has returned from a completed dray\n                        \/\/ cycle, the populated terminal_exit.datetime corresponds to the dray-out, not\n                        \/\/ a final pickup. The pickup-date picker must NOT be capped in those cases.\n                        function isGateOut(apiData) {\n                            var te = (apiData || {}).terminal_exit || {};\n                            if (!te.datetime || te.datetime === '' || te.datetime === null) return false;\n\n                            \/\/ Issue #6998: in-yard transit state is the source of truth \u2014 container\n                            \/\/ is physically in the yard right now regardless of past terminal_exit.\n                            var transitState = ((apiData || {}).status_info || {}).transit_state || '';\n                            if (transitState === 'S40_YARD' || transitState === 'S30_ECIN') return false;\n\n                            \/\/ Issue #6998 + #7288: ANY dray cycle means terminal_exit is from\n                            \/\/ customs inspection, not a real pickup.\n                            \/\/ Use Case A: returned (ongoing=false) \u2192 container is at terminal\n                            \/\/ Use Case B: still outside (ongoing=true) \u2192 container will come back\n                            \/\/ In BOTH cases: NOT a real gate-out.\n                            var cycles = ((apiData || {}).dray_deduction || {}).cycles || [];\n                            if (cycles.length > 0) {\n                                return false;\n                            }\n\n                            return true;\n                        }\n                        function getGateOutDate(apiData) {\n                            var te = (apiData || {}).terminal_exit || {};\n                            var d = te.datetime || '';\n                            return d ? d.substring(0, 10) : null; \/\/ YYYY-MM-DD\n                        }\n                        \/\/ Issue #6998: identify \"container returned from customs inspection\" scenario\n                        \/\/ for friendlier messaging in the Change Pickup Date modal.\n                        function hasReturnedFromDrayCycle(apiData) {\n                            var cycles = ((apiData || {}).dray_deduction || {}).cycles || [];\n                            if (cycles.length === 0) return false;\n                            var latest = cycles[cycles.length - 1];\n                            return !!(latest && latest.ongoing === false && latest.dray_in_date);\n                        }\n\n                        \/\/ Issue #6692: Initialize Flatpickr with disabled weekends (no gate_out cap here \u2014 moved to Step 2 per #6701)\n                        document.addEventListener('DOMContentLoaded', function() {\n                            if (typeof flatpickr === 'undefined') return;\n                            var openDays = (typeof wpContainerPortal !== 'undefined' && wpContainerPortal.terminalDaysOpen)\n                                ? wpContainerPortal.terminalDaysOpen\n                                : ['mon','tue','wed','thu','fri'];\n                            var dayNames = ['sun','mon','tue','wed','thu','fri','sat'];\n                            \/\/ Issue #7012: max pickup days migrated to admin setting cw_max_pickup_days_future\n                            var _maxPickupDays = (window.wpContainerPortal && window.wpContainerPortal.financialDefaults && window.wpContainerPortal.financialDefaults.maxPickupDaysFuture) || 90;\n                            \/\/ Issue #7345: Auto-advance to next open day when today is a closed day (Sat\/Sun)\n                            \/\/ #10874: seed from the TERMINAL timezone (not the browser's), and noon-anchor\n                            \/\/ to dodge DST\/midnight edges. A user in any TZ now gets the terminal's \"today\".\n                            var _today7345 = (typeof window.getTerminalNow === 'function') ? window.getTerminalNow() : new Date();\n                            _today7345.setHours(12, 0, 0, 0);\n                            \/\/ #10874: format a Date as YYYY-MM-DD using LOCAL parts \u2014 NEVER toISOString()\n                            \/\/ (UTC), which shifted the evening default +1 day (Mon Jun 1 EDT \u2192 \"Jun 2\" UTC).\n                            function _ymdLocal7345(d){ return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); }\n                            var _todayDayName = dayNames[_today7345.getDay()];\n                            \/\/ Issue #10881 \u2014 the DEFAULT Amount-due date must be TODAY (terminal TZ), even on a\n                            \/\/ weekend, so the customer sees today's REAL accrued storage (e.g. Sun 2026-05-31 \u2192 12\n                            \/\/ billable), NOT the next-business-day projection (Mon 2026-06-01 \u2192 14). The picker below\n                            \/\/ still DISABLES weekend SELECTION for an actual pickup; this only governs the default\n                            \/\/ display value. Was #7345 (auto-advance Sat\/Sun \u2192 next open day), which over-showed the amount.\n                            var _defaultPickup = _today7345;   \/\/ today, terminal-local \u2014 no weekend advance (#10881)\n                            \/\/ #7345 auto-advance loop removed per #10881 (kept the terminal-TZ seed + #10874 _ymdLocal).\n                            var _defaultDateStr = _ymdLocal7345(_defaultPickup); \/\/ #10874 \u2014 local parts, not UTC\n\n                            var _fp10881 = flatpickr('#pickupDate', {\n                                dateFormat: 'Y-m-d',\n                                defaultDate: _defaultDateStr,\n                                minDate: 'today',\n                                maxDate: new Date().fp_incr(_maxPickupDays),\n                                disable: [function(date) {\n                                    return !openDays.includes(dayNames[date.getDay()]);\n                                }],\n                                locale: { firstDayOfWeek: 1 },\n                                onChange: function(selectedDates, dateStr) {\n                                    if (dateStr) {\n                                        var d = new Date(dateStr + 'T12:00:00');\n                                        var dayName = dayNames[d.getDay()];\n                                        var dayLabels = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];\n                                        if (!openDays.includes(dayName) && typeof Swal !== 'undefined') {\n                                            Swal.fire({ icon:'warning', title:'Terminal Closed',\n                                                text:'The terminal is closed on ' + dayLabels[d.getDay()] + 's. Please select a business day.',\n                                                confirmButtonColor:'#003366' });\n                                        }\n                                    }\n                                }\n                            });\n                            \/\/ Issue #10881 \u2014 flatpickr will NOT select a disabled (weekend) defaultDate, so on\n                            \/\/ Sat\/Sun the input is left blank. Force the raw value to today so the Amount-due\n                            \/\/ reflects TODAY's accrual (the storage calc reads #pickupDate.value). The picker\n                            \/\/ still blocks weekend SELECTION; this only seeds the default display.\n                            try {\n                                var _pd10881 = document.getElementById('pickupDate');\n                                if (_pd10881 && _pd10881.value !== _defaultDateStr) { _pd10881.value = _defaultDateStr; }\n                            } catch (e) { \/* best-effort *\/ }\n                        });\n                        <\/script>\n\n                        <!-- Notification Preferences (MILESTONE-18: moved inside column) -->\n                        <div class=\"mt-4 pt-3 border-top\" id=\"notificationPreferencesSection\">\n                            <div class=\"form-check d-flex align-items-center\">\n                                <input class=\"form-check-input me-2\"\n                                       type=\"checkbox\"\n                                       id=\"receiveNotifications\"\n                                       name=\"receiveNotifications\">\n                                <label class=\"form-check-label me-2\" for=\"receiveNotifications\">\n                                    Recevoir les notifications de mise \u00e0 jour                                <\/label>\n                                <i class=\"fas fa-info-circle text-primary\"\n                                   data-bs-toggle=\"tooltip\"\n                                   data-bs-placement=\"top\"\n                                   title=\"Soyez averti des changements de statut du conteneur par courriel ou API\"><\/i>\n                            <\/div>\n\n                            <!-- Email input (hidden by default) -->\n                            <div id=\"notificationEmailInput\" style=\"display: none;\">\n                                <div class=\"input-group mt-3\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope text-primary\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\"\n                                           class=\"form-control\"\n                                           id=\"notificationEmail\"\n                                           name=\"notificationEmail\"\n                                           placeholder=\"votre.courriel@entreprise.com\"\n                                           autocomplete=\"email\">\n                                    <button class=\"btn btn-outline-secondary\"\n                                            type=\"button\"\n                                            id=\"editNotificationMethod\"\n                                            data-bs-toggle=\"tooltip\"\n                                            title=\"Changer la m\u00e9thode de notification\">\n                                        <i class=\"fas fa-cog\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <div class=\"form-text\">\n                                    <i class=\"fas fa-check-circle text-success\"><\/i>\n                                    Vous recevrez des notifications par courriel lorsque le statut du conteneur changera                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Recent \/ Test Containers (Quick Select) \u2014 Issue #6156: Rich badges with logos -->\n                \n                <!-- VBS API Containers (MILESTONE-4) \u2014 Issue #5097: SSO-gated -->\n                <!-- Issue #5338: Removed #apiContainersNotConnected yellow alert \u2014 redundant with top SSO gate -->\n                                \n                <!-- Issue #5392: Logistec section moved to Step 2 (per-container comparison in containerCardsWrapper) -->\n\n                <!-- Action Buttons -->\n                <div class=\"d-grid gap-2 d-md-flex justify-content-md-end\">\n                                                            <button type=\"button\"\n                            class=\"btn btn-outline-secondary\"\n                            onclick=\"clearForm()\">\n                        <i class=\"fas fa-eraser\"><\/i> Effacer                    <\/button>\n                    <button type=\"submit\"\n                            class=\"btn btn-primary btn-lg\"\n                            id=\"lookupButton\">\n                        <i class=\"fas fa-search\"><\/i> Rechercher le conteneur                        <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                    <\/button>\n                <\/div>\n            <\/form>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<style>\n.accordion-button {\n    background: white;\n    color: var(--termont-dark-blue);\n    font-weight: 600;\n    font-size: 1.1rem;\n    padding: 1.25rem;\n    border: 2px solid var(--termont-light-gray);\n    position: relative;\n    transition: all var(--transition-speed);\n}\n\n.accordion-button:not(.collapsed) {\n    background: linear-gradient(135deg, var(--termont-blue), var(--termont-light-blue));\n    color: white;\n    box-shadow: none;\n    border-color: var(--termont-blue);\n}\n\n.accordion-button::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    width: 4px;\n    background: var(--termont-orange);\n    transform: scaleY(0);\n    transition: transform var(--transition-speed);\n}\n\n.accordion-button:not(.collapsed)::before {\n    transform: scaleY(1);\n}\n\n.accordion-button-icon {\n    margin-right: 1rem;\n    font-size: 1.25rem;\n}\n\n.accordion-button-badge {\n    margin-left: auto;\n    margin-right: 1rem;\n}\n\n.required {\n    color: var(--termont-red);\n}\n\n.help-icon {\n    color: var(--termont-gray);\n    cursor: help;\n    font-size: 0.9rem;\n}\n\n.form-control:focus,\n.form-select:focus {\n    border-color: var(--termont-blue);\n    box-shadow: 0 0 0 0.25rem rgba(0,86,179,0.1);\n}\n\n.form-control.is-valid {\n    border-color: var(--termont-green);\n    background-image: none;\n}\n\n.form-control.is-invalid {\n    border-color: var(--termont-red);\n    background-image: none;\n}\n\n\/* ACCORDION TOGGLE LINKS *\/\n.accordion-toggle-link {\n    display: inline-block;\n    cursor: pointer;\n    transition: color var(--transition-speed);\n}\n\n.accordion-toggle-link:hover {\n    color: var(--termont-blue);\n}\n\n.accordion-toggle-link .chevron-icon {\n    display: inline-block;\n    transition: transform var(--transition-speed);\n}\n\n.accordion-toggle-link[aria-expanded=\"true\"] .chevron-icon {\n    transform: rotate(-180deg);\n}\n\n.accordion-toggle-link[aria-expanded=\"false\"] .chevron-icon {\n    transform: rotate(0deg);\n}\n\n\/* Issue #5097: Admin-only dev sections \u2014 red border + badge *\/\n.admin-dev-section {\n    border: 2px dashed #dc3545;\n    border-radius: 8px;\n    padding: 12px;\n    position: relative;\n}\n.admin-dev-section::before {\n    content: '\\f3ed  Admin \/ Dev Only';\n    font-family: 'Font Awesome 5 Free', sans-serif;\n    font-weight: 900;\n    position: absolute;\n    top: -10px;\n    right: 12px;\n    background: #dc3545;\n    color: white;\n    font-size: 10px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n}\n\n\/* Recent Containers Section *\/\n#recentContainersSection .form-label {\n    margin-bottom: 0;\n    user-select: none;\n}\n\n#recentContainersSection .btn-outline-secondary:hover {\n    background-color: var(--termont-blue);\n    border-color: var(--termont-blue);\n    color: white;\n}\n\n\/* Additional Options Section *\/\n#additionalOptionsSection .accordion-toggle-link {\n    font-weight: 500;\n    font-size: 1rem;\n}\n<\/style>\n\n<!-- Inline script block removed - all functions moved to assets\/js\/modules\/steps\/step1-lookup.js -->\n<!-- This fixes Bootstrap collapse toggle issue caused by e.stopPropagation() -->\n\n<!-- ============================================================================\n     MILESTONE-12.4: Global Loading Spinner Modal\n     ============================================================================\n     Issue: showLoading() in ui-helpers.js was failing with \"element not found\"\n     This modal is used by ALL 5 workflow steps for loading states.\n     ============================================================================ -->\n<div id=\"loadingSpinner\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n        <div class=\"modal-content border-0 shadow-lg\">\n            <div class=\"modal-body text-center py-5\">\n                <div class=\"spinner-border text-primary mb-3\" role=\"status\" style=\"width: 3rem; height: 3rem;\">\n                    <span class=\"visually-hidden\">Chargement...<\/span>\n                <\/div>\n                <h5 id=\"loadingMessage\" class=\"text-gray-800\">Chargement...<\/h5>\n                <p class=\"text-muted small mb-0\">Veuillez patienter pendant le traitement de votre demande<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- ============================================================================\n     MILESTONE-13: AI Agent Mode Confirmation Modal\n     ============================================================================\n     User must confirm before enabling AI mode\n     Explains what AI does and privacy considerations\n     Issue #5097: controlled by WP Admin \u2192 Settings \u2192 AI Agents \u2192 \"Show AI Agent Mode in Frontend\"\n     ============================================================================ -->\n\n            <!-- Section 2: Storage Details -->\n            \n<!-- Section 2: Storage Details -->\n<div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"headingTwo\">\n        <button class=\"accordion-button collapsed step-locked\"\n                type=\"button\"\n                data-bs-toggle=\"collapse\"\n                data-bs-target=\"#collapseTwo\"\n                aria-expanded=\"false\"\n                aria-controls=\"collapseTwo\"\n                id=\"accordionButton2\"\n                data-required-step=\"1\"\n                data-step-number=\"2\"\n                aria-disabled=\"true\">\n            <i class=\"accordion-button-icon fas fa-calculator text-muted\"><\/i>\n            <span>\u00c9tape 2 : D\u00e9tails et calcul de l'entreposage<\/span>\n            <span class=\"accordion-button-badge badge bg-secondary\">En attente<\/span>\n        <\/button>\n    <\/h2>\n    <div id=\"collapseTwo\"\n         class=\"accordion-collapse collapse\"\n         aria-labelledby=\"headingTwo\"\n         data-bs-parent=\"#workflowAccordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Issue #10743 \u2014 Re-open right-panel bulk DataTable button.\n                 Hidden by default; shown only when the panel was closed AND has rows.\n                 Zero AJAX on click \u2014 inverts panel close (state.rows preserved). -->\n            <div class=\"step2-toolbar mb-3\" id=\"step2-reopen-panel-wrapper\" hidden>\n                <button type=\"button\"\n                        class=\"btn btn-outline-primary btn-sm\"\n                        id=\"step2-reopen-panel\"\n                        title=\"Re-open the bulk container table to compare all rows side-by-side\">\n                    \ud83d\udcca View all in table                <\/button>\n            <\/div>\n\n                        <div id=\"zoNotYetAvailableBannerStep2\"\n     class=\"card mb-4 border-warning d-none\"\n     role=\"region\"\n     aria-label=\"Containers not yet available from the terminal\">\n    <div class=\"card-header bg-warning text-dark d-flex align-items-center\">\n        <i class=\"fas fa-exclamation-triangle me-2\"><\/i>\n        <strong>Data not yet received from the shipping line<\/strong>\n        <span class=\"badge bg-dark ms-2\" id=\"zoNotYetAvailableCountStep2\">0<\/span>\n    <\/div>\n    <div class=\"card-body\">\n        <p class=\"mb-2\">\n            The information for this container is not yet available.            <span class=\"text-muted\">\n                These containers are excluded from the table and the storage total below until their data arrives.            <\/span>\n        <\/p>\n        <ul id=\"zoNotYetAvailableListStep2\" class=\"list-inline mb-3\">\n            <!-- populated by JS: <li class=\"list-inline-item\"><code data-container-no=\"HLBU2255598\">HLBU2255598<\/code><\/li> -->\n        <\/ul>\n        <div class=\"d-flex align-items-center flex-wrap gap-2\">\n            <button type=\"button\" id=\"zoNotYetAvailableRefreshBtnStep2\" class=\"btn btn-sm btn-outline-dark\">\n                <i class=\"fas fa-sync-alt me-1\"><\/i>Actualiser            <\/button>\n            <button type=\"button\" id=\"zoNotYetAvailableForceBtnStep2\" class=\"btn btn-sm btn-warning\">\n                <i class=\"fas fa-bolt me-1\"><\/i>Force re-check            <\/button>\n            <small class=\"text-muted ms-auto\">\n                Last checked:\n                <span id=\"zoNotYetAvailableLastCheckedStep2\">\u2014<\/span>\n            <\/small>\n        <\/div>\n    <\/div>\n<\/div>\n\n            <!-- Dynamic Container Cards Wrapper -->\n            <div id=\"containerCardsWrapper\">\n                <!-- Cards will be dynamically generated by JavaScript based on Step 1 input -->\n                <!-- Fallback: Single container card for backward compatibility -->\n                <div class=\"card mb-4 border-primary\" id=\"singleContainerCard\">\n                    <div class=\"card-header bg-primary text-white\">\n                        <h5 class=\"mb-0\">\n                            <i class=\"fas fa-container-storage\"><\/i> Informations sur le conteneur                        <\/h5>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"row\">\n                            <div class=\"col-md-3\">\n                                <strong>N\u00b0 de conteneur :<\/strong><br>\n                                <span class=\"text-primary h5\" id=\"displayContainerNumber\">-<\/span>\n                            <\/div>\n                            <div class=\"col-md-3\">\n                                <strong>Type :<\/strong><br>\n                                <span id=\"displayContainerType\">-<\/span>\n                            <\/div>\n                            <div class=\"col-md-3\">\n                                <strong>Taille (EVP) :<\/strong><br>\n                                <span id=\"displayContainerTEU\">-<\/span>\n                            <\/div>\n                            <div class=\"col-md-3\">\n                                <strong>Statut :<\/strong><br>\n                                <span class=\"dms-badge dms-badge-warning\" id=\"displayContainerStatus\">En entreposage<\/span>\n                            <\/div>\n                        <\/div>\n                        <hr>\n                        <div class=\"row\">\n                            <div class=\"col-md-4\">\n                                <strong>Ligne :<\/strong><br>\n                                <span id=\"displayLine\">-<\/span>\n                            <\/div>\n                            <div class=\"col-md-4\">\n                                <strong>Navire :<\/strong><br>\n                                <span id=\"displayVessel\">-<\/span>\n                            <\/div>\n                            <!-- Issue #5440: Label updated dynamically by JS (PIN for imports, B\/L for exports) -->\n                            <div class=\"col-md-4\">\n                                <strong id=\"displayBLLabel\">Num\u00e9ro B\/L :<\/strong><br>\n                                <span id=\"displayBL\">-<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Issue #5546 M8-M10: Container Card Template with collapsible body -->\n            <template id=\"containerCardTemplate\">\n                <div class=\"container-card card mb-4\" data-container-id=\"\">\n                                        <div class=\"cw-card-loading-overlay\" data-loading-for=\"\">\n                        <div class=\"cw-card-loading-overlay__content\">\n                            <div class=\"cw-card-loading-overlay__spinner\"><i class=\"fas fa-spinner fa-spin\"><\/i><\/div>\n                            <p class=\"cw-card-loading-overlay__title\">Loading terminal data\u2026<\/p>\n                            <p class=\"cw-card-loading-overlay__hint\">Fetching live terminal information (4-8s typical)<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-header\" role=\"button\" style=\"cursor: pointer;\" data-card-toggle=\"true\">\n                        <div class=\"d-flex justify-content-between align-items-center\">\n                            <h5 class=\"mb-0\">\n                                <i class=\"fas fa-box\"><\/i> <span class=\"container-number-display\"><\/span>\n                            <\/h5>\n                            <span>\n                                                                                                <i class=\"fas fa-chevron-up ms-2 text-white-50 card-collapse-icon\"><\/i>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-body card-collapsible-body\">\n                        <!-- Issue #5663: Container Lifecycle Status Bar placeholder -->\n                        <div class=\"container-status-placeholder mb-3\"><\/div>\n\n                        <!-- Issue #6174 M1-M3: Logistec-style 3-row detail table (replaces input fields) -->\n                        <div class=\"table-responsive\">\n                        <table class=\"table table-bordered table-sm container-detail-table mb-2\">\n                            <!-- Row 1: Equipment identification -->\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th>Num\u00e9ro d'\u00e9quipement<\/th>\n                                    <th>Compagnie maritime<\/th>\n                                    <th>Taille<\/th>\n                                    <th>Type d'\u00e9quipement<\/th>\n                                    <th>Vide \/ Plein<\/th>\n                                    <th colspan=\"2\">HG (hors-gabarit)<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr>\n                                    <td class=\"container-number-cell fw-bold\">-<\/td>\n                                    <td><span class=\"container-line\">-<\/span><\/td>\n                                    <td><span class=\"container-teu\">-<\/span><\/td>\n                                    <td><span class=\"container-type\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"\" style=\"cursor:help; border-bottom: 1px dotted #999;\">-<\/span><\/td>\n                                    <td><span class=\"container-freight-kind badge bg-secondary\">-<\/span><\/td>\n                                    <td colspan=\"2\"><span class=\"container-oog badge bg-light text-muted\">Non<\/span><\/td>\n                                <\/tr>\n                            <\/tbody>\n                            <!-- Row 2: Booking, vessel, routing -->\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th>R\u00e9servation \/ B\/L<\/th>\n                                    <th>Imp\/Exp<\/th>\n                                    <th class=\"field-strge-hidden\">Navire<\/th>\n                                    <th class=\"field-strge-hidden\">Voyage<\/th>\n                                    <th>Port d'origine<\/th>\n                                    <th class=\"field-strge-hidden\">Port de d\u00e9chargement<\/th>\n                                    <th class=\"field-strge-hidden\">Destination finale<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr>\n                                    <td><span class=\"container-bl\">-<\/span><\/td>\n                                    <td><span class=\"container-category badge bg-secondary\">-<\/span><\/td>\n                                    <td class=\"field-strge-hidden\"><span class=\"container-vessel\">-<\/span><\/td>\n                                    <td class=\"field-strge-hidden\"><span class=\"container-voyage\">-<\/span><\/td>\n                                    <td><span class=\"container-origin\">-<\/span><\/td>\n                                    <td class=\"field-strge-hidden\"><span class=\"container-port-of-discharge\">-<\/span><\/td>\n                                    <td class=\"field-strge-hidden\"><span class=\"container-final-destination\">-<\/span><\/td>\n                                <\/tr>\n                            <\/tbody>\n                            <!-- Row 3: Cargo details -->\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th>Sceau<\/th>\n                                    <th>Poids brut<\/th>\n                                    <th>Mati\u00e8res dangereuses<\/th>\n                                    <th>N\u00b0 ONU<\/th>\n                                    <!-- Issue #6715 M1: TEMP column hidden (too sensitive per Francine\/Termont) -->\n                                    <th style=\"display:none;\">Temp<\/th>\n                                    <th>Wagon<\/th>\n                                    <!-- Issue #9831 \/ #10043 \u2014 Discharged on column \u00b7 Logistec-parity ask from Maltacourt (Lilia Lugo) 2026-05-20 + Simard (Kim Keeble) 2026-05-22. Lost from master between #9831 ship and #9164 canonicalize rename \u2014 re-added 2026-05-22 alongside the matching <td> below. JS wiring already present in step2-details.js:483. -->\n                                    <th class=\"field-import-only\">Discharged on<\/th>\n                                    <th class=\"field-import-only\">Dernier jour gratuit<\/th>\n                                    <th class=\"field-export-only\" style=\"display:none;\">ERD \/ Limite<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr>\n                                    <td><span class=\"container-seal\">-<\/span><\/td>\n                                    <td><span class=\"container-gross-weight\">-<\/span><\/td>\n                                    <td><span class=\"container-hazardous badge bg-light text-muted\">Non<\/span><\/td>\n                                    <td><span class=\"container-un-number\">-<\/span><\/td>\n                                    <!-- Issue #6715 M1: TEMP column hidden -->\n                                    <td style=\"display:none;\"><span class=\"container-temp\">-<\/span><\/td>\n                                    <td><span class=\"container-railcar\">-<\/span><\/td>\n                                    <!-- Issue #9831 \/ #10043 \u2014 Discharged on cell \u00b7 same data as #displayDischargeDate inside Storage Details \u00b7 painted by step2-details.js:483 .container-discharge-date queryAll loop. Re-added 2026-05-22 paired with the matching <th> above. -->\n                                    <td class=\"field-import-only\"><span class=\"container-discharge-date\" data-bs-toggle=\"tooltip\" title=\"Vessel discharge timestamp \u2014 when the container physically arrived at the terminal\">\u2014<\/span><\/td>\n                                    <td class=\"field-import-only\"><span class=\"container-lfd-badge badge bg-secondary\" style=\"font-size: 1rem; padding: 6px 12px;\">\u2014<\/span><\/td>\n                                    <td class=\"field-export-only\" style=\"display:none;\"><span class=\"container-erd-cutoff-badge badge bg-info\" style=\"font-size: 1rem; padding: 6px 12px;\">\u2014<\/span><\/td>\n                                <\/tr>\n                            <\/tbody>\n                        <\/table>\n                        <\/div>\n\n                        <!-- Issue #6174 M4: Transport In\/Out section (Logistec-style) -->\n                        <div class=\"table-responsive\">\n                        <table class=\"table table-bordered table-sm container-transport-table mb-2\">\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th style=\"width:50px\"><\/th>\n                                    <th class=\"ctt-col-mode\">Mode<\/th>\n                                    <th class=\"ctt-col-carrier\">Transporteur<\/th>\n                                    <th class=\"ctt-col-date\">Date<\/th>\n                                    <th class=\"ctt-col-time\">Heure<\/th>\n                                                                        <!-- #10927 Section A M3 \u2014 new Payment date column (light grey nowrap badge populated by _cw10927ApplyPaymentToCard) -->\n                                    <th class=\"ctt-col-payment text-nowrap\">Paiement<\/th>\n                                    <th class=\"ctt-col-status text-center\">Statut du conteneur<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr class=\"transport-in-row\">\n                                    <td class=\"fw-bold text-success\">Entr\u00e9e :<\/td>\n                                    <td><span class=\"transport-in-mode badge bg-secondary\">-<\/span><\/td>\n                                    <td><span class=\"transport-in-carrier\">-<\/span><\/td>\n                                    <td><span class=\"transport-in-date\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"\">-<\/span><\/td>\n                                    <td><span class=\"transport-in-time\">-<\/span><\/td>\n                                                                        <!-- #10927 Section A M3 \u2014 payment date cell (filled by _cw10927ApplyPaymentToCard) -->\n                                    <td><span class=\"transport-in-payment-date dms-badge-date-nowrap\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"\">\u2014<\/span><\/td>\n                                    <!-- Issue #6866: Enriched Container Status Cell \u2014 Logistec-style -->\n                                    <td rowspan=\"2\" class=\"align-middle text-center container-status-enriched\" style=\"min-width:180px; max-width:260px; width:260px; vertical-align:top; padding:6px 4px;\">\n                                        <!-- Terminal + States header -->\n                                                                                <span class=\"container-terminal-status fw-bold\" style=\"font-size:1rem;\">-<\/span>\n                                        <br>\n                                        <small class=\"text-muted\" style=\"font-size:0.85rem;\">\u00c9tat de visite : <span class=\"container-visit-state\">-<\/span> \u00b7 \u00c9tat de transit : <span class=\"container-transit-detail\"><\/span><\/small>\n\n                                        <!-- Pickup Badge -->\n                                        <div class=\"mt-1\">\n                                            <span class=\"container-pickup-inline-badge badge rounded-pill\" style=\"display:none; font-size:0.85rem;\"><\/span>\n                                        <\/div>\n                                        <small class=\"container-pickup-disclaimer text-muted fst-italic d-block mt-1\" style=\"display:none; font-size:0.8rem; padding:0 4px; line-height:1.25;\">\n                                            Cette valeur ne tient pas compte des montants dus pour l'entreposage ou les surestaries. Elle indique uniquement si le conteneur est retenu ou non et s'il est au terminal ou non.                                        <\/small>\n\n                                        <!-- Storage Summary Table (Issue #6866 M5) -->\n                                        <div class=\"container-storage-summary mt-1\" style=\"display:none;\">\n                                            <div class=\"fw-bold border-bottom pb-1 mb-1\" style=\"font-size:0.95rem;\">Entreposage $<\/div>\n                                            <small class=\"text-danger fst-italic d-block mb-1\" style=\"font-size:0.8rem; line-height:1.25;\">\n                                                Ce n'est pas votre montant officiel d'entreposage.                                            <\/small>\n                                            <table class=\"table table-sm table-bordered mb-1\" style=\"font-size:0.85rem; width:100%;\">\n                                                <thead><tr><th style=\"padding:2px 3px;\"><\/th><th style=\"padding:2px 3px;\">Date<\/th><th class=\"text-center\" style=\"padding:2px 3px;\">Jours<\/th><th class=\"text-end\" style=\"padding:2px 3px;\">Montant<\/th><\/tr><\/thead>\n                                                <tbody>\n                                                    <!-- #10961 \u00a7B M5 \u2014 Free until row (LFD + days remaining + \ud83d\udfe2\/\ud83d\udd34) -->\n                                                    <tr class=\"csm-free-row table-light\"><td class=\"fw-bold\" style=\"padding:2px 3px;\">\ud83d\udfe2 Free until<\/td><td class=\"csm-free-date\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-free-days text-center\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-free-amount text-end\" style=\"padding:2px 3px;\">0.00 $ CAD<\/td><\/tr>\n                                                    <!-- #10961 \u00a7B M8 \u2014 Originally due row (visible only when subtotal=$0 AND paid>$0 \u2014 shows historical due amount for context) -->\n                                                    <tr class=\"csm-orig-row\" style=\"display:none\"><td class=\"fw-bold\" style=\"padding:2px 3px;\">Originally due<\/td><td class=\"csm-orig-date\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-orig-days text-center\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-orig-amount text-end\" style=\"padding:2px 3px;\">-<\/td><\/tr>\n                                                    <tr><td class=\"fw-bold\" style=\"padding:2px 3px;\">Montant d\u00fb<\/td><td class=\"csm-storage-date\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-storage-days text-center\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-storage-amount text-end\" style=\"padding:2px 3px;\">-<\/td><\/tr>\n                                                    <tr><td class=\"fw-bold\" style=\"padding:2px 3px;\">Garantie<\/td><td class=\"csm-guarantee-date\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-guarantee-days text-center\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-guarantee-amount text-end\" style=\"padding:2px 3px;\">-<\/td><\/tr>\n                                                    <!-- #10961 \u00a7B M6+M7 \u2014 Paid row now has DATE + DAYS cells (populated by _cw10927ApplyPaymentToCard) -->\n                                                    <tr><td class=\"fw-bold\" style=\"padding:2px 3px;\">Pay\u00e9<\/td><td class=\"csm-paid-date\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-paid-days text-center\" style=\"padding:2px 3px;\">-<\/td><td class=\"csm-paid-amount text-end\" style=\"padding:2px 3px;\">0.00 $ CAD<\/td><\/tr>\n                                                    <tr class=\"table-active\"><td class=\"fw-bold\" style=\"padding:2px 3px;\">Solde d\u00fb<\/td><td style=\"padding:2px 3px;\"><\/td><td style=\"padding:2px 3px;\"><\/td><td class=\"csm-balance-amount text-end fw-bold\" style=\"padding:2px 3px;\">-<\/td><\/tr>\n                                                <\/tbody>\n                                            <\/table>\n                                            <a href=\"https:\/\/termont.com\/truck-procedure\/storage-details\/\" target=\"_blank\" class=\"d-block\" style=\"font-size:0.8rem;\">\n                                                Plus d'infos sur l'entreposage                                            <\/a>\n                                        <\/div>\n                                    <\/td>\n                                <\/tr>\n                                <tr class=\"transport-out-row\">\n                                    <td class=\"fw-bold text-danger\">Sortie :<\/td>\n                                    <td><span class=\"transport-out-mode badge bg-secondary\">-<\/span><\/td>\n                                    <td><span class=\"transport-out-carrier\">-<\/span><\/td>\n                                    <td><span class=\"transport-out-date\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"\">-<\/span><\/td>\n                                    <td><span class=\"transport-out-time\">-<\/span><\/td>\n                                                                        <!-- #10927 Section A M3 \u2014 payment date cell (filled by _cw10927ApplyPaymentToCard) -->\n                                    <td><span class=\"transport-out-payment-date dms-badge-date-nowrap\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"\">\u2014<\/span><\/td>\n                                <\/tr>\n                            <\/tbody>\n                        <\/table>\n                        <\/div>\n\n                        <!-- Issue #6174 M5 + #6612: Hold\/Perm section \u2014 Logistec-style 6 columns -->\n                        <table class=\"table table-bordered table-sm container-hold-table mb-2\" style=\"display:none;\">\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th style=\"width:160px;\">Retenue \/ Perm<\/th>\n                                    <th style=\"width:180px;\">Description<\/th>\n                                    <th style=\"width:140px;\">Date<\/th>\n                                    <th style=\"width:120px;\">B\/L \/ HBL<\/th>\n                                    <th style=\"width:100px;\">Statut<\/th>\n                                    <th style=\"width:130px;\">R\u00e9f\u00e9rence<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody class=\"container-hold-body\"><\/tbody>\n                        <\/table>\n\n                                                                    <\/div>\n                                        <div class=\"step2-toolbar d-flex gap-2 flex-wrap justify-content-end px-3 pb-2\" data-step2-toolbar>\n                        <button type=\"button\"\n                                id=\"cw-step2-print-btn\"\n                                class=\"btn btn-outline-secondary btn-sm\"\n                                title=\"Print this page (Ctrl+P)\">\n                            <i class=\"fas fa-print\"><\/i> Print                        <\/button>\n                        <button type=\"button\"\n                                id=\"cw-step2-export-csv-btn\"\n                                class=\"btn btn-outline-primary btn-sm\"\n                                title=\"Download as CSV \u2014 all 33 fields from \/api\/v1\/container-inquiry\/\">\n                            <i class=\"fas fa-file-csv\"><\/i> Export CSV                        <\/button>\n                        <button type=\"button\"\n                                id=\"cw-step2-export-xlsx-btn\"\n                                class=\"btn btn-outline-success btn-sm\"\n                                title=\"Download as Excel XLSX \u2014 all 33 fields\">\n                            <i class=\"fas fa-file-excel\"><\/i> Export XLSX                        <\/button>\n                    <\/div>\n\n                                                                                                                                        <\/div>\n            <\/template>\n\n            <!-- Storage Calculation Card \u2014 Issue #5318: collapsed by default -->\n            <div class=\"card mb-4 border-warning\" id=\"storageCalculationCard\">\n                                <div class=\"cw-card-loading-overlay\" data-loading-aggregate=\"storage\">\n                    <div class=\"cw-card-loading-overlay__content\">\n                        <div class=\"cw-card-loading-overlay__spinner\"><i class=\"fas fa-calculator fa-bounce\"><\/i><\/div>\n                        <p class=\"cw-card-loading-overlay__title\">Calculating storage charges\u2026<\/p>\n                        <p class=\"cw-card-loading-overlay__hint\">Aggregating across containers \u00b7 finalized when all rows load<\/p>\n                    <\/div>\n                <\/div>\n                                <div class=\"card-header bg-light border-bottom border-warning\" role=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#storageCalculationBody\" aria-expanded=\"true\" aria-controls=\"storageCalculationBody\" style=\"cursor: pointer;\">\n                    <h5 class=\"mb-0 d-flex justify-content-between align-items-center\">\n                        <span><i class=\"fas fa-calendar-alt text-warning\"><\/i> Calcul d'entreposage \u2014 importations seulement<\/span>\n                        <span>\n                            <span class=\"dms-badge dms-badge-warning\" id=\"storageTotalBadge\">$0.00 CAD<\/span>\n                            <i class=\"fas fa-chevron-up ms-2 text-muted\" id=\"storageCollapseIcon\"><\/i>\n                        <\/span>\n                    <\/h5>\n                <\/div>\n                <div class=\"card-body collapse show\" id=\"storageCalculationBody\">\n                    <!-- Issue #5451 M4-M5: 4 summary cards on same line (count + dates) -->\n                    <div class=\"row mb-4\">\n                        <!-- Issue #5451 M5: Container count card -->\n                        <div class=\"col-md-3 col-12 mb-2\">\n                            <div class=\"card h-100 border-info\">\n                                <div class=\"card-body text-center py-3\">\n                                    <i class=\"fas fa-cubes text-info fa-lg mb-2\"><\/i>\n                                    <div class=\"text-muted small\">Conteneurs<\/div>\n                                    <strong id=\"displayContainerCount\" class=\"fs-3\">0<\/strong>\n                                    <!-- Issue #5451 M1: Import\/export badges -->\n                                    <div class=\"mt-1\">\n                                        <span class=\"dms-badge dms-badge-success\" id=\"displayImportCount\" style=\"display:none; font-size:0.85rem\">0 imports<\/span>\n                                        <span class=\"dms-badge dms-badge-secondary\" id=\"displayExportCount\" style=\"display:none; font-size:0.85rem\">0 exports<\/span>\n                                    <\/div>\n                                    <!-- Issue #7346: Dray\/hold status badges -->\n                                    <div id=\"containerStatusBadges\" class=\"mt-1\" style=\"display:none;\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-3 col-12 mb-2\">\n                            <div class=\"card h-100 border-success\">\n                                <div class=\"card-body text-center py-3\">\n                                    <i class=\"fas fa-ship text-success fa-lg mb-2\"><\/i>\n                                    <div class=\"text-muted small\">Date de d\u00e9chargement<\/div>\n                                    <strong id=\"displayDischargeDate\" class=\"fs-6\">-<\/strong>\n                                    <!-- Issue #7346: Per-vessel discharge badges -->\n                                    <div id=\"dischargeVesselBadges\" class=\"mt-1\" style=\"display:none;\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-3 col-12 mb-2\">\n                            <div class=\"card h-100 border-warning\">\n                                <div class=\"card-body text-center py-3\">\n                                    <i class=\"fas fa-gift text-warning fa-lg mb-2\"><\/i>\n                                    <div class=\"text-muted small\">Dernier jour gratuit<\/div>\n                                    <strong id=\"displayLastFreeDay\" class=\"fs-6\">-<\/strong>\n                                    <div><small class=\"text-muted\" id=\"displayFreeDaysNote\"><\/small><\/div>\n                                    <!-- Issue #7346: Per-LFD group badges -->\n                                    <div id=\"lfdGroupBadges\" class=\"mt-1\" style=\"display:none;\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-3 col-12 mb-2\">\n                            <div class=\"card h-100 border-primary\">\n                                <div class=\"card-body text-center py-3\">\n                                    <i class=\"fas fa-truck-pickup text-primary fa-lg mb-2\"><\/i>\n                                    <div class=\"text-muted small\">Date de retrait pr\u00e9vue<\/div>\n                                    <strong id=\"displayPickupDate\" class=\"fs-6\">-<\/strong>\n                                    <!-- Issue #7345: Skipped closed days badges -->\n                                    <div id=\"pickupSkippedDays\" style=\"display:none;\" class=\"mt-1\"><\/div>\n                                    <div>\n                                        <button class=\"btn btn-sm btn-link p-0\" onclick=\"changePickupDate()\">\n                                            <i class=\"fas fa-edit\"><\/i> Changer                                        <\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Issue #5531: Transfer Notice banner removed -->\n\n                    <!-- Tiered Calculation Breakdown -->\n                    <div class=\"calculation-breakdown\">\n                        <table class=\"table table-hover\">\n                            <!-- Issue #5451 M5: Per-container breakdown rows (dynamically generated by JS) -->\n                            <tbody id=\"perContainerBreakdown\">\n                                <tr class=\"text-muted\"><td colspan=\"2\" class=\"text-center py-3\"><i class=\"fas fa-spinner fa-spin\"><\/i> Calcul en cours...<\/td><\/tr>\n                            <\/tbody>\n                            <!-- Aggregated totals \u2014 Issue #6122 M4: added ID for JS hide when LFD pending -->\n                            <tbody id=\"storageTotalsBody\">\n                                <tr>\n                                    <td colspan=\"2\"><hr class=\"my-2\"><\/td>\n                                <\/tr>\n                                <tr class=\"table-info\">\n                                    <td><strong><i class=\"fas fa-calculator\"><\/i> Sous-total d'entreposage :<\/strong><\/td>\n                                    <td class=\"text-end\"><strong>$<span id=\"displaySubtotal\">0.00<\/span> CAD<\/strong><\/td>\n                                <\/tr>\n                                <!-- Issue #7332: Inspection deduction row (hidden by default, shown when dray\/inspection exists) -->\n                                <tr id=\"inspectionDeductionRow\" style=\"display:none\" class=\"table-success\">\n                                    <td><span id=\"inspectionDeductionLabel\">Jours d'inspection d\u00e9duits<\/span><\/td>\n                                    <td class=\"text-end text-success fw-bold\"><span id=\"inspectionDeductionAmount\">-$0.00 CAD<\/span><\/td>\n                                <\/tr>\n                                <tr id=\"taxRow\" style=\"display:none\">\n                                    <td><i class=\"fas fa-percentage\"><\/i> <span id=\"taxLabel\">Tax (0%):<\/span><\/td>\n                                    <td class=\"text-end\"><span id=\"taxValue\">$<strong id=\"displayTax\">0.00<\/strong> CAD<\/span><\/td>\n                                <\/tr>\n                                <!-- #10961 \u00a7C M19 \u2014 Already Paid Subtotal (visible only when paid > 0) -->\n                                <tr class=\"table-success fw-bold\" id=\"alreadyPaidSubtotalRow\" style=\"display:none\">\n                                    <td class=\"text-success\"><i class=\"fas fa-check-circle\"><\/i> Already Paid Subtotal:<\/td>\n                                    <td class=\"text-end text-success\">- <span id=\"alreadyPaidSubtotal\">$0.00 CAD<\/span><\/td>\n                                <\/tr>\n                                <tr class=\"table-primary\">\n                                    <td><strong><i class=\"fas fa-receipt\"><\/i> Montant total :<\/strong><\/td>\n                                    <td class=\"text-end h5\"><strong>$<span id=\"displayTotal\">0.00<\/span> CAD<\/strong><\/td>\n                                <\/tr>\n                            <\/tbody>\n                        <\/table>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Issue #5385: Comprehensive Termont Pricing Grid \u2014 admin toggle -->\n            \n            <!-- Issue #5397 M3: Special Instructions removed (not used in guarantee letter workflow) -->\n\n            <!-- Issue #5424 M3: Master Total \u2014 always visible, single source of truth -->\n            <div class=\"card mb-4 border-primary\" id=\"masterTotalCard\">\n                                <div class=\"cw-card-loading-overlay\" data-loading-aggregate=\"pricing\">\n                    <div class=\"cw-card-loading-overlay__content\">\n                        <div class=\"cw-card-loading-overlay__spinner\"><i class=\"fas fa-coins fa-fade\"><\/i><\/div>\n                        <p class=\"cw-card-loading-overlay__title\">Computing total amount due\u2026<\/p>\n                        <p class=\"cw-card-loading-overlay__hint\">Final price ready after all containers respond<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card-body py-3\">\n                    <div class=\"d-flex justify-content-between align-items-center\">\n                        <h5 class=\"mb-0\"><i class=\"fas fa-calculator text-primary\"><\/i> Total d\u00fb<\/h5>\n                        <h4 class=\"mb-0 text-primary\" id=\"masterTotalAmount\">$0.00 CAD<\/h4>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- #10927 \u00a7D \u2014 Payment Coverage Banner \u2014 visible only when paid >= subtotal -->\n            <!-- #10927 \u00a7D \u2014 Payment Coverage Banner \u2014 visible only when all storage paid -->\n<div id=\"paymentCoverageBanner\" class=\"card mb-4 border-success d-none\" role=\"region\" aria-label=\"Payment Coverage Summary\">\n    <div class=\"card-header bg-success text-white\">\n        <h5 class=\"mb-0\">\n            <i class=\"fas fa-check-circle\"><\/i>\n            All storage paid \u2014 your container(s) are cleared for pickup        <\/h5>\n    <\/div>\n    <div class=\"card-body\">\n        <div class=\"alert alert-success mb-3\" role=\"status\">\n            <p class=\"mb-1\">\n                <strong>Already paid to date:<\/strong>\n                <span id=\"coverageTotalPaid\" class=\"text-success\">$0.00 CAD<\/span>\n            <\/p>\n            <p class=\"mb-0\" id=\"coverageDriverInstruction\">\n                You can send your drivers to the terminal on the recommended pickup dates below.            <\/p>\n        <\/div>\n\n        <!-- \u00a7D M31 \u2014 Per-container coverage table -->\n        <div class=\"table-responsive\">\n            <table class=\"table table-sm table-bordered align-middle mb-0\" id=\"paymentCoverageTable\">\n                <thead class=\"table-light\">\n                    <tr>\n                        <th>Conteneur<\/th>\n                        <th>Days covered<\/th>\n                        <th class=\"text-end\">Paid amount<\/th>\n                        <th>Recommended pickup<\/th>\n                        <th class=\"text-center\">Action<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody id=\"paymentCoverageRows\">\n                    <!-- populated by _cw10927PopulateCoverageTable() -->\n                <\/tbody>\n            <\/table>\n        <\/div>\n\n        <small class=\"text-muted mt-2 d-block\">\n            <i class=\"fas fa-info-circle\"><\/i>\n            Recommended pickup dates are computed from your guarantee window and the terminal&#039;s free-storage period. Send drivers within this window to avoid additional charges.        <\/small>\n    <\/div>\n<\/div>\n\n            <!-- #11234 \u2014 Already-departed success card. Hidden by default. JS toggles\n                 visibility when ALL container cards detect gate-out (_etl_container_cycle.time_out\n                 OR DOM contains \"Container picked-up\"). Hides the payment-section + Submit. -->\n            <div id=\"alreadyDepartedCard\" class=\"d-none\">\n                <div class=\"card border-success mb-4\" style=\"background:#d4edda;\">\n                    <div class=\"card-body py-3\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"me-3\" style=\"font-size:2.5rem;line-height:1;\">\u2705<\/div>\n                            <div class=\"flex-grow-1\">\n                                <h5 class=\"mb-1 text-success fw-bold\">\n                                    \ud83c\uddeb\ud83c\uddf7 Conteneur d\u00e9j\u00e0 sorti \u2014 aucun frais suppl\u00e9mentaire                                <\/h5>\n                                <h6 class=\"mb-3 text-success\">\n                                    \ud83c\uddec\ud83c\udde7 Container already departed \u2014 no further fees apply                                <\/h6>\n                                <div id=\"alreadyDepartedDetails\" class=\"small\" style=\"line-height:1.7;\">\n                                    <!-- JS injects per-container OUT-record rows here -->\n                                <\/div>\n                                <div class=\"mt-3\">\n                                    <button type=\"button\" class=\"btn btn-outline-success btn-sm\" onclick=\"resetAndSearchAgain()\">\n                                        <i class=\"fas fa-search me-1\"><\/i> Search another container                                        \/ Chercher un autre conteneur                                    <\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Issue #5424 M4: Search Complete (shown when total = $0) -->\n            <div id=\"searchCompleteSection\" style=\"display: none;\">\n                <div class=\"alert alert-success text-center py-4\">\n                    <h5><i class=\"fas fa-check-circle me-2\"><\/i> Recherche compl\u00e9t\u00e9e<\/h5>\n                    <p class=\"mb-3\">Votre recherche de conteneur est termin\u00e9e. Aucuns frais ne s'appliquent aux conteneurs s\u00e9lectionn\u00e9s.<\/p>\n                    <button type=\"button\" class=\"btn btn-outline-primary btn-lg\" onclick=\"resetAndSearchAgain()\">\n                        <i class=\"fas fa-search me-1\"><\/i> Nouvelle recherche                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Issue #6746 M4: Activation gate \u2014 blocks Step 2\u21923 for unactivated orgs -->\n            <div id=\"activationGateSection\" class=\"d-none\">\n\n                <!-- Gate A: No organization_ID -->\n                <div id=\"activationBlockedMessage\" class=\"card border-warning mb-3 d-none\">\n                    <div class=\"card-body\" style=\"background:#fff8e1;\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"me-3\" style=\"font-size:2rem;\">&#128679;<\/div>\n                            <div>\n                                <h6 class=\"fw-bold text-warning mb-1\">Activation de l'organisation en attente<\/h6>\n                                <p class=\"mb-2\">Votre compte est actif et vous pouvez consulter librement les informations des conteneurs. Toutefois, les <strong>flux de paiement et de garantie<\/strong> n\u00e9cessitent que votre organisation soit activ\u00e9e par Termont Terminal.<\/p>\n                                <ul class=\"small mb-2\">\n                                    <li>&#10003; Consultation du conteneur \u2014 <strong>disponible<\/strong><\/li>\n                                    <li>&#10003; D\u00e9tails d'entreposage et tarification \u2014 <strong>disponible<\/strong><\/li>\n                                    <li>&#128274; Traitement du paiement \u2014 <strong>activation en attente<\/strong><\/li>\n                                    <li>&#128274; Lettre de garantie \u2014 <strong>activation en attente<\/strong><\/li>\n                                <\/ul>\n                                <p class=\"small text-muted mb-0\">\n                                    <i class=\"fas fa-phone me-1\"><\/i>Contactez votre gestionnaire de compte ou l'administration Termont \u00e0                                    <a href=\"tel:5142540526\">(514) 254-0526<\/a> pour le statut d'activation.                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Gate B: organization_ID exists but IFS billing not linked -->\n                <div id=\"ifsBlockedMessage\" class=\"card border-warning mb-3 d-none\">\n                    <div class=\"card-body\" style=\"background:#fff3e0;\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"me-3\" style=\"font-size:2rem;\">&#9888;&#65039;<\/div>\n                            <div>\n                                <h6 class=\"fw-bold\" style=\"color:#e65100;\">Facturation IFS non encore li\u00e9e<\/h6>\n                                <p class=\"mb-2\">Votre organisation est enregistr\u00e9e avec Termont Terminal, mais votre <strong>compte de facturation IFS<\/strong> n'est pas encore li\u00e9. Les flux de paiement et de garantie n\u00e9cessitent l'activation IFS pour traiter les transactions financi\u00e8res.<\/p>\n                                <ul class=\"small mb-2\">\n                                    <li>&#10003; Consultation du conteneur \u2014 <strong>disponible<\/strong><\/li>\n                                    <li>&#10003; D\u00e9tails d'entreposage et tarification \u2014 <strong>disponible<\/strong><\/li>\n                                    <li>&#128274; Traitement du paiement \u2014 <strong>liaison IFS en attente<\/strong><\/li>\n                                    <li>&#128274; Lettre de garantie \u2014 <strong>liaison IFS en attente<\/strong><\/li>\n                                <\/ul>\n                                <p class=\"small text-muted mb-0\">\n                                    <i class=\"fas fa-envelope me-1\"><\/i>Contactez l'administration Termont pour compl\u00e9ter votre configuration de facturation IFS.                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- Issue #5348: Action Buttons + Agreement Checkbox (unified row \u2014 checkbox right-aligned next to Proceed button) -->\n            <div class=\"d-grid gap-2 d-md-flex justify-content-md-between align-items-end\">\n                <button type=\"button\"\n                        class=\"btn btn-outline-secondary\"\n                        onclick=\"goToStep(1)\">\n                    <i class=\"fas fa-arrow-left\"><\/i> Retour \u00e0 la recherche de conteneur                <\/button>\n                <div class=\"text-end\">\n                    <!-- Agreement Checkbox \u2014 positioned right, directly above Proceed button -->\n                    <div class=\"form-check d-flex justify-content-end mb-2\" id=\"agreeToChargesWrapper\">\n                        <input class=\"form-check-input me-2\"\n                               type=\"checkbox\"\n                               id=\"agreeToCharges\"\n                               required>\n                        <label class=\"form-check-label\" for=\"agreeToCharges\">\n                            Je comprends et j'accepte les frais d'entreposage calcul\u00e9s ci-dessus.                            <span class=\"required\">*<\/span>\n                        <\/label>\n                    <\/div>\n                    <!-- Issue #5381 M2: Print Details button removed (window.print on SPA = poor output) -->\n                    <!-- Issue #5347: \"Save for Later\" button commented out \u2014 saveCalculation() saves to\n                         localStorage('savedCalculation') but NO retrieval logic exists anywhere.\n                         The Swal says \"You can retrieve it later\" but that's misleading.\n                         To restore: uncomment button + function, then build retrieval UI on Step 1.\n                    <button type=\"button\"\n                            class=\"btn btn-outline-primary me-2\"\n                            onclick=\"saveCalculation()\">\n                        <i class=\"fas fa-save\"><\/i> Save for Later\n                    <\/button>\n                    -->\n                    <button type=\"button\"\n                            class=\"btn btn-primary btn-lg\"\n                            id=\"proceedToPaymentBtn\"\n                            onclick=\"proceedToPayment()\"\n                            disabled\n                            title=\"Veuillez accepter les frais d&#039;entreposage pour continuer\">\n                        Passer au paiement et\/ou \u00e0 la garantie <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Issue #7139 NUCLEAR FIX: activation-hidden class takes absolute precedence.\n   Only updatePaymentButtonState() can add\/remove this class.\n   No other JS code path (handleZeroTotal, anyInYardChargeable, startNewSearch,\n   date change, etc.) can override it \u2014 solving the race condition permanently. *\/\n.activation-hidden { display: none !important; }\n\n\/* === DYNAMIC CONTAINER CARDS STYLES === *\/\n\/* Color-coded borders based on container status *\/\n.container-card {\n    border: 3px solid;\n    transition: all 0.3s ease;\n}\n\n\/* === Issue #11385 \u2014 typography floor on the container card === *\/\n\/* Prevents future inline overrides from sneaking text below readable thresholds.\n   Inline `style=\"font-size:...\"` still wins via specificity, but the floor applies\n   when none is set. Scale: disclaimer 0.80rem \u2192 small 0.85rem \u2192 body 1rem \u2192 heading 1.05rem.\n   Pre-#11385 the card used 0.50-0.95rem (8-15px) which was below WCAG readability. *\/\n.container-card,\n.container-card td,\n.container-card th {\n    font-size: 1rem;\n}\n.container-card small,\n.container-card .text-muted,\n.container-card .container-pickup-disclaimer {\n    font-size: 0.85rem;\n}\n.container-card a {\n    font-size: inherit;\n}\n.container-card .table-sm td,\n.container-card .table-sm th {\n    font-size: 0.85rem;\n}\n\/* === END Issue #11385 === *\/\n\n\/* Issue #11389 \u2014 badge typography harmony is canonical in container-workflow.css\n   (.container-workflow-main .badge rule, lines ~412-435). The previous attempt\n   to override here failed because the workflow CSS rule has !important and beat\n   inline class selectors (and even inline style=\"font-size:...\"). Kept this note\n   so future readers don't reintroduce the same dead override. *\/\n\n\/* Green: Available (customs released, ready for pickup) *\/\n.container-card.status-available {\n    border-color: var(--termont-green, #28a745);\n}\n\n.container-card.status-available .card-header {\n    background: linear-gradient(135deg, #28a745, #20c997);\n    color: white;\n}\n\n\/* Red: HOLD (customs not released) *\/\n.container-card.status-hold {\n    border-color: var(--termont-red, #dc3545);\n}\n\n.container-card.status-hold .card-header {\n    background: linear-gradient(135deg, #dc3545, #c82333);\n    color: white;\n}\n\n\/* Yellow: Released but fees pending *\/\n.container-card.status-fees-pending {\n    border-color: var(--termont-orange, #FFC700);\n}\n\n.container-card.status-fees-pending .card-header {\n    background: linear-gradient(135deg, #FFC700, #ff9800);\n    color: #333;\n}\n\n\/* Issue #5500: Blue \u2014 Export (no customs hold concept) *\/\n.container-card.status-export {\n    border-color: var(--termont-blue, #0d6efd);\n}\n\n.container-card.status-export .card-header {\n    background: linear-gradient(135deg, #0d6efd, #0a58ca);\n    color: white;\n}\n\n\/* Issue #6996: status badge CSS disabled \u2014 preserved for later use *\/\n\/*\n.container-card.status-export .container-status-badge {\n    background-color: rgba(255, 255, 255, 0.3);\n    color: white;\n}\n*\/\n\n\/* Issue #6076 M7: Gray \u2014 Empty containers (repositioning, no charges) *\/\n.container-card.status-empty {\n    border-color: #6c757d;\n}\n\n.container-card.status-empty .card-header {\n    background: linear-gradient(135deg, #6c757d, #495057);\n    color: white;\n}\n\n\/* Issue #6996: status badge CSS disabled \u2014 preserved for later use *\/\n\/*\n.container-card.status-empty .container-status-badge {\n    background-color: rgba(255, 255, 255, 0.3);\n    color: white;\n}\n*\/\n\n\/* Issue #6115: Red \u2014 LFD Pending (import discharged, no LFD from TOS yet) *\/\n.container-card.status-lfd-pending {\n    border-color: #dc3545;\n}\n.container-card.status-lfd-pending .card-header {\n    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;\n    color: white !important;\n}\n.container-card.status-lfd-pending .card-header * {\n    color: white !important;\n}\n\n\/* Issue #6073 M10: CN Railway red border for train containers *\/\n.container-card.status-train {\n    border-left: 4px solid #C21B17;\n}\n.container-card.status-train .card-header {\n    background: linear-gradient(135deg, #C21B17 0%, #8B0000 100%) !important;\n    color: white !important;\n}\n.container-card.status-train .card-header * {\n    color: white !important;\n}\n\n\/* Container card hover effect *\/\n.container-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n}\n\n\/* Issue #6996: status badge CSS disabled \u2014 preserved for later use *\/\n\/*\n.container-status-badge {\n    font-size: 0.85rem;\n    padding: 0.5rem 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.container-card.status-available .container-status-badge {\n    background-color: rgba(255, 255, 255, 0.3);\n    color: white;\n}\n\n.container-card.status-hold .container-status-badge {\n    background-color: rgba(255, 255, 255, 0.3);\n    color: white;\n}\n\n.container-card.status-fees-pending .container-status-badge {\n    background-color: rgba(0, 0, 0, 0.1);\n    color: #333;\n}\n*\/\n\n\/* Readonly inputs styling *\/\n.container-card input[readonly] {\n    background-color: #f8f9fa;\n    border-color: #dee2e6;\n    cursor: default;\n    font-weight: 500;\n}\n\n\/* Issue #5166: Rich dark tooltip for container card fields *\/\n.tooltip-container-rich .tooltip-inner {\n    max-width: 320px;\n    text-align: left;\n    background-color: #1a1a2e;\n    color: #e0e0e0;\n    font-size: 0.85rem;\n    padding: 12px 16px;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n}\n.tooltip-container-rich .tooltip-arrow::before {\n    border-top-color: #1a1a2e;\n}\n.tooltip-container-rich .tooltip-inner strong {\n    color: #ffffff;\n}\n.tooltip-container-rich .tooltip-inner hr {\n    border-color: rgba(255,255,255,0.2);\n}\n\/* Help cursor for enriched tooltip fields *\/\n.container-card input[data-bs-toggle=\"tooltip\"] {\n    cursor: help !important;\n    border-bottom: 2px dashed #6c757d;\n}\n\n\/* Storage Timeline Styles *\/\n.storage-timeline {\n    position: relative;\n    padding-left: 40px;\n}\n\n.timeline-item {\n    position: relative;\n    padding-bottom: 2rem;\n}\n\n.timeline-item::before {\n    content: '';\n    position: absolute;\n    left: -25px;\n    top: 40px;\n    height: calc(100% - 40px);\n    width: 2px;\n    background: var(--termont-light-gray, #e0e0e0);\n}\n\n.timeline-item:last-child::before {\n    display: none;\n}\n\n.timeline-badge {\n    position: absolute;\n    left: -40px;\n    top: 0;\n    width: 30px;\n    height: 30px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 1rem;\n}\n\n.timeline-content {\n    background: var(--termont-light-bg, #f8f9fa);\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border-left: 3px solid var(--termont-blue, #0d6efd);\n}\n\n\/* Calculation Table Styles *\/\n.calculation-breakdown {\n    background: white;\n    border-radius: 0.5rem;\n    padding: 1rem;\n}\n\n.calculation-breakdown .table {\n    margin-bottom: 0;\n}\n\n.calculation-breakdown td:first-child {\n    width: 60%;\n}\n\n\/* Pricing Category Cards *\/\n.pricing-category-card {\n    border: 2px solid;\n    border-radius: 0.5rem;\n    overflow: hidden;\n    height: 100%;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.pricing-category-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n}\n\n.pricing-category-header {\n    padding: 0.75rem 1rem;\n    font-weight: 600;\n    font-size: 1.05rem;\n}\n\n.pricing-category-body {\n    padding: 1rem;\n    background: white;\n}\n\n.pricing-note {\n    margin-top: 0.75rem;\n    padding-top: 0.75rem;\n    border-top: 1px solid #dee2e6;\n    color: #6c757d;\n    font-size: 1rem;\n}\n\n\/* Print Styles *\/\n@media print {\n    .btn, .pricing-note {\n        display: none !important;\n    }\n\n    .card {\n        break-inside: avoid;\n    }\n\n    .pricing-category-card {\n        box-shadow: none !important;\n        transform: none !important;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Storage details specific functions\nfunction changePickupDate() {\n    \/\/ Issue #5291: Read current pickup date from hidden input or display element\n    const pickupInput = document.getElementById('pickupDate');\n    const currentPickupDate = pickupInput?.value || new Date().toISOString().split('T')[0];\n    \/\/ Issue #6692: Terminal open days for Flatpickr disable function\n    const openDays = (typeof wpContainerPortal !== 'undefined' && wpContainerPortal.terminalDaysOpen)\n        ? wpContainerPortal.terminalDaysOpen : ['mon','tue','wed','thu','fri'];\n    const dayNames = ['sun','mon','tue','wed','thu','fri','sat'];\n\n    \/\/ Issue #6701+#6814: Gate_out date cap \u2014 detect from current container API data\n    \/\/ Issue #6998: customs-inspection dray cycle is NOT a real gate-out \u2014 show friendly\n    \/\/ message and DO NOT cap the picker when the container has returned from customs.\n    let gateOutDate = null;\n    let gateOutMsg = '';\n    if (typeof isGateOut === 'function' && typeof window._currentApiData !== 'undefined') {\n        const apiData = window._currentApiData;\n        if (isGateOut(apiData)) {\n            gateOutDate = getGateOutDate(apiData);\n            if (gateOutDate) {\n                const d = new Date(gateOutDate + 'T12:00:00');\n                gateOutMsg = '<div class=\"alert alert-info mt-2 py-2 px-3 small\"><i class=\"fas fa-truck-moving\"><\/i> Container left the terminal on ' + d.toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'}) + '. Guarantee date cannot exceed departure date.<\/div>';\n            }\n        } else if (typeof hasReturnedFromDrayCycle === 'function' && hasReturnedFromDrayCycle(apiData)) {\n            \/\/ Issue #6998: customs-inspection dray cycle returned \u2014 no cap, friendlier note.\n            \/\/ gateOutDate stays null \u2192 effectiveMaxDate falls back to today + 90 days.\n            const cycles = (apiData && apiData.dray_deduction && apiData.dray_deduction.cycles) || [];\n            const latest = cycles[cycles.length - 1] || {};\n            const inRaw = latest.dray_in_date || '';\n            const inStr = inRaw\n                ? new Date(inRaw.substring(0, 10) + 'T12:00:00').toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'})\n                : '';\n            gateOutMsg = '<div class=\"alert alert-success mt-2 py-2 px-3 small\"><i class=\"fas fa-undo-alt\"><\/i> This container went out for customs inspection and returned to the yard'\n                + (inStr ? ' on ' + inStr : '')\n                + '. You may select any future business day as your planned pickup date.<\/div>';\n        }\n    }\n\n    \/\/ Issue #6814: Fix maxDate < minDate when gate_out is in the past\n    \/\/ When container left before today, allow selecting the gate_out date as pickup date\n    const todayStr = new Date().toISOString().split('T')[0];\n    const effectiveMinDate = (gateOutDate && gateOutDate < todayStr) ? gateOutDate : 'today';\n    \/\/ Issue #7012: max pickup days migrated to admin setting cw_max_pickup_days_future\n    const _maxPickupDaysFuture = window.wpContainerPortal?.financialDefaults?.maxPickupDaysFuture || 90;\n    const effectiveMaxDate = gateOutDate || new Date().fp_incr(_maxPickupDaysFuture);\n\n    Swal.fire({\n        title: 'Change Pickup Date',\n        html: `\n            <input type=\"text\"\n                   id=\"newPickupDate\"\n                   class=\"form-control\"\n                   style=\"cursor: pointer;\"\n                   placeholder=\"YYYY-MM-DD\"\n                   readonly\n                   value=\"${currentPickupDate}\">\n            ${gateOutMsg}\n        `,\n        confirmButtonText: 'Update',\n        showCancelButton: true,\n        confirmButtonColor: '#0056b3',\n        \/\/ Issue #6692+#6701+#6814: Initialize Flatpickr with disabled weekends + gate_out cap\n        didOpen: () => {\n            if (typeof flatpickr !== 'undefined') {\n                flatpickr('#newPickupDate', {\n                    dateFormat: 'Y-m-d',\n                    defaultDate: (gateOutDate && gateOutDate < todayStr) ? gateOutDate : currentPickupDate,\n                    minDate: effectiveMinDate,\n                    maxDate: effectiveMaxDate,\n                    disable: [function(date) {\n                        return !openDays.includes(dayNames[date.getDay()]);\n                    }],\n                    locale: { firstDayOfWeek: 1 }\n                });\n            }\n        },\n        preConfirm: () => {\n            const newDate = document.getElementById('newPickupDate').value;\n            if (!newDate) {\n                Swal.showValidationMessage('Please select a date');\n            }\n            return newDate;\n        }\n    }).then((result) => {\n        if (result.isConfirmed) {\n            const newDate = result.value;\n            \/\/ Issue #5291: Update hidden input (used by fetchContainerFromAPI for planned_pickup_date)\n            if (pickupInput) pickupInput.value = newDate;\n            \/\/ Issue #5291: Immediately update the display card so user sees the new date\n            const displayEl = document.getElementById('displayPickupDate');\n            if (displayEl) {\n                displayEl.textContent = new Date(newDate + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\n            }\n            \/\/ Issue #5291: Re-call API with new planned_pickup_date (async)\n            refreshAllAfterDateChange(newDate);\n        }\n    });\n}\n\n\/\/ Issue #5381 M2: printCalculation() removed (dead code \u2014 Print Details button deleted)\n\n\/**\n * Issue #5347: saveCalculation() \u2014 COMMENTED OUT (dead code)\n *\n * This function saves container + storage data to localStorage('savedCalculation')\n * but NO retrieval logic exists anywhere in the plugin. The Swal message says\n * \"You can retrieve it later\" but there's no UI or function to do so.\n *\n * Data saved: { container, storage, savedAt: ISO timestamp }\n * Key: 'savedCalculation' (never read by getItem anywhere)\n *\n * To restore this feature:\n * 1. Uncomment this function\n * 2. Uncomment the \"Save for Later\" button (line ~486)\n * 3. Add retrieval logic on Step 1 (check localStorage on page load)\n * 4. Show \"Resume saved calculation?\" banner if data exists\n * 5. Add TTL expiry (e.g., 24 hours) to prevent stale data\n *\/\n\/*\nfunction saveCalculation() {\n    const workflowData = WorkflowState.getWorkflowData();\n    const calculationData = {\n        container: workflowData.container,\n        storage: workflowData.storage,\n        savedAt: new Date().toISOString()\n    };\n\n    localStorage.setItem('savedCalculation', JSON.stringify(calculationData));\n\n    Swal.fire({\n        icon: 'success',\n        title: 'Saved!',\n        text: 'Your calculation has been saved. You can retrieve it later.',\n        confirmButtonColor: '#28a745'\n    });\n}\n*\/\n\n\/\/ Issue #5295: Rewritten with container-type-aware $0 logic + SweetAlert summary\nfunction proceedToPayment() {\n    console.log('\ud83d\ude80 proceedToPayment called (section 2) - v4.0 Issue #5295');\n\n    \/\/ Issue #6746: Defense-in-depth \u2014 re-check activation even if button was manually re-enabled\n    var activation = checkUserActivationStatus();\n    if (!activation.allowed) {\n        Swal.fire({\n            icon: 'error',\n            title: 'Account Not Activated',\n            text: 'Your organization must be activated before proceeding to payment or guarantee. Please contact Termont administration.',\n            confirmButtonColor: '#d33'\n        });\n        return;\n    }\n\n    \/\/ 1. Validate checkbox\n    const agreeEl = document.getElementById('agreeToCharges');\n    if (!agreeEl || !agreeEl.checked) {\n        Swal.fire({\n            icon: 'warning',\n            title: 'Agreement Required',\n            text: 'Please check \"I understand and agree to the storage charges calculated above.\" to proceed.',\n            confirmButtonColor: '#ffc107'\n        });\n        return;\n    }\n\n    \/\/ Issue #5381 M1: Fix container access \u2014 getContainers() doesn't exist on WorkflowState\n    const step1Data = (typeof WorkflowState !== 'undefined')\n        ? (WorkflowState.getWorkflowData()?.container || {})\n        : {};\n    const containers = step1Data.containers || [];\n\n    let empties = [];\n    let charged = [];\n    let zeroCharged = []; \/\/ imports\/exports with $0 (abnormal)\n\n    containers.forEach(c => {\n        const movType = (c.data?.movement_type || c.apiData?.container_info?.movement_type || '').toUpperCase();\n        const isEmpty = movType.includes('EMPTY');\n        const amount = c.storage?.charges?.total || c.apiData?.calculated_charges?.total || 0;\n        const name = c.data?.container_number || c.containerNumber || 'Unknown';\n\n        if (isEmpty) {\n            empties.push({ name, type: 'Empty', amount: 0 });\n        } else if (amount > 0) {\n            charged.push({ name, type: movType.includes('OUT') ? 'Export' : 'Import', amount });\n        } else {\n            zeroCharged.push({ name, type: movType.includes('OUT') ? 'Export' : 'Import', amount: 0 });\n        }\n    });\n\n    console.log('\ud83d\udce6 Container breakdown:', { empties: empties.length, charged: charged.length, zeroCharged: zeroCharged.length });\n\n    \/\/ Issue #6262: Block when NO containers have actual charges (covers empties + zero-charged)\n    if (charged.length === 0) {\n        const blockTitle = (empties.length > 0 && zeroCharged.length === 0)\n            ? 'No Charges for Empty Containers'\n            : 'No Charges Calculated';\n        const blockHtml = (empties.length > 0 && zeroCharged.length === 0)\n            ? 'Your selection contains only empty containers, which have no applicable fees.<br>There is nothing to pay.'\n            : 'No gate fee or storage charges were found for the selected containers.<br>' +\n              'This may happen when containers are still in free period or pricing is unavailable.';\n        Swal.fire({\n            icon: 'info',\n            title: blockTitle,\n            html: blockHtml,\n            confirmButtonColor: '#3085d6'\n        });\n        return;\n    }\n\n    \/\/ Issue #5350: Removed SweetAlert confirmation modal \u2014 proceed directly to Step 3\n    \/\/ (modal added no value, just repeated pricing info already visible in Step 2)\n\n    \/\/ Save special instructions if any\n    const specialEl = document.getElementById('specialInstructions');\n    if (specialEl && specialEl.value && typeof WorkflowState !== 'undefined') {\n        const wd = WorkflowState.getWorkflowData();\n        const sd = wd.storageDetails || {};\n        sd.specialInstructions = specialEl.value;\n        WorkflowState.setStepData(2, sd);\n    }\n\n    \/\/ Issue #5497: Populate Step 3 payment summary BEFORE transitioning\n    if (typeof updatePaymentSummaryDisplay === 'function') {\n        updatePaymentSummaryDisplay();\n    }\n\n    console.log('\u2705 Proceeding directly to step 3 (no confirmation modal)');\n    enableSection(3);\n    goToStep(3);\n}\n\n\/**\n * Issue #6746 M5: Check user activation status and gate Step 2\u21923 transition.\n * @returns {{ allowed: boolean, reason: string }}\n *\/\nfunction checkUserActivationStatus() {\n    var status = (window.wpContainerPortal && window.wpContainerPortal.userActivationStatus) || {};\n    var gateSection = document.getElementById('activationGateSection');\n    var orgMsg = document.getElementById('activationBlockedMessage');\n    var ifsMsg = document.getElementById('ifsBlockedMessage');\n\n    \/\/ Reset all gates\n    if (gateSection) gateSection.classList.add('d-none');\n    if (orgMsg) orgMsg.classList.add('d-none');\n    if (ifsMsg) ifsMsg.classList.add('d-none');\n\n    \/\/ Guest users (not logged in) \u2014 allow browsing, SSO gate blocks at Step 4\n    if (status.guest) return { allowed: true, reason: 'guest' };\n\n    \/\/ Gate A: No organization linked\n    if (!status.orgLinked) {\n        if (gateSection) gateSection.classList.remove('d-none');\n        if (orgMsg) orgMsg.classList.remove('d-none');\n        \/\/ Issue #6746 M8: Sentry breadcrumb\n        if (typeof Sentry !== 'undefined' && Sentry.addBreadcrumb) {\n            Sentry.addBreadcrumb({ category: 'activation-gate', message: 'Step 2\u21923 blocked: org_missing', level: 'warning' });\n        }\n        return { allowed: false, reason: 'org_missing' };\n    }\n\n    \/\/ Gate B: Organization exists but IFS not linked\n    if (!status.ifsLinked) {\n        if (gateSection) gateSection.classList.remove('d-none');\n        if (ifsMsg) ifsMsg.classList.remove('d-none');\n        if (typeof Sentry !== 'undefined' && Sentry.addBreadcrumb) {\n            Sentry.addBreadcrumb({ category: 'activation-gate', message: 'Step 2\u21923 blocked: ifs_missing', level: 'warning' });\n        }\n        return { allowed: false, reason: 'ifs_missing' };\n    }\n\n    return { allowed: true, reason: 'activated' };\n}\n\n\/\/ Issue #5295 + #6746 M5: Enable proceed button when checkbox is checked AND user is activated\nfunction updatePaymentButtonState() {\n    var agreeEl = document.getElementById('agreeToCharges');\n    var btn = document.getElementById('proceedToPaymentBtn');\n    var agreeWrapper = document.getElementById('agreeToChargesWrapper');\n    if (!agreeEl || !btn) return;\n\n    \/\/ Issue #7139 NUCLEAR FIX: Use CSS class 'activation-hidden' as the SINGLE\n    \/\/ source of truth. This class can ONLY be removed here when activation passes.\n    \/\/ No other code path can override it (unlike style.display which gets stomped).\n    var activation = checkUserActivationStatus();\n    if (!activation.allowed) {\n        btn.classList.add('activation-hidden');\n        if (agreeWrapper) agreeWrapper.classList.add('activation-hidden');\n        return;\n    }\n\n    \/\/ #11219 Bug B \u2014 when Total Due is $0 (e.g. fully covered by prior Moneris payment),\n    \/\/ hide BOTH the \"I understand and agree\" checkbox AND the Proceed button. Pressing\n    \/\/ them at $0 is a no-op nuisance and confuses the user.\n    var masterAmt = document.getElementById('masterTotalAmount');\n    if (masterAmt) {\n        var raw = (masterAmt.innerText || masterAmt.textContent || '').replace(\/[^\\d.\\-]\/g, '');\n        var amt = parseFloat(raw);\n        if (!isNaN(amt) && amt <= 0) {\n            btn.classList.add('activation-hidden');\n            if (agreeWrapper) agreeWrapper.classList.add('activation-hidden');\n            return;\n        }\n    }\n\n    \/\/ Activation passed AND total > $0 \u2014 remove the class, show normally\n    btn.classList.remove('activation-hidden');\n    if (agreeWrapper) agreeWrapper.classList.remove('activation-hidden');\n    btn.disabled = !agreeEl.checked;\n    btn.title = agreeEl.checked ? '' : 'Please agree to storage charges to proceed';\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    const agreeEl = document.getElementById('agreeToCharges');\n    if (agreeEl) {\n        agreeEl.addEventListener('change', updatePaymentButtonState);\n    }\n    \/\/ Listen for pricing updates from step2-details.js\n    document.addEventListener('pricing-updated', updatePaymentButtonState);\n    \/\/ Initial state check\n    updatePaymentButtonState();\n});\n<\/script>\n\n<!-- Issue #6611 M2: Origin Data Lineage Modal (clickable from origin \"-\" field) -->\n<div class=\"modal fade\" id=\"originDataLineageModal\" tabindex=\"-1\" aria-labelledby=\"originDataLineageModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg modal-dialog-scrollable\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-warning-subtle\">\n                <h5 class=\"modal-title\" id=\"originDataLineageModalLabel\">\n                    <i class=\"fas fa-route me-2\"><\/i> Origin Field \u2014 Data Lineage Report\n                <\/h5>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n\n                                \n                <!-- Data Lineage ASCII Diagram -->\n                <h6><i class=\"fas fa-sitemap me-1\"><\/i> Data Route Path<\/h6>\n                <pre class=\"bg-dark text-light p-3 rounded mb-4\" style=\"font-size:0.7rem; overflow-x: auto; white-space: pre;\">\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                    ORIGIN FIELD \u2014 DATA ROUTE PATH                   \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                                                                     \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502 Shipping Line \u2502\u2500\u2500\u2500\u25b6\u2502 EDI Messages \u2502\u2500\u2500\u2500\u25b6\u2502 Logistec WCT Portal  \u2502  \u2502\n\u2502  \u2502   (MSC etc)   \u2502    \u2502 (B\/L data)   \u2502    \u2502 vessel_voyage.origin \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2502 \u2705 \"Thessaloniki\"    \u2502  \u2502\n\u2502                                           \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2502                                                                     \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502   N4 TOS     \u2502\u2500\u2500\u2500\u25b6\u2502  TOS API     \u2502\u2500\u2500\u2500\u25b6\u2502  GetDetails.php      \u2502  \u2502\n\u2502  \u2502  (Navis)     \u2502    \u2502  (Storage)   \u2502    \u2502  \u274c No origin field  \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2502                                                                     \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502 DataWarehouse\u2502\u2500\u2500\u2500\u25b6\u2502  ETL Sync    \u2502\u2500\u2500\u2500\u25b6\u2502  dms_etl_container   \u2502  \u2502\n\u2502  \u2502 (SQL Server) \u2502    \u2502  (hourly)    \u2502    \u2502  _cycle              \u2502  \u2502\n\u2502  \u2502 LIVE_Contain \u2502    \u2502              \u2502    \u2502  \u274c No origin column \u2502  \u2502\n\u2502  \u2502 er_Cycles    \u2502    \u2502              \u2502    \u2502                      \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2502                                                                     \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502 DWH VIEW_manifest_bol.load_port:                             \u2502  \u2502\n\u2502  \u2502 \u26a0\ufe0f Field EXISTS but only 8 ports populated globally          \u2502  \u2502\n\u2502  \u2502 Most containers have NULL in this field                      \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2502                                                                     \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502 CONCLUSION: Origin comes from B\/L carrier EDI data only.     \u2502  \u2502\n\u2502  \u2502 Termont N4\/TOS\/DWH does NOT expose this field.               \u2502  \u2502\n\u2502  \u2502 Only Logistec has it (from carrier portal).                  \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n                <\/pre>\n\n                <!-- Table-by-Table Audit -->\n                <h6><i class=\"fas fa-database me-1\"><\/i> Table-by-Table Audit<\/h6>\n                <div class=\"table-responsive mb-4\">\n                    <table class=\"table table-sm table-bordered\">\n                        <thead class=\"table-light\">\n                            <tr>\n                                <th>#<\/th>\n                                <th>Table \/ Source<\/th>\n                                <th>Column<\/th>\n                                <th>Has Origin?<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <tr>\n                                <td>1<\/td>\n                                <td><code>wpVBS_dms_etl_container_cycle<\/code><\/td>\n                                <td><code>discharge_port<\/code><\/td>\n                                <td><span class=\"dms-badge dms-badge-danger\">\u274c<\/span> Port gkey, not origin<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>2<\/td>\n                                <td><code>wpVBS_dms_operation<\/code><\/td>\n                                <td><code>origin<\/code><\/td>\n                                <td><span class=\"dms-badge dms-badge-danger\">\u274c<\/span> Tracks input source, not port<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>3<\/td>\n                                <td>TOS API <code>GetDetails.php<\/code><\/td>\n                                <td>\u2014<\/td>\n                                <td><span class=\"dms-badge dms-badge-danger\">\u274c<\/span> Not in response<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>4<\/td>\n                                <td>DWH <code>LIVE_Container_Cycles<\/code><\/td>\n                                <td>\u2014<\/td>\n                                <td><span class=\"dms-badge dms-badge-danger\">\u274c<\/span> No loading port column<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>5<\/td>\n                                <td>DWH <code>VIEW_manifest_bol<\/code><\/td>\n                                <td><code>load_port<\/code><\/td>\n                                <td><span class=\"dms-badge dms-badge-warning\">\u26a0\ufe0f<\/span> Exists but usually empty<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>6<\/td>\n                                <td>Logistec WCT HTML<\/td>\n                                <td>Column 4 of vessel table<\/td>\n                                <td><span class=\"dms-badge dms-badge-success\">\u2705<\/span> <strong>Only source<\/strong><\/td>\n                            <\/tr>\n                            <tr>\n                                <td>7<\/td>\n                                <td>DMS API <code>vessel_info.origin<\/code><\/td>\n                                <td>Hardcoded logic<\/td>\n                                <td><span class=\"dms-badge dms-badge-danger\">\u274c<\/span> Returns null for imports<\/td>\n                            <\/tr>\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n\n                <!-- Summary -->\n                <div class=\"alert alert-warning mb-0\">\n                    <i class=\"fas fa-exclamation-triangle me-1\"><\/i>\n                    <strong>Conclusion:<\/strong> Origin port is sourced exclusively from B\/L carrier EDI data.\n                    Termont N4\/TOS\/DataWarehouse does not expose this field.\n                    Only the legacy Logistec WCT portal has access to it (scraped from carrier systems).\n                <\/div>\n\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n        <\/div>\n\n        <!-- Sign-in CTA for Steps 3-5 -->\n        <div class=\"row justify-content-center mt-4 mb-5\">\n            <div class=\"col-lg-8 col-md-10\">\n                <div class=\"card border-0 shadow-sm sso-gate-partial-card\">\n                    <div class=\"card-body text-center p-4\">\n                        <div class=\"mb-3\">\n                            <i class=\"fa-solid fa-user-plus fa-2x text-primary\"><\/i>\n                        <\/div>\n                        <h4 class=\"mb-3\">Register your company to continue with Steps 3, 4 and 5<\/h4>\n                        <p class=\"text-muted mb-4\">\n                            Payment, guarantee letter signing, and confirmation require a free Termont account. Registering your company takes ~2 minutes \u2014 sign-in for existing users available too.                        <\/p>\n                        <button type=\"button\" class=\"btn btn-primary btn-lg px-5 me-2 mb-2\" data-sso-open=\"register\">\n                            <i class=\"fa-solid fa-user-plus me-2\"><\/i>Register your company                        <\/button>\n                        <button type=\"button\" class=\"btn btn-outline-primary btn-lg px-4 mb-2\" data-sso-open=\"login\">\n                            <i class=\"fa-solid fa-right-to-bracket me-2\"><\/i>Sign In                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<!-- Floating Help Button -->\n\n<!-- Floating Help Button -->\n<div class=\"floating-help\">\n    <button class=\"help-button\" onclick=\"openHelp()\" data-bs-toggle=\"tooltip\" data-bs-placement=\"left\" title=\"Need help? Click here!\">\n        <i class=\"fas fa-question\"><\/i>\n    <\/button>\n\n    <!-- Quick Actions Menu (hidden by default) -->\n    <div class=\"help-menu d-none\" id=\"helpMenu\">\n        <button class=\"help-menu-item\" onclick=\"openHelp()\">\n            <i class=\"fas fa-life-ring\"><\/i> Help Center\n        <\/button>\n        <button class=\"help-menu-item\" onclick=\"startLiveChat()\">\n            <i class=\"fas fa-comments\"><\/i> Live Chat\n        <\/button>\n        <button class=\"help-menu-item\" onclick=\"callSupport()\">\n            <i class=\"fas fa-phone\"><\/i> Call Support\n        <\/button>\n        <button class=\"help-menu-item\" onclick=\"reportIssue()\">\n            <i class=\"fas fa-bug\"><\/i> Report Issue\n        <\/button>\n    <\/div>\n<\/div>\n\n<style>\n.floating-help {\n    position: fixed;\n    bottom: 2rem;\n    right: 2rem;\n    z-index: 1000;\n}\n\n.help-button {\n    width: 60px;\n    height: 60px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--termont-orange), #e56a00);\n    color: white;\n    border: none;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    animation: pulse 2s infinite;\n}\n\n.help-button:hover {\n    transform: scale(1.1);\n    animation: none;\n}\n\n@keyframes pulse {\n    0% {\n        box-shadow: 0 0 0 0 rgba(253,126,20,0.7);\n    }\n    70% {\n        box-shadow: 0 0 0 20px rgba(253,126,20,0);\n    }\n    100% {\n        box-shadow: 0 0 0 0 rgba(253,126,20,0);\n    }\n}\n\n.help-menu {\n    position: absolute;\n    bottom: 70px;\n    right: 0;\n    background: white;\n    border-radius: 0.5rem;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n    padding: 0.5rem;\n    min-width: 180px;\n}\n\n.help-menu-item {\n    display: block;\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border: none;\n    background: white;\n    color: var(--termont-dark-blue);\n    text-align: left;\n    cursor: pointer;\n    transition: all 0.3s;\n    border-radius: 0.25rem;\n    margin-bottom: 0.25rem;\n}\n\n.help-menu-item:hover {\n    background: var(--termont-light-gray);\n    transform: translateX(5px);\n}\n\n.help-menu-item i {\n    margin-right: 0.5rem;\n    color: var(--termont-orange);\n}\n\n\/* Live chat indicator *\/\n.help-button::after {\n    content: '';\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    width: 12px;\n    height: 12px;\n    background: #28a745;\n    border: 2px solid white;\n    border-radius: 50%;\n    animation: blink 2s infinite;\n}\n\n@keyframes blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n}\n\n@media (max-width: 768px) {\n    .floating-help {\n        bottom: 1rem;\n        right: 1rem;\n    }\n\n    .help-button {\n        width: 50px;\n        height: 50px;\n        font-size: 1.25rem;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Toggle help menu\ndocument.querySelector('.help-button').addEventListener('contextmenu', function(e) {\n    e.preventDefault();\n    const menu = document.getElementById('helpMenu');\n    menu.classList.toggle('d-none');\n});\n\n\/\/ Close menu when clicking outside\ndocument.addEventListener('click', function(e) {\n    if (!e.target.closest('.floating-help')) {\n        document.getElementById('helpMenu')?.classList.add('d-none');\n    }\n});\n\n\/\/ Support functions\nfunction callSupport() {\n    Swal.fire({\n        title: 'Call Support',\n        html: `\n            <div class=\"text-center\">\n                <i class=\"fas fa-phone fa-3x text-primary mb-3\"><\/i>\n                <h4>1-800-TERMONT<\/h4>\n                <p>(1-800-837-6668)<\/p>\n                <p class=\"text-muted\">Available 24\/7<\/p>\n                <hr>\n                <p>Press 1 for Container Services<\/p>\n                <p>Press 2 for Billing Support<\/p>\n                <p>Press 3 for Technical Support<\/p>\n            <\/div>\n        `,\n        confirmButtonText: 'Close',\n        confirmButtonColor: '#0056b3'\n    });\n}\n\nfunction reportIssue() {\n    Swal.fire({\n        title: 'Report an Issue',\n        html: `\n            <form id=\"issueForm\">\n                <div class=\"mb-3 text-start\">\n                    <label class=\"form-label\">Issue Type<\/label>\n                    <select class=\"form-select\">\n                        <option>Technical Problem<\/option>\n                        <option>Billing Issue<\/option>\n                        <option>Container Not Found<\/option>\n                        <option>Payment Error<\/option>\n                        <option>Other<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"mb-3 text-start\">\n                    <label class=\"form-label\">Description<\/label>\n                    <textarea class=\"form-control\" rows=\"3\" placeholder=\"Describe the issue...\"><\/textarea>\n                <\/div>\n                <div class=\"mb-3 text-start\">\n                    <label class=\"form-label\">Priority<\/label>\n                    <select class=\"form-select\">\n                        <option>Low<\/option>\n                        <option>Medium<\/option>\n                        <option>High<\/option>\n                        <option>Urgent<\/option>\n                    <\/select>\n                <\/div>\n            <\/form>\n        `,\n        confirmButtonText: 'Submit Issue',\n        showCancelButton: true,\n        confirmButtonColor: '#dc3545',\n        preConfirm: () => {\n            return new Promise((resolve) => {\n                setTimeout(() => {\n                    resolve();\n                }, 1000);\n            });\n        }\n    }).then((result) => {\n        if (result.isConfirmed) {\n            Swal.fire({\n                icon: 'success',\n                title: 'Issue Reported',\n                text: 'Ticket #' + Math.random().toString(36).substr(2, 9).toUpperCase() + ' created. We\\'ll contact you within 24 hours.',\n                confirmButtonColor: '#28a745'\n            });\n        }\n    });\n}\n<\/script>\n<!-- Modals -->\n\n<!-- Terms and Conditions Modal -->\n<div class=\"modal fade\" id=\"termsModal\" tabindex=\"-1\" aria-labelledby=\"termsModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg modal-dialog-scrollable\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-primary text-white\">\n                <h5 class=\"modal-title\" id=\"termsModalLabel\">\n                    <i class=\"fas fa-file-contract\"><\/i> Terms and Conditions                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <h6>1. Container Storage Agreement<\/h6>\n                <p>By using this service, you agree to the terms and conditions set forth by Termont Montreal Inc. for container storage services at the Port of Montreal.<\/p>\n                \n                <h6>2. Storage Charges<\/h6>\n                <ul>\n                    <li>Free time: First 7 days after discharge<\/li>\n                    <li>Storage rates: $15\/day for 20' containers, $30\/day for 40' containers<\/li>\n                    <li>Charges begin on the 8th day after discharge<\/li>\n                    <li>All rates are in Canadian dollars (CAD)<\/li>\n                    <li>Applicable taxes will be added to all charges<\/li>\n                <\/ul>\n                \n                <h6>3. Payment Terms<\/h6>\n                <p>Payment must be made in full before container release. Accepted payment methods include:<\/p>\n                <ul>\n                    <li>Credit cards (Visa, MasterCard, American Express)<\/li>\n                    <li>Debit cards<\/li>\n                    <li>Company account (subject to credit approval)<\/li>\n                <\/ul>\n                \n                <h6>4. Container Release<\/h6>\n                <p>Containers will be released only upon:<\/p>\n                <ul>\n                    <li>Full payment of storage charges<\/li>\n                    <li>Presentation of valid identification<\/li>\n                    <li>Signed guarantee letter<\/li>\n                    <li>Compliance with terminal security procedures<\/li>\n                <\/ul>\n                \n                <h6>5. Liability<\/h6>\n                <p>Termont Montreal Inc. shall not be liable for any indirect, incidental, or consequential damages arising from the use of this service.<\/p>\n                \n                <h6>6. Governing Law<\/h6>\n                <p>This agreement shall be governed by the laws of Quebec, Canada.<\/p>\n                \n                <div class=\"alert alert-info mt-3\">\n                    <i class=\"fas fa-info-circle\"><\/i>\n                    Last updated: June 14, 2026                <\/div>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Fermer<\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"acceptTerms()\">\n                    <i class=\"fas fa-check\"><\/i> I Accept                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Help Center Modal -->\n<div class=\"modal fade\" id=\"helpModal\" tabindex=\"-1\" aria-labelledby=\"helpModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-xl\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-info text-white\">\n                <h5 class=\"modal-title\" id=\"helpModalLabel\">\n                    <i class=\"fas fa-life-ring\"><\/i> Help Center                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <div class=\"row\">\n                    <div class=\"col-md-3\">\n                        <div class=\"list-group\" id=\"helpCategories\">\n                            <a href=\"#\" class=\"list-group-item list-group-item-action active\" data-category=\"getting-started\">\n                                <i class=\"fas fa-play-circle\"><\/i> Getting Started\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"container-lookup\">\n                                <i class=\"fas fa-search\"><\/i> Container Lookup\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"storage-charges\">\n                                <i class=\"fas fa-calculator\"><\/i> Storage Charges\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"payment\">\n                                <i class=\"fas fa-credit-card\"><\/i> Payment\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"pickup\">\n                                <i class=\"fas fa-truck\"><\/i> Container Pickup\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"troubleshooting\">\n                                <i class=\"fas fa-tools\"><\/i> Troubleshooting\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                    <div class=\"col-md-9\">\n                        <div id=\"helpContent\">\n                            <h5>Getting Started with Container Storage Workflow<\/h5>\n                            <p>Welcome to the Termont Montreal container storage and guarantee workflow. This system allows you to:<\/p>\n                            <ul>\n                                <li>Look up your container information<\/li>\n                                <li>Calculate storage charges<\/li>\n                                <li>Process payment securely<\/li>\n                                <li>Generate a guarantee letter<\/li>\n                                <li>Obtain container release documents<\/li>\n                            <\/ul>\n                            \n                            <h6>Prerequisites<\/h6>\n                            <p>Before starting, ensure you have:<\/p>\n                            <ul>\n                                <li>Your container number (11 characters, e.g., TGHU1234567)<\/li>\n                                <li>A valid payment method<\/li>\n                                <li>Authorization to act on behalf of your company<\/li>\n                            <\/ul>\n                            \n                            <h6>Step-by-Step Process<\/h6>\n                            <ol>\n                                <li><strong>Container Lookup:<\/strong> Enter your container number and planned pickup date<\/li>\n                                <li><strong>Review Charges:<\/strong> Review the calculated storage charges<\/li>\n                                <li><strong>Process Payment:<\/strong> Complete payment using credit card or company account<\/li>\n                                <li><strong>Sign Guarantee:<\/strong> Digitally sign the guarantee letter<\/li>\n                                <li><strong>Download Documents:<\/strong> Download and save all documents for pickup<\/li>\n                            <\/ol>\n                            \n                            <div class=\"alert alert-success mt-3\">\n                                <i class=\"fas fa-lightbulb\"><\/i>\n                                <strong>Tip:<\/strong> Save your confirmation number for quick reference at the terminal.\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Fermer<\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"startLiveChat()\">\n                    <i class=\"fas fa-comments\"><\/i> D\u00e9marrer la discussion en direct                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Live Chat Modal -->\n<div class=\"modal fade\" id=\"liveChatModal\" tabindex=\"-1\" aria-labelledby=\"liveChatModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-dialog-centered\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-success text-white\">\n                <h5 class=\"modal-title\" id=\"liveChatModalLabel\">\n                    <i class=\"fas fa-comments\"><\/i> Live Chat Support                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <div class=\"chat-container\" style=\"height: 400px;\">\n                    <div class=\"chat-messages\" id=\"chatMessages\" style=\"height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem; border-radius: 0.25rem; background: #f8f9fa;\">\n                        <div class=\"chat-message chat-message-agent\">\n                            <strong>Support Agent:<\/strong> Hello! I'm here to help with your container storage inquiry. How can I assist you today?\n                        <\/div>\n                    <\/div>\n                    <div class=\"chat-input mt-3\">\n                        <div class=\"input-group\">\n                            <input type=\"text\" \n                                   class=\"form-control\" \n                                   id=\"chatInput\" \n                                   placeholder=\"Type your message...\"\n                                   onkeypress=\"if(event.key === 'Enter') sendChatMessage()\">\n                            <button class=\"btn btn-primary\" onclick=\"sendChatMessage()\">\n                                <i class=\"fas fa-paper-plane\"><\/i> Send\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"mt-3\">\n                    <small class=\"text-muted\">\n                        <i class=\"fas fa-circle text-success\"><\/i> Agent is online\n                        \u2022 Average response time: < 1 minute\n                    <\/small>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- PDF Preview Modal -->\n<div class=\"modal fade\" id=\"pdfPreviewModal\" tabindex=\"-1\" aria-labelledby=\"pdfPreviewModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"pdfPreviewModalLabel\">\n                    <i class=\"fas fa-file-pdf text-danger\"><\/i> Document Preview\n                <\/h5>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body text-center\" style=\"min-height: 500px;\">\n                <div class=\"pdf-preview-placeholder\">\n                    <i class=\"fas fa-file-pdf fa-8x text-danger mb-3\"><\/i>\n                    <h5>Guarantee Letter Preview<\/h5>\n                    <p class=\"text-muted\">The signed document will be available for download after completion.<\/p>\n                    <div class=\"mt-4\">\n                        <button class=\"btn btn-outline-primary\" onclick=\"downloadPreview()\">\n                            <i class=\"fas fa-download\"><\/i> Download Sample\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Session Warning Modal -->\n<div class=\"modal fade\" id=\"sessionWarningModal\" tabindex=\"-1\" aria-labelledby=\"sessionWarningModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">\n    <div class=\"modal-dialog modal-dialog-centered\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-warning\">\n                <h5 class=\"modal-title\" id=\"sessionWarningModalLabel\">\n                    <i class=\"fas fa-clock\"><\/i> Session Expiring Soon\n                <\/h5>\n            <\/div>\n            <div class=\"modal-body\">\n                <p>Your session will expire in <strong id=\"sessionTimeRemaining\">5 minutes<\/strong> due to inactivity.<\/p>\n                <p>Would you like to continue working?<\/p>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" onclick=\"logoutUser()\">\n                    <i class=\"fas fa-sign-out-alt\"><\/i> Logout\n                <\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"extendSession()\">\n                    <i class=\"fas fa-clock\"><\/i> Continue Working\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Modal-specific JavaScript functions\nfunction acceptTerms() {\n    localStorage.setItem('termsAccepted', 'true');\n    localStorage.setItem('termsAcceptedDate', new Date().toISOString());\n    \n    const modal = bootstrap.Modal.getInstance(document.getElementById('termsModal'));\n    modal.hide();\n    \n    Swal.fire({\n        icon: 'success',\n        title: 'Terms Accepted',\n        text: 'Thank you for accepting our terms and conditions.',\n        timer: 2000,\n        showConfirmButton: false\n    });\n}\n\nfunction openHelp() {\n    const helpModal = new bootstrap.Modal(document.getElementById('helpModal'));\n    helpModal.show();\n}\n\nfunction startLiveChat() {\n    \/\/ Close help modal if open\n    const helpModal = bootstrap.Modal.getInstance(document.getElementById('helpModal'));\n    if (helpModal) helpModal.hide();\n    \n    \/\/ Open chat modal\n    const chatModal = new bootstrap.Modal(document.getElementById('liveChatModal'));\n    chatModal.show();\n}\n\nfunction sendChatMessage() {\n    const input = document.getElementById('chatInput');\n    const message = input.value.trim();\n    \n    if (!message) return;\n    \n    \/\/ Add user message\n    const chatMessages = document.getElementById('chatMessages');\n    chatMessages.innerHTML += `\n        <div class=\"chat-message chat-message-user mt-2\">\n            <strong>You:<\/strong> ${message}\n        <\/div>\n    `;\n    \n    \/\/ Clear input\n    input.value = '';\n    \n    \/\/ Simulate agent response\n    setTimeout(() => {\n        const responses = [\n            \"I understand your concern. Let me help you with that.\",\n            \"I can assist you with container storage inquiries.\",\n            \"Please provide your container number so I can look it up for you.\",\n            \"I'm checking that information for you now.\"\n        ];\n        const randomResponse = responses[Math.floor(Math.random() * responses.length)];\n        \n        chatMessages.innerHTML += `\n            <div class=\"chat-message chat-message-agent mt-2\">\n                <strong>Support Agent:<\/strong> ${randomResponse}\n            <\/div>\n        `;\n        \n        \/\/ Scroll to bottom\n        chatMessages.scrollTop = chatMessages.scrollHeight;\n    }, 1000 + Math.random() * 2000);\n    \n    \/\/ Scroll to bottom\n    chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\nfunction downloadPreview() {\n    Swal.fire({\n        icon: 'info',\n        title: 'Downloading Sample',\n        text: 'Sample_Guarantee_Letter.pdf',\n        timer: 2000,\n        showConfirmButton: false\n    });\n}\n\nfunction extendSession() {\n    \/\/ Reset session timer\n    resetSessionTimer();\n    \n    \/\/ Close modal\n    const modal = bootstrap.Modal.getInstance(document.getElementById('sessionWarningModal'));\n    modal.hide();\n    \n    \/\/ Refresh session on server\n    fetch('api\/refresh-session.php', { method: 'POST' });\n}\n\nfunction logoutUser() {\n    window.location.href = 'logout.php';\n}\n\n\/\/ Help category navigation\ndocument.querySelectorAll('#helpCategories a').forEach(link => {\n    link.addEventListener('click', function(e) {\n        e.preventDefault();\n        \n        \/\/ Update active state\n        document.querySelectorAll('#helpCategories a').forEach(l => l.classList.remove('active'));\n        this.classList.add('active');\n        \n        \/\/ Load category content\n        const category = this.dataset.category;\n        loadHelpContent(category);\n    });\n});\n\nfunction loadHelpContent(category) {\n    const content = {\n        'container-lookup': `\n            <h5>Container Lookup Help<\/h5>\n            <p>To look up your container:<\/p>\n            <ol>\n                <li>Enter the 11-character container number (e.g., TGHU1234567)<\/li>\n                <li>Select your planned pickup date<\/li>\n                <li>Click \"Lookup Container\"<\/li>\n            <\/ol>\n            <p><strong>Common Issues:<\/strong><\/p>\n            <ul>\n                <li>Container not found: Verify the number is correct<\/li>\n                <li>Invalid format: Use 4 letters followed by 7 numbers<\/li>\n                <li>Access denied: Ensure you're logged in with proper credentials<\/li>\n            <\/ul>\n        `,\n        'storage-charges': `\n            <h5>Understanding Storage Charges<\/h5>\n            <p>Storage charges are calculated as follows:<\/p>\n            <ul>\n                <li><strong>Free Days:<\/strong> First 0 days after discharge<\/li>\n                <li><strong>20' Container:<\/strong> Rate per API pricing rules<\/li>\n                <li><strong>40' Container:<\/strong> Rate per API pricing rules (2 TEU)<\/li>\n                            <\/ul>\n            <p><strong>Example:<\/strong> A 40' container picked up 15 days after discharge:<\/p>\n            <ul>\n                <li>Free days: 7<\/li>\n                <li>Billable days: 8<\/li>\n                <li>Charges: 8 \u00d7 $30 = $240.00<\/li>\n                                <li>Total: $240.00<\/li>\n                            <\/ul>\n        `,\n        'payment': `\n            <h5>Payment Options<\/h5>\n            <p>We accept the following payment methods:<\/p>\n            <ul>\n                <li><strong>Credit Cards:<\/strong> Visa, MasterCard, American Express<\/li>\n                <li><strong>Debit Cards:<\/strong> All major Canadian banks<\/li>\n                <li><strong>Company Account:<\/strong> For pre-approved customers<\/li>\n            <\/ul>\n            <p><strong>Security:<\/strong><\/p>\n            <ul>\n                <li>All transactions are encrypted using SSL<\/li>\n                <li>We are PCI DSS compliant<\/li>\n                <li>Card details are not stored on our servers<\/li>\n            <\/ul>\n        `\n        \/\/ Add more categories as needed\n    };\n    \n    document.getElementById('helpContent').innerHTML = content[category] || '<p>Content not available.<\/p>';\n}\n<\/script>\n\n<style>\n\/* Modal Styles *\/\n.chat-message {\n    padding: 0.5rem;\n    border-radius: 0.25rem;\n    margin-bottom: 0.5rem;\n}\n\n.chat-message-agent {\n    background: #e3f2fd;\n    margin-right: 20%;\n}\n\n.chat-message-user {\n    background: #f3e5f5;\n    margin-left: 20%;\n    text-align: right;\n}\n\n.pdf-preview-placeholder {\n    padding: 3rem;\n}\n\n#helpCategories .list-group-item {\n    border-left: 3px solid transparent;\n}\n\n#helpCategories .list-group-item.active {\n    border-left-color: var(--termont-orange);\n    background: var(--termont-light-bg);\n    color: var(--termont-dark-blue);\n}\n<\/style>\n\n<!-- Authentication Modal - Issue #2034 -->\n<div class=\"modal fade\" id=\"authModal\" tabindex=\"-1\" aria-labelledby=\"authModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\">\n    <div class=\"modal-dialog modal-dialog-centered modal-lg\">\n        <div class=\"modal-content\">\n            <!-- Modal Header -->\n            <div class=\"modal-header bg-primary text-white\">\n                <h5 class=\"modal-title\" id=\"authModalLabel\">\n                    <i class=\"fas fa-user-shield\"><\/i>\n                    <span id=\"authModalTitle\">Authentication<\/span>\n                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n\n            <!-- Modal Body with Nav Tabs -->\n            <div class=\"modal-body p-4\">\n                <!--\n                  Issue #9779 Tick 6 (2026-05-21 night) \u2014 \"Track without account\" CTA\n                  Origin: 3 of 15 customer emails on 2026-05-20 were login-trap victims\n                  (Cargo Care, Geodis Garima, Rutherford Jonathan) who actually just\n                  needed to track a container, not log in. Surfacing the anonymous-\n                  tracker URL at the TOP of the auth modal cuts that loop.\n                  Issue #9411 \/ WPML i18n: PHP-side static labels via __() \u00b7 JS-side\n                  via wcpI18n.* \u2014 this is PHP-side static (no JS conditional).\n                -->\n                <div class=\"alert alert-warning d-flex align-items-center mb-3 border-0\" style=\"background: #fff8e1;\">\n                    <i class=\"fas fa-search-location fa-lg me-3\" style=\"color: #f57f17;\"><\/i>\n                    <div class=\"flex-grow-1\">\n                        <strong>\ud83d\udd0d Just want to track a container?<\/strong><br>\n                        <small class=\"text-muted\">\n                            You can use the public container tracker without creating an account or logging in.                        <\/small>\n                    <\/div>\n                    <a href=\"\/container-tracking\/\" class=\"btn btn-warning text-dark ms-2\" data-bs-dismiss=\"modal\">\n                        Track now <i class=\"fas fa-arrow-right ms-1\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <!-- Tab Navigation -->\n                <ul class=\"nav nav-tabs mb-4\" id=\"authTabs\" role=\"tablist\">\n                    <li class=\"nav-item\" role=\"presentation\">\n                        <button class=\"nav-link active\" id=\"login-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#login-panel\" type=\"button\" role=\"tab\">\n                            <i class=\"fas fa-sign-in-alt\"><\/i> Login\n                        <\/button>\n                    <\/li>\n                    <li class=\"nav-item\" role=\"presentation\">\n                        <button class=\"nav-link\" id=\"register-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#register-panel\" type=\"button\" role=\"tab\">\n                            <i class=\"fas fa-user-plus\"><\/i> Register\n                        <\/button>\n                    <\/li>\n                    <li class=\"nav-item\" role=\"presentation\">\n                        <button class=\"nav-link\" id=\"forgot-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#forgot-panel\" type=\"button\" role=\"tab\">\n                            <i class=\"fas fa-key\"><\/i> Forgot Password\n                        <\/button>\n                    <\/li>\n                <\/ul>\n\n                <!-- Tab Content -->\n                <div class=\"tab-content\" id=\"authTabContent\">\n\n                    <!-- Login Panel -->\n                    <div class=\"tab-pane fade show active\" id=\"login-panel\" role=\"tabpanel\">\n                        <form id=\"loginForm\" novalidate>\n                            <div class=\"mb-3\">\n                                <label for=\"loginEmail\" class=\"form-label\">\n                                    Email Address <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"loginEmail\" placeholder=\"your.email@company.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter a valid email address.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"loginPassword\" class=\"form-label\">\n                                    Password <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-lock\"><\/i>\n                                    <\/span>\n                                    <input type=\"password\" class=\"form-control\" id=\"loginPassword\" placeholder=\"Enter your password\" autocomplete=\"current-password\" required>\n                                    <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"togglePasswordVisibility('loginPassword')\">\n                                        <i class=\"fas fa-eye\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter your password.<\/div>\n                            <\/div>\n\n                            <div class=\"form-check mb-3\">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"rememberMe\">\n                                <label class=\"form-check-label\" for=\"rememberMe\">\n                                    Remember me for 30 days\n                                <\/label>\n                            <\/div>\n\n                            <div class=\"d-grid\">\n                                <button type=\"submit\" class=\"btn btn-primary btn-lg\">\n                                    <i class=\"fas fa-sign-in-alt\"><\/i> Login\n                                    <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"text-center mt-3\">\n                                <small class=\"text-muted\">\n                                    Don't have an account?\n                                    <a href=\"#\" onclick=\"switchAuthTab('register'); return false;\" class=\"text-primary\">Create one here<\/a>\n                                <\/small>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n\n                    <!-- Register Panel -->\n                    <div class=\"tab-pane fade\" id=\"register-panel\" role=\"tabpanel\">\n                        <form id=\"registerForm\" novalidate>\n                            <div class=\"row\">\n                                <div class=\"col-md-6 mb-3\">\n                                    <label for=\"registerFirstName\" class=\"form-label\">\n                                        First Name <span class=\"required\">*<\/span>\n                                    <\/label>\n                                    <div class=\"input-group\">\n                                        <span class=\"input-group-text\">\n                                            <i class=\"fas fa-user\"><\/i>\n                                        <\/span>\n                                        <input type=\"text\" class=\"form-control\" id=\"registerFirstName\" placeholder=\"John\" required>\n                                    <\/div>\n                                    <div class=\"invalid-feedback\">First name is required.<\/div>\n                                <\/div>\n\n                                <div class=\"col-md-6 mb-3\">\n                                    <label for=\"registerLastName\" class=\"form-label\">\n                                        Last Name <span class=\"required\">*<\/span>\n                                    <\/label>\n                                    <div class=\"input-group\">\n                                        <span class=\"input-group-text\">\n                                            <i class=\"fas fa-user\"><\/i>\n                                        <\/span>\n                                        <input type=\"text\" class=\"form-control\" id=\"registerLastName\" placeholder=\"Doe\" required>\n                                    <\/div>\n                                    <div class=\"invalid-feedback\">Last name is required.<\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerEmail\" class=\"form-label\">\n                                    Email Address <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"registerEmail\" placeholder=\"your.email@company.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter a valid email address.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerCompany\" class=\"form-label\">\n                                    Company Name <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-building\"><\/i>\n                                    <\/span>\n                                    <input type=\"text\" class=\"form-control\" id=\"registerCompany\" placeholder=\"ACME Logistics Inc.\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Company name is required.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerPhone\" class=\"form-label\">\n                                    Phone Number (Optional)\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-phone\"><\/i>\n                                    <\/span>\n                                    <input type=\"tel\" class=\"form-control\" id=\"registerPhone\" placeholder=\"+1 (555) 123-4567\">\n                                <\/div>\n                                <div class=\"form-text\">Format: +1 (555) 123-4567<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerPassword\" class=\"form-label\">\n                                    Password <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-lock\"><\/i>\n                                    <\/span>\n                                    <input type=\"password\" class=\"form-control\" id=\"registerPassword\" placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" required minlength=\"8\">\n                                    <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"togglePasswordVisibility('registerPassword')\">\n                                        <i class=\"fas fa-eye\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <div class=\"form-text\">\n                                    <i class=\"fas fa-info-circle text-primary\"><\/i>\n                                    Must be at least 8 characters with uppercase, lowercase, and numbers.\n                                <\/div>\n                                <div class=\"invalid-feedback\">Password must be at least 8 characters.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-2\">\n                                <div class=\"progress\" style=\"height: 8px;\">\n                                    <div id=\"passwordStrengthBar\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%\"><\/div>\n                                <\/div>\n                                <small id=\"passwordStrengthText\" class=\"form-text\"><\/small>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerPasswordConfirm\" class=\"form-label\">\n                                    Confirm Password <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-lock\"><\/i>\n                                    <\/span>\n                                    <input type=\"password\" class=\"form-control\" id=\"registerPasswordConfirm\" placeholder=\"Re-enter password\" autocomplete=\"new-password\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Passwords do not match.<\/div>\n                            <\/div>\n\n                            <label class=\"wcp-sso-remember\" style=\"margin: 12px 0 8px;\">\n                                <input type=\"checkbox\" id=\"acceptTerms\" required>\n                                I agree to the <a href=\"https:\/\/www.termont.com\/legal-notice\/\" target=\"_blank\" style=\"color:#0d6efd;text-decoration:underline;\">Terms & Conditions<\/a> <span class=\"required\" style=\"color:#dc3545;\">*<\/span>\n                            <\/label>\n                            <div class=\"invalid-feedback\">You must agree to the terms.<\/div>\n\n                            <div class=\"d-grid\">\n                                <button type=\"submit\" class=\"btn btn-success btn-lg\">\n                                    <i class=\"fas fa-user-plus\"><\/i> Create Account\n                                    <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"text-center mt-3\">\n                                <small class=\"text-muted\">\n                                    Already have an account?\n                                    <a href=\"#\" onclick=\"switchAuthTab('login'); return false;\" class=\"text-primary\">Login here<\/a>\n                                <\/small>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n\n                    <!-- Forgot Password Panel -->\n                    <div class=\"tab-pane fade\" id=\"forgot-panel\" role=\"tabpanel\">\n                        <form id=\"forgotPasswordForm\" novalidate>\n                            <div class=\"alert alert-info\" role=\"alert\">\n                                <i class=\"fas fa-info-circle\"><\/i>\n                                Enter your email address and we'll send you a link to reset your password.\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"forgotEmail\" class=\"form-label\">\n                                    Email Address <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"forgotEmail\" placeholder=\"your.email@company.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter a valid email address.<\/div>\n                            <\/div>\n\n                            <div class=\"d-grid\">\n                                <button type=\"submit\" class=\"btn btn-warning btn-lg\">\n                                    <i class=\"fas fa-paper-plane\"><\/i> Send Reset Link\n                                    <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"text-center mt-3\">\n                                <small class=\"text-muted\">\n                                    Remember your password?\n                                    <a href=\"#\" onclick=\"switchAuthTab('login'); return false;\" class=\"text-primary\">Login here<\/a>\n                                <\/small>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Notification Methods Modal - MILESTONE-15 -->\n<div class=\"modal fade\" id=\"notificationMethodsModal\" tabindex=\"-1\" aria-labelledby=\"notificationMethodsModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-dialog-centered modal-lg\" style=\"max-width: 900px;\">\n        <div class=\"modal-content\">\n            <!-- Header -->\n            <div class=\"modal-header border-0 pb-0\">\n                <div class=\"w-100 text-center\">\n                    <div class=\"mb-3\">\n                        <i class=\"fas fa-bell text-primary\" style=\"font-size: 3rem;\"><\/i>\n                    <\/div>\n                    <h3 class=\"modal-title fw-bold\" id=\"notificationMethodsModalLabel\">\n                        How would you like to receive updates?\n                    <\/h3>\n                    <p class=\"text-muted mt-2\">Choose the notification method that best fits your workflow<\/p>\n                <\/div>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n\n            <!-- Body -->\n            <div class=\"modal-body px-5 pb-5\">\n\n                <!-- Method 1: Email Notifications (Instant) -->\n                <div class=\"card border mb-4 hover-shadow\" style=\"cursor: pointer;\" data-method=\"email-instant\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-primary bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-envelope text-primary\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        Email Notifications\n                                        <span class=\"dms-badge dms-badge-success ms-2\">Available Now<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Receive instant email alerts when your container status changes - just like Amazon package tracking.\n                                <\/p>\n                                <div class=\"row g-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>Instant delivery<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>Mobile-friendly<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>No technical setup<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>Free forever<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Method 2: Email with CSV Export -->\n                <div class=\"card border mb-4 hover-shadow-light\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-info bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-file-csv text-info\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        Email with CSV Export\n                                        <span class=\"dms-badge dms-badge-info ms-2\">Platform Config<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Receive structured CSV files via email for easy import into your ERP, TMS, or any business software.\n                                <\/p>\n                                <div class=\"row g-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-info me-2 mt-1\"><\/i>\n                                            <small>Custom CSV format<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-info me-2 mt-1\"><\/i>\n                                            <small>ERP\/TMS compatible<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"alert alert-info mt-3 mb-0 py-2\">\n                                    <small>\n                                        <i class=\"fas fa-info-circle me-1\"><\/i>\n                                        Configure CSV format in your <strong>DMS Platform Settings<\/strong> after login\n                                    <\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Method 3: REST API (Pull) -->\n                <div class=\"card border mb-4 hover-shadow-light\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-warning bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-code text-warning\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        REST API (Pull Mode)\n                                        <span class=\"dms-badge dms-badge-warning ms-2\">AppStore Activation<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Query container updates on-demand from your own systems. Pull data whenever you need it with simple RESTful API calls.\n                                <\/p>\n                                <div class=\"row g-3 mb-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Real-time queries<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Full control<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Unlimited calls<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Enterprise security<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"alert alert-warning mb-0 py-2\">\n                                    <small>\n                                        <i class=\"fas fa-shopping-cart me-1\"><\/i>\n                                        Activate in <strong>DMS Platform AppStore<\/strong> \u2192 Get API documentation + your API key\n                                    <\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Method 4: Webhook API (Push) -->\n                <div class=\"card border mb-4 hover-shadow-light\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-danger bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-bolt text-danger\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        Webhook API (Push Mode)\n                                        <span class=\"dms-badge dms-badge-danger ms-2\">AppStore Activation<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Receive automatic notifications pushed to your systems in real-time when container status changes - zero polling required.\n                                <\/p>\n                                <div class=\"row g-3 mb-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>Instant push notifications<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>Zero latency<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>No polling overhead<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>Event-driven<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"alert alert-danger mb-0 py-2\">\n                                    <small>\n                                        <i class=\"fas fa-shopping-cart me-1\"><\/i>\n                                        Activate in <strong>DMS Platform AppStore<\/strong> \u2192 Configure your webhook endpoint + Get API key\n                                    <\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Comparison Note -->\n                <div class=\"alert alert-light border mb-0\">\n                    <div class=\"d-flex\">\n                        <i class=\"fas fa-lightbulb text-warning fs-3 me-3\"><\/i>\n                        <div>\n                            <h6 class=\"fw-bold mb-2\">Need help choosing?<\/h6>\n                            <ul class=\"mb-0 ps-3\">\n                                <li class=\"mb-1\"><small><strong>Email<\/strong> - Best for individuals and small teams<\/small><\/li>\n                                <li class=\"mb-1\"><small><strong>CSV<\/strong> - Best for manual imports into existing systems<\/small><\/li>\n                                <li class=\"mb-1\"><small><strong>REST API<\/strong> - Best for custom integrations with full control<\/small><\/li>\n                                <li><small><strong>Webhook<\/strong> - Best for real-time automated systems<\/small><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- Footer -->\n            <div class=\"modal-footer border-0 pt-0\">\n                <button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">\n                    Cancel\n                <\/button>\n                <button type=\"button\" class=\"btn btn-primary\" id=\"confirmNotificationMethod\">\n                    <i class=\"fas fa-check me-2\"><\/i>\n                    Enable Email Notifications\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ ========== AUTH MODAL FUNCTIONS (Issue #2034) ==========\n\n\/\/ Switch between tabs\nfunction switchAuthTab(tabName) {\n    const tabs = {\n        'login': 'login-tab',\n        'register': 'register-tab',\n        'forgot': 'forgot-tab'\n    };\n    const tabButton = document.getElementById(tabs[tabName]);\n    if (tabButton) {\n        const tab = new bootstrap.Tab(tabButton);\n        tab.show();\n    }\n}\n\n\/\/ Open auth modal on specific tab\nfunction openAuthModal(tabName = 'login') {\n    const modal = new bootstrap.Modal(document.getElementById('authModal'));\n    modal.show();\n    switchAuthTab(tabName);\n}\n\n\/\/ Toggle password visibility\nfunction togglePasswordVisibility(inputId) {\n    const input = document.getElementById(inputId);\n    const icon = event.target.tagName === 'I' ? event.target : event.target.querySelector('i');\n    if (input.type === 'password') {\n        input.type = 'text';\n        icon.classList.remove('fa-eye');\n        icon.classList.add('fa-eye-slash');\n    } else {\n        input.type = 'password';\n        icon.classList.remove('fa-eye-slash');\n        icon.classList.add('fa-eye');\n    }\n}\n\n\/\/ Password strength calculation (called from auth module)\ndocument.getElementById('registerPassword')?.addEventListener('input', function() {\n    if (typeof updatePasswordStrength === 'function') {\n        updatePasswordStrength(this.value);\n    }\n});\n\n\/\/ Password match validation\ndocument.getElementById('registerPasswordConfirm')?.addEventListener('input', function() {\n    if (typeof validatePasswordMatch === 'function') {\n        validatePasswordMatch();\n    }\n});\n\n\/\/ Form submission handlers (delegate to auth module)\n\/\/ ============================================================================\n\/\/ MILESTONE-17: Logistec Iframe Modal\n\/\/ ============================================================================\n<\/script>\n\n<!-- Logistec Iframe Modal - MILESTONE-17 -->\n<div class=\"modal fade\" id=\"logistecIframeModal\" tabindex=\"-1\" aria-labelledby=\"logistecIframeModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-fullscreen\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-info text-white\">\n                <div>\n                    <h5 class=\"modal-title\" id=\"logistecIframeModalLabel\">\n                        <i class=\"fas fa-external-link-alt me-2\"><\/i>\n                        Logistec Container Inquiry - <span id=\"logistecIframeContainer\"><\/span>\n                    <\/h5>\n                    <small class=\"d-block mt-1\">\n                        <i class=\"fas fa-link me-1\"><\/i>\n                        <span id=\"logistecIframeUrl\"><\/span>\n                    <\/small>\n                <\/div>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body p-0\">\n                <!--\n                  #9684 C\/M9 \u2014 DROP allow-same-origin from sandbox. This iframe loads\n                  cross-origin Logistec WCT content (https:\/\/wct.logistec.com\/...).\n                  With both allow-scripts AND allow-same-origin, the iframe could\n                  escape its sandboxing and access termont.com's cookies\/localStorage\n                  if the Logistec page is ever compromised (XSS in their tracker).\n                  Per MDN: this combo defeats the sandbox. Dropping allow-same-origin\n                  is safe because Logistec content has no need to access our origin.\n                  reCAPTCHA iframes still emit the same warning but are vendor-required\n                  (Google needs both attrs) \u2014 accepted-risk per #9684 M10.\n                -->\n                <iframe id=\"logistecIframe\"\n                        style=\"width: 100%; height: calc(100vh - 120px); border: none;\"\n                        sandbox=\"allow-scripts allow-forms allow-popups\">\n                <\/iframe>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">\n                    Close\n                <\/button>\n                <a id=\"logistecIframeOpenExternal\"\n                   href=\"#\"\n                   target=\"_blank\"\n                   class=\"btn btn-info\">\n                    <i class=\"fas fa-external-link-alt me-1\"><\/i>\n                    Open in New Tab\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.getElementById('loginForm')?.addEventListener('submit', function(e) {\n    e.preventDefault();\n    if (typeof handleLogin === 'function') {\n        handleLogin(e);\n    }\n});\n\ndocument.getElementById('registerForm')?.addEventListener('submit', function(e) {\n    e.preventDefault();\n    if (typeof handleRegister === 'function') {\n        handleRegister(e);\n    }\n});\n\ndocument.getElementById('forgotPasswordForm')?.addEventListener('submit', function(e) {\n    e.preventDefault();\n    if (typeof handleForgotPassword === 'function') {\n        handleForgotPassword(e);\n    }\n});\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-66949","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Demande de conteneur et paiement - Termont Montreal Inc<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/termont.com\/fr\/container-tracking\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demande de conteneur et paiement - Termont Montreal Inc\" \/>\n<meta property=\"og:url\" content=\"https:\/\/termont.com\/fr\/container-tracking\/\" \/>\n<meta property=\"og:site_name\" content=\"Termont Montreal Inc\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-07T11:59:20+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/\",\"url\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/\",\"name\":\"Demande de conteneur et paiement - Termont Montreal Inc\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#website\"},\"datePublished\":\"2025-11-24T05:29:35+00:00\",\"dateModified\":\"2026-04-07T11:59:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/termont.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demande de conteneur et paiement\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/termont.com\\\/fr\\\/\",\"name\":\"Termont Montreal Inc\",\"description\":\"Le monde passe par nous\",\"publisher\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/termont.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#organization\",\"name\":\"Termont Montreal Inc\",\"url\":\"https:\\\/\\\/termont.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/termont.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-termont.png\",\"contentUrl\":\"https:\\\/\\\/termont.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-termont.png\",\"width\":325,\"height\":59,\"caption\":\"Termont Montreal Inc\"},\"image\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demande de conteneur et paiement - Termont Montreal Inc","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/termont.com\/fr\/container-tracking\/","og_locale":"fr_FR","og_type":"article","og_title":"Demande de conteneur et paiement - Termont Montreal Inc","og_url":"https:\/\/termont.com\/fr\/container-tracking\/","og_site_name":"Termont Montreal Inc","article_modified_time":"2026-04-07T11:59:20+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/termont.com\/fr\/container-tracking\/","url":"https:\/\/termont.com\/fr\/container-tracking\/","name":"Demande de conteneur et paiement - Termont Montreal Inc","isPartOf":{"@id":"https:\/\/termont.com\/fr\/#website"},"datePublished":"2025-11-24T05:29:35+00:00","dateModified":"2026-04-07T11:59:20+00:00","breadcrumb":{"@id":"https:\/\/termont.com\/fr\/container-tracking\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/termont.com\/fr\/container-tracking\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/termont.com\/fr\/container-tracking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/termont.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Demande de conteneur et paiement"}]},{"@type":"WebSite","@id":"https:\/\/termont.com\/fr\/#website","url":"https:\/\/termont.com\/fr\/","name":"Termont Montreal Inc","description":"Le monde passe par nous","publisher":{"@id":"https:\/\/termont.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/termont.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/termont.com\/fr\/#organization","name":"Termont Montreal Inc","url":"https:\/\/termont.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/termont.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/termont.com\/wp-content\/uploads\/2023\/07\/logo-termont.png","contentUrl":"https:\/\/termont.com\/wp-content\/uploads\/2023\/07\/logo-termont.png","width":325,"height":59,"caption":"Termont Montreal Inc"},"image":{"@id":"https:\/\/termont.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages\/66949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/comments?post=66949"}],"version-history":[{"count":1,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages\/66949\/revisions"}],"predecessor-version":[{"id":66950,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages\/66949\/revisions\/66950"}],"wp:attachment":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/media?parent=66949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}