{"id":66949,"date":"2025-11-24T00:29:35","date_gmt":"2025-11-24T05:29:35","guid":{"rendered":"https:\/\/termont2.com\/container-inquiry\/"},"modified":"2026-04-07T07:59:20","modified_gmt":"2026-04-07T11:59:20","slug":"container-tracking","status":"publish","type":"page","link":"https:\/\/termont.com\/fr\/container-tracking\/","title":{"rendered":"Demande de conteneur et paiement"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"66949\" class=\"elementor elementor-66949 elementor-66686\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc4606f e-con-full e-flex e-con e-parent\" data-id=\"cc4606f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\r\n\t\t<div class=\"elementor-element elementor-element-3fc336ea elementor-widget elementor-widget-shortcode\" data-id=\"3fc336ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<!-- Main Content Container -->\n<div class=\"container container-workflow-main mb-5\">\n\n    <!-- Admin Control Panel (DevHelpers - Issue #2028, Enhancement 4) -->\n    \n            <!-- \ud83d\udd12 SSO-GATE-ONLY VIEW (not authenticated) -->\n        <div class=\"row justify-content-center my-5\">\n            <div class=\"col-lg-7 col-md-9\">\n                <div class=\"card border-0 shadow-lg sso-gate-only-card\">\n                    <div class=\"card-body text-center p-5\">\n                        <div class=\"mb-4\">\n                            <i class=\"fa-solid fa-lock fa-3x text-primary\"><\/i>\n                        <\/div>\n                        <h3 class=\"mb-3\">Sign in to access Container Tracking<\/h3>\n                        <p class=\"text-muted mb-4\">\n                            Track containers, manage guarantees, and pay storage fees \u2014 all in one place.                        <\/p>\n\n                        <!-- Variant A: universal, always shown -->\n                        <ul class=\"list-unstyled text-start mx-auto mb-4\" style=\"max-width: 480px;\">\n                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-check text-success me-2\"><\/i>Real-time container tracking \u2014 status, location, holds, last free day<\/li>\n                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-check text-success me-2\"><\/i>Issue and sign guarantee letters online \u2014 pay carriers directly through the portal<\/li>\n                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-check text-success me-2\"><\/i>Transparent pricing \u2014 see exact storage fees and breakdown before any payment<\/li>\n                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-check text-success me-2\"><\/i>Open to every stakeholder \u2014 carriers, registrars, freight forwarders, BCOs, owners<\/li>\n                                                    <\/ul>\n\n                                                    <!-- Variant B: VBS-additional, only when cw_are_vbs_writes_enabled() === true -->\n                            <div class=\"mt-4 pt-3 border-top text-start mx-auto\" style=\"max-width: 480px;\">\n                                <p class=\"text-muted small mb-2 fw-bold\">\n                                    <i class=\"fa-solid fa-link me-1\"><\/i>For VBS dispatchers and operators                                <\/p>\n                                <ul class=\"list-unstyled mb-2\">\n                                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-arrows-rotate text-primary me-2\"><\/i>Sync with VBS \u2014 retrieve operations created by your dispatchers<\/li>\n                                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-arrows-rotate text-primary me-2\"><\/i>1-click inquiry, guarantee letter &amp; payment for each container<\/li>\n                                                                            <li class=\"mb-2\"><i class=\"fa-solid fa-arrows-rotate text-primary me-2\"><\/i>Auto-sync payments and updates back to VBS and the terminal<\/li>\n                                                                    <\/ul>\n                                <p class=\"text-muted small fst-italic mb-4\">\n                                    Reserved for dispatchers and operators connected to VBS \u2014 not required for carriers, BCOs, or freight forwarders.                                <\/p>\n                            <\/div>\n                        \n                        <button type=\"button\" class=\"btn btn-primary btn-lg px-5\" id=\"wcp-sso-open\">\n                            <i class=\"fa-solid fa-right-to-bracket me-2\"><\/i>Sign In                        <\/button>\n                        <p class=\"mt-3 mb-0\">\n                            <small class=\"text-muted\">\n                                Don&#039;t have an account?                                <a href=\"#\" id=\"wcp-sso-register-link\">Register your company<\/a>\n                            <\/small>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\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                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <h6>1. Container Storage Agreement<\/h6>\n                <p>By using this service, you agree to the terms and conditions set forth by Termont Montreal Inc. for container storage services at the Port of Montreal.<\/p>\n                \n                <h6>2. Storage Charges<\/h6>\n                <ul>\n                    <li>Free time: First 7 days after discharge<\/li>\n                    <li>Storage rates: $15\/day for 20' containers, $30\/day for 40' containers<\/li>\n                    <li>Charges begin on the 8th day after discharge<\/li>\n                    <li>All rates are in Canadian dollars (CAD)<\/li>\n                    <li>Applicable taxes will be added to all charges<\/li>\n                <\/ul>\n                \n                <h6>3. Payment Terms<\/h6>\n                <p>Payment must be made in full before container release. Accepted payment methods include:<\/p>\n                <ul>\n                    <li>Credit cards (Visa, MasterCard, American Express)<\/li>\n                    <li>Debit cards<\/li>\n                    <li>Company account (subject to credit approval)<\/li>\n                <\/ul>\n                \n                <h6>4. Container Release<\/h6>\n                <p>Containers will be released only upon:<\/p>\n                <ul>\n                    <li>Full payment of storage charges<\/li>\n                    <li>Presentation of valid identification<\/li>\n                    <li>Signed guarantee letter<\/li>\n                    <li>Compliance with terminal security procedures<\/li>\n                <\/ul>\n                \n                <h6>5. Liability<\/h6>\n                <p>Termont Montreal Inc. shall not be liable for any indirect, incidental, or consequential damages arising from the use of this service.<\/p>\n                \n                <h6>6. Governing Law<\/h6>\n                <p>This agreement shall be governed by the laws of Quebec, Canada.<\/p>\n                \n                <div class=\"alert alert-info mt-3\">\n                    <i class=\"fas fa-info-circle\"><\/i>\n                    Last updated: May 6, 2026                <\/div>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Fermer<\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"acceptTerms()\">\n                    <i class=\"fas fa-check\"><\/i> I Accept                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Help Center Modal -->\n<div class=\"modal fade\" id=\"helpModal\" tabindex=\"-1\" aria-labelledby=\"helpModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-xl\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-info text-white\">\n                <h5 class=\"modal-title\" id=\"helpModalLabel\">\n                    <i class=\"fas fa-life-ring\"><\/i> Help Center                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Fermer\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <div class=\"row\">\n                    <div class=\"col-md-3\">\n                        <div class=\"list-group\" id=\"helpCategories\">\n                            <a href=\"#\" class=\"list-group-item list-group-item-action active\" data-category=\"getting-started\">\n                                <i class=\"fas fa-play-circle\"><\/i> Getting Started\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"container-lookup\">\n                                <i class=\"fas fa-search\"><\/i> Container Lookup\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"storage-charges\">\n                                <i class=\"fas fa-calculator\"><\/i> Storage Charges\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"payment\">\n                                <i class=\"fas fa-credit-card\"><\/i> Payment\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"pickup\">\n                                <i class=\"fas fa-truck\"><\/i> Container Pickup\n                            <\/a>\n                            <a href=\"#\" class=\"list-group-item list-group-item-action\" data-category=\"troubleshooting\">\n                                <i class=\"fas fa-tools\"><\/i> Troubleshooting\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                    <div class=\"col-md-9\">\n                        <div id=\"helpContent\">\n                            <h5>Getting Started with Container Storage Workflow<\/h5>\n                            <p>Welcome to the Termont Montreal container storage and guarantee workflow. This system allows you to:<\/p>\n                            <ul>\n                                <li>Look up your container information<\/li>\n                                <li>Calculate storage charges<\/li>\n                                <li>Process payment securely<\/li>\n                                <li>Generate a guarantee letter<\/li>\n                                <li>Obtain container release documents<\/li>\n                            <\/ul>\n                            \n                            <h6>Prerequisites<\/h6>\n                            <p>Before starting, ensure you have:<\/p>\n                            <ul>\n                                <li>Your container number (11 characters, e.g., TGHU1234567)<\/li>\n                                <li>A valid payment method<\/li>\n                                <li>Authorization to act on behalf of your company<\/li>\n                            <\/ul>\n                            \n                            <h6>Step-by-Step Process<\/h6>\n                            <ol>\n                                <li><strong>Container Lookup:<\/strong> Enter your container number and planned pickup date<\/li>\n                                <li><strong>Review Charges:<\/strong> Review the calculated storage charges<\/li>\n                                <li><strong>Process Payment:<\/strong> Complete payment using credit card or company account<\/li>\n                                <li><strong>Sign Guarantee:<\/strong> Digitally sign the guarantee letter<\/li>\n                                <li><strong>Download Documents:<\/strong> Download and save all documents for pickup<\/li>\n                            <\/ol>\n                            \n                            <div class=\"alert alert-success mt-3\">\n                                <i class=\"fas fa-lightbulb\"><\/i>\n                                <strong>Tip:<\/strong> Save your confirmation number for quick reference at the terminal.\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Fermer<\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"startLiveChat()\">\n                    <i class=\"fas fa-comments\"><\/i> D\u00e9marrer la discussion en direct                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Live Chat Modal -->\n<div class=\"modal fade\" id=\"liveChatModal\" tabindex=\"-1\" aria-labelledby=\"liveChatModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-dialog-centered\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-success text-white\">\n                <h5 class=\"modal-title\" id=\"liveChatModalLabel\">\n                    <i class=\"fas fa-comments\"><\/i> Live Chat Support                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <div class=\"chat-container\" style=\"height: 400px;\">\n                    <div class=\"chat-messages\" id=\"chatMessages\" style=\"height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem; border-radius: 0.25rem; background: #f8f9fa;\">\n                        <div class=\"chat-message chat-message-agent\">\n                            <strong>Support Agent:<\/strong> Hello! I'm here to help with your container storage inquiry. How can I assist you today?\n                        <\/div>\n                    <\/div>\n                    <div class=\"chat-input mt-3\">\n                        <div class=\"input-group\">\n                            <input type=\"text\" \n                                   class=\"form-control\" \n                                   id=\"chatInput\" \n                                   placeholder=\"Type your message...\"\n                                   onkeypress=\"if(event.key === 'Enter') sendChatMessage()\">\n                            <button class=\"btn btn-primary\" onclick=\"sendChatMessage()\">\n                                <i class=\"fas fa-paper-plane\"><\/i> Send\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"mt-3\">\n                    <small class=\"text-muted\">\n                        <i class=\"fas fa-circle text-success\"><\/i> Agent is online\n                        \u2022 Average response time: < 1 minute\n                    <\/small>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- PDF Preview Modal -->\n<div class=\"modal fade\" id=\"pdfPreviewModal\" tabindex=\"-1\" aria-labelledby=\"pdfPreviewModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"pdfPreviewModalLabel\">\n                    <i class=\"fas fa-file-pdf text-danger\"><\/i> Document Preview\n                <\/h5>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body text-center\" style=\"min-height: 500px;\">\n                <div class=\"pdf-preview-placeholder\">\n                    <i class=\"fas fa-file-pdf fa-8x text-danger mb-3\"><\/i>\n                    <h5>Guarantee Letter Preview<\/h5>\n                    <p class=\"text-muted\">The signed document will be available for download after completion.<\/p>\n                    <div class=\"mt-4\">\n                        <button class=\"btn btn-outline-primary\" onclick=\"downloadPreview()\">\n                            <i class=\"fas fa-download\"><\/i> Download Sample\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Session Warning Modal -->\n<div class=\"modal fade\" id=\"sessionWarningModal\" tabindex=\"-1\" aria-labelledby=\"sessionWarningModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\">\n    <div class=\"modal-dialog modal-dialog-centered\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-warning\">\n                <h5 class=\"modal-title\" id=\"sessionWarningModalLabel\">\n                    <i class=\"fas fa-clock\"><\/i> Session Expiring Soon\n                <\/h5>\n            <\/div>\n            <div class=\"modal-body\">\n                <p>Your session will expire in <strong id=\"sessionTimeRemaining\">5 minutes<\/strong> due to inactivity.<\/p>\n                <p>Would you like to continue working?<\/p>\n            <\/div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" onclick=\"logoutUser()\">\n                    <i class=\"fas fa-sign-out-alt\"><\/i> Logout\n                <\/button>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"extendSession()\">\n                    <i class=\"fas fa-clock\"><\/i> Continue Working\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Modal-specific JavaScript functions\nfunction acceptTerms() {\n    localStorage.setItem('termsAccepted', 'true');\n    localStorage.setItem('termsAcceptedDate', new Date().toISOString());\n    \n    const modal = bootstrap.Modal.getInstance(document.getElementById('termsModal'));\n    modal.hide();\n    \n    Swal.fire({\n        icon: 'success',\n        title: 'Terms Accepted',\n        text: 'Thank you for accepting our terms and conditions.',\n        timer: 2000,\n        showConfirmButton: false\n    });\n}\n\nfunction openHelp() {\n    const helpModal = new bootstrap.Modal(document.getElementById('helpModal'));\n    helpModal.show();\n}\n\nfunction startLiveChat() {\n    \/\/ Close help modal if open\n    const helpModal = bootstrap.Modal.getInstance(document.getElementById('helpModal'));\n    if (helpModal) helpModal.hide();\n    \n    \/\/ Open chat modal\n    const chatModal = new bootstrap.Modal(document.getElementById('liveChatModal'));\n    chatModal.show();\n}\n\nfunction sendChatMessage() {\n    const input = document.getElementById('chatInput');\n    const message = input.value.trim();\n    \n    if (!message) return;\n    \n    \/\/ Add user message\n    const chatMessages = document.getElementById('chatMessages');\n    chatMessages.innerHTML += `\n        <div class=\"chat-message chat-message-user mt-2\">\n            <strong>You:<\/strong> ${message}\n        <\/div>\n    `;\n    \n    \/\/ Clear input\n    input.value = '';\n    \n    \/\/ Simulate agent response\n    setTimeout(() => {\n        const responses = [\n            \"I understand your concern. Let me help you with that.\",\n            \"I can assist you with container storage inquiries.\",\n            \"Please provide your container number so I can look it up for you.\",\n            \"I'm checking that information for you now.\"\n        ];\n        const randomResponse = responses[Math.floor(Math.random() * responses.length)];\n        \n        chatMessages.innerHTML += `\n            <div class=\"chat-message chat-message-agent mt-2\">\n                <strong>Support Agent:<\/strong> ${randomResponse}\n            <\/div>\n        `;\n        \n        \/\/ Scroll to bottom\n        chatMessages.scrollTop = chatMessages.scrollHeight;\n    }, 1000 + Math.random() * 2000);\n    \n    \/\/ Scroll to bottom\n    chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\nfunction downloadPreview() {\n    Swal.fire({\n        icon: 'info',\n        title: 'Downloading Sample',\n        text: 'Sample_Guarantee_Letter.pdf',\n        timer: 2000,\n        showConfirmButton: false\n    });\n}\n\nfunction extendSession() {\n    \/\/ Reset session timer\n    resetSessionTimer();\n    \n    \/\/ Close modal\n    const modal = bootstrap.Modal.getInstance(document.getElementById('sessionWarningModal'));\n    modal.hide();\n    \n    \/\/ Refresh session on server\n    fetch('api\/refresh-session.php', { method: 'POST' });\n}\n\nfunction logoutUser() {\n    window.location.href = 'logout.php';\n}\n\n\/\/ Help category navigation\ndocument.querySelectorAll('#helpCategories a').forEach(link => {\n    link.addEventListener('click', function(e) {\n        e.preventDefault();\n        \n        \/\/ Update active state\n        document.querySelectorAll('#helpCategories a').forEach(l => l.classList.remove('active'));\n        this.classList.add('active');\n        \n        \/\/ Load category content\n        const category = this.dataset.category;\n        loadHelpContent(category);\n    });\n});\n\nfunction loadHelpContent(category) {\n    const content = {\n        'container-lookup': `\n            <h5>Container Lookup Help<\/h5>\n            <p>To look up your container:<\/p>\n            <ol>\n                <li>Enter the 11-character container number (e.g., TGHU1234567)<\/li>\n                <li>Select your planned pickup date<\/li>\n                <li>Click \"Lookup Container\"<\/li>\n            <\/ol>\n            <p><strong>Common Issues:<\/strong><\/p>\n            <ul>\n                <li>Container not found: Verify the number is correct<\/li>\n                <li>Invalid format: Use 4 letters followed by 7 numbers<\/li>\n                <li>Access denied: Ensure you're logged in with proper credentials<\/li>\n            <\/ul>\n        `,\n        'storage-charges': `\n            <h5>Understanding Storage Charges<\/h5>\n            <p>Storage charges are calculated as follows:<\/p>\n            <ul>\n                <li><strong>Free Days:<\/strong> First 0 days after discharge<\/li>\n                <li><strong>20' Container:<\/strong> Rate per API pricing rules<\/li>\n                <li><strong>40' Container:<\/strong> Rate per API pricing rules (2 TEU)<\/li>\n                            <\/ul>\n            <p><strong>Example:<\/strong> A 40' container picked up 15 days after discharge:<\/p>\n            <ul>\n                <li>Free days: 7<\/li>\n                <li>Billable days: 8<\/li>\n                <li>Charges: 8 \u00d7 $30 = $240.00<\/li>\n                                <li>Total: $240.00<\/li>\n                            <\/ul>\n        `,\n        'payment': `\n            <h5>Payment Options<\/h5>\n            <p>We accept the following payment methods:<\/p>\n            <ul>\n                <li><strong>Credit Cards:<\/strong> Visa, MasterCard, American Express<\/li>\n                <li><strong>Debit Cards:<\/strong> All major Canadian banks<\/li>\n                <li><strong>Company Account:<\/strong> For pre-approved customers<\/li>\n            <\/ul>\n            <p><strong>Security:<\/strong><\/p>\n            <ul>\n                <li>All transactions are encrypted using SSL<\/li>\n                <li>We are PCI DSS compliant<\/li>\n                <li>Card details are not stored on our servers<\/li>\n            <\/ul>\n        `\n        \/\/ Add more categories as needed\n    };\n    \n    document.getElementById('helpContent').innerHTML = content[category] || '<p>Content not available.<\/p>';\n}\n<\/script>\n\n<style>\n\/* Modal Styles *\/\n.chat-message {\n    padding: 0.5rem;\n    border-radius: 0.25rem;\n    margin-bottom: 0.5rem;\n}\n\n.chat-message-agent {\n    background: #e3f2fd;\n    margin-right: 20%;\n}\n\n.chat-message-user {\n    background: #f3e5f5;\n    margin-left: 20%;\n    text-align: right;\n}\n\n.pdf-preview-placeholder {\n    padding: 3rem;\n}\n\n#helpCategories .list-group-item {\n    border-left: 3px solid transparent;\n}\n\n#helpCategories .list-group-item.active {\n    border-left-color: var(--termont-orange);\n    background: var(--termont-light-bg);\n    color: var(--termont-dark-blue);\n}\n<\/style>\n\n<!-- Authentication Modal - Issue #2034 -->\n<div class=\"modal fade\" id=\"authModal\" tabindex=\"-1\" aria-labelledby=\"authModalLabel\" aria-hidden=\"true\" data-bs-backdrop=\"static\">\n    <div class=\"modal-dialog modal-dialog-centered modal-lg\">\n        <div class=\"modal-content\">\n            <!-- Modal Header -->\n            <div class=\"modal-header bg-primary text-white\">\n                <h5 class=\"modal-title\" id=\"authModalLabel\">\n                    <i class=\"fas fa-user-shield\"><\/i>\n                    <span id=\"authModalTitle\">Authentication<\/span>\n                <\/h5>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n\n            <!-- Modal Body with Nav Tabs -->\n            <div class=\"modal-body p-4\">\n                <!-- Tab Navigation -->\n                <ul class=\"nav nav-tabs mb-4\" id=\"authTabs\" role=\"tablist\">\n                    <li class=\"nav-item\" role=\"presentation\">\n                        <button class=\"nav-link active\" id=\"login-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#login-panel\" type=\"button\" role=\"tab\">\n                            <i class=\"fas fa-sign-in-alt\"><\/i> Login\n                        <\/button>\n                    <\/li>\n                    <li class=\"nav-item\" role=\"presentation\">\n                        <button class=\"nav-link\" id=\"register-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#register-panel\" type=\"button\" role=\"tab\">\n                            <i class=\"fas fa-user-plus\"><\/i> Register\n                        <\/button>\n                    <\/li>\n                    <li class=\"nav-item\" role=\"presentation\">\n                        <button class=\"nav-link\" id=\"forgot-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#forgot-panel\" type=\"button\" role=\"tab\">\n                            <i class=\"fas fa-key\"><\/i> Forgot Password\n                        <\/button>\n                    <\/li>\n                <\/ul>\n\n                <!-- Tab Content -->\n                <div class=\"tab-content\" id=\"authTabContent\">\n\n                    <!-- Login Panel -->\n                    <div class=\"tab-pane fade show active\" id=\"login-panel\" role=\"tabpanel\">\n                        <form id=\"loginForm\" novalidate>\n                            <div class=\"mb-3\">\n                                <label for=\"loginEmail\" class=\"form-label\">\n                                    Email Address <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"loginEmail\" placeholder=\"your.email@company.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter a valid email address.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"loginPassword\" class=\"form-label\">\n                                    Password <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-lock\"><\/i>\n                                    <\/span>\n                                    <input type=\"password\" class=\"form-control\" id=\"loginPassword\" placeholder=\"Enter your password\" autocomplete=\"current-password\" required>\n                                    <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"togglePasswordVisibility('loginPassword')\">\n                                        <i class=\"fas fa-eye\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter your password.<\/div>\n                            <\/div>\n\n                            <div class=\"form-check mb-3\">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"rememberMe\">\n                                <label class=\"form-check-label\" for=\"rememberMe\">\n                                    Remember me for 30 days\n                                <\/label>\n                            <\/div>\n\n                            <div class=\"d-grid\">\n                                <button type=\"submit\" class=\"btn btn-primary btn-lg\">\n                                    <i class=\"fas fa-sign-in-alt\"><\/i> Login\n                                    <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"text-center mt-3\">\n                                <small class=\"text-muted\">\n                                    Don't have an account?\n                                    <a href=\"#\" onclick=\"switchAuthTab('register'); return false;\" class=\"text-primary\">Create one here<\/a>\n                                <\/small>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n\n                    <!-- Register Panel -->\n                    <div class=\"tab-pane fade\" id=\"register-panel\" role=\"tabpanel\">\n                        <form id=\"registerForm\" novalidate>\n                            <div class=\"row\">\n                                <div class=\"col-md-6 mb-3\">\n                                    <label for=\"registerFirstName\" class=\"form-label\">\n                                        First Name <span class=\"required\">*<\/span>\n                                    <\/label>\n                                    <div class=\"input-group\">\n                                        <span class=\"input-group-text\">\n                                            <i class=\"fas fa-user\"><\/i>\n                                        <\/span>\n                                        <input type=\"text\" class=\"form-control\" id=\"registerFirstName\" placeholder=\"John\" required>\n                                    <\/div>\n                                    <div class=\"invalid-feedback\">First name is required.<\/div>\n                                <\/div>\n\n                                <div class=\"col-md-6 mb-3\">\n                                    <label for=\"registerLastName\" class=\"form-label\">\n                                        Last Name <span class=\"required\">*<\/span>\n                                    <\/label>\n                                    <div class=\"input-group\">\n                                        <span class=\"input-group-text\">\n                                            <i class=\"fas fa-user\"><\/i>\n                                        <\/span>\n                                        <input type=\"text\" class=\"form-control\" id=\"registerLastName\" placeholder=\"Doe\" required>\n                                    <\/div>\n                                    <div class=\"invalid-feedback\">Last name is required.<\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerEmail\" class=\"form-label\">\n                                    Email Address <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"registerEmail\" placeholder=\"your.email@company.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter a valid email address.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerCompany\" class=\"form-label\">\n                                    Company Name <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-building\"><\/i>\n                                    <\/span>\n                                    <input type=\"text\" class=\"form-control\" id=\"registerCompany\" placeholder=\"ACME Logistics Inc.\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Company name is required.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerPhone\" class=\"form-label\">\n                                    Phone Number (Optional)\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-phone\"><\/i>\n                                    <\/span>\n                                    <input type=\"tel\" class=\"form-control\" id=\"registerPhone\" placeholder=\"+1 (555) 123-4567\">\n                                <\/div>\n                                <div class=\"form-text\">Format: +1 (555) 123-4567<\/div>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerPassword\" class=\"form-label\">\n                                    Password <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-lock\"><\/i>\n                                    <\/span>\n                                    <input type=\"password\" class=\"form-control\" id=\"registerPassword\" placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" required minlength=\"8\">\n                                    <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"togglePasswordVisibility('registerPassword')\">\n                                        <i class=\"fas fa-eye\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <div class=\"form-text\">\n                                    <i class=\"fas fa-info-circle text-primary\"><\/i>\n                                    Must be at least 8 characters with uppercase, lowercase, and numbers.\n                                <\/div>\n                                <div class=\"invalid-feedback\">Password must be at least 8 characters.<\/div>\n                            <\/div>\n\n                            <div class=\"mb-2\">\n                                <div class=\"progress\" style=\"height: 8px;\">\n                                    <div id=\"passwordStrengthBar\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%\"><\/div>\n                                <\/div>\n                                <small id=\"passwordStrengthText\" class=\"form-text\"><\/small>\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"registerPasswordConfirm\" class=\"form-label\">\n                                    Confirm Password <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-lock\"><\/i>\n                                    <\/span>\n                                    <input type=\"password\" class=\"form-control\" id=\"registerPasswordConfirm\" placeholder=\"Re-enter password\" autocomplete=\"new-password\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Passwords do not match.<\/div>\n                            <\/div>\n\n                            <label class=\"wcp-sso-remember\" style=\"margin: 12px 0 8px;\">\n                                <input type=\"checkbox\" id=\"acceptTerms\" required>\n                                I agree to the <a href=\"https:\/\/www.termont.com\/legal-notice\/\" target=\"_blank\" style=\"color:#0d6efd;text-decoration:underline;\">Terms & Conditions<\/a> <span class=\"required\" style=\"color:#dc3545;\">*<\/span>\n                            <\/label>\n                            <div class=\"invalid-feedback\">You must agree to the terms.<\/div>\n\n                            <div class=\"d-grid\">\n                                <button type=\"submit\" class=\"btn btn-success btn-lg\">\n                                    <i class=\"fas fa-user-plus\"><\/i> Create Account\n                                    <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"text-center mt-3\">\n                                <small class=\"text-muted\">\n                                    Already have an account?\n                                    <a href=\"#\" onclick=\"switchAuthTab('login'); return false;\" class=\"text-primary\">Login here<\/a>\n                                <\/small>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n\n                    <!-- Forgot Password Panel -->\n                    <div class=\"tab-pane fade\" id=\"forgot-panel\" role=\"tabpanel\">\n                        <form id=\"forgotPasswordForm\" novalidate>\n                            <div class=\"alert alert-info\" role=\"alert\">\n                                <i class=\"fas fa-info-circle\"><\/i>\n                                Enter your email address and we'll send you a link to reset your password.\n                            <\/div>\n\n                            <div class=\"mb-3\">\n                                <label for=\"forgotEmail\" class=\"form-label\">\n                                    Email Address <span class=\"required\">*<\/span>\n                                <\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\">\n                                        <i class=\"fas fa-envelope\"><\/i>\n                                    <\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"forgotEmail\" placeholder=\"your.email@company.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">Please enter a valid email address.<\/div>\n                            <\/div>\n\n                            <div class=\"d-grid\">\n                                <button type=\"submit\" class=\"btn btn-warning btn-lg\">\n                                    <i class=\"fas fa-paper-plane\"><\/i> Send Reset Link\n                                    <span class=\"spinner-border spinner-border-sm ms-2 d-none\" role=\"status\"><\/span>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"text-center mt-3\">\n                                <small class=\"text-muted\">\n                                    Remember your password?\n                                    <a href=\"#\" onclick=\"switchAuthTab('login'); return false;\" class=\"text-primary\">Login here<\/a>\n                                <\/small>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Notification Methods Modal - MILESTONE-15 -->\n<div class=\"modal fade\" id=\"notificationMethodsModal\" tabindex=\"-1\" aria-labelledby=\"notificationMethodsModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-dialog-centered modal-lg\" style=\"max-width: 900px;\">\n        <div class=\"modal-content\">\n            <!-- Header -->\n            <div class=\"modal-header border-0 pb-0\">\n                <div class=\"w-100 text-center\">\n                    <div class=\"mb-3\">\n                        <i class=\"fas fa-bell text-primary\" style=\"font-size: 3rem;\"><\/i>\n                    <\/div>\n                    <h3 class=\"modal-title fw-bold\" id=\"notificationMethodsModalLabel\">\n                        How would you like to receive updates?\n                    <\/h3>\n                    <p class=\"text-muted mt-2\">Choose the notification method that best fits your workflow<\/p>\n                <\/div>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n\n            <!-- Body -->\n            <div class=\"modal-body px-5 pb-5\">\n\n                <!-- Method 1: Email Notifications (Instant) -->\n                <div class=\"card border mb-4 hover-shadow\" style=\"cursor: pointer;\" data-method=\"email-instant\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-primary bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-envelope text-primary\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        Email Notifications\n                                        <span class=\"dms-badge dms-badge-success ms-2\">Available Now<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Receive instant email alerts when your container status changes - just like Amazon package tracking.\n                                <\/p>\n                                <div class=\"row g-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>Instant delivery<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>Mobile-friendly<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>No technical setup<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-success me-2 mt-1\"><\/i>\n                                            <small>Free forever<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Method 2: Email with CSV Export -->\n                <div class=\"card border mb-4 hover-shadow-light\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-info bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-file-csv text-info\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        Email with CSV Export\n                                        <span class=\"dms-badge dms-badge-info ms-2\">Platform Config<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Receive structured CSV files via email for easy import into your ERP, TMS, or any business software.\n                                <\/p>\n                                <div class=\"row g-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-info me-2 mt-1\"><\/i>\n                                            <small>Custom CSV format<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-info me-2 mt-1\"><\/i>\n                                            <small>ERP\/TMS compatible<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"alert alert-info mt-3 mb-0 py-2\">\n                                    <small>\n                                        <i class=\"fas fa-info-circle me-1\"><\/i>\n                                        Configure CSV format in your <strong>DMS Platform Settings<\/strong> after login\n                                    <\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Method 3: REST API (Pull) -->\n                <div class=\"card border mb-4 hover-shadow-light\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-warning bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-code text-warning\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        REST API (Pull Mode)\n                                        <span class=\"dms-badge dms-badge-warning ms-2\">AppStore Activation<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Query container updates on-demand from your own systems. Pull data whenever you need it with simple RESTful API calls.\n                                <\/p>\n                                <div class=\"row g-3 mb-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Real-time queries<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Full control<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Unlimited calls<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-warning me-2 mt-1\"><\/i>\n                                            <small>Enterprise security<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"alert alert-warning mb-0 py-2\">\n                                    <small>\n                                        <i class=\"fas fa-shopping-cart me-1\"><\/i>\n                                        Activate in <strong>DMS Platform AppStore<\/strong> \u2192 Get API documentation + your API key\n                                    <\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Method 4: Webhook API (Push) -->\n                <div class=\"card border mb-4 hover-shadow-light\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"d-flex align-items-start\">\n                            <div class=\"flex-shrink-0 me-4\">\n                                <div class=\"bg-danger bg-opacity-10 rounded-circle p-3\">\n                                    <i class=\"fas fa-bolt text-danger\" style=\"font-size: 2rem;\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex-grow-1\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <h5 class=\"fw-bold mb-0\">\n                                        Webhook API (Push Mode)\n                                        <span class=\"dms-badge dms-badge-danger ms-2\">AppStore Activation<\/span>\n                                    <\/h5>\n                                <\/div>\n                                <p class=\"text-muted mb-3\">\n                                    Receive automatic notifications pushed to your systems in real-time when container status changes - zero polling required.\n                                <\/p>\n                                <div class=\"row g-3 mb-3\">\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>Instant push notifications<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>Zero latency<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>No polling overhead<\/small>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"col-md-6\">\n                                        <div class=\"d-flex align-items-start\">\n                                            <i class=\"fas fa-check-circle text-danger me-2 mt-1\"><\/i>\n                                            <small>Event-driven<\/small>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"alert alert-danger mb-0 py-2\">\n                                    <small>\n                                        <i class=\"fas fa-shopping-cart me-1\"><\/i>\n                                        Activate in <strong>DMS Platform AppStore<\/strong> \u2192 Configure your webhook endpoint + Get API key\n                                    <\/small>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Comparison Note -->\n                <div class=\"alert alert-light border mb-0\">\n                    <div class=\"d-flex\">\n                        <i class=\"fas fa-lightbulb text-warning fs-3 me-3\"><\/i>\n                        <div>\n                            <h6 class=\"fw-bold mb-2\">Need help choosing?<\/h6>\n                            <ul class=\"mb-0 ps-3\">\n                                <li class=\"mb-1\"><small><strong>Email<\/strong> - Best for individuals and small teams<\/small><\/li>\n                                <li class=\"mb-1\"><small><strong>CSV<\/strong> - Best for manual imports into existing systems<\/small><\/li>\n                                <li class=\"mb-1\"><small><strong>REST API<\/strong> - Best for custom integrations with full control<\/small><\/li>\n                                <li><small><strong>Webhook<\/strong> - Best for real-time automated systems<\/small><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- Footer -->\n            <div class=\"modal-footer border-0 pt-0\">\n                <button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">\n                    Cancel\n                <\/button>\n                <button type=\"button\" class=\"btn btn-primary\" id=\"confirmNotificationMethod\">\n                    <i class=\"fas fa-check me-2\"><\/i>\n                    Enable Email Notifications\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ ========== AUTH MODAL FUNCTIONS (Issue #2034) ==========\n\n\/\/ Switch between tabs\nfunction switchAuthTab(tabName) {\n    const tabs = {\n        'login': 'login-tab',\n        'register': 'register-tab',\n        'forgot': 'forgot-tab'\n    };\n    const tabButton = document.getElementById(tabs[tabName]);\n    if (tabButton) {\n        const tab = new bootstrap.Tab(tabButton);\n        tab.show();\n    }\n}\n\n\/\/ Open auth modal on specific tab\nfunction openAuthModal(tabName = 'login') {\n    const modal = new bootstrap.Modal(document.getElementById('authModal'));\n    modal.show();\n    switchAuthTab(tabName);\n}\n\n\/\/ Toggle password visibility\nfunction togglePasswordVisibility(inputId) {\n    const input = document.getElementById(inputId);\n    const icon = event.target.tagName === 'I' ? event.target : event.target.querySelector('i');\n    if (input.type === 'password') {\n        input.type = 'text';\n        icon.classList.remove('fa-eye');\n        icon.classList.add('fa-eye-slash');\n    } else {\n        input.type = 'password';\n        icon.classList.remove('fa-eye-slash');\n        icon.classList.add('fa-eye');\n    }\n}\n\n\/\/ Password strength calculation (called from auth module)\ndocument.getElementById('registerPassword')?.addEventListener('input', function() {\n    if (typeof updatePasswordStrength === 'function') {\n        updatePasswordStrength(this.value);\n    }\n});\n\n\/\/ Password match validation\ndocument.getElementById('registerPasswordConfirm')?.addEventListener('input', function() {\n    if (typeof validatePasswordMatch === 'function') {\n        validatePasswordMatch();\n    }\n});\n\n\/\/ Form submission handlers (delegate to auth module)\n\/\/ ============================================================================\n\/\/ MILESTONE-17: Logistec Iframe Modal\n\/\/ ============================================================================\n<\/script>\n\n<!-- Logistec Iframe Modal - MILESTONE-17 -->\n<div class=\"modal fade\" id=\"logistecIframeModal\" tabindex=\"-1\" aria-labelledby=\"logistecIframeModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-fullscreen\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header bg-info text-white\">\n                <div>\n                    <h5 class=\"modal-title\" id=\"logistecIframeModalLabel\">\n                        <i class=\"fas fa-external-link-alt me-2\"><\/i>\n                        Logistec Container Inquiry - <span id=\"logistecIframeContainer\"><\/span>\n                    <\/h5>\n                    <small class=\"d-block mt-1\">\n                        <i class=\"fas fa-link me-1\"><\/i>\n                        <span id=\"logistecIframeUrl\"><\/span>\n                    <\/small>\n                <\/div>\n                <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n            <\/div>\n            <div class=\"modal-body p-0\">\n                <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.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Demande de conteneur et paiement - Termont Montreal Inc<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/termont.com\/fr\/container-tracking\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demande de conteneur et paiement - Termont Montreal Inc\" \/>\n<meta property=\"og:url\" content=\"https:\/\/termont.com\/fr\/container-tracking\/\" \/>\n<meta property=\"og:site_name\" content=\"Termont Montreal Inc\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-07T11:59:20+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/\",\"url\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/\",\"name\":\"Demande de conteneur et paiement - Termont Montreal Inc\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#website\"},\"datePublished\":\"2025-11-24T05:29:35+00:00\",\"dateModified\":\"2026-04-07T11:59:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/container-tracking\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/termont.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demande de conteneur et paiement\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/termont.com\\\/fr\\\/\",\"name\":\"Termont Montreal Inc\",\"description\":\"Le monde passe par nous\",\"publisher\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/termont.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#organization\",\"name\":\"Termont Montreal Inc\",\"url\":\"https:\\\/\\\/termont.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/termont.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-termont.png\",\"contentUrl\":\"https:\\\/\\\/termont.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-termont.png\",\"width\":325,\"height\":59,\"caption\":\"Termont Montreal Inc\"},\"image\":{\"@id\":\"https:\\\/\\\/termont.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demande de conteneur et paiement - Termont Montreal Inc","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/termont.com\/fr\/container-tracking\/","og_locale":"fr_FR","og_type":"article","og_title":"Demande de conteneur et paiement - Termont Montreal Inc","og_url":"https:\/\/termont.com\/fr\/container-tracking\/","og_site_name":"Termont Montreal Inc","article_modified_time":"2026-04-07T11:59:20+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/termont.com\/fr\/container-tracking\/","url":"https:\/\/termont.com\/fr\/container-tracking\/","name":"Demande de conteneur et paiement - Termont Montreal Inc","isPartOf":{"@id":"https:\/\/termont.com\/fr\/#website"},"datePublished":"2025-11-24T05:29:35+00:00","dateModified":"2026-04-07T11:59:20+00:00","breadcrumb":{"@id":"https:\/\/termont.com\/fr\/container-tracking\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/termont.com\/fr\/container-tracking\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/termont.com\/fr\/container-tracking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/termont.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Demande de conteneur et paiement"}]},{"@type":"WebSite","@id":"https:\/\/termont.com\/fr\/#website","url":"https:\/\/termont.com\/fr\/","name":"Termont Montreal Inc","description":"Le monde passe par nous","publisher":{"@id":"https:\/\/termont.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/termont.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/termont.com\/fr\/#organization","name":"Termont Montreal Inc","url":"https:\/\/termont.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/termont.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/termont.com\/wp-content\/uploads\/2023\/07\/logo-termont.png","contentUrl":"https:\/\/termont.com\/wp-content\/uploads\/2023\/07\/logo-termont.png","width":325,"height":59,"caption":"Termont Montreal Inc"},"image":{"@id":"https:\/\/termont.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages\/66949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/comments?post=66949"}],"version-history":[{"count":1,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages\/66949\/revisions"}],"predecessor-version":[{"id":66950,"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/pages\/66949\/revisions\/66950"}],"wp:attachment":[{"href":"https:\/\/termont.com\/fr\/wp-json\/wp\/v2\/media?parent=66949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}