{"id":66949,"date":"2025-11-24T00:29:35","date_gmt":"2025-11-23T23:29:35","guid":{"rendered":"https:\/\/site.termont-top.com\/container-inquiry\/"},"modified":"2026-02-28T23:29:32","modified_gmt":"2026-02-28T22:29:32","slug":"container-inquiry","status":"publish","type":"page","link":"https:\/\/site.termont-top.com\/fr\/container-inquiry\/","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    <!-- Workflow Information Banner -->\n    \n\n    <!-- UML Diagrams Section (Step-05 - Issue #2034) -->\n    <!-- STANDALONE SECTION - Independent from admin panel -->\n    <!-- Visible when ?uml=1 parameter is present -->\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> Workflow Progress\n    <\/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: Container Lookup -->\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=\"Container Lookup\">\n                <i class=\"fas fa-search\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Container Lookup            <\/div>\n        <\/div>\n                <!-- Step 2: Storage Details -->\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=\"Storage Details\">\n                <i class=\"fas fa-info-circle\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Storage Details            <\/div>\n        <\/div>\n                <!-- Step 3: Payment -->\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=\"Payment\">\n                <i class=\"fas fa-credit-card\"><\/i>\n            <\/div>\n            <div class=\"progress-step-label\">\n                Payment            <\/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            Enter your container number and planned pickup date        <\/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 - 5 Steps (Appointment removed per Issue #2034 Step 1) -->\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>Step 1: Container Lookup<\/span>\n            <span class=\"accordion-button-badge badge bg-warning\">Required<\/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                            Container or Booking Number <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=\"Enter one or more container numbers (XXXX#######), or a booking\/B\/L number. Our AI automatically detects separators (comma, space, tab, newline).\"><\/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 or booking\/B\/L number\"\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>Manual Parsing:<\/strong> Separate containers with commas, spaces, tabs, or line breaks.\n                                <br>\n                                <small class=\"text-muted\">Container format: 4 letters + 7 numbers (e.g., TGHU1234567). You can also enter a booking or B\/L number.<\/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>Demo Texts to Test AI Agent<\/strong>\n                                        <small class=\"text-muted ms-2\">(Click to copy and paste into textarea above)<\/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=\"badge bg-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>Email with headers, signature, contact info<\/strong> - Tests AI's ability to extract containers from full email with heavy noise\n                                        <\/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=\"badge bg-warning text-dark\">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>Excel table paste<\/strong> - Tests AI's ability to parse tabular data with headers\n                                        <\/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=\"badge bg-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>Clean text message<\/strong> - Tests AI's basic parsing with minimal noise\n                                        <\/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                            Please enter at least one valid container number or booking\/B\/L number\n                        <\/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                            Planned Pickup Date <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=\"Select the date you plan to pick up the container. Storage charges will be calculated up to this 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-02\"\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=\"Set to today\">\n                                <i class=\"fas fa-calendar-day\"><\/i>\n                            <\/button>\n                        <\/div>\n                        <div id=\"dateHelp\" class=\"form-text\">\n                            Cannot be in the past. Maximum 90 days in the future.\n                        <\/div>\n                        <div id=\"dateFeedback\" class=\"invalid-feedback\">\n                            Please select a valid pickup date (today or future date within 90 days)\n                        <\/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                        function isGateOut(apiData) {\n                            var te = (apiData || {}).terminal_exit || {};\n                            return !!(te.datetime && te.datetime !== '' && te.datetime !== null);\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\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                            flatpickr('#pickupDate', {\n                                dateFormat: 'Y-m-d',\n                                defaultDate: 'today',\n                                minDate: 'today',\n                                maxDate: new Date().fp_incr(90),\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                        });\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                                    Receive update notifications\n                                <\/label>\n                                <i class=\"fas fa-info-circle text-primary\"\n                                   data-bs-toggle=\"tooltip\"\n                                   data-bs-placement=\"top\"\n                                   title=\"Get notified of container status updates via email or 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=\"your.email@company.com\"\n                                           autocomplete=\"email\">\n                                    <button class=\"btn btn-outline-secondary\"\n                                            type=\"button\"\n                                            id=\"editNotificationMethod\"\n                                            data-bs-toggle=\"tooltip\"\n                                            title=\"Change notification method\">\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                                    You will receive email notifications when container status changes\n                                <\/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                <div class=\"mb-4\" id=\"apiContainersSection\">\n                    <!-- Connected content (hidden by default via d-none, shown after SSO) -->\n                    <!-- USE CASE 1: d-none hides this div until SSO connects (toggleApiContainersSSO in step1-lookup.js) -->\n                    <!-- USE CASE 2: After SSO connect, JS removes d-none + hidden to show VBS API containers accordion -->\n                    <div id=\"apiContainersConnected\" class=\"d-none\">\n                        <a class=\"text-decoration-none accordion-toggle-link collapsed\"\n                           href=\"#apiContainers\"\n                           role=\"button\"\n                           aria-expanded=\"false\"\n                           aria-controls=\"apiContainers\"\n                           data-collapse-target=\"apiContainers\">\n                            <span class=\"form-label text-muted mb-0\" style=\"cursor: pointer;\">\n                                <i class=\"fas fa-ship\"><\/i> VBS API Containers (First 20)\n                                <i class=\"fas fa-chevron-down ms-1 chevron-icon\"><\/i>\n                            <\/span>\n                        <\/a>\n                        <div class=\"collapse mt-3\" id=\"apiContainers\">\n                            <!-- KPI Summary -->\n                            <div class=\"alert alert-primary d-flex align-items-center p-5 mb-4\" id=\"apiContainersKPI\">\n                                <i class=\"fas fa-chart-bar me-4 fs-2hx\"><\/i>\n                                <div class=\"flex-grow-1\">\n                                    <h4 class=\"mb-2\">VBS API Containers Summary <span id=\"kpiPricingSource\"><\/span><\/h4>\n                                    <div class=\"row\">\n                                        <div class=\"col-md-3\">\n                                            <div class=\"fw-semibold\">Total Containers<\/div>\n                                            <div class=\"fs-2 text-gray-800\" id=\"kpiTotalContainers\">\n                                                <span class=\"spinner-border spinner-border-sm\"><\/span>\n                                            <\/div>\n                                            <div id=\"kpiDisplayedCount\"><\/div>\n                                        <\/div>\n                                        <div class=\"col-md-3\">\n                                            <div class=\"fw-semibold\">Movement Types<\/div>\n                                            <div class=\"fs-7\" id=\"kpiMovementTypes\">Loading...<\/div>\n                                        <\/div>\n                                        <div class=\"col-md-3\">\n                                            <div class=\"fw-semibold\">Total Pricing<\/div>\n                                            <div class=\"fs-2 text-success\" id=\"kpiTotalPricing\">Loading...<\/div>\n                                        <\/div>\n                                        <div class=\"col-md-3\">\n                                            <div class=\"fw-semibold\">Vessels<\/div>\n                                            <div class=\"fs-7\" id=\"kpiVessels\">Loading...<\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Issue #5097: API Debug Card (rendered by JS) -->\n                            <div id=\"apiDebugCardTarget\"><\/div>\n\n                            <!-- Issue #5246: Pricing Debug Card (rendered by JS) -->\n                            <div id=\"pricingDebugCardTarget\"><\/div>\n\n                            <!-- Container Badges -->\n                            <div class=\"d-flex gap-2 flex-wrap\" id=\"apiContainersWrapper\">\n                                <div class=\"text-center w-100 py-4\">\n                                    <div class=\"spinner-border text-primary\"><\/div>\n                                    <p class=\"text-muted mt-2\">Loading VBS API containers...<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\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-primary\"\n                            onclick=\"fillSampleData()\">\n                        <i class=\"fas fa-magic\"><\/i> Fill Sample Data\n                    <\/button>\n                    <button type=\"button\"\n                            class=\"btn btn-outline-secondary\"\n                            onclick=\"clearForm()\">\n                        <i class=\"fas fa-eraser\"><\/i> Clear\n                    <\/button>\n                    <button type=\"submit\"\n                            class=\"btn btn-primary btn-lg\"\n                            id=\"lookupButton\">\n                        <i class=\"fas fa-search\"><\/i> Lookup Container\n                        <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                    <\/button>\n                <\/div>\n            <\/form>\n\n            <!-- API Status Indicator (REAL-TIME) - MILESTONE-21 Issue #2243 -->\n            <div class=\"mt-3 text-end\" id=\"apiStatusIndicator\">\n                <small class=\"text-muted\">\n                    <i class=\"fas fa-spinner fa-spin\"><\/i> Checking APIs...\n                <\/small>\n            <\/div>\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\">Loading...<\/span>\n                <\/div>\n                <h5 id=\"loadingMessage\" class=\"text-gray-800\">Loading...<\/h5>\n                <p class=\"text-muted small mb-0\">Please wait while we process your request<\/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>Step 2: Storage Details & Calculation<\/span>\n            <span class=\"accordion-button-badge badge bg-secondary\">Pending<\/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            <!-- 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> Container Information\n                        <\/h5>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"row\">\n                            <div class=\"col-md-3\">\n                                <strong>Container #:<\/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>Size (TEU):<\/strong><br>\n                                <span id=\"displayContainerTEU\">-<\/span>\n                            <\/div>\n                            <div class=\"col-md-3\">\n                                <strong>Status:<\/strong><br>\n                                <span class=\"badge bg-warning\" id=\"displayContainerStatus\">In Storage<\/span>\n                            <\/div>\n                        <\/div>\n                        <hr>\n                        <div class=\"row\">\n                            <div class=\"col-md-4\">\n                                <strong>Line:<\/strong><br>\n                                <span id=\"displayLine\">-<\/span>\n                            <\/div>\n                            <div class=\"col-md-4\">\n                                <strong>Vessel:<\/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\">B\/L Number:<\/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=\"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                                <span class=\"container-status-badge badge\"><\/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>Equipment No<\/th>\n                                    <th>Shipping Line<\/th>\n                                    <th>Size<\/th>\n                                    <th>Equipment Type<\/th>\n                                    <th>Empty \/ Full<\/th>\n                                    <th colspan=\"2\">OOG<\/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\">No<\/span><\/td>\n                                <\/tr>\n                            <\/tbody>\n                            <!-- Row 2: Booking, vessel, routing -->\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th>Booking \/ B\/L<\/th>\n                                    <th>Imp\/Exp<\/th>\n                                    <th>Vessel<\/th>\n                                    <th>Voyage<\/th>\n                                    <th>Origin<\/th>\n                                    <th>Port of Discharge<\/th>\n                                    <th>Final Destination<\/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><span class=\"container-vessel\">-<\/span><\/td>\n                                    <td><span class=\"container-voyage\">-<\/span><\/td>\n                                    <td><span class=\"container-origin\">-<\/span><\/td>\n                                    <td><span class=\"container-port-of-discharge\">-<\/span><\/td>\n                                    <td><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>Seal<\/th>\n                                    <th>Gross Weight<\/th>\n                                    <th>Hazardous<\/th>\n                                    <th>U.N. Number<\/th>\n                                    <!-- Issue #6715 M1: TEMP column hidden (too sensitive per Francine\/Termont) -->\n                                    <th style=\"display:none;\">Temp<\/th>\n                                    <th>Railcar<\/th>\n                                    <th class=\"field-import-only\">Last Free Day<\/th>\n                                    <th class=\"field-export-only\" style=\"display:none;\">ERD \/ Cutoff<\/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\">No<\/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                                    <td class=\"field-import-only\"><span class=\"container-lfd-badge badge bg-secondary\" style=\"font-size: 0.85rem; 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: 0.85rem; 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>Mode<\/th>\n                                    <th>Carrier<\/th>\n                                    <th>Date<\/th>\n                                    <th>Time<\/th>\n                                    <th>Destination<\/th>\n                                    <th class=\"text-center\">Container Status<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr class=\"transport-in-row\">\n                                    <td class=\"fw-bold text-success\">In:<\/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                                    <td><span class=\"transport-in-destination\">-<\/span><\/td>\n                                    <td rowspan=\"2\" class=\"align-middle text-center\">\n                                        <span class=\"container-terminal-status\">-<\/span>\n                                        <br>\n                                        <small class=\"container-transit-detail text-muted\"><\/small>\n                                    <\/td>\n                                <\/tr>\n                                <tr class=\"transport-out-row\">\n                                    <td class=\"fw-bold text-danger\">Out:<\/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                                    <td><span class=\"transport-out-destination\">-<\/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;\">Hold\/Perm<\/th>\n                                    <th style=\"width:180px;\">Description<\/th>\n                                    <th style=\"width:140px;\">Date<\/th>\n                                    <th style=\"width:120px;\">BL \/ HBL<\/th>\n                                    <th style=\"width:100px;\">Status<\/th>\n                                    <th style=\"width:130px;\">Reference<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody class=\"container-hold-body\"><\/tbody>\n                        <\/table>\n\n                                                                    <\/div>\n                                                            <div class=\"logistec-comparison-section mt-2 px-3 pb-3\" style=\"display: none;\" data-logistec-loaded=\"false\">\n                        <hr class=\"my-2\">\n                        <div class=\"logistec-trigger text-center py-2\">\n                            <button type=\"button\" class=\"btn btn-outline-info btn-sm logistec-compare-btn\">\n                                <i class=\"fas fa-balance-scale me-1\"><\/i> Compare with Logistec\n                                <span class=\"badge bg-secondary ms-1\">Legacy<\/span>\n                            <\/button>\n                        <\/div>\n                        <div class=\"logistec-loading text-center py-3\" style=\"display: none;\">\n                            <div class=\"spinner-border spinner-border-sm text-info\"><\/div>\n                            <span class=\"ms-2 text-muted\">Fetching Logistec data...<\/span>\n                        <\/div>\n                        <div class=\"logistec-results\" style=\"display: none;\"><\/div>\n                        <div class=\"logistec-error\" style=\"display: none;\"><\/div>\n                    <\/div>\n                                                                                <div class=\"tos-comparison-section mt-2 px-3 pb-3\" style=\"display: none;\" data-tos-loaded=\"false\">\n                        <hr class=\"my-2\">\n                        <div class=\"tos-trigger text-center py-2\">\n                            <button type=\"button\" class=\"btn btn-outline-warning btn-sm tos-compare-btn\">\n                                <i class=\"fas fa-database me-1\"><\/i> Compare with TOS Storage API\n                                <span class=\"badge bg-secondary ms-1\">Debug<\/span>\n                            <\/button>\n                        <\/div>\n                        <div class=\"tos-loading text-center py-3\" style=\"display: none;\">\n                            <div class=\"spinner-border spinner-border-sm text-warning\"><\/div>\n                            <span class=\"ms-2 text-muted\">Building TOS comparison...<\/span>\n                        <\/div>\n                        <div class=\"tos-results\" style=\"display: none;\"><\/div>\n                        <div class=\"tos-error\" style=\"display: none;\"><\/div>\n                    <\/div>\n                                                                                <div class=\"tos-vs-logistec-section mt-2 px-3 pb-3\" style=\"display: none;\" data-tvl-loaded=\"false\">\n                        <hr class=\"my-2\">\n                        <div class=\"tvl-trigger text-center py-2\">\n                            <button type=\"button\" class=\"btn btn-outline-primary btn-sm tvl-compare-btn\">\n                                <i class=\"fas fa-exchange-alt me-1\"><\/i> TOS vs Logistec Direct\n                                <span class=\"badge bg-secondary ms-1\">Debug<\/span>\n                            <\/button>\n                        <\/div>\n                        <div class=\"tvl-loading text-center py-3\" style=\"display: none;\">\n                            <div class=\"spinner-border spinner-border-sm text-primary\"><\/div>\n                            <span class=\"ms-2 text-muted\">Building TOS vs Logistec comparison...<\/span>\n                        <\/div>\n                        <div class=\"tvl-results\" style=\"display: none;\"><\/div>\n                        <div class=\"tvl-error\" style=\"display: none;\"><\/div>\n                    <\/div>\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=\"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> Storage Calculation \u2014 Imports only<\/span>\n                        <span>\n                            <span class=\"badge bg-warning text-dark\" 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\">Containers<\/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=\"badge bg-success\" id=\"displayImportCount\" style=\"display:none; font-size:0.65rem\">0 imports<\/span>\n                                        <span class=\"badge bg-secondary\" id=\"displayExportCount\" style=\"display:none; font-size:0.65rem\">0 exports<\/span>\n                                    <\/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\">Discharge Date<\/div>\n                                    <strong id=\"displayDischargeDate\" class=\"fs-6\">-<\/strong>\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\">Last Free Day<\/div>\n                                    <strong id=\"displayLastFreeDay\" class=\"fs-6\">-<\/strong>\n                                    <div><small class=\"text-muted\" id=\"displayFreeDaysNote\">(5 free days)<\/small><\/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\">Planned Pickup Date<\/div>\n                                    <strong id=\"displayPickupDate\" class=\"fs-6\">-<\/strong>\n                                    <div>\n                                        <button class=\"btn btn-sm btn-link p-0\" onclick=\"changePickupDate()\">\n                                            <i class=\"fas fa-edit\"><\/i> Change\n                                        <\/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> Calculating...<\/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> Storage Subtotal:<\/strong><\/td>\n                                    <td class=\"text-end\"><strong>$<span id=\"displaySubtotal\">0.00<\/span> CAD<\/strong><\/td>\n                                <\/tr>\n                                <tr id=\"taxRow\" style=\"display:none\">\n                                    <td><i class=\"fas fa-percentage\"><\/i> <span id=\"taxLabel\">Tax (14.975%):<\/span><\/td>\n                                    <td class=\"text-end\"><span id=\"taxValue\">$<strong id=\"displayTax\">0.00<\/strong> CAD<\/span><\/td>\n                                <\/tr>\n                                <tr class=\"table-primary\">\n                                    <td><strong><i class=\"fas fa-receipt\"><\/i> Total Amount:<\/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=\"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 Due<\/h5>\n                        <h4 class=\"mb-0 text-primary\" id=\"masterTotalAmount\">$0.00 CAD<\/h4>\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> Search Complete<\/h5>\n                    <p class=\"mb-3\">Your container search is finished. No charges apply to the selected containers.<\/p>\n                    <button type=\"button\" class=\"btn btn-outline-primary btn-lg\" onclick=\"resetAndSearchAgain()\">\n                        <i class=\"fas fa-search me-1\"><\/i> Search Again\n                    <\/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\">Organization Activation Pending<\/h6>\n                                <p class=\"mb-2\">Your account is active and you can browse container information freely. However, <strong>payment and guarantee flows<\/strong> require your organization to be activated by Termont Terminal.<\/p>\n                                <ul class=\"small mb-2\">\n                                    <li>&#10003; Container inquiry \u2014 <strong>available<\/strong><\/li>\n                                    <li>&#10003; Storage details & pricing \u2014 <strong>available<\/strong><\/li>\n                                    <li>&#128274; Payment processing \u2014 <strong>pending activation<\/strong><\/li>\n                                    <li>&#128274; Guarantee letter \u2014 <strong>pending activation<\/strong><\/li>\n                                <\/ul>\n                                <p class=\"small text-muted mb-0\">\n                                    <i class=\"fas fa-phone me-1\"><\/i>Contact your account manager or Termont administration at                                    <a href=\"tel:5142540526\">(514) 254-0526<\/a> for activation status.                                <\/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;\">IFS Billing Not Yet Linked<\/h6>\n                                <p class=\"mb-2\">Your organization is registered with Termont Terminal, but your <strong>IFS billing account<\/strong> is not yet linked. Payment and guarantee flows require IFS activation to process financial transactions.<\/p>\n                                <ul class=\"small mb-2\">\n                                    <li>&#10003; Container inquiry \u2014 <strong>available<\/strong><\/li>\n                                    <li>&#10003; Storage details & pricing \u2014 <strong>available<\/strong><\/li>\n                                    <li>&#128274; Payment processing \u2014 <strong>pending IFS linkage<\/strong><\/li>\n                                    <li>&#128274; Guarantee letter \u2014 <strong>pending IFS linkage<\/strong><\/li>\n                                <\/ul>\n                                <p class=\"small text-muted mb-0\">\n                                    <i class=\"fas fa-envelope me-1\"><\/i>Contact Termont administration to complete your IFS billing setup.                                <\/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> Back to Container Lookup\n                <\/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                            I understand and agree to the storage charges calculated above.\n                            <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=\"Please agree to storage charges to proceed\">\n                        Proceed to Payment and\/or Guarantee <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\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\/* 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.container-card.status-export .container-status-badge {\n    background-color: rgba(255, 255, 255, 0.3);\n    color: white;\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.container-card.status-empty .container-status-badge {\n    background-color: rgba(255, 255, 255, 0.3);\n    color: white;\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\/* Status badges *\/\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\/* 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: 0.875rem;\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: 0.95rem;\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: 0.85rem;\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: Gate_out date cap \u2014 detect from current container API data\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        }\n    }\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: 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: currentPickupDate,\n                    minDate: 'today',\n                    maxDate: gateOutDate || new Date().fp_incr(90),\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 #6746: Check activation FIRST\n    var activation = checkUserActivationStatus();\n    if (!activation.allowed) {\n        btn.style.display = 'none';\n        if (agreeWrapper) agreeWrapper.style.display = 'none';\n        return;\n    }\n\n    \/\/ Normal flow: show button, toggle based on checkbox\n    btn.style.display = '';\n    if (agreeWrapper) agreeWrapper.style.display = '';\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                <!-- Sylvain Escalation Card (TOP \u2014 call to action) -->\n                <div class=\"card border-primary mb-4\">\n                    <div class=\"card-header bg-primary text-white d-flex align-items-center\">\n                        <i class=\"fas fa-user-tie me-2\"><\/i>\n                        <strong>Action Required \u2014 Sylvain (Termont IT)<\/strong>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <p class=\"mb-2\">The <strong>Origin<\/strong> port (overseas loading port) is\n                        <strong>not available<\/strong> in any Termont data source (N4 TOS, DataWarehouse, ETL).<\/p>\n                        <p class=\"mb-2\">This data originates from <strong>shipping line EDI messages<\/strong>\n                        (B\/L carrier data) and is only visible on the legacy Logistec WCT portal.<\/p>\n                        <div class=\"alert alert-info mb-3\">\n                            <i class=\"fas fa-question-circle me-1\"><\/i>\n                            <strong>Request:<\/strong> Can the <code>load_port<\/code> field from\n                            <code>VIEW_manifest_bol<\/code> be populated from EDI feeds in the DataWarehouse?\n                            Currently only 8 ports are populated across all records.\n                        <\/div>\n                        <div class=\"d-flex gap-2 flex-wrap\">\n                            <a href=\"mailto:sylvain@termont.com?subject=Origin%20field%20data%20request%20(Container%20Inquiry)&body=Hi%20Sylvain%2C%0A%0ACould%20you%20please%20check%20if%20the%20load_port%20field%20from%20VIEW_manifest_bol%20can%20be%20populated%20from%20EDI%20feeds%3F%0A%0ACurrently%2C%20the%20Origin%20(overseas%20loading%20port)%20is%20not%20available%20in%20the%20DMS%20Container%20Inquiry%20API.%0A%0AThank%20you!\"\n                               class=\"btn btn-primary btn-sm\">\n                                <i class=\"fas fa-envelope me-1\"><\/i> Email Sylvain\n                            <\/a>\n                            <a href=\"https:\/\/github.com\/dms-logistics\/webapp-core-v2\/issues\/6594\"\n                               class=\"btn btn-outline-secondary btn-sm\" target=\"_blank\">\n                                <i class=\"fab fa-github me-1\"><\/i> Issue #6594\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\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=\"badge bg-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=\"badge bg-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=\"badge bg-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=\"badge bg-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=\"badge bg-warning text-dark\">\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=\"badge bg-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=\"badge bg-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        <!-- Section 3: Payment Processing -->\n        \n<!-- Section 3: Payment Processing -->\n<div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"headingThree\">\n        <button class=\"accordion-button collapsed step-locked\"\n                type=\"button\"\n                data-bs-toggle=\"collapse\"\n                data-bs-target=\"#collapseThree\"\n                aria-expanded=\"false\"\n                aria-controls=\"collapseThree\"\n                id=\"accordionButton3\"\n                data-required-step=\"2\"\n                data-step-number=\"3\"\n                aria-disabled=\"true\">\n            <i class=\"accordion-button-icon fas fa-credit-card text-muted\"><\/i>\n            <span>Step 3: Payment Processing<\/span>\n            <span class=\"accordion-button-badge badge bg-secondary\">Pending<\/span>\n        <\/button>\n    <\/h2>\n    <div id=\"collapseThree\"\n         class=\"accordion-collapse collapse\"\n         aria-labelledby=\"headingThree\"\n         data-bs-parent=\"#workflowAccordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Payment Summary Card -->\n            <div class=\"card mb-4 border-success\" id=\"paymentSummaryCard\">\n                                <div class=\"card-header bg-success text-white\">\n                    <h5 class=\"mb-0\">\n                        <i class=\"fas fa-shopping-cart\"><\/i> Payment Summary\n                    <\/h5>\n                <\/div>\n                <div class=\"card-body\">\n                    <!-- Issue #5507: Per-container breakdown table -->\n                    <div class=\"table-responsive mb-3\">\n                        <table class=\"table table-sm table-bordered align-middle mb-0\">\n                            <thead class=\"table-light\">\n                                <tr>\n                                    <th>Container<\/th>\n                                    <th>Type<\/th>\n                                    <th>Direction<\/th>\n                                    <th>Discharge<\/th>\n                                    <th class=\"text-center\">Storage Days<\/th>\n                                    <th class=\"text-center\">Billable Days<\/th>\n                                    <th class=\"text-end\">Charges<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody id=\"paymentContainerRows\">\n                                <!-- Populated dynamically by step2-details.js -->\n                                <tr>\n                                    <td colspan=\"7\" class=\"text-center text-muted\">\n                                        <i class=\"fas fa-spinner fa-spin me-1\"><\/i> Waiting for container data...\n                                    <\/td>\n                                <\/tr>\n                            <\/tbody>\n                            <tfoot>\n                                <tr class=\"table-light fw-bold\" id=\"paymentTaxRow\" style=\"display:none\">\n                                    <td colspan=\"6\" class=\"text-end\">Tax (14.975%):<\/td>\n                                    <td class=\"text-end\"><span id=\"paymentTax\">$0.00<\/span><\/td>\n                                <\/tr>\n                                <tr class=\"table-warning fw-bold\">\n                                    <td colspan=\"6\" class=\"text-end\">Total Amount Due:<\/td>\n                                    <td class=\"text-end fs-5\"><span id=\"paymentTotal\">$0.00 CAD<\/span><\/td>\n                                <\/tr>\n                            <\/tfoot>\n                        <\/table>\n                        <!-- Issue #5617 M24: TOS rate reference (populated by JS) -->\n                        <div id=\"paymentTosRateRef\" style=\"display:none\" class=\"mt-1 text-end\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Payment Method Selection -->\n            <div class=\"card mb-4\" id=\"paymentMethodCard\">\n                                <div class=\"card-header\">\n                    <h5 class=\"mb-0\">\n                        <i class=\"fas fa-wallet\"><\/i> Select Payment Method\n                    <\/h5>\n                <\/div>\n                <div class=\"card-body\">\n                    <!-- Issue #6442 M5-M7: Account conditions card (tier + guarantee info) -->\n                    <div id=\"tierAccountCard\" class=\"alert alert-light border mb-3 d-none\">\n                        <div class=\"d-flex align-items-center gap-2 mb-1\">\n                            <span id=\"tierBadge\" class=\"badge bg-primary\"><\/span>\n                            <strong id=\"tierOrgName\"><\/strong>\n                        <\/div>\n                        <small id=\"tierMessage\" class=\"text-muted d-block\"><\/small>\n                        <small id=\"tierLimits\" class=\"text-muted d-block\"><\/small>\n                    <\/div>\n\n                    <!-- Issue #6442 M11: Banned user block -->\n                    <div id=\"bannedBlock\" class=\"alert alert-danger d-none\">\n                        <i class=\"fas fa-ban me-2\"><\/i>\n                        <strong>Account Suspended<\/strong>\n                        <p id=\"bannedReason\" class=\"mb-0 mt-1\"><\/p>\n                        <small class=\"d-block mt-1\">Please contact <a href=\"mailto:clerks@termont.com\">clerks@termont.com<\/a> or call (514) 254-0526.<\/small>\n                    <\/div>\n\n                    <!-- Issue #6442 M12: Payment FIRST, Guarantee SECOND (meeting Rachid 27 mars) -->\n                    <div class=\"row mb-3\" id=\"paymentMethodCards\">\n                        <!-- Card 1: Pay Now \u2014 Credit\/Debit Card (FIRST per Rachid meeting) -->\n                        <div class=\"col-md-6\" id=\"creditCardColumn\">\n                            <div class=\"payment-method-option border-success selected\" onclick=\"selectPaymentMethodCard('credit')\" style=\"cursor: pointer;\">\n                                <div class=\"form-check\">\n                                    <input class=\"form-check-input\"\n                                           type=\"radio\"\n                                           name=\"paymentMethod\"\n                                           id=\"creditCard\"\n                                           value=\"credit\"\n                                           checked>\n                                    <label class=\"form-check-label\" for=\"creditCard\" style=\"cursor: pointer; width: 100%;\">\n                                        <i class=\"fas fa-credit-card text-success\"><\/i> <strong>Pay Now \u2014 Credit\/Debit Card<\/strong>\n                                        <small class=\"d-block text-muted mt-1\">Pay the container storage fees immediately. No guarantee letter or invitation needed.<\/small>\n                                        <div class=\"payment-icons\">\n                                            <i class=\"fab fa-cc-visa\"><\/i>\n                                            <i class=\"fab fa-cc-mastercard\"><\/i>\n                                            <i class=\"fab fa-cc-amex\"><\/i>\n                                        <\/div>\n                                    <\/label>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <!-- Card 2: Guarantee Letter \u2014 hidden for Tier 3 (M8) -->\n                        <div class=\"col-md-6\" id=\"laterCardColumn\">\n                            <div class=\"payment-method-option\" onclick=\"selectPaymentMethodCard('later')\" style=\"cursor: pointer;\">\n                                <div class=\"form-check\">\n                                    <input class=\"form-check-input\"\n                                           type=\"radio\"\n                                           name=\"paymentMethod\"\n                                           id=\"payLater\"\n                                           value=\"later\">\n                                    <label class=\"form-check-label\" for=\"payLater\" style=\"cursor: pointer; width: 100%;\">\n                                        <i class=\"fas fa-file-signature text-warning\"><\/i> <strong>Guarantee Letter (NET 30)<\/strong>\n                                        <small class=\"d-block text-muted mt-1\">Don't pay now \u2014 proceed to Step 4 where you can:<\/small>\n                                        <small class=\"d-block text-muted\"><i class=\"fas fa-check text-warning me-1\"><\/i> Sign the guarantee yourself (NET 30)<\/small>\n                                        <small class=\"d-block text-muted\"><i class=\"fas fa-check text-warning me-1\"><\/i> Or invite someone else to guarantee on your behalf<\/small>\n                                    <\/label>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <!-- Issue #6442 M9: Tier 3 invite card (shown when guarantee hidden) -->\n                        <div class=\"col-md-6 d-none\" id=\"tier3InviteColumn\">\n                            <div class=\"payment-method-option border-info\" onclick=\"selectPaymentMethodCard('later')\" style=\"cursor: pointer;\">\n                                <div class=\"form-check\">\n                                    <input class=\"form-check-input\" type=\"radio\" name=\"paymentMethod\" id=\"inviteGuarantor\" value=\"later\">\n                                    <label class=\"form-check-label\" for=\"inviteGuarantor\" style=\"cursor: pointer; width: 100%;\">\n                                        <i class=\"fas fa-envelope text-info\"><\/i> <strong>Invite Someone to Guarantee<\/strong>\n                                        <small class=\"d-block text-muted mt-1\">Send a secure link to a trusted partner who can sign the guarantee on your behalf.<\/small>\n                                    <\/label>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <!-- Card 3: Wallet \u2014 hidden by default, shown when wallet is active -->\n                        <div class=\"col-md-4 d-none\" id=\"walletCardColumn\">\n                            <div class=\"payment-method-option\" onclick=\"selectPaymentMethodCard('wallet')\" style=\"cursor: pointer;\">\n                                <div class=\"form-check\">\n                                    <input class=\"form-check-input\"\n                                           type=\"radio\"\n                                           name=\"paymentMethod\"\n                                           id=\"walletPayment\"\n                                           value=\"wallet\">\n                                    <label class=\"form-check-label\" for=\"walletPayment\" style=\"cursor: pointer; width: 100%;\">\n                                        <i class=\"fas fa-wallet\"><\/i> Wallet\n                                        <small class=\"d-block text-muted\">Pay from org balance<\/small>\n                                        <small class=\"d-block text-success fw-bold\" id=\"walletBalanceLabel\"><\/small>\n                                    <\/label>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Issue #5416: GPT-06 mock credit card form deleted \u2014 replaced by Issue #5372 Saved Cards UI below -->\n\n                    <!-- ======================== Issue #5372: Saved Payment Cards UI (M9-M13) ======================== -->\n                    <div id=\"creditCardForm\" class=\"payment-form d-none\">\n\n                        <!-- M14: Loading State -->\n                        <div id=\"savedCardsLoading\" class=\"text-center py-4 d-none\">\n                            <div class=\"spinner-border text-primary\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...<\/span>\n                            <\/div>\n                            <p class=\"mt-2 text-muted\">Loading your saved cards...<\/p>\n                        <\/div>\n\n                        <!-- M12: Empty State -->\n                        <div id=\"savedCardsEmpty\" class=\"text-center py-4 d-none\">\n                            <i class=\"fas fa-credit-card fa-3x text-muted mb-3 d-block\"><\/i>\n                            <h6 class=\"fw-bold\">No Saved Cards<\/h6>\n                            <p class=\"text-muted mb-3\">Add a payment card to speed up future checkouts.<\/p>\n                                                        <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" onclick=\"toggleAddCardForm()\">\n                                <i class=\"fas fa-plus me-1\"><\/i>Add Your First Card\n                            <\/button>\n                                                    <\/div>\n\n                        <!-- M9: Saved Cards Grid (populated by JS) -->\n                        <div id=\"savedCardsGrid\" class=\"saved-cards-grid d-none\">\n                            <!-- Card tiles injected by renderSavedCards() in step3-payment.js -->\n                        <\/div>\n\n                        <!-- M17: CVV-Only Section (shown when a saved card is selected) -->\n                        <div id=\"cvvOnlySection\" class=\"mt-3 d-none\">\n                            <div class=\"row\">\n                                <div class=\"col-md-4\">\n                                    <label for=\"savedCardCVV\" class=\"form-label fw-bold\">\n                                        Enter CVV <span class=\"required\">*<\/span>\n                                        <i class=\"fas fa-question-circle text-muted ms-1\"\n                                           data-bs-toggle=\"tooltip\"\n                                           title=\"3-4 digit security code on the back of your card\"><\/i>\n                                    <\/label>\n                                    <input type=\"password\" class=\"form-control text-center\" id=\"savedCardCVV\"\n                                           maxlength=\"4\" placeholder=\"\u2022\u2022\u2022\" autocomplete=\"cc-csc\"\n                                           style=\"font-family: monospace; font-size: 1.2rem; letter-spacing: 3px; max-width: 120px;\">\n                                    <small class=\"text-muted\">Required for each transaction<\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Issue #6353 M1-M5: Add New Card Form \u2014 Moneris Hosted Tokenization iframe -->\n                                                                        <div id=\"addNewCardSection\" class=\"mt-3 d-none\">\n                            <hr>\n                            <h6 class=\"fw-bold mb-3\"><i class=\"fas fa-plus-circle text-primary me-1\"><\/i>Add New Card<\/h6>\n                            <form id=\"addCardForm\" novalidate>\n                                <div class=\"row\">\n                                    <div class=\"col-md-6 mb-3\">\n                                        <label for=\"newCardholderName\" class=\"form-label\">\n                                            Cardholder Name <span class=\"required\">*<\/span>\n                                        <\/label>\n                                        <input type=\"text\" class=\"form-control\" id=\"newCardholderName\"\n                                               placeholder=\"John Doe\" required>\n                                    <\/div>\n                                    <div class=\"col-md-6 mb-3\">\n                                        <label for=\"newCardNumber\" class=\"form-label\">\n                                            Card Number <span class=\"required\">*<\/span>\n                                        <\/label>\n                                                                                <!-- Issue #6353 M5: Fallback \u2014 plain input when Moneris not configured -->\n                                        <div class=\"input-group\">\n                                            <input type=\"text\" class=\"form-control\" id=\"newCardNumber\"\n                                                   placeholder=\"1234 5678 9012 3456\" maxlength=\"19\"\n                                                   autocomplete=\"cc-number\" required>\n                                            <span class=\"input-group-text\" id=\"newCardTypeIcon\">\n                                                <i class=\"fas fa-credit-card\"><\/i>\n                                            <\/span>\n                                        <\/div>\n                                                                            <\/div>\n                                <\/div>\n                                <div class=\"row\">\n                                    <div class=\"col-md-4 mb-3\">\n                                        <label for=\"newExpiryMonth\" class=\"form-label\">Month <span class=\"required\">*<\/span><\/label>\n                                        <select class=\"form-select\" id=\"newExpiryMonth\" required>\n                                            <option value=\"\">MM<\/option>\n                                                                                        <option value=\"01\">\n                                                01                                            <\/option>\n                                                                                        <option value=\"02\">\n                                                02                                            <\/option>\n                                                                                        <option value=\"03\">\n                                                03                                            <\/option>\n                                                                                        <option value=\"04\">\n                                                04                                            <\/option>\n                                                                                        <option value=\"05\">\n                                                05                                            <\/option>\n                                                                                        <option value=\"06\">\n                                                06                                            <\/option>\n                                                                                        <option value=\"07\">\n                                                07                                            <\/option>\n                                                                                        <option value=\"08\">\n                                                08                                            <\/option>\n                                                                                        <option value=\"09\">\n                                                09                                            <\/option>\n                                                                                        <option value=\"10\">\n                                                10                                            <\/option>\n                                                                                        <option value=\"11\">\n                                                11                                            <\/option>\n                                                                                        <option value=\"12\">\n                                                12                                            <\/option>\n                                                                                    <\/select>\n                                    <\/div>\n                                    <div class=\"col-md-4 mb-3\">\n                                        <label for=\"newExpiryYear\" class=\"form-label\">Year <span class=\"required\">*<\/span><\/label>\n                                        <select class=\"form-select\" id=\"newExpiryYear\" required>\n                                            <option value=\"\">YY<\/option>\n                                                                                        <option value=\"26\">2026<\/option>\n                                                                                        <option value=\"27\">2027<\/option>\n                                                                                        <option value=\"28\">2028<\/option>\n                                                                                        <option value=\"29\">2029<\/option>\n                                                                                        <option value=\"30\">2030<\/option>\n                                                                                        <option value=\"31\">2031<\/option>\n                                                                                        <option value=\"32\">2032<\/option>\n                                                                                        <option value=\"33\">2033<\/option>\n                                                                                        <option value=\"34\">2034<\/option>\n                                                                                        <option value=\"35\">2035<\/option>\n                                                                                    <\/select>\n                                    <\/div>\n                                    <div class=\"col-md-4 mb-3\">\n                                        <label for=\"newCVV\" class=\"form-label\">CVV <span class=\"required\">*<\/span><\/label>\n                                        <input type=\"password\" class=\"form-control\" id=\"newCVV\"\n                                               placeholder=\"123\" maxlength=\"4\" autocomplete=\"cc-csc\" required\n                                               style=\"font-family: monospace;\">\n                                    <\/div>\n                                <\/div>\n                                <div class=\"d-flex gap-2\">\n                                    <button type=\"button\" class=\"btn btn-primary\" onclick=\"submitNewCard()\" id=\"submitNewCardBtn\">\n                                        <i class=\"fas fa-save me-1\"><\/i>Save Card\n                                        <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                    <\/button>\n                                    <button type=\"button\" class=\"btn btn-outline-secondary\" onclick=\"toggleAddCardForm()\">\n                                        Cancel\n                                    <\/button>\n                                <\/div>\n                            <\/form>\n                        <\/div>\n                        \n                        <!-- Add New Card toggle button (below grid, visible when cards exist) -->\n                                                <div id=\"addCardToggle\" class=\"text-center mt-3 d-none\">\n                            <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" onclick=\"toggleAddCardForm()\">\n                                <i class=\"fas fa-plus me-1\"><\/i>Add New Card\n                            <\/button>\n                        <\/div>\n                        \n                        <!-- Not logged in state \u2014 Issue #5482: added SSO connect button -->\n                        <div id=\"savedCardsLoginRequired\" class=\"text-center py-4 d-none\">\n                            <i class=\"fas fa-lock fa-2x text-muted mb-2 d-block\"><\/i>\n                            <p class=\"text-muted\">Please sign in to view your saved payment cards.<\/p>\n                                                        <button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"document.getElementById('wcp-sso-open')?.click()\">\n                                <i class=\"fas fa-sign-in-alt me-1\"><\/i>Sign In\n                            <\/button>\n                                                    <\/div>\n                        <!-- Issue #5435: PCI DSS notice \u2014 shown only when logged in (opposite of loginRequired) -->\n                        <div id=\"savedCardsPciNotice\" class=\"alert alert-light border mt-2 d-none\" style=\"font-size: 0.85rem;\">\n                            <i class=\"fas fa-shield-alt text-success me-1\"><\/i>\n                            <strong>Secure Payment Processing<\/strong> \u2014\n                            <small>Your payment information is encrypted via Moneris gateway. PCI DSS compliant \u2014 we do not store card details.<\/small>\n                        <\/div>\n                    <\/div>\n                    <!-- ======================== End Issue #5372: Saved Payment Cards UI ======================== -->\n\n                    <!-- Wallet Form (Issue #5343 \u2014 renamed from Company Account, Issue #5336: Dynamic SSO org data) -->\n                    <!-- Issue #5396: Enriched Wallet section -->\n                    <div id=\"accountForm\" class=\"payment-form d-none\">\n                        <div id=\"companyAccountInfo\" class=\"alert alert-info mb-3\">\n                            <div class=\"d-flex align-items-center justify-content-between\">\n                                <div>\n                                    <i class=\"fas fa-wallet me-1\"><\/i>\n                                    <strong id=\"orgAccountName\">Sign in to see your organization wallet<\/strong>\n                                <\/div>\n                                <span id=\"orgWalletBadge\" class=\"badge bg-secondary fs-6\">$0.00<\/span>\n                            <\/div>\n                            <small class=\"text-muted d-block mt-1\" id=\"orgAccountNumber\"><\/small>\n                        <\/div>\n                        <!-- Issue #5396 M2: PO + Cost Center on same line -->\n                        <div class=\"row mb-3\">\n                            <div class=\"col-md-6\">\n                                <label for=\"purchaseOrder\" class=\"form-label\">Purchase Order # (Optional)<\/label>\n                                <input type=\"text\" class=\"form-control\" id=\"purchaseOrder\" placeholder=\"PO-12345\">\n                            <\/div>\n                            <div class=\"col-md-6\">\n                                <label for=\"costCenter\" class=\"form-label\">Cost Center (Optional)<\/label>\n                                <input type=\"text\" class=\"form-control\" id=\"costCenter\" placeholder=\"CC-LOGISTICS\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Don't Pay Now Form (Issue #5343) -->\n                    <!-- Issue #5394: payLaterForm visible by default (guarantee first) -->\n                    <div id=\"payLaterForm\" class=\"payment-form px-3 pt-2\">\n                        <!-- Issue #5394 M3: Clean guarantee alert layout -->\n                        <div class=\"alert alert-warning mb-3\">\n                            <i class=\"fas fa-exclamation-triangle me-1\"><\/i>\n                            <strong>Guarantee Required<\/strong> \u2014 By choosing not to pay now, you will proceed to Step 4 where you have two options:\n                        <\/div>\n                        <!-- Issue #6089: Restructured as 2-option flow (Option A: self-guarantee, Option B: invite) -->\n                        <div class=\"alert alert-light border\">\n                            <i class=\"fas fa-file-signature text-primary me-1\"><\/i>\n                            <strong>Option A \u2014 Sign the Guarantee Yourself<\/strong>\n                            <ul class=\"mb-0 mt-2\">\n                                <li>Review the Guarantee Letter with all container and pricing details<\/li>\n                                <li>Fill in your information and provide a digital signature<\/li>\n                                <li>Payment will be due within 30 days (NET 30)<\/li>\n                            <\/ul>\n                        <\/div>\n                        <div class=\"alert alert-light border\">\n                            <i class=\"fas fa-envelope text-primary me-1\"><\/i>\n                            <strong>Option B \u2014 Invite Someone Else to Guarantee<\/strong>\n                            <ul class=\"mb-0 mt-2\">\n                                <li>Enter the email of the person who will sign the guarantee<\/li>\n                                <li>They will receive a secure link to review and sign the Guarantee Letter<\/li>\n                                <li>You will be notified once they complete the process<\/li>\n                            <\/ul>\n                        <\/div>\n                        <!-- Issue #5316 O-17: Invoice info block (green) -->\n                        <div class=\"alert alert-success\">\n                            <i class=\"fas fa-envelope-open-text text-success me-2\"><\/i>\n                            <strong>Invoice Information<\/strong><br>\n                            <small class=\"d-block mt-2\">\n                                Once your guarantee letter is approved and processed, an invoice for the container\n                                storage charges will be sent to your registered email address. You can also access\n                                your invoices anytime from your account dashboard.\n                            <\/small>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Additional Options (moved from Step 1 - MILESTONE-18) -->\n            <!-- Issue #5617 M13: Force-hidden when Termont Calculator active (no optional services in TOS) -->\n            \n            <!-- Issue #5435: Security Notice moved into savedCards section \u2014 shown only when logged in -->\n\n            <!-- Action Buttons -->\n            <div class=\"d-grid gap-2 d-md-flex justify-content-md-between\">\n                <button type=\"button\"\n                        class=\"btn btn-outline-secondary\"\n                        onclick=\"goToStep(2)\">\n                    <i class=\"fas fa-arrow-left\"><\/i> Back to Storage Details\n                <\/button>\n                <div class=\"btn-group\" role=\"group\">\n                    <!-- Dev\/QA only \u2014 uncomment to test credit card form with sample data\n                    <button type=\"button\"\n                            class=\"btn btn-outline-primary\"\n                            onclick=\"fillSampleCreditCardData()\"\n                            id=\"fillSampleDataBtn\">\n                        <i class=\"fas fa-magic\"><\/i> Fill Sample Data\n                    <\/button>\n                    -->\n                    <!-- Issue #5437: Clear button commented out for later reactivation\n                    <button type=\"button\"\n                            class=\"btn btn-outline-secondary\"\n                            onclick=\"clearCreditCardForm()\"\n                            id=\"clearFormBtn\">\n                        <i class=\"fas fa-eraser\"><\/i> Clear\n                    <\/button>\n                    -->\n                    <!-- Issue #5457: Default \"Proceed to Guarantee\" (matches pre-selected Pay Later) -->\n                    <button type=\"button\"\n                            class=\"btn btn-success btn-lg ms-2\"\n                            onclick=\"processPayment()\"\n                            id=\"processPaymentBtn\">\n                        <i class=\"fas fa-file-signature\" id=\"processPaymentIcon\"><\/i>\n                        <span id=\"processPaymentLabel\">Proceed to Guarantee<\/span>\n                        <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Payment Method Styles *\/\n.payment-method-option {\n    border: 2px solid var(--termont-light-gray);\n    padding: 1rem;\n    border-radius: 0.5rem;\n    transition: all var(--transition-speed);\n    cursor: pointer;\n}\n\n.payment-method-option:hover {\n    border-color: var(--termont-blue);\n    background: var(--termont-light-bg);\n    transform: scale(1.02);\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.payment-method-option.selected,\n.payment-method-option:has(.form-check-input:checked) {\n    border-color: var(--termont-blue);\n    background: linear-gradient(to right, #f0f8ff, #e6f3ff);\n    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);\n}\n\n\/* Make the entire card clickable *\/\n.payment-method-option {\n    transition: all 0.3s ease;\n    user-select: none;\n}\n\n.payment-method-option .form-check {\n    padding: 0;\n    margin: 0;\n}\n\n.payment-icons {\n    margin-top: 0.5rem;\n}\n\n.payment-icons i {\n    font-size: 1.5rem;\n    margin-right: 0.5rem;\n    color: var(--termont-gray);\n}\n\n.fa-cc-visa { color: #1a1f71; }\n.fa-cc-mastercard { color: #eb001b; }\n.fa-cc-amex { color: #006fcf; }\n\n\/* Payment Total Box *\/\n.payment-total-box {\n    background: var(--termont-light-bg);\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 2px solid var(--termont-orange);\n}\n\n\/* Card Input Formatting *\/\n#cardNumber {\n    letter-spacing: 2px;\n}\n\n#cvv {\n    letter-spacing: 2px;\n    font-family: monospace;\n}\n\n\/* Processing Animation *\/\n@keyframes processing {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n}\n\n.btn-processing {\n    animation: processing 1s infinite;\n}\n\n\/* ======== Issue #5372: Saved Cards Grid (GPT-06 M9-M13) ======== *\/\n.saved-cards-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n    gap: 1rem;\n    margin-bottom: 1rem;\n}\n\n.saved-card-tile {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 1rem;\n    border: 2px solid #e9ecef;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n.saved-card-tile:hover {\n    border-color: var(--termont-blue, #0056b3);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.saved-card-tile.selected {\n    border-color: var(--termont-blue, #0056b3);\n    background: linear-gradient(to right, #f0f8ff, #e6f3ff);\n    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);\n}\n\n.saved-card-brand {\n    font-size: 1.8rem;\n    width: 50px;\n    text-align: center;\n    flex-shrink: 0;\n}\n\n.saved-card-brand .fa-cc-visa { color: #1a1f71; }\n.saved-card-brand .fa-cc-mastercard { color: #eb001b; }\n.saved-card-brand .fa-cc-amex { color: #2e77bc; }\n.saved-card-brand .fa-cc-discover { color: #ff6600; }\n\n.saved-card-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.saved-card-last4 {\n    display: block;\n    font-weight: 600;\n    font-family: 'Courier New', monospace;\n    font-size: 1.05rem;\n    letter-spacing: 1px;\n}\n\n.saved-card-expiry {\n    display: block;\n    font-size: 0.85rem;\n    color: #6c757d;\n}\n\n.saved-card-actions {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 0.25rem;\n    flex-shrink: 0;\n}\n\n.saved-card-actions .btn-outline-danger {\n    padding: 0.15rem 0.4rem;\n    font-size: 0.75rem;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.saved-card-tile:hover .saved-card-actions .btn-outline-danger {\n    opacity: 1;\n}\n\n.saved-card-radio .form-check-input {\n    margin: 0;\n    width: 1.2rem;\n    height: 1.2rem;\n}\n<\/style>\n\n<script>\n\/\/ Payment form handlers - Issue #973 FIX: Removed duplicate processPayment function\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log('\ud83d\udccb Section 3 Payment Form Handlers Initialized');\n\n    \/\/ Payment method radio button handler (Issue #5343: 3 methods)\n    document.querySelectorAll('input[name=\"paymentMethod\"]').forEach(radio => {\n        radio.addEventListener('change', function() {\n            console.log('\ud83d\udcb3 Payment method changed to:', this.value);\n            \/\/ Hide all payment forms\n            document.getElementById('creditCardForm')?.classList.add('d-none');\n            document.getElementById('accountForm')?.classList.add('d-none');\n            document.getElementById('payLaterForm')?.classList.add('d-none');\n            \/\/ Show the selected form\n            if (this.value === 'credit') {\n                document.getElementById('creditCardForm')?.classList.remove('d-none');\n            } else if (this.value === 'wallet') {\n                document.getElementById('accountForm')?.classList.remove('d-none');\n            } else if (this.value === 'later') {\n                document.getElementById('payLaterForm')?.classList.remove('d-none');\n            }\n        });\n    });\n\n    \/\/ Card number formatting\n    const cardNumberInput = document.getElementById('cardNumber');\n    if (cardNumberInput) {\n        cardNumberInput.addEventListener('input', function(e) {\n            let value = e.target.value.replace(\/\\s\/g, '');\n            let formattedValue = value.match(\/.{1,4}\/g)?.join(' ') || value;\n            e.target.value = formattedValue;\n\n            \/\/ Detect card type\n            let cardType = detectLocalCardType(value);\n            updateLocalCardTypeIcon(cardType);\n        });\n    }\n\n    \/\/ CVV input restriction\n    const cvvInput = document.getElementById('cvv');\n    if (cvvInput) {\n        cvvInput.addEventListener('input', function(e) {\n            e.target.value = e.target.value.replace(\/[^0-9]\/g, '');\n        });\n    }\n\n    \/\/ Billing address toggle\n    const sameAsCompanyCheckbox = document.getElementById('sameAsCompany');\n    if (sameAsCompanyCheckbox) {\n        sameAsCompanyCheckbox.addEventListener('change', function() {\n            const billingAddress = document.getElementById('billingAddress');\n            if (billingAddress) {\n                if (this.checked) {\n                    billingAddress.classList.add('d-none');\n                } else {\n                    billingAddress.classList.remove('d-none');\n                }\n            }\n        });\n    }\n});\n\n\/\/ Local helper functions for card type detection (renamed to avoid conflicts)\nfunction detectLocalCardType(number) {\n    const patterns = {\n        visa: \/^4\/,\n        mastercard: \/^5[1-5]\/,\n        amex: \/^3[47]\/\n    };\n\n    for (const [type, pattern] of Object.entries(patterns)) {\n        if (pattern.test(number)) {\n            return type;\n        }\n    }\n    return 'unknown';\n}\n\nfunction updateLocalCardTypeIcon(type) {\n    const icon = document.getElementById('cardTypeIcon');\n    const iconClass = {\n        visa: 'fab fa-cc-visa',\n        mastercard: 'fab fa-cc-mastercard',\n        amex: 'fab fa-cc-amex',\n        unknown: 'fas fa-credit-card'\n    };\n\n    if (icon) {\n        icon.innerHTML = `<i class=\"${iconClass[type] || iconClass.unknown}\"><\/i>`;\n    }\n}\n\n\/\/ Function to handle clicking on payment method cards (Issue #5343: 3 methods)\nfunction selectPaymentMethodCard(method) {\n    console.log('\ud83d\udcb3 Payment method card clicked:', method);\n\n    \/\/ Hide all payment forms\n    document.getElementById('creditCardForm')?.classList.add('d-none');\n    document.getElementById('accountForm')?.classList.add('d-none');\n    document.getElementById('payLaterForm')?.classList.add('d-none');\n\n    \/\/ Uncheck all radios then check the selected one\n    document.querySelectorAll('input[name=\"paymentMethod\"]').forEach(r => r.checked = false);\n\n    \/\/ Issue #5523 + #6351 M1: Only hide CVV when switching AWAY from credit card\n    \/\/ Previously hid CVV unconditionally, causing it to disappear when user clicks \"Pay Now\"\n    \/\/ and a saved card with default badge was already auto-selected\n    if (method !== 'credit') {\n        document.getElementById('cvvOnlySection')?.classList.add('d-none');\n    }\n\n    \/\/ Show the right form + check radio\n    if (method === 'credit') {\n        document.getElementById('creditCard').checked = true;\n        document.getElementById('creditCardForm')?.classList.remove('d-none');\n        \/\/ Issue #6351 M1: Re-show CVV if a saved card is already selected\n        var selectedCard = document.querySelector('.saved-card-tile.selected');\n        if (selectedCard) {\n            document.getElementById('cvvOnlySection')?.classList.remove('d-none');\n        }\n    } else if (method === 'wallet') {\n        document.getElementById('walletPayment').checked = true;\n        document.getElementById('accountForm')?.classList.remove('d-none');\n    } else if (method === 'later') {\n        document.getElementById('payLater').checked = true;\n        document.getElementById('payLaterForm')?.classList.remove('d-none');\n    }\n\n    \/\/ Update visual selection\n    \/\/ Issue #6142: Guard for programmatic calls (no event object when called from step3-payment.js init)\n    document.querySelectorAll('.payment-method-option').forEach(card => {\n        card.classList.remove('selected');\n    });\n    var clickedCard = (typeof event !== 'undefined' && event && event.currentTarget)\n        ? event.currentTarget\n        : document.querySelector('[onclick*=\"selectPaymentMethodCard(\\'' + method + '\\')\"]');\n    if (clickedCard) clickedCard.classList.add('selected');\n\n    \/\/ Store in WorkflowState if available\n    if (typeof WorkflowState !== 'undefined') {\n        const paymentData = WorkflowState.getWorkflowData().payment || {};\n        paymentData.method = method;\n        WorkflowState.setStepData(3, paymentData);\n    }\n\n    \/\/ Issue #5457: Update button label based on payment method\n    const btnLabel = document.getElementById('processPaymentLabel');\n    const btnIcon = document.getElementById('processPaymentIcon');\n    if (btnLabel && btnIcon) {\n        if (method === 'later' || method === 'account' || method === 'wallet') {\n            btnLabel.textContent = 'Proceed to Guarantee';\n            btnIcon.className = 'fas fa-file-signature';\n        } else {\n            btnLabel.textContent = 'Process Secure Payment';\n            btnIcon.className = 'fas fa-lock';\n        }\n    }\n}\n\n\/\/ NOTE: processPayment() function removed - using main JS file's processPayment() instead\n\/\/ This prevents function conflicts and ensures proper validation and transitions\n<\/script>\n        <!-- Section 4: Guarantee Letter & Signature -->\n        \n<!-- Section 4: Guarantee Letter & Signature -->\n<div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"headingFour\">\n        <button class=\"accordion-button collapsed step-locked\"\n                type=\"button\"\n                data-bs-toggle=\"collapse\"\n                data-bs-target=\"#collapseFour\"\n                aria-expanded=\"false\"\n                aria-controls=\"collapseFour\"\n                id=\"accordionButton4\"\n                data-required-step=\"3\"\n                data-step-number=\"4\"\n                aria-disabled=\"true\">\n            <i class=\"accordion-button-icon fas fa-file-signature text-muted\"><\/i>\n            <span>Step 4: Guarantee Letter & Signature<\/span>\n            <span class=\"accordion-button-badge badge bg-secondary\">Pending<\/span>\n        <\/button>\n    <\/h2>\n    <div id=\"collapseFour\"\n         class=\"accordion-collapse collapse\"\n         aria-labelledby=\"headingFour\"\n         data-bs-parent=\"#workflowAccordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Issue #5539: SSO gate \u2014 guarantee requires authenticated carrier user -->\n            <div id=\"step4SsoGate\">\n                                    <div id=\"step4AuthGate\" 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-shield-halved wcp-sso-gate-icon\"><\/i><div class=\"wcp-sso-gate-inline-text\"><p class=\"wcp-sso-gate-title\">Sign in to access the Guarantee Letter<\/p><ul class=\"wcp-sso-gate-features\"><li><i class=\"fa-solid fa-check\"><\/i> Digital signature for guarantee letter<\/li><li><i class=\"fa-solid fa-check\"><\/i> Legally binding document on behalf of your company<\/li><li><i class=\"fa-solid fa-check\"><\/i> Signed copy sent to your email<\/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>                            <\/div>\n\n            <!-- Issue #5539: Content hidden until SSO connected -->\n            <div id=\"step4AuthContent\" style=\"display: none;\">\n\n            <!-- Issue #6354 M1: Pay Now confirmation (hidden by default, shown when user chose credit in Step 3) -->\n            <div id=\"payNowConfirmation\" class=\"d-none\">\n                <div class=\"alert alert-success mb-4\" role=\"alert\">\n                    <div class=\"d-flex align-items-center\">\n                        <i class=\"fas fa-check-circle fa-3x me-3 text-success\"><\/i>\n                        <div>\n                            <h5 class=\"alert-heading mb-1\">Payment Confirmed!<\/h5>\n                            <p class=\"mb-1\">Your credit card payment has been processed. No guarantee letter or signature is required.<\/p>\n                            <p class=\"mb-0 text-muted small\">Transaction ID: <strong id=\"payNowTransactionId\">-<\/strong> &middot; Amount: <strong id=\"payNowAmount\">-<\/strong><\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"card mb-4 border-light\">\n                    <div class=\"card-body text-center py-4\">\n                        <i class=\"fas fa-arrow-circle-right fa-2x text-primary mb-3 d-block\"><\/i>\n                        <h6>Ready to proceed<\/h6>\n                        <p class=\"text-muted mb-3\">Your container release will be processed after confirmation.<\/p>\n                        <button type=\"button\" class=\"btn btn-primary btn-lg\" id=\"payNowProceedBtn\" onclick=\"payNowProceedToStep5()\">\n                            <i class=\"fas fa-check me-2\"><\/i> Proceed to Confirmation\n                        <\/button>\n                    <\/div>\n                <\/div>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" onclick=\"payNowBackToPayment()\">\n                    <i class=\"fas fa-arrow-left me-1\"><\/i> Back to Payment\n                <\/button>\n            <\/div>\n\n            <!-- Issue #5863 M8 + #6058: Context-aware choice cards -->\n            <!-- M8 spec preserved: \"I Want to Guarantee\" + \"I Want to Pay\" -->\n            <!-- #6058 evolution: User B (tracking) gets adjusted labels + invite link always visible for User A -->\n            \n            <div class=\"row mb-4\" id=\"guaranteeChoiceCards\">\n                <div class=\"col-md-6 mb-3 mb-md-0\">\n                    <div class=\"card h-100 border-primary guarantee-choice active\" id=\"choiceGuaranteeSelf\"\n                         onclick=\"selectGuaranteeChoice('self', this)\" style=\"cursor: pointer;\">\n                        <div class=\"card-body text-center py-4\">\n                            <i class=\"fas fa-file-signature fa-3x text-primary mb-3\"><\/i>\n                                                        <h5 class=\"card-title\">I Want to Guarantee<\/h5>\n                            <p class=\"text-muted small mb-2\">Sign the guarantee letter \u2014 no payment required now<\/p>\n                            <ul class=\"list-unstyled text-start small text-muted mb-0\" style=\"padding-left:15%;\">\n                                <li><i class=\"fas fa-check text-primary me-1\"><\/i> Sign guarantee letter<\/li>\n                                <li><i class=\"fas fa-check text-primary me-1\"><\/i> Payment due within NET 30 days<\/li>\n                                <li><i class=\"fas fa-check text-primary me-1\"><\/i> Clerks notified automatically<\/li>\n                            <\/ul>\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n                <!-- Issue #6356: Replaced \"I Want to Pay\" with \"Invite Someone\" \u2014 2 logical options -->\n                                <div class=\"col-md-6\">\n                    <div class=\"card h-100 border-info guarantee-choice\" id=\"choiceInviteSomeone\"\n                         onclick=\"selectGuaranteeChoice('invite', this)\" style=\"cursor: pointer;\">\n                        <div class=\"card-body text-center py-4\">\n                            <i class=\"fas fa-envelope fa-3x text-info mb-3\"><\/i>\n                            <h5 class=\"card-title\">Invite Someone to Guarantee<\/h5>\n                            <p class=\"text-muted small mb-2\">Send an invitation to a third party to sign on your behalf<\/p>\n                            <ul class=\"list-unstyled text-start small text-muted mb-0\" style=\"padding-left:15%;\">\n                                <li><i class=\"fas fa-check text-info me-1\"><\/i> Enter payer's email<\/li>\n                                <li><i class=\"fas fa-check text-info me-1\"><\/i> They receive a secure link<\/li>\n                                <li><i class=\"fas fa-check text-info me-1\"><\/i> You are notified when signed<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                <!-- Issue #6356: Removed separate invite link \u2014 now integrated as card option above -->\n                <div class=\"col-12\" id=\"invitePayerLink\" style=\"display:none;\"><\/div>\n            <\/div>\n\n            <!-- Issue #5361 M6: Invite payer form (hidden by default) -->\n            <div id=\"invitePayerForm\" class=\"d-none mb-4\">\n                <div class=\"card border-warning\">\n                    <div class=\"card-body\">\n                        <h6 class=\"fw-bold\"><i class=\"fas fa-envelope text-warning me-2\"><\/i>Invite Someone to Pay<\/h6>\n                        <div class=\"row g-3 mt-2\">\n                            <div class=\"col-md-6\">\n                                <label class=\"form-label\">Payer's Email <span class=\"required\">*<\/span><\/label>\n                                <input type=\"email\" class=\"form-control\" id=\"payerEmail\" placeholder=\"payer@company.com\" required>\n                            <\/div>\n                            <div class=\"col-md-6\">\n                                <label class=\"form-label\">Payer's Name<\/label>\n                                <input type=\"text\" class=\"form-control\" id=\"payerName\" placeholder=\"Contact name (optional)\">\n                            <\/div>\n                            <div class=\"col-12\">\n                                <label class=\"form-label\">Message (optional)<\/label>\n                                <textarea class=\"form-control\" id=\"payerMessage\" rows=\"2\"\n                                    placeholder=\"Hi, please find the storage guarantee letter for container(s)...\"><\/textarea>\n                            <\/div>\n                            <!-- Issue #5429: Send button removed \u2014 invitation now deferred to Sign & Submit recap modal -->\n                            <div class=\"col-12\">\n                                <div class=\"alert alert-info py-2 mb-0\">\n                                    <i class=\"fas fa-info-circle me-2\"><\/i>The payment invitation will be sent when you click <strong>Sign &amp; Submit<\/strong> below.\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Guarantee Letter Preview -->\n            <div class=\"card mb-4 border-primary\" id=\"guaranteeLetterCard\">\n                                <div class=\"card-header bg-primary text-white d-flex justify-content-between align-items-center\">\n                    <h5 class=\"mb-0\">\n                        <i class=\"fas fa-file-contract\"><\/i> Guarantee Letter Preview\n                    <\/h5>\n                    <!-- Issue #5521: Print button hidden \u2014 re-enable when PDF generation is production-ready\n                    <button class=\"btn btn-sm btn-light\" onclick=\"printGuaranteeLetter()\">\n                        <i class=\"fas fa-print\"><\/i> Print\n                    <\/button>\n                    -->\n                <\/div>\n                <div class=\"card-body guarantee-letter\" id=\"guaranteeLetterContent\">\n                    <!-- Letter Header -->\n                    <div class=\"letter-header text-center mb-4\">\n                        <!-- Issue #973 FIX: Updated to use correct Termont logo URL instead of non-existent local file -->\n                        <img decoding=\"async\" src=\"https:\/\/www.termont.com\/wp-content\/uploads\/2015\/11\/logo_termont_cmyk.png\" alt=\"Termont Montreal\" height=\"60\" class=\"mb-3\">\n                        <h4>CONTAINER STORAGE GUARANTEE LETTER<\/h4>\n                        <p class=\"text-muted\">Reference: <strong id=\"letterReference\">-<\/strong><\/p>\n                    <\/div>\n\n                    <!-- Letter Date -->\n                    <div class=\"text-end mb-4\">\n                        <strong>Date:<\/strong> June 2, 2026                    <\/div>\n\n                    <!-- Letter Body -->\n                    <div class=\"letter-body\">\n                        <p><strong>To: Termont Montreal Inc.<\/strong><\/p>\n                        <p>We, <strong><span id=\"letterSignatoryCompany\">John Doe<\/span><\/strong>, hereby guarantee payment for storage charges related to the following <span id=\"letterContainerWord\">container<\/span>:<\/p>\n\n                        <!-- Issue #5507 + Issue #6330 M1: Multi-container guarantee table with tier breakdown -->\n                        <div class=\"table-responsive\">\n                        <table class=\"table table-bordered mt-3 mb-4\">\n                            <thead>\n                                <tr class=\"table-light\">\n                                    <th>Container Number<\/th>\n                                    <th>Container Type<\/th>\n                                    <th>Discharge Date<\/th>\n                                    <th>Planned Pickup Date<\/th>\n                                    <th>Storage Period<\/th>\n                                    <th>Billable Days<\/th>\n                                    <th>Daily Rate<\/th>\n                                    <th>Total Storage Charges<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody id=\"letterContainerRows\">\n                                <!-- Populated dynamically by step4-signature.js \u2014 includes tier breakdown sub-rows -->\n                                <tr>\n                                    <td colspan=\"8\" class=\"text-center text-muted\">-<\/td>\n                                <\/tr>\n                            <\/tbody>\n                            <tfoot>\n                                <tr id=\"letterTaxRow\" class=\"d-none\">\n                                    <td colspan=\"7\" class=\"text-end\">Tax:<\/td>\n                                    <td><span id=\"letterTaxAmount\">-<\/span><\/td>\n                                <\/tr>\n                                <tr class=\"table-warning fw-bold\">\n                                    <td colspan=\"7\" class=\"text-end\">Grand Total:<\/td>\n                                    <td><strong id=\"letterTotal\">-<\/strong><\/td>\n                                <\/tr>\n                            <\/tfoot>\n                        <\/table>\n                        <\/div>\n\n                        <h6>Terms and Conditions:<\/h6>\n                        <ol class=\"small\">\n                            <li>We agree to pay the storage charges as calculated above.<\/li>\n                            <li>Additional charges will apply if the container is picked up after the planned date.<\/li>\n                            <li>Payment has been processed via <span id=\"letterPaymentMethod\">-<\/span> (Transaction: <span id=\"letterTransaction\">-<\/span>).<\/li>\n                            <li>This guarantee is valid until the planned pickup date.<\/li>\n                            <li>All charges are subject to applicable taxes.<\/li>\n                            <li>Container release is contingent upon payment clearance.<\/li>\n                        <\/ol>\n\n                        <div class=\"mt-4\">\n                            <p><strong>Special Instructions:<\/strong><\/p>\n                            <p id=\"letterInstructions\" class=\"ps-3\">None<\/p>\n                        <\/div>\n\n                        <div class=\"mt-5\">\n                            <div class=\"row\">\n                                <div class=\"col-md-6\">\n                                    <p><strong>Authorized By:<\/strong><\/p>\n                                    <p>\n                                        Name: <span id=\"letterSignatoryName\">John Doe<\/span><br>\n                                        Title: <span id=\"letterSignatoryTitle\">Authorized Representative<\/span><br>\n                                        Company: <span id=\"letterSignatoryCompanyAuth\">Your Company<\/span><br>\n                                        Email: <span id=\"letterSignatoryEmail\">email@company.com<\/span><br>\n                                        Phone: <span id=\"letterSignatoryPhone\">-<\/span>\n                                    <\/p>\n                                <\/div>\n                                <div class=\"col-md-6\">\n                                    <p><strong>Termont Montreal:<\/strong><\/p>\n                                    <p>\n                                        Customer Service<br>\n                                        Email: customerservice@termont.com<br>\n                                        Phone: (514) 871-8781                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Digital Signature Section -->\n            <div class=\"card mb-4 border-warning\" id=\"signatureCard\">\n                                <div class=\"card-header bg-warning text-dark\">\n                    <h5 class=\"mb-0\">\n                        <i class=\"fas fa-pen-fancy\"><\/i> Digital Signature Required\n                    <\/h5>\n                <\/div>\n                <div class=\"card-body\">\n                    <!-- Issue #5426: 50\/50 split + 2x3 input grid layout -->\n                    <div class=\"row\">\n                        <div class=\"col-md-6\">\n                            <!-- Signature Canvas -->\n                            <div class=\"signature-container mb-3\">\n                                <canvas id=\"signatureCanvas\" class=\"signature-canvas\"><\/canvas>\n                                <div class=\"signature-line\">\n                                    <small class=\"text-muted\">Sign above<\/small>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Issue #5150 Fix A: Typed signature input (hidden by default) -->\n                            <input type=\"text\"\n                                   class=\"form-control form-control-lg text-center\"\n                                   id=\"typedSignatureInput\"\n                                   placeholder=\"Type your full name as signature\"\n                                   style=\"display: none; font-family: 'Dancing Script', cursive; font-size: 2rem;\"\n                                   maxlength=\"100\">\n\n                            <!-- Signature Controls -->\n                            <div class=\"btn-group mb-3\" role=\"group\">\n                                <button type=\"button\" class=\"btn btn-outline-danger\" onclick=\"clearSignature()\">\n                                    <i class=\"fas fa-eraser\"><\/i> Clear\n                                <\/button>\n                                <button type=\"button\" class=\"btn btn-outline-warning\" onclick=\"undoSignature()\">\n                                    <i class=\"fas fa-undo\"><\/i> Undo\n                                <\/button>\n                                <button type=\"button\" class=\"btn btn-outline-primary\" onclick=\"useTypedSignature()\">\n                                    <i class=\"fas fa-keyboard\"><\/i> Type Instead\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-md-6\">\n                            <!-- Signatory Information \u2014 Issue #5426: 2x3 grid layout -->\n                            <div class=\"signatory-info\">\n                                <h6>Signatory Information<\/h6>\n                                <!-- Row 1: Name, Title, Company -->\n                                <div class=\"row g-2 mb-3\">\n                                    <div class=\"col-md-4\">\n                                        <label for=\"signatoryName\" class=\"form-label\">\n                                            Full Name <span class=\"required\">*<\/span>\n                                        <\/label>\n                                        <input type=\"text\" class=\"form-control\" id=\"signatoryName\"\n                                               value=\"\" placeholder=\"Enter your full name\" required>\n                                    <\/div>\n                                    <div class=\"col-md-4\">\n                                        <label for=\"signatoryTitle\" class=\"form-label\">\n                                            Title <span class=\"required\">*<\/span>\n                                        <\/label>\n                                        <input type=\"text\" class=\"form-control\" id=\"signatoryTitle\"\n                                               value=\"\" placeholder=\"e.g. Dispatcher\" required>\n                                    <\/div>\n                                    <div class=\"col-md-4\">\n                                        <label for=\"signatoryCompany\" class=\"form-label\">\n                                            Company <span class=\"required\">*<\/span>\n                                        <\/label>\n                                        <input type=\"text\" class=\"form-control\" id=\"signatoryCompany\"\n                                               value=\"\" placeholder=\"Company name\" required>\n                                    <\/div>\n                                <\/div>\n                                <!-- Row 2: Email, Date & Time, IP Address -->\n                                <div class=\"row g-2 mb-3\">\n                                    <div class=\"col-md-4\">\n                                        <label for=\"signatoryEmail\" class=\"form-label\">\n                                            Email <span class=\"required\">*<\/span>\n                                        <\/label>\n                                        <input type=\"email\" class=\"form-control\" id=\"signatoryEmail\"\n                                               value=\"\" placeholder=\"your@email.com\" required>\n                                    <\/div>\n                                    <div class=\"col-md-4\">\n                                        <label class=\"form-label\">Date & Time<\/label>\n                                        <input type=\"text\" class=\"form-control\"\n                                               value=\"2026-06-02 03:11:01\" readonly>\n                                    <\/div>\n                                    <div class=\"col-md-4\">\n                                        <label class=\"form-label\">IP Address<\/label>\n                                        <input type=\"text\" class=\"form-control\"\n                                               value=\"216.73.216.19\" readonly>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Issue #5528: Agreement Checkboxes \u2014 stacked vertically with clear spacing -->\n                    <div class=\"agreement-section mt-4 d-flex flex-column gap-3\">\n                        <div class=\"form-check\">\n                            <input class=\"form-check-input\" type=\"checkbox\" id=\"agreeTerms\" required>\n                            <label class=\"form-check-label\" for=\"agreeTerms\">\n                                I have read and agree to the terms and conditions stated in the guarantee letter above.\n                                <span class=\"required\">*<\/span>\n                            <\/label>\n                        <\/div>\n                        <div class=\"form-check\">\n                            <input class=\"form-check-input\" type=\"checkbox\" id=\"agreeBinding\" required>\n                            <label class=\"form-check-label\" for=\"agreeBinding\">\n                                I understand this is a legally binding document and I am authorized to sign on behalf of the company.\n                                <span class=\"required\">*<\/span>\n                            <\/label>\n                        <\/div>\n                        <div class=\"form-check\">\n                            <input class=\"form-check-input\" type=\"checkbox\" id=\"agreeCopy\" checked>\n                            <label class=\"form-check-label\" for=\"agreeCopy\">\n                                Send me a signed copy via email\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Action Buttons -->\n            <div class=\"d-grid gap-2 d-md-flex justify-content-md-between\">\n                <button type=\"button\" \n                        class=\"btn btn-outline-secondary\" \n                        onclick=\"goToStep(3)\">\n                    <i class=\"fas fa-arrow-left\"><\/i> Back to Payment\n                <\/button>\n                <div>\n                    <!-- Issue #5381 M3: Preview PDF button removed (previewDocument() never implemented) -->\n                    <!-- Issue #5419: removed 'disabled' \u2014 validateSignatureStep() is the guard -->\n                    <button type=\"button\"\n                            class=\"btn btn-primary btn-lg\"\n                            onclick=\"submitSignature()\"\n                            id=\"submitSignatureBtn\">\n                        <i class=\"fas fa-check-circle\"><\/i> Sign & Submit\n                        <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <\/div><!-- \/step4AuthContent (Issue #5539) -->\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Guarantee Letter Styles *\/\n.guarantee-letter {\n    background: white;\n    padding: 2rem;\n    font-family: 'Times New Roman', serif;\n    line-height: 1.6;\n    max-height: 600px;\n    overflow-y: auto;\n    border: 1px solid #dee2e6;\n}\n\n.letter-header {\n    border-bottom: 3px solid var(--termont-blue);\n    padding-bottom: 1rem;\n}\n\n.letter-body {\n    text-align: justify;\n}\n\n.letter-body table {\n    font-size: 0.95rem;\n}\n\n\/* Signature Canvas Styles *\/\n.signature-container {\n    position: relative;\n    border: 2px solid #dee2e6;\n    border-radius: 0.5rem;\n    background: white;\n    padding: 0.5rem;\n}\n\n.signature-canvas {\n    width: 100%;\n    height: 150px;\n    cursor: crosshair;\n    touch-action: none;\n}\n\n.signature-line {\n    position: absolute;\n    bottom: 30px;\n    left: 10%;\n    right: 10%;\n    border-bottom: 1px solid #6c757d;\n    text-align: center;\n}\n\n\/* Signatory Info Styles *\/\n.signatory-info {\n    background: var(--termont-light-bg);\n    padding: 1rem;\n    border-radius: 0.5rem;\n}\n\n\/* Agreement Section *\/\n.agreement-section {\n    background: #fff3cd;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid #ffc107;\n}\n\n\/* Issue #5361 M5: Guarantee choice card styles *\/\n.guarantee-choice {\n    transition: all 0.2s ease;\n}\n.guarantee-choice:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n.guarantee-choice.active {\n    border-width: 2px !important;\n    box-shadow: 0 0 0 3px rgba(13,110,253,0.25);\n}\n\n\/* Print Styles *\/\n@media print {\n    .signature-container {\n        break-inside: avoid;\n    }\n    \n    .btn-group,\n    .agreement-section,\n    .action-buttons {\n        display: none !important;\n    }\n}\n<\/style>\n\n<!--\n    ============================================================================\n    LEGACY INLINE SCRIPT REMOVED - 2025-11-30 (Issue #2034 Round 4)\n    ============================================================================\n    By: Olivier RAVEAU - Oliv.Ai \ud83e\udd77\n\n    ROOT CAUSE: This inline <script> block was causing duplicate JavaScript\n    loading with the new modular step4-signature.js file loaded via WordPress\n    enqueue system.\n\n    CONFLICT: Both declared 'let signaturePad = null;' causing:\n    \"Uncaught SyntaxError: Identifier 'signaturePad' has already been declared\"\n\n    FIX: Removed entire inline script block (lines 359-539). All functionality\n    now exists in the NEW modular architecture:\n    - assets\/js\/modules\/steps\/step4-signature.js (signature pad implementation)\n    - WordPress enqueue system handles loading (index.php)\n\n    DO NOT add inline scripts to template files - violates DRY architecture!\n    All JavaScript should be in modular files and loaded via wp_enqueue_script()\n    ============================================================================\n-->\n        <!-- Section 5: Confirmation -->\n        \n<!-- Section 5: Confirmation & Next Steps -->\n<div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"headingFive\">\n        <button class=\"accordion-button collapsed step-locked\"\n                type=\"button\"\n                data-bs-toggle=\"collapse\"\n                data-bs-target=\"#collapseFive\"\n                aria-expanded=\"false\"\n                aria-controls=\"collapseFive\"\n                id=\"accordionButton5\"\n                data-required-step=\"4\"\n                data-step-number=\"5\"\n                aria-disabled=\"true\">\n            <i class=\"accordion-button-icon fas fa-check-circle text-muted\"><\/i>\n            <span>Step 5: Confirmation & Next Steps<\/span>\n            <span class=\"accordion-button-badge badge bg-secondary\">Pending<\/span>\n        <\/button>\n    <\/h2>\n    <div id=\"collapseFive\"\n         class=\"accordion-collapse collapse\"\n         aria-labelledby=\"headingFive\"\n         data-bs-parent=\"#workflowAccordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Success Message \u2014 Issue #5343: Two variants based on payment method -->\n            <!-- Variant A: Payment completed (credit card \/ wallet) -->\n            <div class=\"alert alert-success mb-4 d-none\" id=\"workflowSuccessAlertPaid\" role=\"alert\">\n                                <div class=\"d-flex align-items-center\">\n                    <i class=\"fas fa-check-circle fa-3x me-3\"><\/i>\n                    <div>\n                        <h4 class=\"alert-heading mb-1\">Payment Confirmed!<\/h4>\n                        <p class=\"mb-0\">Your container storage payment has been processed and your guarantee letter is approved.<\/p>\n                        <small>Confirmation #: <strong id=\"confirmationNumberPaid\">TRM-20260602-57e2eb<\/strong><\/small>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <!-- Variant B: Guarantee only (don't pay now) -->\n            <div class=\"alert alert-warning mb-4 d-none\" id=\"workflowSuccessAlertGuarantee\" role=\"alert\">\n                                <div class=\"d-flex align-items-center\">\n                    <i class=\"fas fa-file-signature fa-3x me-3\"><\/i>\n                    <div>\n                        <h4 class=\"alert-heading mb-1\">Guarantee Letter Signed \u2014 Payment Due Within 30 Days<\/h4>\n                        <p class=\"mb-0\">Your guarantee letter has been submitted. Payment must be received within <strong>30 days<\/strong> of container release.<\/p>\n                        <small>Reference #: <strong id=\"confirmationNumberGuarantee\">TRM-20260602-57e2ee<\/strong><\/small>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Transaction Summary -->\n            <div class=\"row mb-4\">\n                <div class=\"col-md-6\">\n                    <div class=\"card h-100\">\n                        <div class=\"card-header bg-light\">\n                            <h6 class=\"mb-0\"><i class=\"fas fa-container-storage\"><\/i> Container Details<\/h6>\n                        <\/div>\n                        <div class=\"card-body\">\n                            <dl class=\"row mb-0\">\n                                <dt class=\"col-sm-5\">Container #:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmContainer\">-<\/dd>\n                                \n                                <dt class=\"col-sm-5\">Type:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmType\">-<\/dd>\n                                \n                                <dt class=\"col-sm-5\">Pickup Date:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmPickup\">-<\/dd>\n                                \n                                <dt class=\"col-sm-5\">Release Status:<\/dt>\n                                <dd class=\"col-sm-7\"><span class=\"badge bg-success\">Ready for Pickup<\/span><\/dd>\n                            <\/dl>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-6\">\n                    <div class=\"card h-100\">\n                        <div class=\"card-header bg-light\">\n                            <h6 class=\"mb-0\"><i class=\"fas fa-receipt\"><\/i> Payment Summary<\/h6>\n                        <\/div>\n                        <div class=\"card-body\">\n                            <dl class=\"row mb-0\">\n                                <dt class=\"col-sm-5\" id=\"confirmAmountLabel\">Amount Paid:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmAmount\">-<\/dd>\n\n                                <dt class=\"col-sm-5\">Payment Method:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmMethod\">-<\/dd>\n\n                                <dt class=\"col-sm-5\" id=\"confirmTransactionLabel\">Transaction ID:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmTransaction\">-<\/dd>\n\n                                <dt class=\"col-sm-5\">Status:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"confirmReceiptStatus\"><span class=\"badge bg-info\">Emailed<\/span><\/dd>\n                            <\/dl>\n                            <!-- Issue #5490 M14: Receipt link area (populated by JS after WC payment) -->\n                            <div id=\"confirmReceiptArea\" class=\"mt-2\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Issue #5583 M2: Guarantee Coverage card \u2014 shown only for guarantee method -->\n            <div class=\"card mb-4 border-warning d-none\" id=\"guaranteeCoverageCard\">\n                <div class=\"card-header bg-warning text-dark\">\n                    <h6 class=\"mb-0\"><i class=\"fas fa-shield-alt\"><\/i> Guarantee Coverage<\/h6>\n                <\/div>\n                <div class=\"card-body\">\n                    <div class=\"row mb-3\">\n                        <div class=\"col-sm-6\">\n                            <dl class=\"row mb-0\">\n                                <dt class=\"col-sm-5\">Type:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"guaranteeCoverageType\">Self-Guarantee<\/dd>\n\n                                <dt class=\"col-sm-5\">Signatory:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"guaranteeCoverageSignatory\">-<\/dd>\n\n                                <dt class=\"col-sm-5\">Company:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"guaranteeCoverageCompany\">-<\/dd>\n                            <\/dl>\n                        <\/div>\n                        <div class=\"col-sm-6\">\n                            <dl class=\"row mb-0\">\n                                <dt class=\"col-sm-5\">Containers:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"guaranteeCoverageContainers\">-<\/dd>\n\n                                <dt class=\"col-sm-5\">Validity:<\/dt>\n                                <dd class=\"col-sm-7\">30 days from release<\/dd>\n\n                                <dt class=\"col-sm-5\">Status:<\/dt>\n                                <dd class=\"col-sm-7\" id=\"guaranteeCoverageStatus\"><span class=\"badge bg-success\">Active<\/span><\/dd>\n                            <\/dl>\n                        <\/div>\n                    <\/div>\n                    <!-- Issue #6330 M6: Per-container tier breakdown in guarantee coverage -->\n                    <div class=\"table-responsive\">\n                    <table class=\"table table-sm mb-0\" id=\"guaranteeCoverageTable\">\n                        <tbody id=\"guaranteeCoverageTierRows\">\n                            <!-- Issue #6330: Dynamically populated with per-container tier breakdown rows -->\n                        <\/tbody>\n                        <tbody>\n                            <tr id=\"guaranteeCoverageGateFee\" class=\"d-none\">\n                                <td>Gate Fee<\/td>\n                                <td class=\"text-end\" id=\"guaranteeCoverageGateFeeAmount\">-<\/td>\n                            <\/tr>\n                            <tr id=\"guaranteeCoverageStorageFee\" class=\"d-none\">\n                                <td id=\"guaranteeCoverageStorageLabel\">Storage<\/td>\n                                <td class=\"text-end\" id=\"guaranteeCoverageStorageFeeAmount\">-<\/td>\n                            <\/tr>\n                            <tr id=\"guaranteeCoverageTaxRow\" class=\"d-none\">\n                                <td id=\"guaranteeCoverageTaxLabel\">Tax<\/td>\n                                <td class=\"text-end\" id=\"guaranteeCoverageTaxAmount\">-<\/td>\n                            <\/tr>\n                            <tr class=\"border-top border-2\">\n                                <td class=\"fw-bold\">Total Guaranteed<\/td>\n                                <td class=\"text-end fw-bold text-warning\" id=\"guaranteeCoverageTotalAmount\">-<\/td>\n                            <\/tr>\n                        <\/tbody>\n                    <\/table>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Documents Available \u2014 Issue #5510: Toggle via WP Admin -->\n            \n            <!-- Issue #6200 M12: Create Operations on VBS CTA -->\n            <div class=\"card mb-4 border-primary d-none\" id=\"createVbsOperationsCard\">\n                <div class=\"card-header bg-primary text-white\">\n                    <h6 class=\"mb-0\"><i class=\"fas fa-cogs me-2\"><\/i> Create Operations on VBS<\/h6>\n                <\/div>\n                <div class=\"card-body\">\n                    <p class=\"mb-2\">Ready to create operations in the booking system for your container(s)?<\/p>\n                    <div id=\"vbsOperationsStatus\"><\/div>\n                    <button class=\"btn btn-primary btn-lg\" onclick=\"createVbsOperations()\" id=\"createVbsOpsBtn\">\n                        <i class=\"fas fa-sync-alt me-2\"><\/i> <span id=\"createVbsOpsLabel\">Create Operations on VBS<\/span>\n                        <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                    <\/button>\n                    <p class=\"text-muted small mt-2 mb-0\">\n                        <i class=\"fas fa-info-circle me-1\"><\/i> This will create booking-ready operations in VBS for each container in this guarantee.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Issue #6209 M6: Live VBS Operations DataTable -->\n            <div class=\"card mb-4 border-secondary d-none\" id=\"vbsOperationsTableCard\">\n                <div class=\"card-header bg-dark text-white d-flex justify-content-between align-items-center\">\n                    <h6 class=\"mb-0\"><i class=\"fas fa-table me-2\"><\/i> VBS Operations<\/h6>\n                    <button class=\"btn btn-sm btn-outline-light\" onclick=\"refreshVbsDataTable()\" title=\"Refresh\">\n                        <i class=\"fas fa-sync-alt\"><\/i>\n                    <\/button>\n                <\/div>\n                <div class=\"card-body p-0\">\n                    <div class=\"table-responsive\">\n                        <table class=\"table table-sm table-striped table-hover mb-0\" id=\"vbsOperationsTable\" style=\"width:100%\">\n                            <thead class=\"table-dark\">\n                                <tr>\n                                    <th>Container<\/th>\n                                    <th>Status<\/th>\n                                    <th>Movement<\/th>\n                                    <th>Fee<\/th>\n                                    <th>Vessel<\/th>\n                                    <th>Holds<\/th>\n                                    <th>Actions<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr><td colspan=\"7\" class=\"text-center text-muted py-3\"><i class=\"fas fa-spinner fa-spin me-2\"><\/i>Loading operations...<\/td><\/tr>\n                            <\/tbody>\n                        <\/table>\n                    <\/div>\n                    <div class=\"px-3 py-2 text-muted small\" id=\"vbsTableStatus\">\n                        <i class=\"fas fa-info-circle me-1\"><\/i> Live data from VBS \u2014 auto-refreshes every 30s\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Next Steps -->\n            <div class=\"card mb-4 border-info\">\n                <div class=\"card-header bg-info text-white\">\n                    <h6 class=\"mb-0\"><i class=\"fas fa-tasks\"><\/i> Next Steps - Container Pickup<\/h6>\n                <\/div>\n                <div class=\"card-body\">\n                    <div class=\"next-steps-timeline\">\n                        <div class=\"step-item\">\n                            <div class=\"step-number\">1<\/div>\n                            <div class=\"step-content\">\n                                <strong>Present Documents at Gate<\/strong>\n                                <p class=\"text-muted mb-0\">Show your confirmation number and photo ID at the terminal gate.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-item\">\n                            <div class=\"step-number\">2<\/div>\n                            <div class=\"step-content\">\n                                <strong>Proceed to Container Yard<\/strong>\n                                <p class=\"text-muted mb-0\">Follow signs to the container pickup area. Your container location: <strong>Block A, Row 12, Stack 3<\/strong><\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-item\">\n                            <div class=\"step-number\">3<\/div>\n                            <div class=\"step-content\">\n                                <strong>Container Inspection<\/strong>\n                                <p class=\"text-muted mb-0\">Inspect container for damages before leaving the terminal.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-item\">\n                            <div class=\"step-number\">4<\/div>\n                            <div class=\"step-content\">\n                                <strong>Exit Terminal<\/strong>\n                                <p class=\"text-muted mb-0\">Present exit pass at the gate. Keep all documents for your records.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Terminal Information -->\n            <div class=\"row mb-4\">\n                <div class=\"col-md-6\">\n                    <div class=\"card\">\n                        <div class=\"card-header bg-light\">\n                            <h6 class=\"mb-0\"><i class=\"fas fa-map-marker-alt\"><\/i> Terminal Location<\/h6>\n                        <\/div>\n                        <div class=\"card-body\">\n                            <!-- Issue #5513: Dynamic terminal data from WP options -->\n                            <address>\n                                <strong>Termont Montreal Inc.<\/strong><br>\n                                2100 Pierre-Dupuy Ave<br>\n                                Montreal, QC H3C 3R5<br>\n                                Canada<br>\n                                <abbr title=\"Phone\">P:<\/abbr> (514) 871-8781                            <\/address>\n                            <a class=\"btn btn-sm btn-outline-primary\" href=\"https:\/\/maps.google.com\/?q=Termont+Montreal+2100+Pierre-Dupuy+Ave+Montreal\" target=\"_blank\">\n                                <i class=\"fas fa-map\"><\/i> View on Map\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-6\">\n                    <div class=\"card\">\n                        <div class=\"card-header bg-light\">\n                            <h6 class=\"mb-0\"><i class=\"fas fa-clock\"><\/i> Operating Hours<\/h6>\n                        <\/div>\n                        <div class=\"card-body\">\n                            <!-- Issue #5513: Dynamic operating hours from WP options -->\n                            <table class=\"table table-sm mb-0\">\n                                <tr>\n                                    <td>Monday - Friday:<\/td>\n                                    <td><strong>7:00 AM - 5:00 PM<\/strong><\/td>\n                                <\/tr>\n                                <tr>\n                                    <td>Saturday:<\/td>\n                                    <td><strong>Closed<\/strong><\/td>\n                                <\/tr>\n                                <tr>\n                                    <td>Sunday:<\/td>\n                                    <td class=\"text-muted\">Closed<\/td>\n                                <\/tr>\n                                <tr>\n                                    <td>Holidays:<\/td>\n                                    <td class=\"text-muted\">Closed<\/td>\n                                <\/tr>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Support Contact \u2014 Issue #5511: Toggle via WP Admin -->\n            \n            <!-- Action Buttons -->\n            <div class=\"d-grid gap-2 d-md-flex justify-content-md-between\">\n                <button type=\"button\"\n                        class=\"btn btn-outline-secondary\"\n                        onclick=\"startNewWorkflow()\">\n                    <i class=\"fas fa-plus\"><\/i> Start New Container Request\n                <\/button>\n                <div>\n                    <button type=\"button\" \n                            class=\"btn btn-outline-info me-2\" \n                            onclick=\"printConfirmation()\">\n                        <i class=\"fas fa-print\"><\/i> Print Confirmation\n                    <\/button>\n                    <button type=\"button\" \n                            class=\"btn btn-outline-primary me-2\" \n                            onclick=\"saveToAccount()\">\n                        <i class=\"fas fa-save\"><\/i> Save to My Account\n                    <\/button>\n                    <!-- Issue #5656 Bug 2 \/ Xavier 8.xi: Hide \"Finish & Exit\" button -->\n                    <button type=\"button\"\n                            class=\"btn btn-success btn-lg d-none\"\n                            id=\"finishExitBtn\"\n                            onclick=\"finishWorkflow()\">\n                        <i class=\"fas fa-sign-out-alt\"><\/i> Finish & Exit\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Feedback Request \u2014 Issue #5512: Toggle via WP Admin -->\n                    <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Next Steps Timeline *\/\n.next-steps-timeline {\n    position: relative;\n    padding-left: 60px;\n}\n\n.step-item {\n    position: relative;\n    padding-bottom: 2rem;\n    display: flex;\n    align-items: flex-start;\n}\n\n.step-item:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    left: -40px;\n    top: 35px;\n    height: calc(100% - 10px);\n    width: 2px;\n    background: var(--termont-light-gray);\n}\n\n.step-number {\n    position: absolute;\n    left: -55px;\n    width: 30px;\n    height: 30px;\n    background: var(--termont-blue);\n    color: white;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: bold;\n}\n\n.step-content {\n    flex: 1;\n}\n\n\/* Star Rating *\/\n.star-rating {\n    font-size: 2rem;\n    color: #ffc107;\n}\n\n.star-rating i {\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.star-rating i:hover {\n    transform: scale(1.2);\n}\n\n.star-rating i.fas {\n    color: #ffc107;\n}\n\n\/* Document List *\/\n.list-group-item:hover {\n    background: var(--termont-light-bg);\n}\n\n\/* Success Animation *\/\n@keyframes successPulse {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.1); }\n    100% { transform: scale(1); }\n}\n\n.alert-success .fa-check-circle {\n    animation: successPulse 2s infinite;\n    color: #28a745;\n}\n\n\/* Print Styles *\/\n@media print {\n    .star-rating,\n    .btn,\n    .alert-light {\n        display: none !important;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Confirmation page functions\nfunction downloadDocument(type) {\n    \/\/ Simulate document download\n    const documents = {\n        guarantee: 'Guarantee_Letter_' + workflowData.workflow.sessionId + '.pdf',\n        receipt: 'Payment_Receipt_' + workflowData.payment.transactionId + '.pdf',\n        release: 'Container_Release_' + workflowData.container.container_number + '.pdf'\n    };\n    \n    Swal.fire({\n        icon: 'success',\n        title: 'Downloading...',\n        text: documents[type] || 'document.pdf',\n        timer: 2000,\n        showConfirmButton: false\n    });\n}\n\nfunction downloadAllDocuments() {\n    Swal.fire({\n        icon: 'info',\n        title: 'Preparing ZIP file...',\n        html: `\n            <div class=\"progress mt-3\">\n                <div class=\"progress-bar progress-bar-striped progress-bar-animated\" \n                     role=\"progressbar\" \n                     style=\"width: 100%\"><\/div>\n            <\/div>\n            <p class=\"mt-2\">Creating archive: documents_${workflowData.workflow.sessionId}.zip<\/p>\n        `,\n        timer: 3000,\n        showConfirmButton: false\n    });\n}\n\nfunction emailDocuments() {\n    Swal.fire({\n        title: 'Email Documents',\n        html: `\n            <input type=\"email\" \n                   id=\"emailAddress\" \n                   class=\"form-control\" \n                   placeholder=\"email@company.com\"\n                   value=\"${workflowData.user?.email || ''}\">\n        `,\n        confirmButtonText: 'Send',\n        showCancelButton: true,\n        confirmButtonColor: '#0056b3',\n        preConfirm: () => {\n            const email = document.getElementById('emailAddress').value;\n            if (!email || !email.includes('@')) {\n                Swal.showValidationMessage('Please enter a valid email address');\n            }\n            return email;\n        }\n    }).then((result) => {\n        if (result.isConfirmed) {\n            Swal.fire({\n                icon: 'success',\n                title: 'Documents Sent!',\n                text: `All documents have been sent to ${result.value}`,\n                confirmButtonColor: '#28a745'\n            });\n        }\n    });\n}\n\nfunction openMap() {\n    window.open('https:\/\/maps.google.com\/?q=Termont+Montreal', '_blank');\n}\n\nfunction printConfirmation() {\n    window.print();\n}\n\nfunction saveToAccount() {\n    Swal.fire({\n        icon: 'success',\n        title: 'Saved to Account',\n        text: 'This transaction has been saved to your account history.',\n        confirmButtonColor: '#28a745'\n    });\n}\n\nfunction startNewWorkflow() {\n    if (confirm('Start a new container storage request?')) {\n        \/\/ Issue #6098: resetWorkflow() was never migrated to module system \u2014 use WorkflowState.clearState()\n        if (typeof WorkflowState !== 'undefined' && typeof WorkflowState.clearState === 'function') {\n            WorkflowState.clearState();\n        }\n        localStorage.removeItem('wcp_workflow_state');\n        window.location.reload();\n    }\n}\n\nfunction finishWorkflow() {\n    Swal.fire({\n        title: 'Thank You!',\n        html: `\n            <p>Your container storage guarantee workflow is complete.<\/p>\n            <p>Reference: <strong>${workflowData.workflow.sessionId}<\/strong><\/p>\n            <p>You can access your documents anytime from your account.<\/p>\n        `,\n        icon: 'success',\n        confirmButtonText: 'Exit',\n        confirmButtonColor: '#28a745'\n    }).then(() => {\n        \/\/ Redirect to dashboard or homepage\n        window.location.href = '\/dashboard';\n    });\n}\n\nfunction rateExperience(rating) {\n    \/\/ Update star display\n    const stars = document.querySelectorAll('.star-rating i');\n    stars.forEach((star, index) => {\n        if (index < rating) {\n            star.classList.remove('far');\n            star.classList.add('fas');\n        } else {\n            star.classList.remove('fas');\n            star.classList.add('far');\n        }\n    });\n    \n    \/\/ Save rating\n    setTimeout(() => {\n        Swal.fire({\n            icon: 'success',\n            title: 'Thank you for your feedback!',\n            text: 'Your rating helps us improve our services.',\n            timer: 2000,\n            showConfirmButton: false\n        });\n    }, 500);\n}\n\n\/\/ Issue #5488 M3+M4+M9: Auto-populate Step 5 from WorkflowState (not stale global)\nfunction populateConfirmation() {\n    var wd = {};\n    try { wd = WorkflowState.getWorkflowData() || {}; } catch(e) { console.warn('WorkflowState not available'); return; }\n\n    \/\/ Issue #5927: Multi-container support in Step 5 confirmation\n    var step1 = wd.container || {};\n    var containers = step1.containers || [];\n    var storageDetails = wd.storageDetails || {};\n    var payment = wd.payment || {};\n\n    \/\/ Container details \u2014 show all containers\n    var containerEl = document.getElementById('confirmContainer');\n    if (containerEl) {\n        if (containers.length > 1) {\n            containerEl.textContent = containers.length + ' containers (' + containers.map(function(c) { return (c.data || {}).container_number || '?'; }).join(', ') + ')';\n        } else if (containers.length === 1) {\n            containerEl.textContent = (containers[0].data || {}).container_number || step1.container_number || '-';\n        } else {\n            containerEl.textContent = step1.container_number || '-';\n        }\n    }\n\n    var cData = containers.length > 0 ? (containers[0].data || {}) : {};\n    var typeEl = document.getElementById('confirmType');\n    if (typeEl) typeEl.textContent = containers.length > 1 ? containers.length + ' mixed types' : (((cData.container_size || '') + ' ' + (cData.container_type || '')).trim() || cData.iso_code || '-');\n\n    \/\/ Issue #5600 M4: Read pickup date from container storage data\n    var cStorage = cData.storage || {};\n    var pickupEl = document.getElementById('confirmPickup');\n    if (pickupEl) pickupEl.textContent = cStorage.pickup_date || '-';\n\n    \/\/ Issue #5600 M4: Read totals from paymentSummary (set by step2-details.js)\n    var paymentSummary = storageDetails.paymentSummary || {};\n    var subtotal = parseFloat(paymentSummary.subtotal) || 0;\n    var taxRate = (window.wpContainerPortal && window.wpContainerPortal.tax_rate) ? parseFloat(window.wpContainerPortal.tax_rate) \/ 100 : 0.14975;\n    var taxIncluded5 = window.wpContainerPortal?.tax_included || window.wcp_sim_data?.tax_included || false;\n    var tax5 = taxIncluded5 ? 0 : parseFloat(paymentSummary.tax || (subtotal * taxRate));\n    var totalWithTax = parseFloat(paymentSummary.total) || (subtotal + tax5);\n\n    var amountEl = document.getElementById('confirmAmount');\n    if (amountEl) amountEl.textContent = totalWithTax > 0 ? formatCurrency(totalWithTax) : '-';\n\n    \/\/ Issue #5343 + #5488 M4: Payment method and guarantee\/paid variant\n    var method = payment.method || 'later';\n    var isGuarantee = (method === 'later') || (payment.result && payment.result.guaranteeRequired);\n\n    if (isGuarantee) {\n        var alertG = document.getElementById('workflowSuccessAlertGuarantee');\n        if (alertG) alertG.classList.remove('d-none');\n        var alertPh = document.getElementById('workflowSuccessAlertPaid');\n        if (alertPh) alertPh.classList.add('d-none');\n\n        \/\/ Issue #6099: Context-aware header based on guarantee flow (self-sign vs invite)\n        var sig = (wd.signature || {});\n        var isInvite = (sig.guaranteeChoice === 'invite');\n        var alertHeading = alertG ? alertG.querySelector('.alert-heading') : null;\n        var alertDesc = alertG ? alertG.querySelector('p') : null;\n        if (isInvite && alertHeading) {\n            var inviteeName = sig.someoneElseWillPayData ? (sig.someoneElseWillPayData.payerName || sig.someoneElseWillPayData.payerEmail || 'the invited party') : 'the invited party';\n            alertHeading.textContent = 'Guarantee Invitation Sent \u2014 Awaiting Signature';\n            if (alertDesc) alertDesc.innerHTML = 'You have invited <strong>' + inviteeName + '<\/strong> to sign the guarantee letter on your behalf. You will be notified once they complete the process. Payment terms: NET 30.';\n            \/\/ Change icon to envelope for invite flow\n            var alertIcon = alertG.querySelector('.fa-file-signature');\n            if (alertIcon) { alertIcon.classList.remove('fa-file-signature'); alertIcon.classList.add('fa-envelope'); }\n        }\n\n        var amtLabel = document.getElementById('confirmAmountLabel');\n        if (amtLabel) amtLabel.textContent = 'Amount Guaranteed:';\n\n        var txLabel = document.getElementById('confirmTransactionLabel');\n        if (txLabel) txLabel.textContent = 'Payment Due:';\n\n        var txEl = document.getElementById('confirmTransaction');\n        if (txEl) txEl.textContent = 'Within 30 days of release';\n\n        var methodEl = document.getElementById('confirmMethod');\n        if (methodEl) methodEl.textContent = isInvite ? 'Guarantee Letter (NET 30) \u2014 Invited' : 'Guarantee Letter (NET 30)';\n\n        var statusEl = document.getElementById('confirmReceiptStatus');\n        if (statusEl) statusEl.innerHTML = isInvite\n            ? '<span class=\"badge bg-info\">Awaiting Invitee Signature<\/span>'\n            : '<span class=\"badge bg-warning text-dark\">Payment Pending<\/span>';\n    } else {\n        var alertP = document.getElementById('workflowSuccessAlertPaid');\n        if (alertP) alertP.classList.remove('d-none');\n        var alertGh = document.getElementById('workflowSuccessAlertGuarantee');\n        if (alertGh) alertGh.classList.add('d-none');\n\n        var methodLabels = { credit: 'Credit Card', 'credit-card': 'Credit Card', wallet: 'Wallet', account: 'Company Account' };\n        var mEl = document.getElementById('confirmMethod');\n        if (mEl) mEl.textContent = methodLabels[method] || method || '-';\n\n        var tEl = document.getElementById('confirmTransaction');\n        if (tEl) tEl.textContent = (payment.transactionId || (payment.result && payment.result.transactionId)) || '-';\n    }\n\n    \/\/ Issue #5583 M2: Populate Guarantee Coverage card\n    if (isGuarantee) {\n        var gcCard = document.getElementById('guaranteeCoverageCard');\n        if (gcCard) gcCard.classList.remove('d-none');\n\n        var sig = wd.signature || {};\n        var gcType = document.getElementById('guaranteeCoverageType');\n        if (gcType) gcType.textContent = (sig.guaranteeChoice === 'invite') ? 'Third-Party Payer' : 'Self-Guarantee';\n\n        var gcSignatory = document.getElementById('guaranteeCoverageSignatory');\n        if (gcSignatory) gcSignatory.textContent = sig.signatoryName || '-';\n\n        var gcCompany = document.getElementById('guaranteeCoverageCompany');\n        if (gcCompany) gcCompany.textContent = sig.signatoryCompany || '-';\n\n        var containerCount = containers.length || 1;\n        var gcContainers = document.getElementById('guaranteeCoverageContainers');\n        if (gcContainers) gcContainers.textContent = containerCount + ' container' + (containerCount > 1 ? 's' : '');\n\n        \/\/ Issue #5600 M4: Coverage breakdown from per-container charges\n        if (subtotal > 0) {\n            var sfRow = document.getElementById('guaranteeCoverageStorageFee');\n            if (sfRow) sfRow.classList.remove('d-none');\n            var sfLabel = document.getElementById('guaranteeCoverageStorageLabel');\n            var totalBillable = parseInt(paymentSummary.billableDays) || 0;\n            if (sfLabel) sfLabel.textContent = 'Storage (' + totalBillable + ' days)';\n            var sfAmt = document.getElementById('guaranteeCoverageStorageFeeAmount');\n            if (sfAmt) sfAmt.textContent = formatCurrency(subtotal);\n        }\n        if (!taxIncluded5 && tax5 > 0) {\n            var txRow = document.getElementById('guaranteeCoverageTaxRow');\n            if (txRow) txRow.classList.remove('d-none');\n            var txLabel = document.getElementById('guaranteeCoverageTaxLabel');\n            if (txLabel) txLabel.textContent = 'Tax (' + (taxRate * 100).toFixed(3) + '%)';\n            var txAmt = document.getElementById('guaranteeCoverageTaxAmount');\n            if (txAmt) txAmt.textContent = formatCurrency(tax5);\n        }\n        var gcTotal = document.getElementById('guaranteeCoverageTotalAmount');\n        if (gcTotal) gcTotal.textContent = formatCurrency(totalWithTax);\n    }\n\n    console.log('\u2705 Step 5 populated from WorkflowState', { container: cData.container_number, total: totalWithTax, method: method });\n}\n\n\/\/ Issue #5488 M9: Call populateConfirmation when Step 5 accordion opens\ndocument.addEventListener('DOMContentLoaded', function() {\n    var collapseFive = document.getElementById('collapseFive');\n    if (collapseFive) {\n        collapseFive.addEventListener('shown.bs.collapse', function() {\n            populateConfirmation();\n        });\n    }\n\n    \/\/ Issue #5490 M12: Check URL for ?order_complete=ORDER_ID (return from WC checkout)\n    var urlParams = new URLSearchParams(window.location.search);\n    var orderCompleteId = urlParams.get('order_complete');\n    if (orderCompleteId && parseInt(orderCompleteId) > 0) {\n        populateConfirmationFromOrder(parseInt(orderCompleteId));\n    }\n});\n\n\/**\n * Issue #5490 M12+M14: Populate Step 5 from real WooCommerce order data.\n * Called when user returns from checkout via ?order_complete=ORDER_ID.\n *\/\nfunction populateConfirmationFromOrder(orderId) {\n    var ajaxUrl = (typeof wpContainerPortal !== 'undefined') ? wpContainerPortal.ajaxUrl : '\/wp-admin\/admin-ajax.php';\n    var nonce = (typeof wpContainerPortal !== 'undefined') ? wpContainerPortal.nonce : '';\n\n    jQuery.post(ajaxUrl, {\n        action: 'cw_get_order_confirmation',\n        order_id: orderId,\n        nonce: nonce\n    }, function(res) {\n        if (!res.success || !res.data) {\n            console.warn('[Step5] Order confirmation fetch failed:', res);\n            return;\n        }\n        var d = res.data;\n\n        \/\/ Unlock and open Step 5\n        if (typeof enableSection === 'function') enableSection(5);\n        setTimeout(function() {\n            if (typeof moveToStep === 'function') moveToStep(5);\n        }, 300);\n\n        \/\/ Populate from real order data\n        var el;\n        el = document.getElementById('confirmContainer');\n        if (el) el.textContent = d.container_number || '-';\n\n        el = document.getElementById('confirmAmount');\n        if (el) el.textContent = d.total ? ('$' + parseFloat(d.total).toFixed(2) + ' ' + (d.currency || 'CAD')) : '-';\n\n        el = document.getElementById('confirmMethod');\n        if (el) el.textContent = d.payment_method || '-';\n\n        el = document.getElementById('confirmTransaction');\n        if (el) el.textContent = d.transaction_id || ('Order #' + d.order_number);\n\n        \/\/ Show paid alert, hide guarantee\n        var alertP = document.getElementById('workflowSuccessAlertPaid');\n        if (alertP) alertP.classList.remove('d-none');\n        var alertG = document.getElementById('workflowSuccessAlertGuarantee');\n        if (alertG) alertG.classList.add('d-none');\n\n        var statusEl = document.getElementById('confirmReceiptStatus');\n        if (statusEl) {\n            var statusMap = {\n                'completed': '<span class=\"badge bg-success\">Paid<\/span>',\n                'processing': '<span class=\"badge bg-success\">Payment Confirmed<\/span>',\n                'on-hold': '<span class=\"badge bg-warning text-dark\">On Hold<\/span>',\n                'pending': '<span class=\"badge bg-secondary\">Pending<\/span>'\n            };\n            statusEl.innerHTML = statusMap[d.status] || '<span class=\"badge bg-info\">' + (d.status || 'Unknown') + '<\/span>';\n        }\n\n        \/\/ Show receipt link if available\n        if (d.receipt_url) {\n            var receiptArea = document.getElementById('confirmReceiptArea');\n            if (receiptArea) {\n                receiptArea.innerHTML = '<a href=\"' + d.receipt_url + '\" target=\"_blank\" class=\"btn btn-sm btn-outline-primary\"><i class=\"fas fa-receipt me-1\"><\/i>View Receipt<\/a>';\n            }\n        }\n\n        console.log('\u2705 Step 5 populated from WC Order #' + d.order_number, d);\n    });\n}\n<\/script>\n    <\/div>\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\n                <\/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                <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 2, 2026                <\/div>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Close<\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"acceptTerms()\">\n                    <i class=\"fas fa-check\"><\/i> I Accept\n                <\/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\n                <\/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=\"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\">Close<\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"startLiveChat()\">\n                    <i class=\"fas fa-comments\"><\/i> Start Live Chat\n                <\/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\n                <\/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                <!-- 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=\"badge bg-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=\"badge bg-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=\"badge bg-warning text-dark 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=\"badge bg-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                <iframe id=\"logistecIframe\"\n                        style=\"width: 100%; height: calc(100vh - 120px); border: none;\"\n                        sandbox=\"allow-same-origin allow-scripts allow-forms\">\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,"footnotes":""},"class_list":["post-66949","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - 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:\/\/site.termont-top.com\/fr\/container-inquiry\/\" \/>\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:\/\/site.termont-top.com\/fr\/container-inquiry\/\" \/>\n<meta property=\"og:site_name\" content=\"Termont Montreal Inc\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-28T22:29:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\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:\\\/\\\/site.termont-top.com\\\/fr\\\/container-inquiry\\\/\",\"url\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/container-inquiry\\\/\",\"name\":\"Demande de conteneur et paiement - Termont Montreal Inc\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/#website\"},\"datePublished\":\"2025-11-23T23:29:35+00:00\",\"dateModified\":\"2026-02-28T22:29:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/container-inquiry\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/container-inquiry\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/container-inquiry\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demande de conteneur et paiement\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/\",\"name\":\"Termont Montreal Inc\",\"description\":\"Le monde passe par nous\",\"publisher\":{\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/#organization\",\"name\":\"Termont Montreal Inc\",\"url\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/site.termont-top.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/site.termont-top.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-termont.png\",\"contentUrl\":\"https:\\\/\\\/site.termont-top.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-termont.png\",\"width\":325,\"height\":59,\"caption\":\"Termont Montreal Inc\"},\"image\":{\"@id\":\"https:\\\/\\\/site.termont-top.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:\/\/site.termont-top.com\/fr\/container-inquiry\/","og_locale":"fr_FR","og_type":"article","og_title":"Demande de conteneur et paiement - Termont Montreal Inc","og_url":"https:\/\/site.termont-top.com\/fr\/container-inquiry\/","og_site_name":"Termont Montreal Inc","article_modified_time":"2026-02-28T22:29:32+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/site.termont-top.com\/fr\/container-inquiry\/","url":"https:\/\/site.termont-top.com\/fr\/container-inquiry\/","name":"Demande de conteneur et paiement - Termont Montreal Inc","isPartOf":{"@id":"https:\/\/site.termont-top.com\/fr\/#website"},"datePublished":"2025-11-23T23:29:35+00:00","dateModified":"2026-02-28T22:29:32+00:00","breadcrumb":{"@id":"https:\/\/site.termont-top.com\/fr\/container-inquiry\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/site.termont-top.com\/fr\/container-inquiry\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/site.termont-top.com\/fr\/container-inquiry\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/site.termont-top.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Demande de conteneur et paiement"}]},{"@type":"WebSite","@id":"https:\/\/site.termont-top.com\/fr\/#website","url":"https:\/\/site.termont-top.com\/fr\/","name":"Termont Montreal Inc","description":"Le monde passe par nous","publisher":{"@id":"https:\/\/site.termont-top.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/site.termont-top.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/site.termont-top.com\/fr\/#organization","name":"Termont Montreal Inc","url":"https:\/\/site.termont-top.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/site.termont-top.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/site.termont-top.com\/wp-content\/uploads\/2023\/07\/logo-termont.png","contentUrl":"https:\/\/site.termont-top.com\/wp-content\/uploads\/2023\/07\/logo-termont.png","width":325,"height":59,"caption":"Termont Montreal Inc"},"image":{"@id":"https:\/\/site.termont-top.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/pages\/66949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/comments?post=66949"}],"version-history":[{"count":1,"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/pages\/66949\/revisions"}],"predecessor-version":[{"id":66950,"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/pages\/66949\/revisions\/66950"}],"wp:attachment":[{"href":"https:\/\/site.termont-top.com\/fr\/wp-json\/wp\/v2\/media?parent=66949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}