<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        (function() {
            const savedTheme = localStorage.getItem('theme');
            const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
            if (savedTheme === 'dark' || (savedTheme === null && prefersDarkScheme.matches)) {
                document.documentElement.classList.add('dark-mode');
            }
        })();
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ get_csrf_token() }}">
    <title>LabelExpress Dashboard</title>
    <link rel="icon" type="image/png" href="/static/png/fav.ico">
    <link href="/static/webfonts/stylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/all.css">
    <style>
        :root {
            --bg-color: #f0f0f0;
            --text-color: #333;
            --navbar-bg: #fff;
            --widget-bg: #fff;
            --input-bg: #fff;
            --input-border: #ced4da;
            --btn-primary: #c33ced;
            --btn-secondary: #6c757d;
            --sidebar-bg: #fff;
            --sidebar-text: #333;
            --sidebar-hover: #f8f9fa;
            --sidebar-active: #c33ced;
            --sidebar-active-text: #fff;
            --balance-bg: #e9ecef;
            --button-danger: #dc3545;
            --transition-speed: 0.3s;
        }
        body.dark-mode {
            --bg-color: #121212;
            --text-color: #ffffff;
            --navbar-bg: #1e1e1e;
            --widget-bg: #1e1e1e;
            --input-bg: #2c2c2c;
            --input-border: #444;
            --btn-primary: #c33ced;
            --btn-secondary: #4e4e4e;
            --sidebar-bg: #1e1e1e;
            --sidebar-text: #ffffff;
            --sidebar-hover: #2c2c2c;
            --sidebar-active: #c33ced;
            --sidebar-active-text: #ffffff;
            --balance-bg: #2c2c2c;
            --button-danger: #dc3545;
        }
        body { 
            font-family: 'Poppins'; 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            margin: 0; 
            display: flex; 
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }
        .navbar-desktop {
            position: fixed;
            top: 0;
            left: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 200px;
            transition: background-color var(--transition-speed);
            overflow-y: auto;
            background-color: var(--bg-color);
        }
        .navbar-desktop img {
            max-width: 180px;
            margin-bottom: 30px;
            transition: opacity var(--transition-speed);
        }
        .navbar-desktop .balance {
            margin-bottom: 30px;
            margin-left: 0px;
            text-align: left;
            font-size: min(20px, calc(180px / (var(--balance-length) * 0.5)));
            font-weight: 600;
            color: var(--sidebar-text);
            transition: background-color var(--transition-speed), color var(--transition-speed);
            white-space: nowrap;
            width: 180px;
        }
        .navbar-desktop a {
            display: flex;
            align-items: center;
            color: var(--sidebar-text);
            text-decoration: none;
            padding: 10px 7px;
            margin-bottom: 5px;
            border-radius: 5px;
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }
        .navbar-desktop a:hover {
            background-color: var(--sidebar-hover);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            transform: scale(1.05);
        }

        .navbar-desktop a.active {
            color: var(--sidebar-active);
        }
        .navbar-desktop a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        .sign-out-btn {
            margin-top: 20px;
            margin-left: 0px;
            background-color: var(--button-danger);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color var(--transition-speed);
        }
        .sign-out-btn:hover {
            filter: brightness(110%);
        }
        .content { 
            margin-left: 230px;
            flex: 1; 
            padding: 15px 15px;
        }
        .widget {
            background-color: var(--widget-bg);
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-bottom: 20px;
            margin-top: 10px;
            transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
        }
        .alert {
            padding: 10px 15px;
            border-radius: 5px;
            margin-top: 15px;
            font-weight: 500;
            border: 1px solid transparent;
            position: relative;
        }

        .alert-danger {
            background-color: #fbe9e7;
            border-color: #f44336;
            color: #d32f2f;
        }

        .alert-success {
            background-color: #e8f5e9;
            border-color: #4caf50;
            color: #388e3c;
        }

        body.dark-mode .alert-danger {
            background-color: #311b1b;
            border-color: #f44336;
            color: #ef9a9a;
        }

        body.dark-mode .alert-success {
            background-color: #1b311d;
            border-color: #4caf50;
            color: #a5d6a7;
        }

        .alert .close-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 18px;
            opacity: 0.7;
        }

        .alert .close-btn:hover {
            opacity: 1;
        }
        
        .stats-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .stat-widget {
            flex: 1;
            background-color: var(--widget-bg);
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 0 10px;
            text-align: center;
            transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
        }
        .stat-widget:first-child {
            margin-left: 0;
        }
        .stat-widget:last-child {
            margin-right: 0;
        }
        .stat-widget h3 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
            transition: color var(--transition-speed);
        }
        .stat-widget p {
            margin: 5px 0 0;
            font-size: 14px;
            color: var(--text-color);
            transition: color var(--transition-speed);
        }
        .graph-widget {
            background-color: var(--widget-bg);
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 20px 0;
        }
        .graph-widget h2 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--text-color);
            transition: color var(--transition-speed);
        }
        .graph-controls {
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
        }
        .graph-control-btn {
            background-color: var(--widget-bg);
            color: var(--text-color);
            border: 1px solid var(--btn-primary);
            padding: 8px 15px;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
        }
        .graph-control-btn.active {
            background-color: var(--btn-primary);
            color: #fff;
        }
        .graph-control-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .graph-container {
            width: 100%;
            height: 300px;
        }
        h1, h2 { 
            color: var(--text-color); 
            text-align: center; 
            font-weight: 700; 
            margin-bottom: 40px;
            transition: color var(--transition-speed);
        }
        .shipment-buttons { 
            display: flex; 
            justify-content: center; 
            gap: 20px; 
            margin-bottom: 20px;
        }
        .shipment-button { 
            width: 200px; 
            height: 200px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            transition: 0.3s; 
            font-size: 18px;
            font-weight: 500;
        }
        .shipment-button img { 
            width: 80%; 
            height: 60%; 
            object-fit: contain; 
            margin-bottom: 10px;
        }
        .shipment-button.single { 
            background-color: var(--btn-primary); 
            color: white; 
        }
        .shipment-button.batch { 
            background-color: var(--btn-secondary); 
            color: white; 
        }
        .shipment-button:hover { 
            background-color: var(--btn-secondary); 
            transform: scale(1.05); 
        }
        .shipment-button:hover.batch {
            background-color: var(--btn-primary); 
        }
        .shipping-forms-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .shipping-form {
            flex: 1 1 calc(50% - 10px);
            min-width: 250px;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-information {
            background-color: var(--widget-bg);
            color: var(--text-color);
            padding: 20px;
            border-radius: 5px;
            border: 1px solid var(--input-border);
            transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
        }
        .section-header {
            color: var(--text-color);
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--input-border);
            display: flex;
            justify-content: space-between;  /* This spreads out the items */
            text-align: left; 
            transition: color var(--transition-speed), border-color var(--transition-speed);
        }
        
        .section-header h2 {
            align-items: left;
            text-align: left;
            margin: 0;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .section-title {
            font-family: 'Poppins', sans-serif;
            font-size: 48px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 40px;
            color: var(--text-color);
        }

        .paste-address-button {
            background-color: var(--btn-primary);
            color: white;
            border: none;
            padding: 7.5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            margin-top: -5px;
            margin-bottom: 10px;
            transition: background-color 0.3s ease;
        }
        .paste-address-button:hover {
            background-color: var(--btn-secondary);
        }
        .paste-address-area {
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .paste-address-textarea {
            width: 100%;
            min-height: 100px;
            resize: vertical;
            line-height: 1.5;
            padding: 12px;
            border: 1px solid var(--input-border);
            border-radius: 5px;
            background-color: var(--input-bg);
            color: var(--text-color);
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
        }
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: -7.5px;
        }
        .form-group-full,
        .form-group-half,
        .form-group-third {
            padding: 10px;
            box-sizing: border-box;
        }
        .form-group-full {
            width: 100%;
            padding-right: 10px;
        }
        .form-group-half {
            flex: 0 0 calc(50%);  /* Take up 50% width minus gap */
            padding: 10px;
            box-sizing: border-box;
        }
        .form-group-third {
            flex: 0 0 calc(33.333%);  /* Take up third width minus gap */
        }
        .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: var(--text-color);
            background-color: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 0.25rem;
            box-sizing: border-box;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed), 
                        background-color var(--transition-speed), color var(--transition-speed);
        }
        select.form-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 8px 10px;
            padding-right: 1.5rem;
        }
        .form-control::placeholder {
            color: #6c757d;
            opacity: 1;
        }
        .checkbox-group {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .checkbox-group.rubber-stamps .learn-more {
            color: var(--btn-primary);
            cursor: pointer;
            font-size: 0.9em;
            text-decoration: none;
            transition: color var(--transition-speed);
        }

        .checkbox-group.rubber-stamps .learn-more:hover {
            text-decoration: underline;
        }
        .home-button {
            border: none; 
            background: none; 
            cursor: pointer; 
            padding: 8px; 
            color: var(--text-color);
            font-size: 24px;
            padding-top: 4px;
            padding-bottom: 5px;
        }

        .home-button:hover {
            background-color: var(--btn-primary);
            color: white;
            border-radius: 5px;
            padding-top: 4px;
            padding-bottom: 5px;
        }

        h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 48px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 40px;
            color: var(--text-color);
        }

        .courier-selection {
            margin-bottom: 20px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }

        .courier-button {
            width: 140px;
            height: 120px;
            padding: 15px;
            background-color: var(--widget-bg);
            border: 2px solid var(--input-border);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 600;
        }

        .courier-button:hover {
            transform: translateY(-2px);
            border-color: var(--btn-primary);
        }

        .courier-button.active {
            border-color: var(--btn-primary);
        }

        .courier-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .history-courier-logo {
            max-width: 100%;
            height: 40px;
            width: 40px;
            object-fit: contain;
            margin-bottom: 5px;
        }

        .courier-name {
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-color);
            margin-top: auto;
            padding-top: 8px;
        }

        @media (max-width: 480px) {

            .form-group-half, .form-group-third {
                padding: 4px 8px;  /* Further reduce padding */
            }

            h1 {
                font-size: 36px;
                margin-bottom: 30px;
            }
            
            .courier-selection {
                gap: 10px;
            }
            
            .courier-button {
                width: 120px;
                height: 100px;
            }
            
        }

        .theme-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--btn-primary);
            color: #fff;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color var(--transition-speed);
        }
        .theme-toggle:hover {
            background-color: var(--btn-secondary);
        }
        .theme-toggle i {
            font-size: 20px;
        }
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            animation: fadeInOut 2s ease-in-out forwards;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; }
            15% { opacity: 1; }
            85% { opacity: 1; }
            100% { opacity: 0; }
        }

        .loading-circle {
            border: 5px solid #f3f3f3;
            border-top: 5px solid var(--btn-primary);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            justify-content: center;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .input-container {
            position: relative;
            margin-top: 2px;
            margin-bottom: 2px;
        }
        .floating-label {
            position: absolute;
            pointer-events: none;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            transition: 0.2s ease all;
            color: #6c757d;
            font-size: 16px;
            background: transparent;
            padding: 0 5px;
            border-radius: 7.5%;
        }
        .form-control:focus ~ .floating-label,
        .form-control:not(:placeholder-shown) ~ .floating-label {
            top: 0;
            left: 10px;
            font-size: 12px;
            opacity: 1;
            background: var(--widget-bg);
            color: var(--btn-primary);
        }
        .form-control {
            height: 38px;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .form-control:focus {
            border-color: var(--btn-primary);
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        select.form-control {
            height: 38px;
        }
        select.form-control ~ .floating-label {
            top: 0;
            left: 10px;
            font-size: 12px;
            opacity: 1;
            background: var(--widget-bg);
        }
        .navbar-mobile {
            display: none;
        }
        .rate-button {
            display: block;
            width: 100%;
            padding: 12px 20px;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            color: #ffffff;
            background-color: var(--btn-primary);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color var(--transition-speed), transform 0.2s;
            margin-top: 20px;
        }
        .rate-button:hover  {
            background-color: var(--btn-secondary);
            transform: translateY(-2px);
        }
        .rate-button:active {
            transform: translateY(0);
        }
        .text-center {
            text-align: center;
        }
        .form-section.form-information {
            background-color: var(--widget-bg);
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
        }
        .btn-edit {
            background-color: var(--btn-secondary);
            color: #ffffff;
            border: none;
            padding: 10px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 20px;
            transition: background-color 0.3s ease;
        }

        .btn-edit:hover {
            background-color: var(--btn-primary);
        }

        .upload-section {
            padding: 0;
            margin-bottom: 20px;
        }
        .header-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline; /* Change to baseline to align text properly */
            margin-bottom: 10px;
        }
        .download-template {
            color: var(--btn-primary);
            text-decoration: none;
            font-size: 14px;
        }
        .drag-drop-area {
            border: 2px dashed var(--btn-primary);
            border-radius: 5px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            background: var(--widget-bg);
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .drag-drop-area:hover {
            border-color: var(--btn-secondary);
            background-color: rgba(195, 62, 237, 0.05);
        }
        .file-details {
            width: 100%;
        }

        .file-details p {
            margin: 10px 0;
            font-size: 14px;
            color: var(--text-color);
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .file-details i {
            color: var(--btn-primary);
            width: 20px;
        }
        .file-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .clear-csv-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--btn-secondary);
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .clear-csv-btn:hover {
            background: var(--btn-primary);
        }
        .drag-drop-area p {
            margin: 0;
            font-size: 16px;
            color: var(--text-color);
        }
        .file-prompt {
            color: var(--btn-primary);
            font-weight: 600;
        }
        #single-service {
            background-color: var(--widget-bg);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        #single-service h2 {
            margin-bottom: 20px;
        }

        .service-options {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .service-card {
            background-color: var(--widget-bg);
            border: 1px solid var(--input-border);
            border-radius: 5px;
            padding: 15px;
            transition: all 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .service-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .service-header h3 {
            margin: 0;
            font-size: 1.2em;
        }

        .service-tag {
            background-color: #28a745;
            color: white;
            padding: 2px 8px;
            border-radius: 5px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .delivery-estimate {
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .service-details {
            font-size: 0.8em;
            color: var(--text-color);
            padding-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .price-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .savings {
            color: #28a745;
            font-weight: bold;
        }

        .price {
            font-size: 1.5em;
            font-weight: bold;
        }

        .action-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .learn-more {
            color: var(--btn-primary);
            text-decoration: none;
            font-size: 0.9em;
        }

        .ship-now {
            background-color: var(--btn-primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .ship-now:hover {
            background-color: var(--btn-secondary);
        }

        input, textarea, select, .form-control, .paste-address-textarea {
            font-family: sans-serif;
        }
        @media (max-width: 767.98px) {
            body {
                display: block;
            }
            .navbar-desktop {
                display: none;
            }
            .content {
                margin-left: 0;
                padding-top: 70px;
            }
            .navbar-mobile {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background-color: var(--navbar-bg);
                padding: 10px 20px;
                z-index: 1000;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                transition: background-color var(--transition-speed);
            }
            .navbar-mobile-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .navbar-brand img {
                max-height: 40px;
            }
            .menu-toggle {
                background: none;
                border: none;
                color: var(--text-color);
                font-size: 24px;
                cursor: pointer;
                transition: color var(--transition-speed);
            }
            .mobile-menu {
                display: none;
                position: fixed;
                top: 60px;
                left: 0;
                right: 0;
                background-color: var(--navbar-bg);
                padding: 20px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
            }
            .mobile-menu.active {
                display: block;
            }
            .mobile-menu a {
                display: block;
                padding: 10px 0;
                color: var(--text-color);
                text-decoration: none;
                font-size: 16px;
                border-bottom: 1px solid var(--input-border);
                transition: color var(--transition-speed), border-color var(--transition-speed);
            }
            .mobile-menu a:last-child {
                border-bottom: none;
            }
            .mobile-menu .balance {
                font-weight: bold;
                margin-bottom: 10px;
            }
            #sign-out-button {
                width: 100%;
                background-color: var(--button-danger);
                color: #ffffff;
                border: none;
                padding: 10px 20px;
                margin-top: 10px;
                border-radius: 5px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: background-color var(--transition-speed), color var(--transition-speed);
            }
            .stats-container {
                flex-direction: column;
            }
            .stat-widget {
                margin: 10px 0;
                margin-top: 20px;
                margin-bottom: 0px;
            }
            .shipping-form {
                flex: 1 1 100%;
            }
            .form-group-half,
            .form-group-third {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .shipment-buttons {
                flex-direction: column;
                align-items: center;
            }
            .shipment-button {
                width: 100%;
                max-width: 200px;
                margin-bottom: 20px;
            }
            .rate-button {
                font-size: 16px;
                padding: 10px 15px;
            }
            .widget {
                margin-top: 20px;
                margin-bottom: 20px;
            }
            .download-template {
                color: var(--btn-primary);
                text-decoration: none;
                font-size: 14px;
                line-height: 1; /* Add this */
                display: flex; /* Add this */
                text-align:  right; /* Add this */
            }
        }
        .single-purchase-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .single-purchase-content {
            background-color: var(--widget-bg);
            border-radius: 5px;
            width: 100%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 20px;
        }

        .single-purchase-header {
            padding: 20px;
            border-bottom: 1px solid var(--input-border);
            display: flex;
            justify-content: space-between;
        }

        .single-purchase-header h2 {
            margin: 0;
            font-size: 24px;
            color: var(--text-color);
            text-align: left;
        }

        .purchase-exit {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 20px;
            cursor: pointer;
        }

        .shipping-info-container {
            padding: 20px;
        }

        /* Shared container styles for both address and label-tracking */
        .shipping-address-container,
        .label-tracking-container,
        .batch-processing-container {
            display: flex;
            margin-top: 20px;
            margin-bottom: 0px;
            gap: 20px
        }

        /* Shared section styles */
        .shipping-details-section,
        .history-details-section {
            flex: 1;
            padding: 15px;
            background-color: var(--bg-color);
            border-radius: 5px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .history-details-section {
            padding: 0;
        }

        .shipping-details-section h3,
        .history-details-section h3 {
            margin-top: 0px;
            font-size: 18px;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        @media (max-width: 768px) {
            .shipping-details-section {
                margin-bottom: 15px;  /* Reduced margin between sections */
            }

            .shipping-address-container {
                gap: 15px;  /* Consistent gap between containers */
            }

            .shipping-details-container {
                gap: 15px;  /* Match gap with shipping-address-container */
            }

            .form-group-half, .form-group-third {
                flex: 0 0 100%;  /* Take full width on mobile */
                padding: 5px 10px;  /* Reduce vertical padding */
                margin-bottom: 5px;  /* Add small margin between stacked fields */
            }

            /* Ensure inputs maintain consistent height */
            .form-group-half .form-control,
            .form-group-third .form-control {
                height: 38px;  /* Match desktop height */
            }

            /* Adjust spacing when form groups are stacked */
            .form-row {
                margin-bottom: 5px;
            }

            /* Keep floating labels properly positioned */
            .form-group-half .floating-label,
            .form-group-third .floating-label {
                top: 50%;
                transform: translateY(-50%);
            }

            /* Adjust internal spacing */
            .batch-details {
                padding: 15px;
                margin-bottom: 0;  /* Remove bottom margin since parent has gap */
            }

            /* Add more spacing between address sections */
            .shipping-address-container .shipping-details-section:not(:last-child) {
                margin-bottom: 15px;
            }

            /* Adjust spacing for label-tracking container */
            .label-tracking-container {
                gap: 15px;
                margin-top: 15px;
            }
        }

        /* For very small screens */
        @media (max-width: 480px) {
            .shipping-details-section {
                margin-bottom: 12px;  /* Further reduce margins for smaller screens */
            }

            .shipping-address-container,
            .shipping-details-container,
            .label-tracking-container {
                gap: 12px;  /* Smaller gap for tighter layouts */
            }

            .batch-details {
                padding: 12px;
            }
        }

        .label-output-section,
        .tracking-section,
        .batch-processing {
            flex: 1;
            padding: 20px;
            background-color: var(--bg-color);
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .batch-processing {
            background-color: inherit;
            border: 1px solid var(--input-border);
        }

        /* Common heading styles */
        .label-output-section h3,
        .tracking-section h3,
        .batch-processing h3 {
            margin: 0 0 15px 0;
            font-size: 18px;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .address-details, .service-details {
            color: var(--text-color);
            font-size: 14px;
            line-height: 1.5;
            padding-left: 5px;
        }

        /* Enhanced Label Type Selection */
        .label-type-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 15px;
        }

        .label-type-option {
            position: relative;
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background-color: var(--widget-bg);
            border: 1px solid var(--input-border);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .label-type-option:hover {
            border-color: var(--btn-primary);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .label-type-option input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .label-type-option input[type="radio"]:checked + .radio-custom + .label-text {
            color: var(--btn-primary);
            font-weight: 600;
        }

        .label-type-option input[type="radio"]:checked + .radio-custom {
            border-color: var(--btn-primary);
            background-color: var(--btn-primary);
        }

        .radio-custom {
            width: 18px;
            height: 18px;
            border: 2px solid var(--input-border);
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
            transition: all 0.2s ease;
        }

        .radio-custom:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: white;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .label-type-option input[type="radio"]:checked + .radio-custom:after {
            opacity: 1;
        }

        .label-text {
            color: var(--text-color);
            font-size: 14px;
            transition: color 0.2s ease;
        }

        /* Tracking Status Styles */
        .tracking-status {
            color: var(--text-color);
            padding: 15px;
            background-color: var(--widget-bg);
            border-radius: 5px;
            margin-top: 15px;
        }

        .tracking-status.awaiting {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--input-border);
        }

        .tracking-status.awaiting i {
            color: var(--btn-primary);
            font-size: 1.1em;
        }

        .tracking-status.confirmed {
            padding: 20px;
            border: 1px solid var(--input-border);
        }

        .tracking-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .tracking-number i {
            color: #28a745;
            font-size: 1.1em;
        }


        .tracking-label {
            font-weight: 600;
            color: var(--text-color);
        }

        .tracking-value {
            word-break: break-word;
            white-space: normal;   /* Allow text to wrap */
            font-family: monospace;
            color: var(--btn-primary);
            font-size: 1.1em;
        }

        .copy-tracking {
            color: var(--btn-secondary);
            padding: 8px;
            border-radius: 5px;
            transition: all 0.2s ease;
        }

        .copy-tracking:hover {
            color: var(--btn-primary);
            background-color: var(--sidebar-hover);
        }

        .label-preview {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--input-border);
        }

        .preview-label {
            max-width: 150px;
            height: auto;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .single-download {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background-color: var(--btn-primary);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .single-download:hover {
            background-color: var(--btn-secondary);
            transform: translateY(-1px);
        }

        .purchase-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
        max-width: 100%;
        padding: 20px;
        border-top: 1px solid var(--input-border);
        }

        @supports (display: grid) {
        .purchase-footer {
        display: grid;
        grid-template-columns: 1fr;
        }
        
        @media (min-width: 768px) {
        .purchase-footer {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
        }
        }
        .purchase-history-btn {
            background-color: var(--btn-secondary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background-color 0.3s ease;
        }

        .purchase-history-btn:hover {
            background-color: var(--btn-primary);
        }

        .purchase-history-btn i {
            font-size: 16px;
        }

        .duplicate-label {
            background-color: var(--btn-primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }

        .purchase-cancel {
            padding: 10px 20px;
            background-color: var(--btn-secondary);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }

        .purchase-confirm {
            padding: 10px 20px;
            background-color: var(--btn-primary);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }

        .purchase-confirm:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        @media (max-width: 1000px) {
            .shipping-info-container {
            padding-left: 20px;
        }
        
        .shipping-details-section {
            padding: 15px;
        }
        .shipping-address-container {
            gap: 0px;
        }
        .label-tracking-container {
            margin-top: 20px;
        }

        
        .shipping-address-container,
        .label-tracking-container {
            flex-direction: column;
        }
        }

        @media (max-width: 550px) {
        .preview-label {
            max-width: 120px;
        }

        }

        .batch-service-container {
    width: 100%;
}

.batch-service-list {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.batch-service-card {
    background-color: var(--widget-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    padding: 15px;
    transition: all 0.3s ease;
}

.batch-service-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.batch-service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.batch-service-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--text-color);
}

.batch-service-tag {
    background-color: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
}

.batch-delivery-estimate {
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--text-color);
}

.batch-service-details {
    font-size: 0.8em;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 10px;
}

.batch-price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.batch-savings {
    color: #28a745;
    font-weight: bold;
}

.batch-price {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color);
}

.batch-search-bar {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
    display: flex;
    justify-content: center;
}

.batch-search-input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.batch-search-input:focus {
    outline: none;
    border-color: var(--btn-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.batch-search-bar i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.7;
    font-size: 16px;
    transition: color var(--transition-speed);
}

.batch-search-input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

.batch-search-bar:hover i {
    color: var(--btn-primary);
}
.batch-settings-panel {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
}
.variants-tree {
    display: none;
    margin-left: 20px;
    border-left: 2px solid var(--input-border);
    padding-left: 15px;
}

.service-group {
    background: var(--widget-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.service-group.expanded .variants-tree {
    display: block;
}

.service-group-header {
  padding: 15px;
  cursor: pointer;
  user-select: none;
}

.service-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-group-title h3 {
  margin: 0;
  font-size: 16px;
  flex: 1;
}

.variant-branch {
    margin: 10px 0;
}

.branch-header {
    cursor: pointer;
    padding: 5px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.branch-content {
    display: none;
    margin-left: 25px;
}

.variant-branch.expanded .branch-content {
    display: block;
}

.variant-leaf {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--input-border);
}

.copyable-name {
    cursor: pointer;
    position: relative;
}

.copyable-name:hover {
    color: var(--btn-primary);
}

.copy-tooltip {
    position: absolute;
    background: var(--btn-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    animation: fadeInOut 1.5s ease;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

.base-service-cost {
    margin-left: auto;
    font-weight: bold;
    color: var(--btn-primary);
}

.variant-cost {
    color: var(--text-color);
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.checkbox-label:hover {
    background: rgba(255, 255, 255, 0.05);
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--input-border);
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    flex: none;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: var(--btn-primary);
    border-color: var(--btn-primary);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 14px;
    font-weight: 500;
}
.form-group {
    display: flex;
    align-items: center;
    min-width: fit-content;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Add proper spacing for mobile */
@media (max-width: 768px) {
    
    .form-group {
        justify-content: flex-start;
        margin-top: 10px;
    }
}

.batch-version-select {
    flex: 1;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    cursor: pointer;
}

@media (max-width: 768px) {

    .batch-service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .batch-price-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

.batch-summary {
    font-size: 14px;
    line-height: 1;
    padding-left: 5px;
}

.shipment-card {
    padding: 15px;
    background-color: var(--bg-color);
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--input-border);
}

.shipment-card h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--text-color);
}

.shipment-details {
    font-size: 14px;
    color: var(--text-color);
}

.shipment-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
}

.shipment-status.pending {
    color: var(--btn-secondary);
}

.shipment-status.success {
    color: #28a745;
}

.shipment-status.error {
    color: #dc3545;
}

/* Add these CSS classes */
.status-container {
    display: flex;
    align-items: center;
}

.status-text-right {
    margin-left: auto;
    text-align: right;
    line-height: 1.2;
}

.status-line {
    color: #888;
    font-size: 16px;
}

/* Card container styles */
.card-container {
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 12px;
    background-color: var(--widget-bg);
    border: 1px solid var(--input-border);
    transition: background-color var(--transition-speed);
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    margin-bottom: 8px;
    background-color: var(--widget-bg);
    border-radius: 5px;
    border: 1px solid var(--input-border);
    /* Add these properties for text wrapping */
    flex-wrap: wrap;
    gap: 8px;
}
.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Add these properties */
    min-width: 0;
    flex: 1;
}

.file-icon {
    color: var(--btn-primary);
    font-size: 18px;
}

.file-name {
    color: var(--text-color);
    font-size: 14px;
    /* Add these properties */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.batch-download-btn {
    background: none;
    border: none;
    color: var(--btn-secondary);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.batch-download-btn:hover:not(:disabled) {
    background-color: var(--btn-primary);
    color: white;
}

.batch-download-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Add this property */
    flex-shrink: 0;
}
.status-text-right {
    text-align: right;
    color: var(--btn-secondary);
}

.status-line {
    font-size: 16px;
    line-height: 1.2;
}

.status-icon {
    color: var(--btn-primary);
    font-size: 14px;
}

@media (max-width: 480px) {
    .file-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .status-container {
        width: 100%;
        justify-content: space-between;
    }
    
    .file-info {
        width: 100%;
    }
}

/* Shipment card styles */
.shipment-card {
    padding: 20px;
    margin-bottom: 12px;
    background-color: var(--widget-bg);
    border-radius: 5px;
    border: 1px solid var(--input-border);
    transition: background-color var(--transition-speed);
}

.shipment-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
}

.shipment-to {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.shipment-address {
    color: var(--text-color);
    margin-bottom: 12px;
}

.shipment-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--btn-secondary);
}

.history-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.history-filters {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--widget-bg);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--input-border);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.filter-group label {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
}

.search-bar {
    flex: 1;
    position: relative;
}

.history-search-input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
}

.search-bar i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.7;
}

.history-list {
    margin: 0 auto;
}

.history-item {
    background: var(--widget-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-item:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-header {
    padding: 15px 20px;
    display: grid;
    grid-template-columns: 300px 225px 1fr;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.history-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.service-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rate-courier-logo {
    width: 100%;
    height: 60%;
    object-fit: contain;
}


.service-name {
    color: var(--text-color);
    font-weight: 500;
}

.tracking-number {
    color: var(--btn-primary);
    font-family: monospace;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipient-info {
    line-height: 1;
    display: flex;
}

.recipient-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.recipient-address {
    color: var(--text-color);
    font-size: 14px;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.recipient-address p {
    margin: 5px 0;
    
}

.cost-info {
    text-align: right;
}

.date {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 4px;
}

.price {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.history-details {
    border-top: 1px solid var(--input-border);
    padding: 20px;
    background-color: var(--bg-color);
    display: none;
    opacity: 0;
}
.history-details.expanded {
    max-height: 2000px; /* Large enough to contain content */
    opacity: 1;
}

body.dark-mode .history-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.action-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.action-btn {
    padding: 10px 20px;
    background-color: var(--btn-secondary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.action-btn:first-child {
    background: var(--btn-primary);
}

.action-btn:hover {
    filter: brightness(110%);
}

@media (max-width: 1000px) {
    .history-header {
        overflow: hidden;  /* Hide overflow content */
        text-overflow: ellipsis;
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;

    }

    .cost-info {
        text-align: left;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

.batch-details {
    padding: 15px;
    background-color: var(--widget-bg);
    border-radius: 5px;
    margin-bottom: 15px;
}

.batch-info p {
    margin: 8px 0;
    font-size: 14px;
}

.labels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px 0;
}

.label-card {
    background-color: var(--widget-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    padding: 15px;
    transition: all 0.2s ease;
}

.label-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.label-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--input-border);
}

.label-number {
    font-weight: 600;
    color: var(--text-color);
}

.label-cost {
    color: var(--btn-primary);
    font-weight: 600;
}

.tracking-info {
    margin: 10px 0;
    font-family: monospace;
    font-size: 13px;
}

.tracking-label {
    color: var(--text-color);
    opacity: 0.7;
    margin-right: 5px;
}

.label-address {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
    margin-top: 10px;
}

.batch-labels {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

.batch-labels::-webkit-scrollbar {
    width: 8px;
}

.batch-labels::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-radius: 5px;
}

.batch-labels::-webkit-scrollbar-thumb {
    background: var(--btn-secondary);
    border-radius: 5px;
}

.batch-labels::-webkit-scrollbar-thumb:hover {
    background: var(--btn-primary);
}

.stacked-icons-container {
    display: flex;
    align-items: center;
}

.history-courier-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: transform 0.2s ease;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.history-courier-logo.stacked-icon {
    background-color: var(--widget-bg);
    padding: 2px;
    border-radius: 5px;
    border: 1px solid var(--input-border);
}

.stacked-icons-container:hover .stacked-icon,
.history-courier-logo:hover {
    transform: translateX(calc(var(--hover-offset, 5px)));
}

.service-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-badge {
    font-size: 0.85em;
    color: var(--btn-primary);
    margin-left: 6px;
}

.shipping-details-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        padding: 20px;
        background-color: var(--bg-color);
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .details-section {
        background-color: var(--widget-bg);
        padding: 15px;
        border-radius: 5px;
        border: 1px solid var(--input-border);
    }

    .details-section h4 {
        margin: 0 0 15px 0;
        font-size: 16px;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .details-section h4 i {
        color: var(--btn-primary);
    }

    .address-details p,
    .package-details p {
        margin: 5px 0;
        color: var(--text-color);
    }
    .service-details p {
        margin: 3px 0;
        color: var(--text-color);
    }

    .action-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 0 0 20px;
    }

    @media (max-width: 768px) {
        .shipping-details-container {
            grid-template-columns: 1fr;
        }

        .action-buttons {
            flex-direction: column;
        }

        .action-btn {
            width: 100%;
        }
    }

        .payment-methods {
            margin-bottom: 24px;
        }

        .payment-methods h3 {
            margin-bottom: 16px;
            font-size: 18px;
            color: var(--text-color);
        }

        .payment-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
        }

        /* Payment Option Styles */
        .payment-option {
            position: relative;
            cursor: pointer;
        }

        .payment-option input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .payment-card {
            height: 65%;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border: 1px solid var(--input-border);
            border-radius: 5px;
            background-color: var(--widget-bg);
            color: var(--text-color);
            transition: all 0.2s ease;
        }

        .payment-card:hover:not(.disabled) {
            border-color: var(--btn-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .payment-card.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background-color: var(--bg-color);
        }

        .payment-card i {
            font-size: 24px;
            color: var(--btn-secondary);
        }

        .payment-option input[type="radio"]:checked + .payment-card {
            border-color: var(--btn-primary);
            background-color: var(--bg-color);
        }

        .payment-option input[type="radio"]:checked + .payment-card i {
            color: var(--btn-primary);
        }

        .payment-info {
            flex: 1;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .payment-name {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .payment-description {
            font-size: 12px;
            color: var(--btn-secondary);
        }

        .coming-soon-badge {
            display: inline-block;
            background-color: var(--btn-secondary);
            color: white;
            padding: 2px 8px;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 500;
            margin-left: 8px;
        }

        /* Crypto Payment Details */
        .crypto-details {
            margin-top: 20px;
            margin-bottom: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }

        .crypto-option {
            padding: 16px;
            border: 1px solid var(--input-border);
            border-radius: 5px;
            background-color: var(--bg-color);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .crypto-option:hover {
            border-color: var(--btn-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .crypto-option.selected {
            border-color: var(--btn-primary);
            background-color: var(--bg-color);
        }

        .crypto-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .crypto-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .crypto-name {
            font-weight: 600;
        }

        .crypto-network {
            font-size: 12px;
            color: var(--btn-secondary);
        }

        .payment-note {
            font-size: 13px;
            color: var(--btn-secondary);
            padding: 12px;
            background-color: var(--bg-color);
            border-radius: 5px;
            border: 1px solid var(--input-border);
        }

        .create-invoice-btn {
            background-color: var(--btn-primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s ease;
        }

        .create-invoice-btn:hover {
            background-color: var(--btn-secondary);
        }

        .create-invoice-btn i {
            font-size: 14px;
        }

        .info-label {
            display: block;
            color: var(--text-color);
            font-size: 12px;
            margin-bottom: 5px;
            opacity: 0.8;
        }

        .amount-section {
            background-color: var(--widget-bg);
            border: 1px solid var(--input-border);
            border-radius: 5px;
            padding: 12px;
            margin-bottom: 15px;
        }

        .amount-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: monospace;
            font-size: 18px;
            color: var(--btn-primary);
        }

        .crypto-symbol {
            color: var(--text-color);
            font-size: 14px;
        }

        .wallet-info {
            margin-bottom: 15px;
        }

        .payment-link {
            margin-bottom: 15px;
        }

        .link-display {
            background-color: var(--widget-bg);
            border: 1px solid var(--input-border);
            border-radius: 5px;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            word-break: break-all;
        }

        .link-text {
            font-family: monospace;
            font-size: 12px;
            color: var(--text-color);
        }

        .copy-amount, .copy-link {
            background: none;
            border: none;
            color: var(--btn-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 5px;
            transition: all 0.2s ease;
        }

        .copy-amount:hover, .copy-link:hover {
            color: var(--btn-primary);
            background-color: var(--sidebar-hover);
        }

        .expiration-info {
            margin-top: 20px;
            text-align: center;
        }

        .countdown {
            font-size: 24px;
            font-weight: 600;
            color: var(--btn-primary);
            font-family: monospace;
        }

        /* QR Code Styles */
        .qr-container {
            background: var(--widget-bg);
            border-radius: 5px;
            width: 100%;
            max-width: 900px;
            margin: 20px auto 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .qr-container h1 {
            text-align: center;
            margin-bottom: 24px;
            font-size: 32px;
            color: var(--text-color);
        }

        .payment-layout {
            display: flex;
            gap: 40px;
            align-items: flex-start;
            justify-content: space-between;
        }

        .payment-details {
            flex: 1;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .qr-code {
            background: white;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
        }

        .payment-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .payment-field label {
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
        }

        .copy-box {
            display: flex;
            align-items: center;
            background: var(--bg-color);
            border: 1px solid var(--input-border);
            border-radius: 5px;
            padding: 12px 16px;
            font-family: monospace;
            position: relative;
            gap: 8px;
        }

        .copy-box .amount {
            color: var(--btn-primary);
            font-size: 18px;
            font-weight: 500;
        }

        .copy-box .currency {
            color: var(--text-color);
            opacity: 0.7;
        }

        .copy-box .address,
        .copy-box .payment-link {
            flex: 1;
            word-break: break-all;
            font-size: 14px;
            color: var(--text-color);
        }

        .copy-btn {
            background: none;
            border: none;
            color: var(--btn-secondary);
            padding: 6px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .copy-btn:hover {
            color: var(--btn-primary);
            background: var(--bg-color);
        }

        .expiration {
            text-align: left;
        }

        .countdown {
            font-size: 28px;
            font-weight: 600;
            color: var(--btn-primary);
            font-family: monospace;
        }

        @media (max-width: 768px) {

            .qr-container h1 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .payment-layout {
                flex-direction: column;
                gap: 24px;
                align-items: center;
            }

            .payment-details {
                width: 100%;
                order: 2;
            }

            .qr-code {
                order: 1;
            }

            .copy-box {
                padding: 10px 12px;
            }

            .copy-box .amount {
                font-size: 16px;
            }

            .countdown {
                font-size: 24px;
            }
        }
        .address-card {
    background-color: var(--widget-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.address-card.last-card {
    margin-bottom: 0;
}

.address-card:hover {
    border-color: var(--btn-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.address-content {
    flex: 1;
}

.address-content h4 {
    margin: 0 0 10px 0;
    color: var(--text-color);
    font-size: 16px;
}

.address-content p {
    margin: 5px 0;
    color: var(--text-color);
    font-size: 14px;
}

.address-actions {
    display: flex;
    gap: 10px;
}

.address-actions button {
    background: none;
    border: none;
    color: var(--btn-secondary);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.address-actions button:hover {
    color: var(--btn-primary);
    background-color: var(--sidebar-hover);
}

#regenerate-key {
    width: auto;
}

.btn-edit {
    background-color: var(--btn-secondary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-edit:hover {
    background-color: var(--btn-primary);
    transform: translateY(-1px);
}

.address-search-bar {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    justify-content: center;
}

.address-search-input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.address-search-input:focus {
    outline: none;
    border-color: var(--btn-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.address-search-bar i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.7;
    font-size: 16px;
    transition: color var(--transition-speed);
}

.address-search-input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

.address-search-bar:hover i {
    color: var(--btn-primary);
}

    </style>
</head>

<body>
    <div class="navbar-desktop">
        <img src="/static/png/logo-light.png" alt="LabelExpress Logo" class="logo-light" type="image/x-icon" crossorigin="anonymous">
        <img src="/static/png/logo-dark.png" alt="LabelExpress Logo" class="logo-dark" style="display: none;" type="image/x-icon" crossorigin="anonymous">
        <div class="balance">Balance: ${{ balance }} USD</div>
        <a href="#purchase" class="active"> <i class="fas fa-shopping-cart"></i> Purchase Shipment</a>
        <a href="#history"> <i class="fas fa-history"></i> Purchase History</a>
        <a href="#deposit"> <i class="fas fa-wallet"></i> Recharge Balance</a>
        <a href="#extras"> <i class="fas fa-cog"></i> Extra Options</a>
        <button class="sign-out-btn" onclick="logout()">
            <i class="fas fa-sign-out-alt"></i>
            Sign Out
        </button>
    </div>
    <nav class="navbar-mobile">
        <div class="navbar-mobile-content">
            <a class="navbar-brand" href="#">
                <img src="/static/png/logo-light.png" alt="LabelExpress" class="logo-light" type="image/x-icon" crossorigin="anonymous">
                <img src="/static/png/logo-dark.png" alt="LabelExpress" class="logo-dark" style="display: none;" type="image/x-icon" crossorigin="anonymous">
            </a>
            <button class="menu-toggle" id="menu-toggle">
                <i class="fas fa-bars"></i>
            </button>
        </div>
        <div class="mobile-menu" id="mobile-menu">
            <div class="balance">Balance: ${{ balance }} USD</div>
            <a href="#purchase" class="active">Purchase Shipment</a>
            <a href="#history">Purchase History</a>
            <a href="#deposit">Recharge Balance</a>
            <a href="#extras">Extra Options</a>
            <button class="sign-out-btn" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i>
                Sign Out
            </button>
        </div>
    </nav>
    <button class="theme-toggle" id="theme-toggle">
        <i class="fas fa-adjust"></i>
    </button>
    <div class="content">
        <div id="stats" class="stats-container">
            <div class="stat-widget">
                <h3>#{{ shipped }}</h3>
                <p>Total Shipments</p>
            </div>
            <div class="stat-widget">
                <h3>${{ spent }} USD</h3>
                <p>Total Spent</p>
            </div>
        </div>
        <div id="purchase" class="widget">
            <button id="home" class="home-button" style="display: none; align-items: center;"> 
                <i class="fas fa-times"></i>
             </button>
            <h1>Click N' Ship</h1>
            <div id="ship" class="shipment-buttons">
                <button class="shipment-button single" id="single-button">
                    <img src="/static/png/single.png" alt="Single Shipment">
                    <span>Single Shipment</span>
                </button>
                <button class="shipment-button batch" id="batch-button">
                    <img src="/static/png/batch.png" alt="Batch Shipment">
                    <span>Batch Shipment</span>
                </button>
            </div>
            <form id="single" style="display: none;">
                <div class="shipping-forms-container">
                    <div class="shipping-form">
                        <div class="form-section form-information">
                            <div class="section-header">
                                <h2>Ship To</h2>
                                <button class="paste-address-button" data-target="receiver">Paste Address</button>
                            </div>
                            <div class="paste-address-area" id="receiver-paste-area" style="display: none;">
                                <div class="input-container">
                                    <textarea class="form-control paste-address-textarea" placeholder=" "></textarea>
                                    <label for="paste-address" class="floating-label">Paste your address here!</label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-half">
                                    <div class="input-container">
                                        <input type="text" id="receiver_name" name="receiver_name" class="form-control" placeholder=" " required>
                                        <label for="receiver_name" class="floating-label">Name</label>
                                    </div>
                                </div>
                                <div class="form-group-half">
                                    <div class="input-container">
                                        <input type="text" id="receiver_company" name="receiver_company" class="form-control" placeholder=" ">
                                        <label for="receiver_company" class="floating-label">Company (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="receiver_phone" name="receiver_phone" class="form-control" placeholder=" ">
                                        <label for="receiver_phone" class="floating-label">Phone (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="receiver_address1" name="receiver_address1" class="form-control" placeholder=" " required>
                                        <label for="receiver_address1" class="floating-label">Address</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="receiver_address2" name="receiver_address2" class="form-control" placeholder=" ">
                                        <label for="receiver_address2" class="floating-label">Apt / Unit / Suite / etc. (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-third">
                                    <div class="input-container">
                                        <input type="text" id="receiver_city" name="receiver_city" class="form-control" placeholder=" " required>
                                        <label for="receiver_city" class="floating-label">City</label>
                                    </div>
                                </div>
                                <div class="form-group-third">
                                    <div class="input-container">
                                        <select id="receiver_state_province" name="receiver_state_province" class="form-control" required>
                                            <option value="">Select Province</option>
                                            <option value="AB" class="CA">Alberta</option>
                                            <option value="BC" class="CA">British Columbia</option>
                                            <option value="MB" class="CA">Manitoba</option>
                                            <option value="NB" class="CA">New Brunswick</option>
                                            <option value="NL" class="CA">Newfoundland and Labrador</option>
                                            <option value="NS" class="CA">Nova Scotia</option>
                                            <option value="ON" class="CA">Ontario</option>
                                            <option value="PE" class="CA">Prince Edward Island</option>
                                            <option value="QC" class="CA">Quebec</option>
                                            <option value="SK" class="CA">Saskatchewan</option>
                                            <option value="AL" class="US">Alabama</option>
                                            <option value="AK" class="US">Alaska</option>
                                            <option value="AZ" class="US">Arizona</option>
                                            <option value="AR" class="US">Arkansas</option>
                                            <option value="CA" class="US">California</option>
                                            <option value="CO" class="US">Colorado</option>
                                            <option value="CT" class="US">Connecticut</option>
                                            <option value="DE" class="US">Delaware</option>
                                            <option value="DC" class="US">District of Columbia</option>
                                            <option value="FL" class="US">Florida</option>
                                            <option value="GA" class="US">Georgia</option>
                                            <option value="HI" class="US">Hawaii</option>
                                            <option value="ID" class="US">Idaho</option>
                                            <option value="IL" class="US">Illinois</option>
                                            <option value="IN" class="US">Indiana</option>
                                            <option value="IA" class="US">Iowa</option>
                                            <option value="KS" class="US">Kansas</option>
                                            <option value="KY" class="US">Kentucky</option>
                                            <option value="LA" class="US">Louisiana</option>
                                            <option value="ME" class="US">Maine</option>
                                            <option value="MD" class="US">Maryland</option>
                                            <option value="MA" class="US">Massachusetts</option>
                                            <option value="MI" class="US">Michigan</option>
                                            <option value="MN" class="US">Minnesota</option>
                                            <option value="MS" class="US">Mississippi</option>
                                            <option value="MO" class="US">Missouri</option>
                                            <option value="MT" class="US">Montana</option>
                                            <option value="NE" class="US">Nebraska</option>
                                            <option value="NV" class="US">Nevada</option>
                                            <option value="NH" class="US">New Hampshire</option>
                                            <option value="NJ" class="US">New Jersey</option>
                                            <option value="NM" class="US">New Mexico</option>
                                            <option value="NY" class="US">New York</option>
                                            <option value="NC" class="US">North Carolina</option>
                                            <option value="ND" class="US">North Dakota</option>
                                            <option value="OH" class="US">Ohio</option>
                                            <option value="OK" class="US">Oklahoma</option>
                                            <option value="OR" class="US">Oregon</option>
                                            <option value="PA" class="US">Pennsylvania</option>
                                            <option value="RI" class="US">Rhode Island</option>
                                            <option value="SC" class="US">South Carolina</option>
                                            <option value="SD" class="US">South Dakota</option>
                                            <option value="TN" class="US">Tennessee</option>
                                            <option value="TX" class="US">Texas</option>
                                            <option value="UT" class="US">Utah</option>
                                            <option value="VT" class="US">Vermont</option>
                                            <option value="VA" class="US">Virginia</option>
                                            <option value="WA" class="US">Washington</option>
                                            <option value="WV" class="US">West Virginia</option>
                                            <option value="WI" class="US">Wisconsin</option>
                                            <option value="WY" class="US">Wyoming</option>
                                        </select>
                                        <label for="receiver_state_province" class="floating-label">Province</label>
                                    </div>
                                </div>
                                <div class="form-group-third">
                                    <div class="input-container">
                                        <input type="text" id="receiver_zip_postal" name="receiver_zip_postal" class="form-control" placeholder=" " required>
                                        <label for="receiver_zip_postal" class="floating-label">Postal</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <select id="receiver_country" name="receiver_country" class="form-control" required>
                                            <option value="United States" selected>United States</option>
                                            <option value="Canada">Canada</option>
                                            <option value="Afghanistan">Afghanistan</option>
                                            <option value="Albania">Albania</option>
                                            <option value="Algeria">Algeria</option>
                                            <option value="Andorra">Andorra</option>
                                            <option value="Angola">Angola</option>
                                            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                            <option value="Argentina">Argentina</option>
                                            <option value="Armenia">Armenia</option>
                                            <option value="Australia">Australia</option>
                                            <option value="Austria">Austria</option>
                                            <option value="Azerbaijan">Azerbaijan</option>
                                            <option value="Bahamas">Bahamas</option>
                                            <option value="Bahrain">Bahrain</option>
                                            <option value="Bangladesh">Bangladesh</option>
                                            <option value="Barbados">Barbados</option>
                                            <option value="Belarus">Belarus</option>
                                            <option value="Belgium">Belgium</option>
                                            <option value="Belize">Belize</option>
                                            <option value="Benin">Benin</option>
                                            <option value="Bhutan">Bhutan</option>
                                            <option value="Bolivia">Bolivia</option>
                                            <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                                            <option value="Botswana">Botswana</option>
                                            <option value="Brazil">Brazil</option>
                                            <option value="Brunei">Brunei</option>
                                            <option value="Bulgaria">Bulgaria</option>
                                            <option value="Burkina Faso">Burkina Faso</option>
                                            <option value="Burundi">Burundi</option>
                                            <option value="Cabo Verde">Cabo Verde</option>
                                            <option value="Cambodia">Cambodia</option>
                                            <option value="Cameroon">Cameroon</option>
                                            <option value="Canada">Canada</option>
                                            <option value="Central African Republic">Central African Republic</option>
                                            <option value="Chad">Chad</option>
                                            <option value="Chile">Chile</option>
                                            <option value="China">China</option>
                                            <option value="Colombia">Colombia</option>
                                            <option value="Comoros">Comoros</option>
                                            <option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option>
                                            <option value="Congo, Republic of the">Congo, Republic of the</option>
                                            <option value="Costa Rica">Costa Rica</option>
                                            <option value="Croatia">Croatia</option>
                                            <option value="Cuba">Cuba</option>
                                            <option value="Cyprus">Cyprus</option>
                                            <option value="Czech Republic">Czech Republic</option>
                                            <option value="Denmark">Denmark</option>
                                            <option value="Djibouti">Djibouti</option>
                                            <option value="Dominica">Dominica</option>
                                            <option value="Dominican Republic">Dominican Republic</option>
                                            <option value="Ecuador">Ecuador</option>
                                            <option value="Egypt">Egypt</option>
                                            <option value="El Salvador">El Salvador</option>
                                            <option value="Equatorial Guinea">Equatorial Guinea</option>
                                            <option value="Eritrea">Eritrea</option>
                                            <option value="Estonia">Estonia</option>
                                            <option value="Eswatini">Eswatini</option>
                                            <option value="Ethiopia">Ethiopia</option>
                                            <option value="Fiji">Fiji</option>
                                            <option value="Finland">Finland</option>
                                            <option value="France">France</option>
                                            <option value="Gabon">Gabon</option>
                                            <option value="Gambia">Gambia</option>
                                            <option value="Georgia">Georgia</option>
                                            <option value="Germany">Germany</option>
                                            <option value="Ghana">Ghana</option>
                                            <option value="Greece">Greece</option>
                                            <option value="Grenada">Grenada</option>
                                            <option value="Guatemala">Guatemala</option>
                                            <option value="Guinea">Guinea</option>
                                            <option value="Guinea-Bissau">Guinea-Bissau</option>
                                            <option value="Guyana">Guyana</option>
                                            <option value="Haiti">Haiti</option>
                                            <option value="Honduras">Honduras</option>
                                            <option value="Hungary">Hungary</option>
                                            <option value="Iceland">Iceland</option>
                                            <option value="India">India</option>
                                            <option value="Indonesia">Indonesia</option>
                                            <option value="Iran">Iran</option>
                                            <option value="Iraq">Iraq</option>
                                            <option value="Ireland">Ireland</option>
                                            <option value="Israel">Israel</option>
                                            <option value="Italy">Italy</option>
                                            <option value="Jamaica">Jamaica</option>
                                            <option value="Japan">Japan</option>
                                            <option value="Jordan">Jordan</option>
                                            <option value="Kazakhstan">Kazakhstan</option>
                                            <option value="Kenya">Kenya</option>
                                            <option value="Kiribati">Kiribati</option>
                                            <option value="Kuwait">Kuwait</option>
                                            <option value="Kyrgyzstan">Kyrgyzstan</option>
                                            <option value="Laos">Laos</option>
                                            <option value="Latvia">Latvia</option>
                                            <option value="Lebanon">Lebanon</option>
                                            <option value="Lesotho">Lesotho</option>
                                            <option value="Liberia">Liberia</option>
                                            <option value="Libya">Libya</option>
                                            <option value="Liechtenstein">Liechtenstein</option>
                                            <option value="Lithuania">Lithuania</option>
                                            <option value="Luxembourg">Luxembourg</option>
                                            <option value="Madagascar">Madagascar</option>
                                            <option value="Malawi">Malawi</option>
                                            <option value="Malaysia">Malaysia</option>
                                            <option value="Maldives">Maldives</option>
                                            <option value="Mali">Mali</option>
                                            <option value="Malta">Malta</option>
                                            <option value="Marshall Islands">Marshall Islands</option>
                                            <option value="Mauritania">Mauritania</option>
                                            <option value="Mauritius">Mauritius</option>
                                            <option value="Mexico">Mexico</option>
                                            <option value="Micronesia">Micronesia</option>
                                            <option value="Moldova">Moldova</option>
                                            <option value="Monaco">Monaco</option>
                                            <option value="Mongolia">Mongolia</option>
                                            <option value="Montenegro">Montenegro</option>
                                            <option value="Morocco">Morocco</option>
                                            <option value="Mozambique">Mozambique</option>
                                            <option value="Myanmar">Myanmar</option>
                                            <option value="Namibia">Namibia</option>
                                            <option value="Nauru">Nauru</option>
                                            <option value="Nepal">Nepal</option>
                                            <option value="Netherlands">Netherlands</option>
                                            <option value="New Zealand">New Zealand</option>
                                            <option value="Nicaragua">Nicaragua</option>
                                            <option value="Niger">Niger</option>
                                            <option value="Nigeria">Nigeria</option>
                                            <option value="North Korea">North Korea</option>
                                            <option value="North Macedonia">North Macedonia</option>
                                            <option value="Norway">Norway</option>
                                            <option value="Oman">Oman</option>
                                            <option value="Pakistan">Pakistan</option>
                                            <option value="Palau">Palau</option>
                                            <option value="Palestine">Palestine</option>
                                            <option value="Panama">Panama</option>
                                            <option value="Papua New Guinea">Papua New Guinea</option>
                                            <option value="Paraguay">Paraguay</option>
                                            <option value="Peru">Peru</option>
                                            <option value="Philippines">Philippines</option>
                                            <option value="Poland">Poland</option>
                                            <option value="Portugal">Portugal</option>
                                            <option value="Qatar">Qatar</option>
                                            <option value="Romania">Romania</option>
                                            <option value="Russia">Russia</option>
                                            <option value="Rwanda">Rwanda</option>
                                            <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                                            <option value="Saint Lucia">Saint Lucia</option>
                                            <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                                            <option value="Samoa">Samoa</option>
                                            <option value="San Marino">San Marino</option>
                                            <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                                            <option value="Saudi Arabia">Saudi Arabia</option>
                                            <option value="Senegal">Senegal</option>
                                            <option value="Serbia">Serbia</option>
                                            <option value="Seychelles">Seychelles</option>
                                            <option value="Sierra Leone">Sierra Leone</option>
                                            <option value="Singapore">Singapore</option>
                                            <option value="Slovakia">Slovakia</option>
                                            <option value="Slovenia">Slovenia</option>
                                            <option value="Solomon Islands">Solomon Islands</option>
                                            <option value="Somalia">Somalia</option>
                                            <option value="South Africa">South Africa</option>
                                            <option value="South Korea">South Korea</option>
                                            <option value="South Sudan">South Sudan</option>
                                            <option value="Spain">Spain</option>
                                            <option value="Sri Lanka">Sri Lanka</option>
                                            <option value="Sudan">Sudan</option>
                                            <option value="Suriname">Suriname</option>
                                            <option value="Sweden">Sweden</option>
                                            <option value="Switzerland">Switzerland</option>
                                            <option value="Syria">Syria</option>
                                            <option value="Taiwan">Taiwan</option>
                                            <option value="Tajikistan">Tajikistan</option>
                                            <option value="Tanzania">Tanzania</option>
                                            <option value="Thailand">Thailand</option>
                                            <option value="Timor-Leste">Timor-Leste</option>
                                            <option value="Togo">Togo</option>
                                            <option value="Tonga">Tonga</option>
                                            <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                                            <option value="Tunisia">Tunisia</option>
                                            <option value="Turkey">Turkey</option>
                                            <option value="Turkmenistan">Turkmenistan</option>
                                            <option value="Tuvalu">Tuvalu</option>
                                            <option value="Uganda">Uganda</option>
                                            <option value="Ukraine">Ukraine</option>
                                            <option value="United Arab Emirates">United Arab Emirates</option>
                                            <option value="United Kingdom">United Kingdom</option>
                                            <option value="United Nations">United Nations</option>
                                            <option value="United States">United States</option>
                                            <option value="Uruguay">Uruguay</option>
                                            <option value="Uzbekistan">Uzbekistan</option>
                                            <option value="Vanuatu">Vanuatu</option>
                                            <option value="Vatican City">Vatican City</option>
                                            <option value="Venezuela">Venezuela</option>
                                            <option value="Vietnam">Vietnam</option>
                                            <option value="Yemen">Yemen</option>
                                            <option value="Zambia">Zambia</option>
                                            <option value="Zimbabwe">Zimbabwe</option>
                                        </select>
                                        <label for="receiver_country" class="floating-label">Country</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shipping-form-container">
                    <div class="form-section form-information">
                        <div class="section-header">
                            <h2>Ship From</h2>
                            <button id="sender-paste-address-button" class="paste-address-button" style="display: none;" data-target="sender">Paste Address</button>
                        </div>
                        <div class="paste-address-area" id="sender-paste-area" style="display: none;">
                            <div class="input-container">
                                <textarea class="form-control paste-address-textarea" placeholder=" "></textarea>
                                <label for="paste-address" class="floating-label">Paste your address here!</label>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group-full">
                                <div class="input-container">
                                    <select id="sender_address" name="sender_address" class="form-control" required>
                                        <option value="new">Add new address</option>
                                    </select>
                                    <label for="sender_address" class="floating-label">Sender Address</label>
                                </div>
                            </div>
                        </div>
                        <div id="new-sender-address" style="display: none;">
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="sender_nickname" name="sender_nickname" class="form-control" placeholder=" ">
                                        <label for="sender_nickname" class="floating-label">Address Nickname (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-half">
                                    <div class="input-container">
                                        <input type="text" id="sender_name" name="sender_name" class="form-control" placeholder=" " required>
                                        <label for="sender_name" class="floating-label">Name</label>
                                    </div>
                                </div>
                                <div class="form-group-half">
                                    <div class="input-container">
                                        <input type="text" id="sender_company" name="sender_company" class="form-control" placeholder=" ">
                                        <label for="sender_company" class="floating-label">Company (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="sender_phone" name="sender_phone" class="form-control" placeholder=" ">
                                        <label for="sender_phone" class="floating-label">Phone (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="sender_address1" name="sender_address1" class="form-control" placeholder=" " required>
                                        <label for="sender_address1" class="floating-label">Address</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <input type="text" id="sender_address2" name="sender_address2" class="form-control" placeholder=" ">
                                        <label for="sender_address2" class="floating-label">Apt / Unit / Suite / etc. (optional)</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-third">
                                    <div class="input-container">
                                        <input type="text" id="sender_city" name="sender_city" class="form-control" placeholder=" " required>
                                        <label for="sender_city" class="floating-label">City</label>
                                    </div>
                                </div>
                                <div class="form-group-third">
                                    <div class="input-container">
                                        <select id="sender_state_province" name="sender_state_province" class="form-control" required>
                                            <option value="">Select Province</option>
                                            <option value="AB" class="CA">Alberta</option>
                                            <option value="BC" class="CA">British Columbia</option>
                                            <option value="MB" class="CA">Manitoba</option>
                                            <option value="NB" class="CA">New Brunswick</option>
                                            <option value="NL" class="CA">Newfoundland and Labrador</option>
                                            <option value="NS" class="CA">Nova Scotia</option>
                                            <option value="ON" class="CA">Ontario</option>
                                            <option value="PE" class="CA">Prince Edward Island</option>
                                            <option value="QC" class="CA">Quebec</option>
                                            <option value="SK" class="CA">Saskatchewan</option>
                                            <option value="AL" class="US">Alabama</option>
                                            <option value="AK" class="US">Alaska</option>
                                            <option value="AZ" class="US">Arizona</option>
                                            <option value="AR" class="US">Arkansas</option>
                                            <option value="CA" class="US">California</option>
                                            <option value="CO" class="US">Colorado</option>
                                            <option value="CT" class="US">Connecticut</option>
                                            <option value="DE" class="US">Delaware</option>
                                            <option value="DC" class="US">District of Columbia</option>
                                            <option value="FL" class="US">Florida</option>
                                            <option value="GA" class="US">Georgia</option>
                                            <option value="HI" class="US">Hawaii</option>
                                            <option value="ID" class="US">Idaho</option>
                                            <option value="IL" class="US">Illinois</option>
                                            <option value="IN" class="US">Indiana</option>
                                            <option value="IA" class="US">Iowa</option>
                                            <option value="KS" class="US">Kansas</option>
                                            <option value="KY" class="US">Kentucky</option>
                                            <option value="LA" class="US">Louisiana</option>
                                            <option value="ME" class="US">Maine</option>
                                            <option value="MD" class="US">Maryland</option>
                                            <option value="MA" class="US">Massachusetts</option>
                                            <option value="MI" class="US">Michigan</option>
                                            <option value="MN" class="US">Minnesota</option>
                                            <option value="MS" class="US">Mississippi</option>
                                            <option value="MO" class="US">Missouri</option>
                                            <option value="MT" class="US">Montana</option>
                                            <option value="NE" class="US">Nebraska</option>
                                            <option value="NV" class="US">Nevada</option>
                                            <option value="NH" class="US">New Hampshire</option>
                                            <option value="NJ" class="US">New Jersey</option>
                                            <option value="NM" class="US">New Mexico</option>
                                            <option value="NY" class="US">New York</option>
                                            <option value="NC" class="US">North Carolina</option>
                                            <option value="ND" class="US">North Dakota</option>
                                            <option value="OH" class="US">Ohio</option>
                                            <option value="OK" class="US">Oklahoma</option>
                                            <option value="OR" class="US">Oregon</option>
                                            <option value="PA" class="US">Pennsylvania</option>
                                            <option value="RI" class="US">Rhode Island</option>
                                            <option value="SC" class="US">South Carolina</option>
                                            <option value="SD" class="US">South Dakota</option>
                                            <option value="TN" class="US">Tennessee</option>
                                            <option value="TX" class="US">Texas</option>
                                            <option value="UT" class="US">Utah</option>
                                            <option value="VT" class="US">Vermont</option>
                                            <option value="VA" class="US">Virginia</option>
                                            <option value="WA" class="US">Washington</option>
                                            <option value="WV" class="US">West Virginia</option>
                                            <option value="WI" class="US">Wisconsin</option>
                                            <option value="WY" class="US">Wyoming</option>
                                        </select>
                                        <label for="sender_state_province" class="floating-label">Province</label>
                                    </div>
                                </div>
                                <div class="form-group-third">
                                    <div class="input-container">
                                        <input type="text" id="sender_zip_postal" name="sender_zip_postal" class="form-control" placeholder=" " required>
                                        <label for="sender_zip_postal" class="floating-label">Postal</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <div class="input-container">
                                        <select id="sender_country" name="sender_country" class="form-control" required>
                                            <option value="United States" selected>United States</option>
                                            <option value="Canada">Canada</option>
                                            <option value="Afghanistan">Afghanistan</option>
                                            <option value="Albania">Albania</option>
                                            <option value="Algeria">Algeria</option>
                                            <option value="Andorra">Andorra</option>
                                            <option value="Angola">Angola</option>
                                            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                            <option value="Argentina">Argentina</option>
                                            <option value="Armenia">Armenia</option>
                                            <option value="Australia">Australia</option>
                                            <option value="Austria">Austria</option>
                                            <option value="Azerbaijan">Azerbaijan</option>
                                            <option value="Bahamas">Bahamas</option>
                                            <option value="Bahrain">Bahrain</option>
                                            <option value="Bangladesh">Bangladesh</option>
                                            <option value="Barbados">Barbados</option>
                                            <option value="Belarus">Belarus</option>
                                            <option value="Belgium">Belgium</option>
                                            <option value="Belize">Belize</option>
                                            <option value="Benin">Benin</option>
                                            <option value="Bhutan">Bhutan</option>
                                            <option value="Bolivia">Bolivia</option>
                                            <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                                            <option value="Botswana">Botswana</option>
                                            <option value="Brazil">Brazil</option>
                                            <option value="Brunei">Brunei</option>
                                            <option value="Bulgaria">Bulgaria</option>
                                            <option value="Burkina Faso">Burkina Faso</option>
                                            <option value="Burundi">Burundi</option>
                                            <option value="Cabo Verde">Cabo Verde</option>
                                            <option value="Cambodia">Cambodia</option>
                                            <option value="Cameroon">Cameroon</option>
                                            <option value="Canada">Canada</option>
                                            <option value="Central African Republic">Central African Republic</option>
                                            <option value="Chad">Chad</option>
                                            <option value="Chile">Chile</option>
                                            <option value="China">China</option>
                                            <option value="Colombia">Colombia</option>
                                            <option value="Comoros">Comoros</option>
                                            <option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option>
                                            <option value="Congo, Republic of the">Congo, Republic of the</option>
                                            <option value="Costa Rica">Costa Rica</option>
                                            <option value="Croatia">Croatia</option>
                                            <option value="Cuba">Cuba</option>
                                            <option value="Cyprus">Cyprus</option>
                                            <option value="Czech Republic">Czech Republic</option>
                                            <option value="Denmark">Denmark</option>
                                            <option value="Djibouti">Djibouti</option>
                                            <option value="Dominica">Dominica</option>
                                            <option value="Dominican Republic">Dominican Republic</option>
                                            <option value="Ecuador">Ecuador</option>
                                            <option value="Egypt">Egypt</option>
                                            <option value="El Salvador">El Salvador</option>
                                            <option value="Equatorial Guinea">Equatorial Guinea</option>
                                            <option value="Eritrea">Eritrea</option>
                                            <option value="Estonia">Estonia</option>
                                            <option value="Eswatini">Eswatini</option>
                                            <option value="Ethiopia">Ethiopia</option>
                                            <option value="Fiji">Fiji</option>
                                            <option value="Finland">Finland</option>
                                            <option value="France">France</option>
                                            <option value="Gabon">Gabon</option>
                                            <option value="Gambia">Gambia</option>
                                            <option value="Georgia">Georgia</option>
                                            <option value="Germany">Germany</option>
                                            <option value="Ghana">Ghana</option>
                                            <option value="Greece">Greece</option>
                                            <option value="Grenada">Grenada</option>
                                            <option value="Guatemala">Guatemala</option>
                                            <option value="Guinea">Guinea</option>
                                            <option value="Guinea-Bissau">Guinea-Bissau</option>
                                            <option value="Guyana">Guyana</option>
                                            <option value="Haiti">Haiti</option>
                                            <option value="Honduras">Honduras</option>
                                            <option value="Hungary">Hungary</option>
                                            <option value="Iceland">Iceland</option>
                                            <option value="India">India</option>
                                            <option value="Indonesia">Indonesia</option>
                                            <option value="Iran">Iran</option>
                                            <option value="Iraq">Iraq</option>
                                            <option value="Ireland">Ireland</option>
                                            <option value="Israel">Israel</option>
                                            <option value="Italy">Italy</option>
                                            <option value="Jamaica">Jamaica</option>
                                            <option value="Japan">Japan</option>
                                            <option value="Jordan">Jordan</option>
                                            <option value="Kazakhstan">Kazakhstan</option>
                                            <option value="Kenya">Kenya</option>
                                            <option value="Kiribati">Kiribati</option>
                                            <option value="Kuwait">Kuwait</option>
                                            <option value="Kyrgyzstan">Kyrgyzstan</option>
                                            <option value="Laos">Laos</option>
                                            <option value="Latvia">Latvia</option>
                                            <option value="Lebanon">Lebanon</option>
                                            <option value="Lesotho">Lesotho</option>
                                            <option value="Liberia">Liberia</option>
                                            <option value="Libya">Libya</option>
                                            <option value="Liechtenstein">Liechtenstein</option>
                                            <option value="Lithuania">Lithuania</option>
                                            <option value="Luxembourg">Luxembourg</option>
                                            <option value="Madagascar">Madagascar</option>
                                            <option value="Malawi">Malawi</option>
                                            <option value="Malaysia">Malaysia</option>
                                            <option value="Maldives">Maldives</option>
                                            <option value="Mali">Mali</option>
                                            <option value="Malta">Malta</option>
                                            <option value="Marshall Islands">Marshall Islands</option>
                                            <option value="Mauritania">Mauritania</option>
                                            <option value="Mauritius">Mauritius</option>
                                            <option value="Mexico">Mexico</option>
                                            <option value="Micronesia">Micronesia</option>
                                            <option value="Moldova">Moldova</option>
                                            <option value="Monaco">Monaco</option>
                                            <option value="Mongolia">Mongolia</option>
                                            <option value="Montenegro">Montenegro</option>
                                            <option value="Morocco">Morocco</option>
                                            <option value="Mozambique">Mozambique</option>
                                            <option value="Myanmar">Myanmar</option>
                                            <option value="Namibia">Namibia</option>
                                            <option value="Nauru">Nauru</option>
                                            <option value="Nepal">Nepal</option>
                                            <option value="Netherlands">Netherlands</option>
                                            <option value="New Zealand">New Zealand</option>
                                            <option value="Nicaragua">Nicaragua</option>
                                            <option value="Niger">Niger</option>
                                            <option value="Nigeria">Nigeria</option>
                                            <option value="North Korea">North Korea</option>
                                            <option value="North Macedonia">North Macedonia</option>
                                            <option value="Norway">Norway</option>
                                            <option value="Oman">Oman</option>
                                            <option value="Pakistan">Pakistan</option>
                                            <option value="Palau">Palau</option>
                                            <option value="Palestine">Palestine</option>
                                            <option value="Panama">Panama</option>
                                            <option value="Papua New Guinea">Papua New Guinea</option>
                                            <option value="Paraguay">Paraguay</option>
                                            <option value="Peru">Peru</option>
                                            <option value="Philippines">Philippines</option>
                                            <option value="Poland">Poland</option>
                                            <option value="Portugal">Portugal</option>
                                            <option value="Qatar">Qatar</option>
                                            <option value="Romania">Romania</option>
                                            <option value="Russia">Russia</option>
                                            <option value="Rwanda">Rwanda</option>
                                            <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                                            <option value="Saint Lucia">Saint Lucia</option>
                                            <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                                            <option value="Samoa">Samoa</option>
                                            <option value="San Marino">San Marino</option>
                                            <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                                            <option value="Saudi Arabia">Saudi Arabia</option>
                                            <option value="Senegal">Senegal</option>
                                            <option value="Serbia">Serbia</option>
                                            <option value="Seychelles">Seychelles</option>
                                            <option value="Sierra Leone">Sierra Leone</option>
                                            <option value="Singapore">Singapore</option>
                                            <option value="Slovakia">Slovakia</option>
                                            <option value="Slovenia">Slovenia</option>
                                            <option value="Solomon Islands">Solomon Islands</option>
                                            <option value="Somalia">Somalia</option>
                                            <option value="South Africa">South Africa</option>
                                            <option value="South Korea">South Korea</option>
                                            <option value="South Sudan">South Sudan</option>
                                            <option value="Spain">Spain</option>
                                            <option value="Sri Lanka">Sri Lanka</option>
                                            <option value="Sudan">Sudan</option>
                                            <option value="Suriname">Suriname</option>
                                            <option value="Sweden">Sweden</option>
                                            <option value="Switzerland">Switzerland</option>
                                            <option value="Syria">Syria</option>
                                            <option value="Taiwan">Taiwan</option>
                                            <option value="Tajikistan">Tajikistan</option>
                                            <option value="Tanzania">Tanzania</option>
                                            <option value="Thailand">Thailand</option>
                                            <option value="Timor-Leste">Timor-Leste</option>
                                            <option value="Togo">Togo</option>
                                            <option value="Tonga">Tonga</option>
                                            <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                                            <option value="Tunisia">Tunisia</option>
                                            <option value="Turkey">Turkey</option>
                                            <option value="Turkmenistan">Turkmenistan</option>
                                            <option value="Tuvalu">Tuvalu</option>
                                            <option value="Uganda">Uganda</option>
                                            <option value="Ukraine">Ukraine</option>
                                            <option value="United Arab Emirates">United Arab Emirates</option>
                                            <option value="United Kingdom">United Kingdom</option>
                                            <option value="United Nations">United Nations</option>
                                            <option value="United States">United States</option>
                                            <option value="Uruguay">Uruguay</option>
                                            <option value="Uzbekistan">Uzbekistan</option>
                                            <option value="Vanuatu">Vanuatu</option>
                                            <option value="Vatican City">Vatican City</option>
                                            <option value="Venezuela">Venezuela</option>
                                            <option value="Vietnam">Vietnam</option>
                                            <option value="Yemen">Yemen</option>
                                            <option value="Zambia">Zambia</option>
                                            <option value="Zimbabwe">Zimbabwe</option>
                                        </select>
                                        <label for="sender_country" class="floating-label">Country</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-full">
                                    <label class="checkbox-label">
                                        <input type="checkbox" id="save_sender_address" name="save_sender_address">
                                        Save this address for future use
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-section form-information">
                    <h2 class="section-header">Packaging Options</h2>
                    <div class="form-row">
                        <div class="form-group-third">
                            <div class="input-container">
                                <input type="number" id="package_length" name="package_length" class="form-control" placeholder=" " required min="0" step="1">
                                <label for="package_length" class="floating-label">Length (in)</label>
                            </div>
                        </div>
                        <div class="form-group-third">
                            <div class="input-container">
                                <input type="number" id="package_width" name="package_width" class="form-control" placeholder=" " required min="0" step="1">
                                <label for="package_width" class="floating-label">Width (in)</label>
                            </div>
                        </div>
                        <div class="form-group-third">
                            <div class="input-container">
                                <input type="number" id="package_height" name="package_height" class="form-control" placeholder=" " required min="0" step="1">
                                <label for="package_height" class="floating-label">Height (in)</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group-half">
                            <div class="input-container">
                                <input type="number" id="package_weight" name="package_weight" class="form-control" placeholder=" " required min="0" step="1">
                                <label for="package_weight" class="floating-label">Weight</label>
                            </div>
                        </div>
                        <div class="form-group-half">
                            <div class="input-container">
                                <select id="weight_unit" name="weight_unit" class="form-control" required>
                                    <option value="lbs">lbs</option>
                                    <option value="kg">kg</option>
                                </select>
                                <label for="weight_unit" class="floating-label">Weight Unit</label>
                            </div>
                        </div>
                    </div>
                    <div class="checkbox-group rubber-stamps">
                        <label class="checkbox-label">
                            <input type="checkbox" id="rubber_stamps" name="rubber_stamps">
                            <span class="checkbox-text">
                                <strong>Rubber Stamps</strong>
                                <span class="stamp-description">Print extra information on the label</span>
                                <a href="#" class="learn-more">Learn more</a>
                            </span>
                        </label>
                    </div>
                    <div id="rubber-stamp-fields" style="display: none;">
                        <div class="form-row">
                            <div class="form-group-half">
                                <div class="input-container">
                                    <input type="text" id="rubber_stamp_1" name="rubber_stamp_1" class="form-control" placeholder=" " required>
                                    <label for="rubber_stamp_1" class="floating-label">Custom Reference 1</label>
                                </div>
                            </div>
                            <div class="form-group-half">
                                <div class="input-container">
                                    <input type="text" id="rubber_stamp_2" name="rubber_stamp_2" class="form-control" placeholder=" " required>
                                    <label for="rubber_stamp_2" class="floating-label">Custom Reference 2</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-section form-information">
                    <h2 class="section-header">Signature Confirmation</h2>
                    <div class="signature-options">
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="signature_confirmation" name="signature_confirmation">
                                <span class="checkbox-text">
                                    <strong>Signature Confirmation</strong>
                                    <span class="option-description">Signature required for delivery</span>
                                    <a href="#" class="learn-more">Learn more</a>
                                </span>
                            </label>
                        </div>
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="adult_signature" name="adult_signature">
                                <span class="checkbox-text">
                                    <strong>Adult Signature</strong>
                                    <span class="option-description">21+ age verification required for delivery</span>
                                    <a href="#" class="learn-more">Learn more</a>
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-section form-information">
                    <h2 class="section-header">Service Options</h2>
                    <div class="signature-options">
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="manifest_postage" name="manifest_postage">
                                <span class="checkbox-text">
                                    <strong>Manifest Postage</strong>
                                    <span class="option-description">Use manifest to show "Label Created"</span>
                                    <a href="#" class="learn-more">Learn more</a>
                                </span>
                            </label>
                        </div>
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="saturday_delivery" name="saturday_delivery">
                                <span class="checkbox-text">
                                    <strong>Saturday Delivery</strong>
                                    <span class="option-description">Inform courier to deliver on Saturday when available</span>
                                    <a href="#" class="learn-more">Learn more</a>
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <button type="submit" id=single-rate-button class="rate-button">Rate Shipment</button>
                </div>
            </form>
            <div id="single-service" style="display: none;" class="form-section form-information">
                <div class="section-header">
                    <h2>Select Courier & Services</h2>
                    <button id="edit-single" class="btn-edit">Edit Shipment</button>
                </div>
                </form> 
                    <div class="courier-selection">
                        <button class="courier-button" data-courier="fedex">
                            <div class="courier-content">
                                <img src="/static/png/fedex.png" alt="FedEx" class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">
                                <div class="courier-name">FedEx</div>
                            </div>
                        </button>
                        <button class="courier-button" data-courier="ups">
                            <div class="courier-content">
                                <img src="/static/png/ups.png" alt="UPS" class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">
                                <div class="courier-name">UPS</div>
                            </div>
                        </button>
                        <button class="courier-button" data-courier="usps">
                            <div class="courier-content">
                                <img src="/static/png/usps.png" alt="USPS" class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">
                                <div class="courier-name">USPS</div>
                            </div>
                        </button>
                    </div>
                </form>

                <div class="service-options" id="service-cards-container">
                    <!-- Service cards will be populated dynamically -->
                </div>
            </div>
            <div id="single-purchase" class="single-purchase-overlay" style="display: none;">
                <div class="single-purchase-content">
                    <div class="single-purchase-header">
                        <h2>Confirm Shipping Details</h2>
                        <button class="purchase-exit"><i class="fas fa-times"></i></button>
                    </div>

                    <div class="shipping-info-container">
                        <div class="shipping-address-container">
                            <div class="shipping-details-section">
                                <h3><i class="fas fa-box"></i> Ship From</h3>
                                <div id="ship-from-details" class="address-details"></div>
                            </div>

                            <div class="shipping-details-section">
                                <h3><i class="fas fa-map-marker-alt"></i> Ship To</h3>
                                <div id="ship-to-details" class="address-details"></div>
                            </div>
                        </div>

                        <div class="shipping-details-section">
                            <h3><i class="fas fa-truck"></i> Service Options</h3>
                            <div id="service-details" class="service-details"></div>
                        </div>

                        <div class="label-tracking-container">
                            <!-- Label Output Section -->
                            <div class="label-output-section">
                                <h3><i class="fas fa-file-pdf"></i> Label Output Type</h3>
                                <a href="#" class="learn-more">What is output type? Learn more</a>
                                <div class="label-type-container">
                                    <label class="label-type-option">
                                            <input type="radio" name="label-type" value="PDFv1">
                                            <span class="radio-custom"></span>
                                            <span class="label-text">PDFv1 Label</span>
                                        </label>
                                    <label class="label-type-option">
                                            <input type="radio" name="label-type" value="PDFv2">
                                            <span class="radio-custom"></span>
                                            <span class="label-text">PDFv2 Label</span>
                                        </label>
                                    <label class="label-type-option">
                                            <input type="radio" name="label-type" value="IMAGE" checked>
                                            <span class="radio-custom"></span>
                                            <span class="label-text">Image Label</span>
                                        </label>
                                </div>
                                
                                <a href="#" class="learn-more" style="display: block; margin-top: 30px;">What is provider version? Learn more</a>

                                <div class="input-container" style="margin-top: 15px;">
                                    <select id="service_version" name="service_version" class="form-control" required>
                                        <!-- Options will be populated dynamically -->
                                    </select>
                                    <label for="service_version" class="floating-label">Version</label>
                                </div>
                            </div>

                            <!-- Tracking Section -->
                            <div class="tracking-section">
                                <h3><i class="fas fa-search"></i> Tracking Status</h3>
                                <div class="tracking-status awaiting">
                                    <i class="fas fa-clock"></i>
                                    <span>Awaiting Confirmation</span>
                                </div>

                                <div class="tracking-status confirmed" style="display: none;">
                                    <div class="tracking-info">
                                        <div class="tracking-number">
                                            <i class="fas fa-check-circle"></i>
                                            <span class="tracking-label">Tracking #:</span>
                                            <span class="tracking-value"></span>
                                        </div>
                                        <a href="#" class="copy-tracking" title="Copy Tracking Number">
                                            <i class="fas fa-copy"></i>
                                        </a>
                                    </div>
                                    <div class="label-preview">
                                        <img alt="Label Preview" class="preview-label">
                                        <button id="single-download" class="single-download">
                                                <i class="fas fa-download"></i>
                                                Download Label
                                            </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="purchase-footer">
                        <button class="purchase-cancel">Cancel</button>
                        <button class="purchase-confirm">Confirm & Purchase</button>
                    </div>
                </div>
            </div>
            <form id="batch" style="display: none;">
                <div class="form-section form-information">
                    <div class="section-header">
                        <h2>Rate Batch Shipments</h2>
                    </div>
            
                    <div class="batch-service-container" style="display: flex; gap: 20px; flex-wrap: wrap;">
                        <div class="batch-processing-container" style="flex: 1; min-width: 250px;">
                            <div class="batch-processing ">
                                <h3><i class="fas fa-file-pdf"></i> Label Output Type</h3>
                                <a href="#" class="learn-more">What is output type? Learn more</a>
                                <div class="label-type-container">
                                    <label class="label-type-option">
                                        <input type="radio" name="label-type" value="PDFv1">
                                        <span class="radio-custom"></span>
                                        <span class="label-text">PDFv1 Label</span>
                                    </label>
                                    <label class="label-type-option">
                                        <input type="radio" name="label-type" value="PDFv2">
                                        <span class="radio-custom"></span>
                                        <span class="label-text">PDFv2 Label</span>
                                    </label>
                                    <label class="label-type-option">
                                        <input type="radio" name="label-type" value="IMAGE" checked>
                                        <span class="radio-custom"></span>
                                        <span class="label-text">Image Label</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="batch-processing-container" style="flex: 1; min-width: 250px;">
                            <div class="batch-processing" style="flex: 1; min-width: 225px;">
                                <div class="upload-section">
                                    <div class="header-row">
                                        <h3><i class="fa-solid fa-file-arrow-up"></i> Upload CSV File</h3>
                                        <a href="#" class="download-template" onclick="return displayCSVTemplate(event)">CSV Template</a>
                                    </div>
                                    <div class="drag-drop-area">
                                        <div class="upload-prompt">
                                            <i class="fas fa-file-upload fa-2x" style="color: var(--btn-primary); margin-bottom: 15px;"></i>
                                            <p><span class="file-prompt">Choose File</span> or drag and drop</p>
                                            <p style="font-size: 12px; opacity: 0.7;">Accepted format: .csv</p>
                                        </div>
                                        <input type="file" id="file-input" name="csv_file" class="file-input" accept=".csv">
                                        <button type="button" id="clear-csv" class="clear-csv-btn" style="display: none;">
                                            <i class="fas fa-times"></i> Clear File
                                        </button>
                                    </div>
                                </div>
                                <button type="button" id="batch-rate-button" class="rate-button">Process & Rate Spreadsheet</button>
                            </div>
                        </div>
                    </div>
                    <div class="batch-service-container">
                        <div class="batch-processing" style="margin-top: 20px; margin-bottom: 0;">
                            <h3><i class="fas fa-truck"></i> Service Options Configure & Search</h3>
                            <form>
                                <div class="courier-selection">
                                    <button type="button" class="courier-button" data-courier="fedex">
                                        <div class="courier-content">
                                            <img src="/static/png/fedex.png" alt="FedEx" class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">
                                            <div class="courier-name">FedEx</div>
                                        </div>
                                    </button>
                                    <button type="button" class="courier-button" data-courier="ups">
                                        <div class="courier-content">
                                            <img src="/static/png/ups.png" alt="UPS" class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">
                                            <div class="courier-name">UPS</div>
                                        </div>
                                    </button>
                                    <button type="button" class="courier-button" data-courier="usps">
                                        <div class="courier-content">
                                            <img src="/static/png/usps.png" alt="USPS" class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">
                                            <div class="courier-name">USPS</div>
                                        </div>
                                    </button>
                                </div>
                            </form>
                            <div class="batch-search-bar">
                                <i class="fas fa-search"></i>
                                <input type="text" 
                                    class="batch-search-input"
                                    placeholder="Search services..."
                                    autocomplete="off"
                                    spellcheck="false">
                            </div>
                            <div class="search-results">
                                <!-- Search results will appear here -->
                            </div>

                            <div class="batch-settings-panel">
                                <div class="batch-version-select">
                                    <div class="input-container">
                                        <select id="batch-provider-version" class="form-control" required>
                                            <!-- Options will be populated dynamically -->
                                        </select>
                                        <label for="batch-provider-version" class="floating-label">Batch Provider Version</label>
                                        <span class="checkbox-text">
                                            <strong>Batch Provider Version</strong>
                                            <span class="option-description">Set version for each courier</span>
                                            <a href="#" class="learn-more">Learn more</a>
                                        </span>
                                    </div>
                                </div>
                                <div class="checkbox-group">
                                    <label class="checkbox-label">
                                        <input type="checkbox" id="batch_manifest_postage" name="batch_manifest_postage">
                                        <span class="checkbox-text">
                                            <strong>Manifest Postage</strong>
                                            <span class="option-description">Use manifest to show "Label Created"</span>
                                            <a href="#" class="learn-more">Learn more</a>
                                        </span>
                                    </label>
                                </div>
                                <div class="batch-service-list">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div id="batch-purchase" class="single-purchase-overlay" style="display: none;">
                <div class="single-purchase-content">
                    <div class="single-purchase-header">
                        <h2>Batch Summary</h2>
                        <button class="purchase-exit"><i class="fas fa-times"></i></button>
                    </div>
            
                    <div class="shipping-info-container">
                    </div>
            
                    <div class="purchase-footer">
                        <button class="purchase-cancel">Cancel</button>
                        <button class="purchase-confirm">Confirm & Purchase</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="graph" class="widget graph-widget">
            <h2>Shipments and Spending Overview</h2>
            <div class="graph-controls">
                <button id="showShipments" class="graph-control-btn active">Shipments</button>
                <button id="showSpending" class="graph-control-btn">Spending</button>
            </div>
            <div class="graph-container">
                <canvas id="shipmentGraph"></canvas>
            </div>
        </div>
        <div id="history" class="widget" style="display: none;">
            <h1>Click N' View</h1>
                <div class="history-container">
                    <!-- Search and filter controls -->
                    <div class="history-controls">
                        <div class="search-bar">
                            <i class="fas fa-search"></i>
                            <input type="text" 
                                class="history-search-input form-control"
                                placeholder="Search by tracking number, address..."
                                autocomplete="off"
                                spellcheck="false">
                        </div>
                    </div>

                    <!-- History items list -->
                    <div class="history-list">
                        <!-- Items will be populated dynamically -->
                    </div>
            </div>
        </div>
        <div id="deposit" class="payment-methods widget" style="display: none;">
            <h1>Click N' Deposit</h1>
            <div class="form-section form-information">
                <div class="section-header">
                    <h2>Select Payment Method</h3>
                </div>
                <div class="payment-options">
                    <label class="payment-option">
                        <input type="radio" name="payment_method" value="crypto" checked>
                        <div class="payment-card">
                            <i class="fa-brands fa-bitcoin"></i>
                            <div class="payment-info">
                                <div class="payment-name">Cryptocurrency</div>
                                <div class="payment-description">Pay with BTC, LTC, XMR, USDT etc.</div>
                            </div>
                        </div>
                    </label>

                    <label class="payment-option">
                        <input type="radio" name="payment_method" value="stripe" disabled>
                        <div class="payment-card disabled">
                            <i class="fas fa-credit-card"></i>
                            <div class="payment-info">
                                <div class="payment-name">
                                    Card Payment
                                    <span class="coming-soon-badge">Coming Soon</span>
                                </div>
                                <div class="payment-description">Credit/Debit cards via Stripe</div>
                            </div>
                        </div>
                    </label>
                </div>

                <!-- Crypto Details -->
                <div class="crypto-details" id="crypto-details">
                    <div class="crypto-option" data-crypto="btc">
                        <div class="crypto-header">
                            <i alt="BTC" class="crypto-icon fa-brands fa-bitcoin"></i>
                            <div class="crypto-info">
                                <div class="crypto-name">Bitcoin</div>
                                <div class="crypto-network">Bitcoin Network</div>
                            </div>
                        </div>
                    </div>

                    <div class="crypto-option" data-crypto="ltc">
                        <div class="crypto-header">
                            <i alt="LTC" class="crypto-icon fa-solid fa-litecoin-sign"></i>
                            <div class="crypto-info">
                                <div class="crypto-name">Litecoin</div>
                                <div class="crypto-network">Litecoin Network</div>
                            </div>
                        </div>
                    </div>

                    <div class="crypto-option" data-crypto="xmr">
                        <div class="crypto-header">
                            <i alt="XMR" class="crypto-icon fa-brands fa-monero"></i>
                            <div class="crypto-info">
                                <div class="crypto-name">Monero</div>
                                <div class="crypto-network">Monero Network</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Invoice Amount Details -->
                <div class="invoice-details" id="invoice-details">
                    <div class="invoice-input">
                        <div class="input-container" style="display: flex; gap: 10px; align-items: flex-start;">
                            <div style="flex: 1;">
                                <input type="text" id="invoice_amount" class="form-control" placeholder=" ">
                                <label for="price_in_usd" class="floating-label">USD ($) amount</label>
                            </div>
                            <button class="create-invoice-btn" style="height: 38px; white-space: nowrap;">
                                <i class="fas fa-file-invoice"></i>
                                Create
                            </button>
                        </div>
                    </div>
                    <div class="payment-note">
                        <i class="fas fa-info-circle"></i> Please enter your desired topup amount. After clicking "Create Invoice", you'll be redirected to an invoicing page to complete the payment, or scan the QR simply send to the address soon to be listed below. <strong>Please send the EXACT amount, otherwise you are at risk of losing your funds!</strong>
                    </div>
                </div>

                <div class="qr-container" id="qr-container">
                    <div class="payment-layout">
                    </div>
                </div>
            </div>
        </div>
        <div id="extras" class="widget" style="display: none;">
            <h1>Click N' Configure</h1>
            
            <!-- Labels & Couriers -->
            <div class="form-section form-information">
                <div class="section-header">
                    <h2>Default Shipping Configurations</h2>
                </div>
                <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                    <!-- Left side - Format Selection -->
                    <div class="batch-processing" style="flex: 1; min-width: 250px;">
                        <h3><i class="fas fa-file-pdf"></i> Global Label Output Type</h3>
                        <a href="#" class="learn-more">What is output type? Learn more</a>
                        <div class="label-type-container">
                            <label class="label-type-option">
                                <input type="radio" name="default-label-type" value="pdfv1">
                                <span class="radio-custom"></span>
                                <span class="label-text">PDFv1 Label</span>
                            </label>
                            <label class="label-type-option">
                                <input type="radio" name="default-label-type" value="pdfv2">
                                <span class="radio-custom"></span>
                                <span class="label-text">PDFv2 Label</span>
                            </label>
                            <label class="label-type-option">
                                <input type="radio" name="default-label-type" value="image" checked>
                                <span class="radio-custom"></span>
                                <span class="label-text">Image Label</span>
                            </label>
                        </div>
                    </div>
            
                    <!-- Right side - Courier Versions -->
                    <div class="batch-processing" style="flex: 1; min-width: 250px;">
                        <h3><i class="fas fa-truck"></i> Global Courier Versions</h3>
                        <a href="#" class="learn-more">What is provider version? Learn more</a>
                        <div class="form-row" style="margin-top: 5px; margin-bottom: 2.5px;">
                            <div class="form-group-full">
                                <div class="input-container">
                                    <select id="usps-version" class="form-control">
                                        <option value="USPSveVS">eVS</option>
                                        <option value="USPSvShippo">Shippo</option>
                                        <option value="USPSvStore" selected>Store</option>
                                        <option value="USPSvUnbranded">Unbranded</option>
                                    </select>
                                    <label for="usps-version" class="floating-label">USPS Version</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-row" style="margin-bottom: 2.5px;">
                            <div class="form-group-full">
                                <div class="input-container">
                                    <select id="ups-version" class="form-control">
                                        <option value="UPSvRetail" selected>Retail</option>
                                        <option value="UPSvWarehouse">Warehouse</option>
                                    </select>
                                    <label for="ups-version" class="floating-label">UPS Version</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group-full">
                                <div class="input-container">
                                    <select id="fedex-version" class="form-control">
                                        <option value="FedExvRetail" selected>Retail</option>
                                        <option value="FedExvWarehouse">Warehouse</option>
                                    </select>
                                    <label for="fedex-version" class="floating-label">FedEx Version</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <!-- Address Book -->
            <div class="form-section form-information">
                <div class="section-header">
                    <h2>Address Book Management</h2>
                    <button id="add-address" class="paste-address-button">
                        <i class="fas fa-plus"></i> New Address
                    </button>
                </div>
                <div id="address-book-container" class="batch-processing">
                    <!-- Address entries will be populated here -->
                </div>
            </div>

            <!-- API Key Management -->
            <div class="form-section form-information">
                <div class="section-header">
                    <h2>API Access Information</h2>
                </div>
                <div class="batch-processing">
                        <div class="input-container">
                            <input type="text" id="api-key" class="form-control" placeholder=" " readonly>
                            <label for="api-key" class="floating-label">Current API Key</label>
                        </div>
                </div>
            </div>
        </div>
    <div class="loading-overlay">
        <div class="loading-circle"></div>
        <p>Contacting Validators, DO NOT Refresh the Page!</p>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/socket.io.min.js"></script>
    <script src="/static/js/chart.js"></script>
    <script src="/static/js/jszip.min.js"></script>
    <script src="/static/js/pdf-lib.js"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/qrcode.min.js"></script>
    <script>
        window.CHART_DATA = {
            shipments: {{ shipped_chart | default([]) | tojson | safe }},
            spending: {{ spent_chart | default([]) | tojson | safe }},
            labels: {{ date_label | default([]) | tojson | safe }}
        };
        document.addEventListener('DOMContentLoaded', function() {

            console.log('Initializing socket connection...');

// Track connection state
let connectionActive = false;
let connectionRetryCount = 0;
let serverPublicKey = null;
const MAX_RETRIES = 3;
let initialChallengeCompleted = false;
let socketVerificationPromise = null;
let currentTokens = {
   csrf: null,
   sid: null // Initialize from storage
};

const socket = io({
   path: '/socket.io',
   transports: ['websocket'],
   pingInterval: 25000,
   pingTimeout: 30000,
   reconnection: true,
   reconnectionAttempts: 5,
   reconnectionDelay: 1000,
   reconnectionDelayMax: 5000
});

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
   // Get initial CSRF token from meta tag
   const metaToken = $('meta[name="csrf-token"]').attr('content');
   if (metaToken) {
       currentTokens.csrf = metaToken;
   }
   
   // Create a verification promise
   socketVerificationPromise = new Promise((resolve) => {
       const storedSocketId = sessionStorage.getItem('socket_id');
       if (storedSocketId) {
           socket.emit('verify_socket', storedSocketId, (isValid) => {
               if (!isValid) {
                   sessionStorage.removeItem('socket_id');
                   currentTokens.sid = null;
               } else {
                   currentTokens.sid = storedSocketId;
               }
               resolve();
           });
       } else {
           resolve();
       }
   });
});

// Enhanced encryption functions
async function generateEncryptionKeys() {
   const aesKey = await window.crypto.subtle.generateKey(
       {
           name: "AES-GCM",
           length: 256
       },
       true,
       ["encrypt"]
   );
   return aesKey;
}

async function encryptData(data, challengeId) {
   try {
       if (!serverPublicKey) {
           throw new Error('No server public key available');
       }

       // Generate AES key and IV
       const aesKey = await generateEncryptionKeys();
       const iv = window.crypto.getRandomValues(new Uint8Array(12));

       // Add noise to data
       const noise = await generateNoise(challengeId);
       data.system.noise = noise;

       // Encrypt data with AES-GCM
       const encoder = new TextEncoder();
       const jsonData = JSON.stringify(data);
       const dataBuffer = encoder.encode(challengeId + jsonData);
       
       const encryptedData = await window.crypto.subtle.encrypt(
           {
               name: "AES-GCM",
               iv: iv
           },
           aesKey,
           dataBuffer
       );

       // Export and encrypt AES key with RSA
       const exportedKey = await window.crypto.subtle.exportKey("raw", aesKey);
       const encryptedKey = await window.crypto.subtle.encrypt(
           {
               name: "RSA-OAEP"
           },
           serverPublicKey,
           exportedKey
       );

       // Package everything together
       return btoa(JSON.stringify({
           key: btoa(String.fromCharCode(...new Uint8Array(encryptedKey))),
           iv: btoa(String.fromCharCode(...iv)),
           data: btoa(String.fromCharCode(...new Uint8Array(encryptedData)))
       }));
   } catch (error) {
       console.error('Encryption error:', error);
       throw error;
   }
}

async function generateNoise(challengeId) {
   const noise = new Uint8Array(32);
   crypto.getRandomValues(noise);
   const noiseHex = Array.from(noise).map(b => b.toString(16).padStart(2, '0')).join('');
   return challengeId + noiseHex;
}

// Connection handlers
socket.on('connect', () => {
   connectionActive = true;
   connectionRetryCount = 0;
   console.log('Socket connected:', socket.id);
   currentTokens.sid = socket.id;
   sessionStorage.setItem('socket_id', socket.id);
});

socket.on('verification', async (data) => {
   try {
       if (data.key) {
           const publicKeyData = Uint8Array.from(atob(data.key), c => c.charCodeAt(0));
           serverPublicKey = await window.crypto.subtle.importKey(
               'spki',
               publicKeyData,
               {
                   name: 'RSA-OAEP',
                   hash: 'SHA-256'
               },
               false,
               ['encrypt']
           );
       }

       const fingerprint = await getFingerprint();
       const encryptedData = await encryptData(fingerprint.rawData, data.id);
       
       const challengeResponse = {
           id: data.id,
           response: data.challenge,
           raw: encryptedData
       };

       socket.emit('challenge', challengeResponse, (responseData) => {
           if (responseData && responseData.status === 'success') {
               initialChallengeCompleted = true;
           } else {
               console.error('Challenge failed:', responseData?.message);
               handleConnectionLoss();
           }
       });
   } catch (error) {
       console.error('Challenge error:', error);
       handleConnectionLoss();
   }
});

socket.on('completion', (data) => {
   if (data && data.status === 'success' && data.csrf) {
       currentTokens.csrf = data.csrf;
       updateTokens(currentTokens);
       console.log('CSRF token updated from challenge completion');
   }
});


socket.on('disconnect', () => {
   connectionActive = false;
   console.log('Socket disconnected');
   
   // Only remove from session storage if it's a permanent disconnect
   socket.on('error', (error) => {
       if (error.message === 'transport close' || error.message === 'ping timeout') {
           sessionStorage.removeItem('socket_id');
       }
   });
});

// Add ping timeout handler
socket.on('ping timeout', () => {
    console.log('Socket ping timeout');
    sessionStorage.removeItem('socket_id');
});


// Only remove from session storage if it's a permanent disconnect
socket.on('error', (error) => {
    console.error('Socket error:', error);
    if (error.message === 'transport close' || error.message === 'ping timeout') {
        sessionStorage.removeItem('socket_id');
    }
});

socket.on('connect_error', (error) => {
   console.error('Socket connection error:', error);
});

// Add page reload handler
window.addEventListener('beforeunload', () => {
   currentTokens.csrf = null;
});

const pageLoadTime = Date.now();

// Modify the fetch intercept to wait for verification
const originalFetch = window.fetch;
window.fetch = async function(url, options = {}) {
    // Wait for socket verification to complete
    await socketVerificationPromise;

    const timeSinceLoad = Date.now() - pageLoadTime;
    const needsDelay = timeSinceLoad < 5000;
    if (needsDelay) {
        // Add another small delay after verification
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    // Wait for socket connection if not already connected
    if (!socket.connected) {
        try {
            await new Promise((resolve, reject) => {
                const timeout = setTimeout(() => {
                    reject(new Error('Socket connection timeout'));
                }, 5000);

                socket.once('connect', () => {
                    clearTimeout(timeout);
                    connectionActive = true;
                    resolve();
                });
            });
        } catch (error) {
            console.error('Socket connection failed:', error);
            throw new Error('Unable to establish connection');
        }
    }

    // Rest of the fetch code remains the same
    options = {
        credentials: 'same-origin',
        redirect: 'follow',
        ...options
    };

    options.headers = {
        'Content-Type': 'application/json',
        'X-CSRF-Token': currentTokens.csrf,
        'X-Socket-Id': currentTokens.sid,
        ...(options.headers || {})
    };

    try {
        const response = await originalFetch(url, options);

        if (!response.ok && response.status !== 302) {
            if (response.status === 403) {
                handleConnectionLoss();
                throw new Error('CSRF validation failed');
            }
        }

        if (response.redirected || response.status === 302) {
            const redirectUrl = response.url || response.headers.get('Location');
            if (redirectUrl) {
                window.location.href = redirectUrl;
                throw new Error('Authentication required');
            }
        }

        return response;
    } catch (error) {
        throw error;
    }
};

function updateTokens(tokens) {
   if (tokens.csrf) {
       let metaTag = document.querySelector('meta[name="csrf-token"]');
       if (!metaTag) {
           metaTag = document.createElement('meta');
           metaTag.name = 'csrf-token';
           document.head.appendChild(metaTag);
       }
       metaTag.content = tokens.csrf;

       document.querySelectorAll('input[name="csrf_token"]').forEach(input => {
           input.value = tokens.csrf;
       });

       currentTokens.csrf = tokens.csrf;
   }

   if (tokens.sid) {
       document.querySelectorAll('input[name="sid_token"]').forEach(input => {
           input.value = tokens.sid;
       });
       currentTokens.sid = tokens.sid;
   }
}

async function getFingerprint() {
    const generateNoise = () => {
        const noise = new Uint8Array(32);
        crypto.getRandomValues(noise);
        return Array.from(noise).map(b => b.toString(16).padStart(2, '0')).join('');
    };

    const rawFingerprint = {
        screen: {
            width: $(window).width(),
            height: $(window).height(),
            availWidth: window.screen.availWidth,
            availHeight: window.screen.availHeight,
            colorDepth: window.screen.colorDepth,
            pixelDepth: window.screen.pixelDepth,
            ratio: window.devicePixelRatio
        },
        browser: {
            userAgent: navigator.userAgent,
            userAgentTimestamp: Math.floor(Date.now() / 1000), // Add Unix timestamp
            language: navigator.language,
            languages: navigator.languages,
            platform: navigator.platform,
            hardwareConcurrency: navigator.hardwareConcurrency || 'unknown',
            deviceMemory: navigator.deviceMemory || 'unknown',
            doNotTrack: navigator.doNotTrack,
            plugins: Array.from(navigator.plugins).map(p => p.name),
            mimeTypes: Array.from(navigator.mimeTypes).map(m => m.type)
        },
        system: {
            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            timeZoneOffset: new Date().getTimezoneOffset(),
            timestamp: Date.now(),
            noise: generateNoise()
        }
    };

   // Canvas fingerprinting
   const canvas = document.createElement('canvas');
   canvas.width = 200;
   canvas.height = 50;
   const ctx = canvas.getContext('2d');
   
   ctx.textBaseline = 'alphabetic';
   ctx.fillStyle = '#f60';
   ctx.fillRect(125,1,62,20);
   
   for(let i = 0; i < 10; i++) {
       ctx.rotate(10 * Math.PI / 180);
       ctx.fillStyle = `rgba(${i * 20}, ${255 - i * 20}, ${i * 10}, 0.5)`;
       ctx.fillText("Security", i * 4, i * 4);
   }
   
   rawFingerprint.canvas = canvas.toDataURL();

   // WebGL fingerprinting
   try {
       const gl = canvas.getContext('webgl');
       if (gl) {
           rawFingerprint.webgl = {
               vendor: gl.getParameter(gl.VENDOR),
               renderer: gl.getParameter(gl.RENDERER),
               extensions: gl.getSupportedExtensions()
           };
       }
   } catch(e) {
       rawFingerprint.webgl = null;
   }

   // Hash generation
   const fingerprintStr = JSON.stringify(rawFingerprint);
   const initialBuffer = new TextEncoder().encode(fingerprintStr);
   const initialHash = await crypto.subtle.digest('SHA-256', initialBuffer);
   
   const secondLayerInput = new TextEncoder().encode(
       Array.from(new Uint8Array(initialHash)).join('') + 
       Date.now().toString() +
       generateNoise()
   );
   
   const finalHash = await crypto.subtle.digest('SHA-256', secondLayerInput);
   const hashHex = Array.from(new Uint8Array(finalHash))
       .map(b => b.toString(16).padStart(2, '0'))
       .join('');

   return {
       hash: hashHex,
       rawData: rawFingerprint,
       timestamp: Date.now()
   };
}

function handleConnectionLoss() {
   showAlert('Connection lost. Please refresh the page.', 'error');
   setTimeout(() => window.location.reload(), 2000);
}

function showAlert(message, type) {
   const alertContainer = $('#alertContainer');
   const alert = $('<div>').addClass(`alert alert-${type}`).text(message);
   alertContainer.empty().append(alert);
   
   if (type !== 'danger') {
       setTimeout(() => {
           alert.fadeOut(400, function() {
               $(this).remove();
           });
       }, 5000);
   }
}

            let cachedBatchShipments = [];
            let cachedBatchResults = [];
            let cachedRates = null;
            let cachedHistory = null;
            let courierVersions = {
                usps: 'USPSvStore',  // default values
                ups: 'UPSvRetail',
                fedex: 'FedExvRetail'
            };
            let shipmentData = window?.CHART_DATA?.shipments || [];
            let spendingData = window?.CHART_DATA?.spending || [];
            let labels = window?.CHART_DATA?.labels || [];
            const countryCodeToName = {
                // North America
                'US': 'United States', 'USA': 'United States',
                'CA': 'Canada', 'CAN': 'Canada',
                'MX': 'Mexico', 'MEX': 'Mexico',

                // South America
                'BR': 'Brazil', 'BRA': 'Brazil',
                'AR': 'Argentina', 'ARG': 'Argentina',
                'VE': 'Venezuela', 'VEN': 'Venezuela',
                'CO': 'Colombia', 'COL': 'Colombia',
                'PE': 'Peru', 'PER': 'Peru',
                'CL': 'Chile', 'CHL': 'Chile',
                'EC': 'Ecuador', 'ECU': 'Ecuador',
                'BO': 'Bolivia', 'BOL': 'Bolivia',
                'PY': 'Paraguay', 'PRY': 'Paraguay',
                'UY': 'Uruguay', 'URY': 'Uruguay',

                // Europe
                'GB': 'United Kingdom', 'GBR': 'United Kingdom',
                'FR': 'France', 'FRA': 'France',
                'DE': 'Germany', 'DEU': 'Germany',
                'IT': 'Italy', 'ITA': 'Italy',
                'ES': 'Spain', 'ESP': 'Spain',
                'SE': 'Sweden', 'SWE': 'Sweden',
                'NO': 'Norway', 'NOR': 'Norway',
                'DK': 'Denmark', 'DNK': 'Denmark',
                'FI': 'Finland', 'FIN': 'Finland',
                'NL': 'Netherlands', 'NLD': 'Netherlands',
                'BE': 'Belgium', 'BEL': 'Belgium',
                'CH': 'Switzerland', 'CHE': 'Switzerland',
                'AT': 'Austria', 'AUT': 'Austria',
                'PL': 'Poland', 'POL': 'Poland',
                'CZ': 'Czech Republic', 'CZE': 'Czech Republic',
                'GR': 'Greece', 'GRC': 'Greece',
                'PT': 'Portugal', 'PRT': 'Portugal',
                'HU': 'Hungary', 'HUN': 'Hungary',
                'RO': 'Romania', 'ROU': 'Romania',
                'UA': 'Ukraine', 'UKR': 'Ukraine',
                'BG': 'Bulgaria', 'BGR': 'Bulgaria',
                'RS': 'Serbia', 'SRB': 'Serbia',
                'HR': 'Croatia', 'HRV': 'Croatia',
                'SI': 'Slovenia', 'SVN': 'Slovenia',
                'SK': 'Slovakia', 'SVK': 'Slovakia',
                'IS': 'Iceland', 'ISL': 'Iceland',
                'IE': 'Ireland', 'IRL': 'Ireland',
                'LU': 'Luxembourg', 'LUX': 'Luxembourg',
                'MT': 'Malta', 'MLT': 'Malta',
                'CY': 'Cyprus', 'CYP': 'Cyprus',

                // Asia
                'RU': 'Russia', 'RUS': 'Russia',
                'CN': 'China', 'CHN': 'China',
                'IN': 'India', 'IND': 'India',
                'JP': 'Japan', 'JPN': 'Japan',
                'KR': 'South Korea', 'KOR': 'South Korea',
                'SA': 'Saudi Arabia', 'SAU': 'Saudi Arabia',
                'AE': 'United Arab Emirates', 'ARE': 'United Arab Emirates',
                'IL': 'Israel', 'ISR': 'Israel',
                'IR': 'Iran', 'IRN': 'Iran',
                'TR': 'Turkey', 'TUR': 'Turkey',
                'PK': 'Pakistan', 'PAK': 'Pakistan',
                'ID': 'Indonesia', 'IDN': 'Indonesia',
                'TH': 'Thailand', 'THA': 'Thailand',
                'VN': 'Vietnam', 'VNM': 'Vietnam',
                'PH': 'Philippines', 'PHL': 'Philippines',
                'MY': 'Malaysia', 'MYS': 'Malaysia',
                'SG': 'Singapore', 'SGP': 'Singapore',
                'HK': 'Hong Kong', 'HKG': 'Hong Kong',
                'TW': 'Taiwan', 'TWN': 'Taiwan',

                // Oceania
                'AU': 'Australia', 'AUS': 'Australia',
                'NZ': 'New Zealand', 'NZL': 'New Zealand',

                // Africa
                'ZA': 'South Africa', 'ZAF': 'South Africa',
                'EG': 'Egypt', 'EGY': 'Egypt',
                'NG': 'Nigeria', 'NGA': 'Nigeria',
                'KE': 'Kenya', 'KEN': 'Kenya',
                'DZ': 'Algeria', 'DZA': 'Algeria',
                'MA': 'Morocco', 'MAR': 'Morocco',
                'TN': 'Tunisia', 'TUN': 'Tunisia',
                'LY': 'Libya', 'LBY': 'Libya',
                'SD': 'Sudan', 'SDN': 'Sudan',
                'ET': 'Ethiopia', 'ETH': 'Ethiopia',
                'GH': 'Ghana', 'GHA': 'Ghana',
                'CI': 'Ivory Coast', 'CIV': 'Ivory Coast',
                'SN': 'Senegal', 'SEN': 'Senegal',
                'ML': 'Mali', 'MLI': 'Mali',
                'UG': 'Uganda', 'UGA': 'Uganda',
                'TZ': 'Tanzania', 'TZA': 'Tanzania',
                'ZM': 'Zambia', 'ZMB': 'Zambia',
                'ZW': 'Zimbabwe', 'ZWE': 'Zimbabwe',
                'BW': 'Botswana', 'BWA': 'Botswana',
                'MW': 'Malawi', 'MWI': 'Malawi',
                'NA': 'Namibia', 'NAM': 'Namibia',
                'MG': 'Madagascar', 'MDG': 'Madagascar',
                'MU': 'Mauritius', 'MUS': 'Mauritius',
                'RE': 'Réunion', 'REU': 'Réunion',
                'SC': 'Seychelles', 'SYC': 'Seychelles',
                'KM': 'Comoros', 'COM': 'Comoros',
                'ST': 'Sao Tome and Principe', 'STP': 'Sao Tome and Principe',
                'CV': 'Cape Verde', 'CPV': 'Cape Verde',
                'MR': 'Mauritania', 'MRT': 'Mauritania',
                'GQ': 'Equatorial Guinea', 'GNQ': 'Equatorial Guinea',
                'GA': 'Gabon', 'GAB': 'Gabon',
                'CG': 'Congo', 'COG': 'Congo',
                'CD': 'Democratic Republic of the Congo', 'COD': 'Democratic Republic of the Congo',
                'AO': 'Angola', 'AGO': 'Angola',
                'MZ': 'Mozambique', 'MOZ': 'Mozambique',
                'SZ': 'Eswatini', 'SWZ': 'Eswatini',
                'LS': 'Lesotho', 'LSO': 'Lesotho'
            };
            
            const balanceElement = document.querySelector('.navbar-desktop .balance');
            if (balanceElement) {
                const balanceLength = balanceElement.textContent.length;
                document.documentElement.style.setProperty('--balance-length', balanceLength);
            }

            function updateLogos(isDarkMode) {
                const logoLightElements = document.querySelectorAll('.logo-light');
                const logoDarkElements = document.querySelectorAll('.logo-dark');
                logoLightElements.forEach(logo => {
                    if (logo) logo.style.display = isDarkMode ? 'none' : 'block';
                });
                logoDarkElements.forEach(logo => {
                    if (logo) logo.style.display = isDarkMode ? 'block' : 'none';
                });
            }
            function updateCSSVariables(isDarkMode) {
                const root = document.documentElement;
                if (isDarkMode) {
                    root.style.setProperty('--bg-color', '#121212');
                    root.style.setProperty('--text-color', '#ffffff');
                    root.style.setProperty('--navbar-bg', '#1e1e1e');
                    root.style.setProperty('--widget-bg', '#1e1e1e');
                    root.style.setProperty('--input-bg', '#2c2c2c');
                    root.style.setProperty('--input-border', '#444');
                    root.style.setProperty('--btn-secondary', '#4e4e4e');
                    root.style.setProperty('--sidebar-bg', '#1e1e1e');
                    root.style.setProperty('--sidebar-text', '#ffffff');
                    root.style.setProperty('--sidebar-hover', '#2c2c2c');
                    root.style.setProperty('--balance-bg', '#2c2c2c');
                } else {
                    root.style.setProperty('--bg-color', '#f0f0f0');
                    root.style.setProperty('--text-color', '#333');
                    root.style.setProperty('--navbar-bg', '#fff');
                    root.style.setProperty('--widget-bg', '#fff');
                    root.style.setProperty('--input-bg', '#fff');
                    root.style.setProperty('--input-border', '#ced4da');
                    root.style.setProperty('--btn-secondary', '#6c757d');
                    root.style.setProperty('--sidebar-bg', '#fff');
                    root.style.setProperty('--sidebar-text', '#333');
                    root.style.setProperty('--sidebar-hover', '#f8f9fa');
                    root.style.setProperty('--balance-bg', '#e9ecef');
                }
            }
            function setTheme(isDarkMode) {
                document.body.classList.toggle('dark-mode', isDarkMode);
                updateLogos(isDarkMode);
                updateCSSVariables(isDarkMode);
                localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
            }
            function toggleTheme() {
                const isDarkMode = !document.body.classList.contains('dark-mode');
                setTheme(isDarkMode);
            }
            function handleNavigation() {
                const hash = window.location.hash;
                if (hash === '#purchase') {
                    clearAllFields();
                    $('#stats, #purchase, #ship, #graph').show();
                    $('#home, #single, #single-service, #single-purchase, #batch, #deposit, #history, #extras').hide();
                    $('.navbar-desktop a, .navbar-mobile a').removeClass('active');
                    $('a[href="#purchase"]').addClass('active');
                } else if (hash === '#rate-single' || hash === '#rate-batch') {
                    $('#stats, #graph, #ship').hide();
                    $('#home').show().css('display', 'flex');
                    
                    if (hash === '#rate-batch') {
                        $('#single').hide();
                        $('#batch').show();
                    } else {
                        $('#single').show();
                        $('#batch').hide();
                    }
                } else if (hash === '#deposit') {
                    $('#stats, #home, #purchase, #graph, #history, #extras').hide();
                    $('#deposit').show();
                    $('.navbar-desktop a, .navbar-mobile a').removeClass('active');
                    $('a[href="#deposit"]').addClass('active');
                    $(this).addClass('active');
                    history.pushState(null, '', '#deposit');
                } else if (hash === '#history') {
                    $('#stats, #home, #purchase, #graph, #deposit, #extras').hide();
                    $('#history').show();
                    $('.navbar-desktop a, .navbar-mobile a').removeClass('active');
                    $('a[href="#history"]').addClass('active');
                    loadShipmentHistory();
                } else if (hash === '#extras') {
                    $('#stats, #home, #purchase, #graph, #deposit, #history').hide();
                    $('#extras').show();
                    $('.navbar-desktop a, .navbar-mobile a').removeClass('active');
                    $('a[href="#extras"]').addClass('active');
                    //loadSavedSettings();
                    loadAddressBook();
                }
            }
            function showAlert(message, type) {
                const alertDiv = document.createElement('div');
                alertDiv.style.cssText = `
                    position: fixed;
                    top: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    padding: 15px 20px;
                    border-radius: 5px;
                    z-index: 10000;
                    font-weight: 500;
                    animation: slideIn 0.3s ease-out;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    width: calc(100% - 60px);
                    max-width: 600px;
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                `;

                if (type === 'success') {
                    alertDiv.style.backgroundColor = 'var(--widget-bg)';
                    alertDiv.style.color = '#388e3c';
                    alertDiv.style.border = '1px solid #4caf50';
                    if (document.body.classList.contains('dark-mode')) {
                        alertDiv.style.backgroundColor = '#1b311d';
                        alertDiv.style.color = '#a5d6a7';
                    }
                } else {
                    alertDiv.style.backgroundColor = 'var(--widget-bg)';
                    alertDiv.style.color = '#d32f2f';
                    alertDiv.style.border = '1px solid #f44336';
                    if (document.body.classList.contains('dark-mode')) {
                        alertDiv.style.backgroundColor = '#311b1b';
                        alertDiv.style.color = '#ef9a9a';
                    }
                }

                alertDiv.innerHTML = `
                    <div style="margin-right: 15px; flex: 1; word-break: break-word;">${message}</div>
                    <span style="cursor: pointer; font-weight: bold; opacity: 0.7; padding: 0 5px;">&times;</span>
                `;

                const closeBtn = alertDiv.querySelector('span');
                closeBtn.onclick = () => {
                    alertDiv.style.animation = 'slideOut 0.3s ease-out';
                    setTimeout(() => alertDiv.remove(), 280);
                };

                if (!document.getElementById('alert-animations')) {
                    const style = document.createElement('style');
                    style.id = 'alert-animations';
                    style.textContent = `
                        @keyframes slideIn {
                            from {
                                transform: translate(-50%, -100%);
                                opacity: 0;
                            }
                            to {
                                transform: translate(-50%, 0);
                                opacity: 1;
                            }
                        }
                        @keyframes slideOut {
                            to {
                                transform: translate(-50%, -100%);
                                opacity: 0;
                            }
                        }
                        @media (max-width: 480px) {
                            .alert-div {
                                font-size: 14px;
                            }
                        }
                    `;
                    document.head.appendChild(style);
                }

                document.body.appendChild(alertDiv);
                
                setTimeout(() => {
                    if (document.body.contains(alertDiv)) {
                        alertDiv.style.animation = 'slideOut 0.3s ease-out';
                        setTimeout(() => alertDiv.remove(), 280);
                    }
                }, 60000);
            }

            function hexToRgb(hex) {
                hex = hex.replace(/^#/, '');
                const bigint = parseInt(hex, 16);
                const r = (bigint >> 16) & 255;
                const g = (bigint >> 8) & 255;
                const b = bigint & 255;
                return `rgb(${r}, ${g}, ${b})`;
            }
            function getChartColors() {
                const isLightMode = !document.body.classList.contains('dark-mode');
                const activeColorHex = '#c33ced';
                const activeColor = hexToRgb(activeColorHex);
                return {
                    borderColor: activeColor,
                    pointBackgroundColor: activeColor,
                    gridColor: isLightMode ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)',
                    textColor: isLightMode ? '#333' : '#fff'
                };
            }
            function createChart(dataType) {
                const colors = getChartColors();
                const data = dataType === 'shipments' ? shipmentData : spendingData;
                const yAxisLabel = dataType === 'shipments' ? 'Number of Shipments (#)' : 'USD Spent ($)';
                if (chart) {
                    chart.destroy();
                }
                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: yAxisLabel,
                            data: data,
                            borderColor: colors.borderColor,
                            backgroundColor: 'rgba(0, 123, 255, 0.1)',
                            pointBackgroundColor: colors.pointBackgroundColor,
                            tension: 0.1,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: yAxisLabel,
                                    color: colors.textColor
                                },
                                ticks: {
                                    color: colors.textColor
                                },
                                grid: {
                                    color: colors.gridColor
                                }
                            },
                            x: {
                                ticks: {
                                    color: colors.textColor,
                                    callback: function(val, index) {
                                        return index % 2 === 0 ? this.getLabelForValue(val) : '';
                                    }
                                },
                                grid: {
                                    color: colors.gridColor
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false
                            }
                        }
                    }
                });
            }
            async function updateDashboardStats() {
                try {
                    const response = await fetch('/application/profile');
                    if (!response.ok) throw new Error('Failed to update stats');
                    
                    const data = await response.json();
                    
                    // Update balance display
                    const balanceElement = document.querySelector('.navbar-desktop .balance');
                    if (balanceElement) {
                        balanceElement.textContent = `Balance: $${data.balance} USD`;
                        // Update the CSS variable for balance length
                        document.documentElement.style.setProperty('--balance-length', balanceElement.textContent.length);
                    }
                    
                    // Update mobile balance if it exists
                    const mobileBalance = document.querySelector('.mobile-menu .balance');
                    if (mobileBalance) {
                        mobileBalance.textContent = `Balance: $${data.balance} USD`;
                    }

                    // Update stats widgets
                    const shippedWidget = document.querySelector('.stat-widget:first-child h3');
                    if (shippedWidget) {
                        shippedWidget.textContent = `#${data.shipped}`;
                    }

                    const spentWidget = document.querySelector('.stat-widget:last-child h3');
                    if (spentWidget) {
                        spentWidget.textContent = `$${data.spent} USD`;
                    }

                    // Update chart data
                    window.CHART_DATA = {
                        shipments: data.shipped_chart,
                        spending: data.spent_chart,
                        labels: data.date_label
                    };

                    // Refresh the active chart
                    const activeButton = document.querySelector('.graph-control-btn.active');
                    createChart(activeButton.id === 'showShipments' ? 'shipments' : 'spending');

                } catch (error) {
                    console.error('Failed to update stats:', error);
                }
            }

            function toTitleCase(str) {
                return str.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
            }
            function levenshteinDistance(a, b) {
                const matrix = [];
                for (let i = 0; i <= b.length; i++) {
                    matrix[i] = [i];
                }
                for (let j = 0; j <= a.length; j++) {
                    matrix[0][j] = j;
                }
                for (let i = 1; i <= b.length; i++) {
                    for (let j = 1; j <= a.length; j++) {
                        if (b.charAt(i - 1) === a.charAt(j - 1)) {
                            matrix[i][j] = matrix[i - 1][j - 1];
                        } else {
                            matrix[i][j] = Math.min(
                                matrix[i - 1][j - 1] + 1,
                                matrix[i][j - 1] + 1,
                                matrix[i - 1][j] + 1
                            );
                        }
                    }
                }
                return matrix[b.length][a.length];
            }
            function findClosestProvince(input, options) {
                let closestMatch = '';
                let minDistance = Infinity;

                options.forEach(option => {
                    const distance = levenshteinDistance(input.toLowerCase(), option.toLowerCase());
                    if (distance < minDistance) {
                        minDistance = distance;
                        closestMatch = option;
                    }
                });

                return closestMatch;
            }

            async function parseAddress(address) {
                try {
                    if (!address.trim()) return null;
                    const encodedAddress = encodeURIComponent(address);
                    const response = await fetch(`/application/parse?address=${encodedAddress}`, {
                        method: 'GET'
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const data = await response.json();
                    if (data.error) {
                        throw new Error(data.error);
                    }
                    const addressData = data.address;
                    const debugData = data.debug?.libpostal || [];
                    let name = data.address.full_name || '';
                    let company = data.address.company || '';
                    let address1 = addressData.address1 || '';
                    let address2 = addressData.address2 || '';
                    if (address1 && address2 && address2.toLowerCase() !== 'united states') {
                        address1 += ', ' + address2;
                        address2 = '';
                    }
                    let country = addressData.country_id || 'US';
                    if (country.length === 2) {
                        country = countryCodeToName[country.toUpperCase()] || country;
                    }
                    const parsedAddress = {
                        name: name,
                        company: company,
                        address1: address1,
                        address2: address2,
                        city: addressData.city || '',
                        state_province: addressData.region_id ? addressData.region_id.toUpperCase() : '',
                        zip_postal: addressData.postcode || '',
                        phone: '',
                        country: country
                    };
                    return parsedAddress;
                } catch (error) {
                    return null;
                }
            }
            async function fillFormFields(parsedAddress, prefix) {
                if (!parsedAddress) return;
                
                // Fill basic fields
                $(`#${prefix}_name`).val(parsedAddress.name);
                $(`#${prefix}_company`).val(parsedAddress.company);
                $(`#${prefix}_address1`).val(parsedAddress.address1);
                $(`#${prefix}_address2`).val(parsedAddress.address2);
                $(`#${prefix}_city`).val(parsedAddress.city);
                $(`#${prefix}_zip_postal`).val(parsedAddress.zip_postal);
                $(`#${prefix}_phone`).val(parsedAddress.phone);
                
                // Handle country selection first
                const $countrySelect = $(`#${prefix}_country`);
                $countrySelect.val(parsedAddress.country);
                
                // Trigger country change to update state/province options
                $countrySelect.trigger('change');
                
                // Handle state/province selection
                const $stateSelect = $(`#${prefix}_state_province`);
                const stateValue = parsedAddress.state_province.toUpperCase();
                const countryClass = parsedAddress.country === 'Canada' ? 'CA' : 'US';
                
                // Wait for country change to complete
                setTimeout(() => {
                    // Find matching option by value or text
                    const $matchingOption = $stateSelect.find(`option.${countryClass}`).filter(function() {
                        const optionValue = $(this).val().toUpperCase();
                        const optionText = $(this).text().toUpperCase();
                        return optionValue === stateValue || optionText.includes(stateValue);
                    });

                    if ($matchingOption.length) {
                        const matchedValue = $matchingOption.val();
                        $stateSelect.val(matchedValue);
                    }
                    
                    // Update floating labels
                    $('.input-container input, .input-container select').each(function() {
                        $(this).siblings('label').toggleClass('focused', this.value !== '');
                    });
                }, 100);
            }
            function toggleProvinceSelection(countrySelect, provinceContainer) {
                provinceContainer.val(''); 
                provinceContainer.prop('disabled', false).removeClass('disabled');
                if (countrySelect === 'Canada') {
                    provinceContainer.find('option').hide(); 
                    provinceContainer.find('.CA').show(); 
                } else if (countrySelect === 'United States') {
                    provinceContainer.find('option').hide(); 
                    provinceContainer.find('.US').show(); 
                    provinceContainer.prop('disabled', false).removeClass('disabled');
                } else {
                    provinceContainer.addClass('disabled').prop('disabled', true).val('');
                }
            }
            function handleCountryChange($countrySelect) {
                const country = $countrySelect.val();
                const $stateSelect = $countrySelect.closest('.form-section').find('[id$="_state_province"]');
                
                // Reset state/province field
                $stateSelect.val('');
                
                // Hide all options first
                $stateSelect.find('option:not(:first)').hide();
                
                if (country === 'United States') {
                    $stateSelect.find('option.US').show();
                    $stateSelect.prop('disabled', false);
                    $stateSelect.removeClass('disabled');
                    $stateSelect.css('background-color', '');
                    $stateSelect.css('cursor', 'pointer');
                } else if (country === 'Canada') {
                    $stateSelect.find('option.CA').show();
                    $stateSelect.prop('disabled', false);
                    $stateSelect.removeClass('disabled');
                    $stateSelect.css('background-color', '');
                    $stateSelect.css('cursor', 'pointer');
                } else {
                    $stateSelect.prop('disabled', true);
                    $stateSelect.addClass('disabled');
                    $stateSelect.css('background-color', 'var(--input-border)');
                    $stateSelect.css('cursor', 'not-allowed');
                    $stateSelect.val('');
                }
            }

            async function updateSenderAddressDropdown() {
                try {
                    const response = await fetch('/application/address/read');
                    if (!response.ok) throw new Error('Failed to fetch addresses');
                    
                    const addresses = await response.json();
                    const $dropdown = $('#sender_address');
                    const $newAddressForm = $('#new-sender-address');
                    const $pasteButton = $('#sender-paste-address-button');
                    
                    // Clear existing options
                    $dropdown.empty();

                    console.log(addresses);
                    
                    // Track if we have any addresses
                    const addressEntries = Object.entries(addresses);
                    const hasAddresses = addressEntries.length > 0;

                    console.log(addressEntries);
                    
                    // Add saved addresses if they exist
                    if (hasAddresses) {
                        addressEntries.forEach(([id, address]) => {
                            const option = $('<option>', {
                                value: id,
                                text: `${address.nickname ? `${toTitleCase(address.nickname)} - ` : ''}${toTitleCase(address.address1)}, ${toTitleCase(address.city)}, ${address.state_province.toUpperCase()} ${address.zip_postal.toUpperCase()}`
                            });
                            $dropdown.append(option);
                        });
                    }
                    
                    // Add "Add new address" option
                    const newOption = $('<option>', {
                        value: 'new',
                        text: 'Add new address'
                    });
                    $dropdown.append(newOption);
                    
                    // If no addresses exist, show the new address form
                    if (!hasAddresses) {
                        $dropdown.val('new');
                        $newAddressForm.show();
                        $pasteButton.show();
                        $('#new-sender-address input[required]').each(function() {
                            $(this).data('originally-required', true);
                        });
                    } else {
                        // Select first address if available
                        $dropdown.val(addressEntries[0][0]);
                        $newAddressForm.hide();
                        $pasteButton.hide();
                    }
                    
                    // Update form visibility and fields
                    handleSenderAddressChange();
                    
                } catch (error) {
                    console.error('Failed to update addresses:', error);
                    showAlert('Failed to load saved addresses!', 'error');
                    
                    // Show new address form as fallback
                    const $dropdown = $('#sender_address');
                    const $newAddressForm = $('#new-sender-address');
                    const $pasteButton = $('#sender-paste-address-button');
                    
                    $dropdown.empty().append($('<option>', {
                        value: 'new',
                        text: 'Add new address'
                    }));
                    
                    $dropdown.val('new');
                    $newAddressForm.show();
                    $pasteButton.show();
                }
            }
            function handleSenderAddressChange() {
                const $dropdown = $('#sender_address');
                const $newAddressForm = $('#new-sender-address');
                const $pasteButton = $('#sender-paste-address-button');
                const $senderFields = $newAddressForm.find('input, select');
                
                if ($dropdown.val() === 'new') {
                    // Show new address form
                    $newAddressForm.show();
                    $pasteButton.show();
                    
                    // Reset and enable required fields
                    $senderFields.each(function() {
                        if ($(this).data('originally-required')) {
                            $(this).prop('required', true);
                        }
                        if ($(this).attr('id') === 'sender_country') {
                            $(this).val('United States'); // Default to USA
                            handleCountryChange($(this)); // Handle province visibility
                        } else {
                            $(this).val('');
                        }
                    });
                    
                } else {
                    // Hide form for saved addresses
                    $newAddressForm.hide();
                    $pasteButton.hide();
                    
                    // Remove required attributes
                    $senderFields.each(function() {
                        if ($(this).prop('required')) {
                            $(this).data('originally-required', true);
                            $(this).prop('required', false);
                        }
                    });
                    
                    // Fill form with selected address if available
                    fillSavedAddress($dropdown.val());
                }
                
                // Update floating labels
                $senderFields.each(function() {
                    const $label = $(this).siblings('label');
                    $label.toggleClass('focused', $(this).val() !== '');
                });
            }
            async function fillSavedAddress(addressId) {
                try {
                    const response = await fetch('/application/address/read');
                    if (!response.ok) throw new Error('Failed to fetch addresses');
                    
                    const addresses = await response.json();
                    const address = addresses[addressId];
                    
                    if (address) {
                        fillFormFields(address, "sender");
                    }
                } catch (error) {
                    showAlert('System Offline: Failed to Load Address details', 'error');
                }
            }
            async function saveNewAddress() {
                if (!$('#save_sender_address').checked) {
                    return null;
                }
                $('#save_sender_address').prop('checked', false);
                const addressData = {
                    nickname: $('#sender_nickname').val().trim(),
                    name: $('#sender_name').val().trim(),
                    company: $('#sender_company').val().trim(),
                    phone: $('#sender_phone').val().trim(),
                    address1: $('#sender_address1').val().trim(),
                    address2: $('#sender_address2').val().trim(),
                    city: $('#sender_city').val().trim(),
                    state_province: $('#sender_state_province').val().trim(),
                    zip_postal: $('#sender_zip_postal').val().trim(),
                    country: $('#sender_country').val().trim()
                };

                try {
                    const response = await fetch('/application/address/create', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ address: addressData })
                    });

                    if (!response.ok) {
                        const error = await response.json();
                        throw new Error(error.error || 'Failed to save address');
                    }

                    const data = await response.json();
                    await updateSenderAddressDropdown();
                    
                    // Select the newly created address
                    $('#sender_address').val(data.id).trigger('change');
                    
                    // Show success message
                    showAlert(`Address ${toTitleCase(addressData.address1)} - ${toTitleCase(addressData.city)}, ${addressData.state_province.toUpperCase()} ${addressData.zip_postal.toUpperCase()} Successfully Saved to Book!`, 'success');
                    
                    return data.id;
                } catch (error) {
                    console.error('Failed to save address:', error);
                    showAlert(error.message || 'Failed to save address', 'error');
                    return null;
                }
            }

            function updateSignature(event) {
                const $signatureConfirmation = $('#signature_confirmation');
                const $adultSignature = $('#adult_signature');
                const $clickedCheckbox = $(event.target);
                const $otherCheckbox = $clickedCheckbox.attr('id') === 'signature_confirmation' ? $adultSignature : $signatureConfirmation;
                if ($clickedCheckbox.is(':checked')) {
                    $otherCheckbox.prop('checked', false);
                }
            }

            function clearAllFields() {
                $('input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea').val('');
                $('select').prop('selectedIndex', 0);
                $('input[type="checkbox"]').prop('checked', false);
                $('input[type="radio"]:not([value="IMAGE"])').prop('checked', false);
                $('input[type="radio"][value="IMAGE"]').prop('checked', true);
                $('select').trigger('change');
                $('.paste-address-area').remove();
                $('.paste-address').text('Paste Address');
                $('#new-sender-address').hide();
            }
            function updateUnits() {
                const weightUnit = $('#weight_unit').val();
                const dimensionInputs = $('#package_length, #package_width, #package_height');
                const dimensionLabels = dimensionInputs.siblings('.floating-label');
                if (weightUnit === 'lbs') {
                    dimensionInputs.attr('step', '1');
                    dimensionLabels.each(function() {
                        $(this).text($(this).text().replace(/\(.*\)/, '(in)'));
                    });
                } else {
                    dimensionInputs.attr('step', '1');
                    dimensionLabels.each(function() {
                        $(this).text($(this).text().replace(/\(.*\)/, '(cm)'));
                    });
                }
            }
            
            function displayCSVTemplate(event) {  // Add event parameter
                if (event) {
                    event.preventDefault();  // Prevent default anchor behavior
                }
                
                const csvContent = "data:text/csv;charset=utf-8," + 
                    "sender_name,sender_address1,sender_address2,sender_city,sender_state_province,sender_zip_postal," +
                    "receiver_name,receiver_address1,receiver_address2,receiver_city,receiver_state_province,receiver_zip_postal," +
                    "package_weight,package_weight_unit,package_length,package_width,package_height,package_description," +
                    "package_reference1,package_reference2\n";

                const encodedUri = encodeURI(csvContent);
                const link = document.createElement("a");
                link.setAttribute("href", encodedUri);
                link.setAttribute("download", "template.csv");
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                return false;  // Prevent event bubbling
            }

            async function processProvidedCSV(csv) {
                try {
                    const lines = csv.split('\n');
                    if (lines.length < 2) {
                        throw new Error('CSV file is empty or invalid');
                    }

                    // First get the rates
                    if (!cachedRates) {
                        const response = await fetch('/application/rate');
                        const data = await response.json();
                        cachedRates = data.services || {};
                    }
                    
                    // Get manifested status
                    const isManifested = $('#batch_manifest_postage').is(':checked');
                    
                    const shipments = [];
                    let totalCost = 0;
                    
                    // Process each line and validate services
                    for (let i = 1; i < lines.length; i++) {
                        if (!lines[i].trim()) continue;
                        
                        const values = parseCSVLine(lines[i]);
                        const serviceName = String(values[0] || '');
                        
                        // Validate service exists in rates
                        if (!cachedRates[serviceName]) {
                            throw new Error(`Invalid service "${serviceName}" in row ${i}`);
                        }

                        // Check if USPS service is being used with manifested option
                        if (isManifested && serviceName.toLowerCase().startsWith('usps')) {
                            throw new Error('Manifested shipping is not available for USPS services');
                        }

                        // Calculate cost for this shipment
                        const serviceDetails = cachedRates[serviceName];
                        const shipmentCost = isManifested && serviceDetails.manifested_cost ? 
                            serviceDetails.manifested_cost : 
                            serviceDetails.standard_cost;

                        totalCost += shipmentCost;
                        
                        const shipment = {
                            service_name: serviceName,
                            service_cost: shipmentCost,
                            sender_name: String(values[1] || ''),
                            sender_phone: String(values[2] || ''),
                            sender_company: String(values[3] || ''),
                            sender_address1: String(values[4] || ''),
                            sender_address2: String(values[5] || ''),
                            sender_city: String(values[6] || ''),
                            sender_state_province: String(values[7] || ''),
                            sender_zip_postal: String(values[8] || ''),
                            sender_country: String(values[9] || ''),
                            receiver_name: String(values[10] || ''),
                            receiver_phone: String(values[11] || ''),
                            receiver_company: String(values[12] || ''),
                            receiver_address1: String(values[13] || ''),
                            receiver_address2: String(values[14] || ''),
                            receiver_city: String(values[15] || ''),
                            receiver_state_province: String(values[16] || ''),
                            receiver_zip_postal: String(values[17] || ''),
                            receiver_country: String(values[18] || ''),
                            package_length: String(values[19]) || 0,
                            package_width: String(values[20]) || 0,
                            package_height: String(values[21]) || 0,
                            package_weight: String(values[22]) || 0,
                            package_description: String(values[23] || ''),
                            package_reference1: String(values[24] || ''),
                            package_reference2: String(values[25] || '')
                        };
                        
                        shipments.push(shipment);
                    }
                    
                    if (shipments.length === 0) {
                        throw new Error('No valid shipments found in CSV');
                    }
                    
                    cachedBatchShipments = shipments; // Reset results

                    // Group services for summary
                    const serviceGroups = shipments.reduce((acc, shipment) => {
                        const baseService = shipment.service_name.split(',')[0];
                        if (!acc[baseService]) {
                            acc[baseService] = {
                                count: 0,
                                totalCost: 0
                            };
                        }
                        acc[baseService].count++;
                        acc[baseService].totalCost += shipment.service_cost;
                        return acc;
                    }, {});

                    const format = $('#batch input[name="label-type"]:checked').val();
                    const sampleShipment = shipments[0];
                    const service = getServiceDetails(sampleShipment.service_name);
                    $('#batch-purchase .shipping-info-container').html(`
                        <div class="shipping-details-section">
                            <h3><i class="fas fa-info-circle"></i> Batch Overview</h3>
                            <div class="batch-summary">
                                <p><strong>Total Shipments:</strong> <span id="total-shipments">#${shipments.length}</span></p>
                                <p><strong>Total Costs:</strong> $<span id="total-cost">${totalCost.toFixed(2)} USD</span></p>
                                <p><strong>Services Breakdown:</strong></p>
                                ${Object.entries(serviceGroups).map(([service, details]) => `
                                    <p style="margin-left: 20px;">• ${formatDisplayName(service)} (#${details.count}) - $${details.totalCost.toFixed(2)} USD</p>
                                `).join('')}
                            </div>
                        </div>
                        <div class="input-container">
                            <input type="number" id="sample-number" class="form-control" max="${shipments.length}" value="1">
                            <label for="sample-number" class="floating-label">Shipment Index to View</label>
                        </div>
                        <div class="shipping-address-container">
                            <div class="shipping-details-section">
                                <h3><i class="fas fa-box"></i> Ship From</h3>
                                <div class="address-details">
                                    <p><strong>${sampleShipment.sender_name}</strong></p>
                                    ${sampleShipment.sender_company ? `<p>${sampleShipment.sender_company}</p>` : ''}
                                    ${sampleShipment.sender_phone ? `<p>${sampleShipment.sender_phone}</p>` : ''}
                                    <p>${sampleShipment.sender_address1}</p>
                                    ${sampleShipment.sender_address2 ? `<p>${sampleShipment.sender_address2}</p>` : ''}
                                    <p>${sampleShipment.sender_city}, ${sampleShipment.sender_state_province} ${sampleShipment.sender_zip_postal}</p>
                                    <p>${countryCodeToName[sampleShipment.sender_country] || sampleShipment.sender_country}</p>
                                </div>
                            </div>
                            <div class="shipping-details-section">
                                <h3><i class="fas fa-map-marker-alt"></i> Ship To</h3>
                                <div class="address-details">
                                    <p><strong>${sampleShipment.receiver_name}</strong></p>
                                    ${sampleShipment.receiver_company ? `<p>${sampleShipment.receiver_company}</p>` : ''}
                                    ${sampleShipment.receiver_phone ? `<p>${sampleShipment.receiver_phone}</p>` : ''}
                                    <p>${sampleShipment.receiver_address1}</p>
                                    ${sampleShipment.receiver_address2 ? `<p>${sampleShipment.receiver_address2}</p>` : ''}
                                    <p>${sampleShipment.receiver_city}, ${sampleShipment.receiver_state_province} ${sampleShipment.receiver_zip_postal}</p>
                                    <p>${countryCodeToName[sampleShipment.receiver_country] || sampleShipment.receiver_country}</p>
                                </div>
                            </div>
                        </div>
                        <div class="shipping-details-section">
                            <h3><i class="fas fa-truck"></i> Service Options</h3>
                            <div id="batch-service-details" class="service-details">
                                <p><strong>Selected Service:</strong></p>
                                <p>${service.name} • ${service.region}</p>
                                <p><strong>Added Service(s):</strong></p>
                                ${
                                    (service.features.adult_signature || 
                                    service.features.signature || 
                                    service.features.saturday_delivery || 
                                    service.features.restricted_delivery || 
                                    service.manifested) 
                                    ? 
                                    `<p>
                                        ${service.features.adult_signature ? 'Adult Signature Required Included<br>' : ''}
                                        ${service.features.signature ? 'Signature Required Included<br>' : ''}
                                        ${service.features.saturday_delivery ? 'Saturday Delivery Included<br>' : ''}
                                        ${service.features.restricted_delivery ? 'Restricted Delivery Included<br>' : ''}
                                        ${service.features.manifested ? 'Manifested Postage Included<br>' : ''}
                                    </p>`
                                    : 
                                    '<p>No Additional Services Added</p>'
                                }
                                <p><strong>Package Details:</strong></p>
                                <p>Weight: ${sampleShipment.package_weight} ${sampleShipment.package_weight_unit || 'LBS'} • Dimensions: ${sampleShipment.package_length}" × ${sampleShipment.package_width}" × ${sampleShipment.package_height}"</p>
                                <p class="delivery-estimate">
                                    <i class="fas fa-clock"></i> ${getDeliveryEstimate(sampleShipment.service_name)}
                                </p>
                            </div>
                        </div>
                        <div class="shipping-details-section">
                            <h3><i class="fas fa-file"></i> Shipment Files</h3>
                            <div class="batch-summary batch-files">

                                <div class="file-item">
                                    <div class="file-info">
                                        <i class="file-icon fas fa-file-alt"></i>
                                        <span class="file-name">errors.txt</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <div class="status-container">
                                            <div class="status-text-right">
                                                <div class="status-line">Pending</div>
                                            </div>
                                            <i class="status-icon fas fa-clock"></i>
                                        </div>
                                        <button class="batch-download-btn" disabled>
                                            <i class="fas fa-download"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="file-item">
                                    <div class="file-info">
                                        <i class="file-icon fas fa-file-${format === 'IMAGE' ? 'archive' : 'pdf'}"></i>
                                        <span class="file-name">shipments.${format === 'IMAGE' ? 'zip' : 'pdf'}</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <div class="status-container">
                                            <div class="status-text-right">
                                                <div class="status-line">Pending</div>
                                            </div>
                                            <i class="status-icon fas fa-clock"></i>
                                        </div>
                                        <button class="batch-download-btn" disabled>
                                            <i class="fas fa-download"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="file-item">
                                    <div class="file-info">
                                        <i class="file-icon fas fa-file-alt"></i>
                                        <span class="file-name">shipments.csv</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <div class="status-container">
                                            <div class="status-text-right">
                                                <div class="status-line">Pending</div>
                                            </div>
                                            <i class="status-icon fas fa-clock"></i>
                                        </div>
                                        <button class="batch-download-btn" disabled>
                                            <i class="fas fa-download"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="file-item">
                                    <div class="file-info">
                                        <i class="file-icon fas fa-file-alt"></i>
                                        <span class="file-name">trackings.txt</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <div class="status-container">
                                            <div class="status-text-right">
                                                <div class="status-line">Pending</div>
                                            </div>
                                            <i class="status-icon fas fa-clock"></i>
                                        </div>
                                        <button class="batch-download-btn" disabled>
                                            <i class="fas fa-download"></i>
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="shipping-details-section">
                            <h3><i class="fas fa-list"></i> All Shipments</h3>
                            <div id="shipments-list" class="batch-summary" style="max-height: 450px; overflow-y: auto;">
                                <!-- Will be populated dynamically -->
                            </div>
                        </div>
                    `);

                    // Display shipments list
                    let shipmentsListHTML = `
                    <div class="batch-search-bar" style="margin-bottom: 20px;">
                        <i class="fas fa-search"></i>
                        <input type="text" 
                            id="shipments-search"
                            class="batch-search-input"
                            placeholder="Search by recipient, address, reference..."
                            autocomplete="off"
                            spellcheck="false">
                    </div>
                    `;

                    shipments.forEach((shipment, index) => {
                        const courier = getServiceDetails(shipment.service_name).courier.toLowerCase();
                        shipmentsListHTML += `
                            <div class="shipment-card">
                                <div style="display: flex; flex-direction: column;">
                                    <div><strong>Shipment #${index + 1}</strong></div>
                                    <div style="display: flex; align-items: center; font-size: 0.9em; margin: 5px 0;">
                                        <img src="/static/png/${courier}.png" 
                                                alt="${courier}" 
                                                class="history-courier-logo"
                                                style="width: 20px; height: 20px; object-fit: contain; margin-top: 5px;"
                                                type="image/x-icon" 
                                                crossorigin="anonymous">
                                        <span style="margin-left: 5px;">${formatDisplayName(shipment.service_name)}</span>
                                    </div>
                                    <div class="shipment-details address-details" style="padding-left: 0">
                                        <p><strong>To: ${shipment.receiver_name}${shipment.receiver_company ? ` - ${shipment.receiver_company}` : ''}</strong></p>
                                        <p>${shipment.receiver_address1}${shipment.receiver_address2 ? ` - ${shipment.receiver_address2}` : ''}</p>
                                        <p>${shipment.receiver_city}, ${shipment.receiver_state_province} ${shipment.receiver_zip_postal}</p>
                                        ${shipment.package_description ? `<p class="ref-text">Description: ${shipment.package_description}</p>` : ''}
                                        ${shipment.package_reference1 || shipment.package_reference2 ? 
                                            `<p class="ref-text">Reference(s): ${[
                                                shipment.package_reference1, 
                                                shipment.package_reference2
                                            ].filter(Boolean).join(', ')}</p>` : 
                                            ''}
                                        <p class="service-cost">Cost: $${shipment.service_cost.toFixed(2)} USD</p>
                                    </div>
                                    <div class="shipment-status pending">
                                        <i class="fas fa-clock"></i>
                                        <span>Pending Processing</span>
                                    </div>
                                </div>
                            </div>`;
                    });

                    $('#shipments-list').html(shipmentsListHTML);
                    
                    $('#batch-purchase').show();
                    
                    return shipments;
                    
                } catch (error) {
                    console.error('Error processing CSV:', error);
                    showAlert(error.message, 'error');
                    throw error;
                }
            }

            function displayBatchPreview(shipments) {
                $('#total-shipments').text(shipments.length);
                let totalCost = 0;
                let shipmentListHtml = '';
                shipments.forEach((shipment, index) => {
                    const estimatedCost = (Math.random() * 50 + 10).toFixed(2); // Random cost between $10 and $60
                    totalCost += parseFloat(estimatedCost);
                    shipmentListHtml += `
                        <div class="shipment-item">
                            <h4>Shipment #${index + 1}</h4>
                            <p><strong>From:</strong> ${shipment.sender_name}, ${shipment.sender_city}, ${shipment.sender_state_province}</p>
                            <p><strong>To:</strong> ${shipment.receiver_name}, ${shipment.receiver_city}, ${shipment.receiver_state_province}</p>
                            <p><strong>Weight:</strong> ${shipment.package_weight} ${shipment.package_weight_unit}</p>
                            <p><strong>Dimensions:</strong> ${shipment.package_length}x${shipment.package_width}x${shipment.package_height}</p>
                            <p><strong>Estimated Cost:</strong> $${estimatedCost} USD</p>
                        </div>
                    `;
                });
        
                $('#total-cost').text(totalCost.toFixed(2));
                $('#shipment-list').html(shipmentListHtml);
                $('#csv-preview').show();
            }

            function getDeliveryEstimate(serviceName) {
                const lowerName = serviceName.toLowerCase();
                if (lowerName.includes('next day')) {
                    return 'Next Business Day Delivery';
                } else if (lowerName.includes('2nd day')) {
                    return '2 Business Days Delivery';
                } else if (lowerName.includes('3 day')) {
                    return '3 Business Days Delivery';
                } else if (lowerName.includes('ground')) {
                    return '3-5 Business Days Delivery';
                } else if (lowerName.includes('express')) {
                    return '1-2 Business Days Delivery';
                } else if (lowerName.includes('priority')) {
                    return '2-3 Business Days Delivery';
                }
                return '3-5 Business Days Delivery';
            }
            function getTransitDays(serviceName) {
                const name = serviceName.toLowerCase();
                if (name.includes('next day')) {
                    return '1';
                } else if (name.includes('2nd day')) {
                    return '2';
                } else if (name.includes('3 day')) {
                    return '3';
                } else if (name.includes('ground')) {
                    if (name.includes('international')) {
                        return '5-7';
                    }
                    return '3-5';
                } else if (name.includes('express')) {
                    if (name.includes('international')) {
                        return '2-3';
                    }
                    return '1-2';
                } else if (name.includes('priority')) {
                    return '2-3';
                } else if (name.includes('saver')) {
                    return '3-5';
                } else if (name.includes('standard')) {
                    return '4-6';
                }
                return '3-5';
            }
            function getServiceSpeed(serviceName) {
                const name = serviceName.toLowerCase();
                if (name.includes('next day') || name.includes('overnight')) {
                    return 1;
                } else if (name.includes('express early') || name.includes('express plus')) {
                    return 2;
                } else if (name.includes('express') || name.includes('priority mail express')) {
                    return 3;
                } else if (name.includes('2nd day')) {
                    return 4;
                } else if (name.includes('3 day')) {
                    return 5;
                } else if (name.includes('priority') && !name.includes('express')) {
                    return 6;
                } else if (name.includes('saver')) {
                    return 7;
                } else if (name.includes('ground advantage')) {
                    return 8;
                } else if (name.includes('ground')) {
                    return 9;
                } else if (name.includes('standard')) {
                    return 10;
                }
                return 11;
            }
            function getServiceDetails(serviceName) {
                const hasSaturday = serviceName.includes('Saturday Delivery');
                const hasAdultSignature = serviceName.includes('Adult Signature Required');
                const hasSignature = serviceName.includes('Signature Required');
                const hasRestricted = serviceName.includes('Restricted Delivery');
                const speed = getServiceSpeed(serviceName);
                const transitDays = getTransitDays(serviceName);
                let courier = '';
                if (serviceName.toLowerCase().startsWith('fedex')) courier = 'FedEx';
                else if (serviceName.toLowerCase().startsWith('ups')) courier = 'UPS';
                else if (serviceName.toLowerCase().startsWith('usps')) courier = 'USPS';
                let region = 'United States';
                if (serviceName.includes('International')) region = 'International';
                else if (serviceName.includes('Canada')) region = 'Canada';
                return {
                    name: serviceName.split(',')[0],
                    courier: courier,
                    region: region,
                    speed: speed,
                    transit_days: transitDays,
                    features: {
                        saturday_delivery: hasSaturday,
                        adult_signature: hasAdultSignature || hasRestricted,
                        signature: hasSignature && !hasAdultSignature && !hasRestricted,
                        manifested: !serviceName.includes('USPS') && document.getElementById('manifest_postage').checked
                    },
                    validation: {
                        allows_manifested: !serviceName.includes('USPS'),
                        allows_saturday: !serviceName.toLowerCase().startsWith('usps'),
                        compatible_with_adult_signature: hasAdultSignature && hasRestricted,
                        compatible_with_signature: hasSignature && !hasAdultSignature && !hasRestricted,
                        compatible_with_no_signature: !hasSignature && !hasAdultSignature && !hasRestricted
                    }
                };
            }
            function getServiceTag(serviceName) {
                const name = serviceName.toLowerCase();
                if (name.includes('next day') || 
                    name.includes('express') || 
                    name.includes('priority mail express')) {
                    return 'FASTEST';
                } else if (name.includes('ground') || 
                        name.includes('standard') || 
                        name.includes('economy')) {
                    return 'CHEAPEST';
                }
                return 'STANDARD';
            }
            async function displaySingleServices(courier) {
    const $container = $('#service-cards-container');
    
    const loadingOverlay = $('.loading-overlay');
    loadingOverlay.css({
            'animation': 'none',
            'opacity': '1'
        });
        
    loadingOverlay.html(`
        <div class="loading-circle"></div>
        <p>Processing the Pricing List, DO NOT Refresh the Page!</p>
    `);

    // Show overlay with flex display
    try {
        const requiresSignature = $('#signature_confirmation').is(':checked');
        const requiresAdultSignature = $('#adult_signature').is(':checked');
        const requiresSaturdayDelivery = $('#saturday_delivery').is(':checked');
        const receiverCountry = $('#receiver_country').val() || 'United States';
        const senderCountry = $('#sender_address').val() === 'default' ? 'United States' : 
                            $('#sender_country').val() || 'United States';
        
        let region = 'United States';
        if (senderCountry !== receiverCountry) {
            region = 'International';
        } else if (senderCountry === 'Canada' && receiverCountry === 'Canada') {
            region = 'Canada';
        }

        if (!cachedRates) {
            loadingOverlay.css('display', 'flex');    
            const response = await fetch('/application/rate');
            const data = await response.json();
            cachedRates = data.services || {};
        }

        const services = cachedRates;
        $container.empty();

        const filteredServices = Object.entries(services)
            .filter(([serviceName]) => {
                // Basic courier and region matching
                if (!serviceName.toLowerCase().startsWith(courier.toLowerCase())) return false;
                if (!serviceName.includes(region)) return false;

                // Feature matching
                const hasSaturday = serviceName.includes('Saturday Delivery');
                const hasAdultSignature = serviceName.includes('Adult Signature Required');
                const hasSignature = serviceName.includes('Signature Required');
                const hasRestricted = serviceName.includes('Restricted Delivery');
                const isUSPS = serviceName.toLowerCase().startsWith('usps');

                // Saturday delivery logic
                if (!isUSPS && requiresSaturdayDelivery !== hasSaturday) return false;

                // Signature requirements logic
                if (requiresAdultSignature) {
                    return hasAdultSignature && !hasRestricted;
                } else if (requiresSignature) {
                    return hasSignature && !hasAdultSignature && !hasRestricted;
                } else {
                    return !hasSignature && !hasAdultSignature && !hasRestricted;
                }
            })
            .map(([serviceName, details]) => {
                const isManifested = $('#manifest_postage').is(':checked');
                
                if (isManifested && serviceName.includes('USPS')) {
                    throw new Error('Manifested shipping is not available for USPS services');
                }

                return {
                    name: serviceName,
                    cost: isManifested && details.manifested_cost != null ? 
                        details.manifested_cost : details.standard_cost,
                    transit_days: getTransitDays(serviceName),
                    speed: getServiceSpeed(serviceName)
                };
            })
            .sort((a, b) => a.cost !== b.cost ? b.cost - a.cost : a.speed - b.speed);

        if (filteredServices.length === 0) {
            $container.html(`
                <div class="no-services text-center p-4">
                    <p>No services available for ${region} shipping with the selected options.</p>
                </div>
            `);
            return;
        }

        filteredServices.forEach(service => {
            const displayName = service.name
                .split(',')[0]
                .replace(/(?:Adult |)Signature Required|United States|International|Canada/g, '')
                .trim();

            const $serviceCard = $(`
                <div class="service-card">
                    <div class="service-header">
                        <h3>${displayName}</h3>
                        <span class="service-tag">${getServiceTag(service.name)}</span>
                    </div>
                    <p class="delivery-estimate">
                        <i class="fas fa-clock"></i> ${service.transit_days} Business Days Delivery
                    </p>
                    <div class="price-section">
                        <div class="price">$${service.cost.toFixed(2)}</div>
                    </div>
                    <div class="action-section">
                        <button class="ship-now">Ship Now</button>
                    </div>
                </div>
            `);

            // Attach click handler directly instead of using onclick attribute
            $serviceCard.find('.ship-now').on('click', () => selectService(service.name));
            
            $container.append($serviceCard);
        });

    } catch (error) {
        console.error('Error displaying services:', error);
        $container.html(`
            <div class="error-message text-center p-4 text-danger">
                <p>${error.message || 'Error loading services. Please try again.'}</p>
            </div>
        `);
    } finally {
        // Add fade out animation before hiding
        loadingOverlay.css({
            'animation': 'fadeOut 0.3s ease-in-out forwards'
        });
        
        // Wait for animation to complete before hiding
        setTimeout(() => {
            loadingOverlay.hide();
            // Reset the loading text
            loadingOverlay.html(`
                <div class="loading-circle"></div>
                <p>Contacting Validators, DO NOT Refresh the Page!</p>
            `);
        }, 300);
    }
}
            
            async function submitShipment(
                senderName, senderCompany, senderAddress1, senderAddress2, senderCity, 
                senderState, senderZip, senderCountry, senderPhone, receiverName, 
                receiverCompany, receiverAddress1, receiverAddress2, receiverCity, 
                receiverState, receiverZip, receiverCountry, receiverPhone, weight, 
                weightUnit, length, width, height, description, reference1, reference2, 
                service, manifested, version, format
            ) {
                const data = {
                    sender: {
                        sender_name: senderName, 
                        sender_company: senderCompany, 
                        sender_address1: senderAddress1,
                        sender_address2: senderAddress2, 
                        sender_city: senderCity, 
                        sender_state_province: senderState,
                        sender_zip_postal: senderZip, 
                        sender_country: senderCountry, 
                        sender_phone: senderPhone
                    },
                    receiver: {
                        receiver_name: receiverName, 
                        receiver_company: receiverCompany, 
                        receiver_address1: receiverAddress1,
                        receiver_address2: receiverAddress2, 
                        receiver_city: receiverCity, 
                        receiver_state_province: receiverState,
                        receiver_zip_postal: receiverZip,
                        receiver_country: receiverCountry, 
                        receiver_phone: receiverPhone
                    },
                    package: {
                        package_weight: weight, 
                        package_weight_unit: weightUnit, 
                        package_length: length,
                        package_width: width,
                        package_height: height,
                        package_description: description,
                        package_reference1: reference1,
                        package_reference2: reference2
                    },
                    service_name: service, 
                    manifested, version, format
                };

                try {
                    const response = await fetch('/application/buy', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    });
                    const shipmentData = await response.json();
                    console.log(shipmentData);
                    if (!response.ok) {
                        throw new Error(shipmentData.message || `HTTP error! status: ${response.status}`);
                    }
                    return {
                        base64_encoded_label: shipmentData.base64_encoded_pdf || shipmentData.base64_encoded_image,
                        tracking_number: shipmentData.tracking_number,
                        message: shipmentData.message
                    };
                } catch (error) {
                    console.error('Error:', error);
                    return {
                        message: error.message || 'Failed to generate label'
                    }
                }
            }
            function detectMimeType(base64String) {
                const prefix = base64String.substring(0, 100);
                if (prefix.includes('JVBER')) return 'application/pdf';
                if (prefix.includes('iVBOR') || prefix.includes('/9j/')) return 'image/png';
                if (prefix.includes('R0lGO')) return 'image/gif';
                if (prefix.includes('UklGR')) return 'image/webp';
                return 'image/png';
            }

            const themeToggle = document.getElementById('theme-toggle');
            if (themeToggle) {
                themeToggle.addEventListener('click', toggleTheme);
            }
            const savedTheme = localStorage.getItem('theme');
            const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
            if (savedTheme === 'dark' || (savedTheme === null && prefersDarkScheme.matches)) {
                setTheme(true);
            } else {
                setTheme(false);
            }
            prefersDarkScheme.addListener((e) => {
                if (localStorage.getItem('theme') === null) {
                    setTheme(e.matches);
                }
            });
        
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            menuToggle.addEventListener('click', function(event) {
                event.stopPropagation();
                mobileMenu.classList.toggle('active');
                menuToggle.innerHTML = mobileMenu.classList.contains('active') 
                    ? '<i class="fas fa-times"></i>' 
                    : '<i class="fas fa-bars"></i>';
            });
            document.addEventListener('click', function(event) {
                if (!event.target.closest('.navbar-mobile') && mobileMenu.classList.contains('active')) {
                    mobileMenu.classList.remove('active');
                    menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                }
            });
            mobileMenu.addEventListener('click', function(event) {
                event.stopPropagation();
            });
            const mobileMenuLinks = mobileMenu.getElementsByTagName('a');
            for (let link of mobileMenuLinks) {
                link.addEventListener('click', function() {
                    for (let l of mobileMenuLinks) {
                        l.classList.remove('active');
                    }
                    this.classList.add('active');
                    mobileMenu.classList.remove('active');
                    menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                });
            }
        
            const ctx = document.getElementById('shipmentGraph').getContext('2d');
            let chart;
            createChart('shipments');
            window.addEventListener('resize', function() {
                const activeButton = document.querySelector('.graph-control-btn.active');
                createChart(activeButton.id === 'showShipments' ? 'shipments' : 'spending');
            });
            themeToggle.addEventListener('click', function() {
                setTimeout(() => {
                    const activeButton = document.querySelector('.graph-control-btn.active');
                    createChart(activeButton.id === 'showShipments' ? 'shipments' : 'spending');
                }, 0);
            });
            document.getElementById('showShipments').addEventListener('click', function() {
                this.classList.add('active');
                document.getElementById('showSpending').classList.remove('active');
                createChart('shipments');
            });
            document.getElementById('showSpending').addEventListener('click', function() {
                this.classList.add('active');
                document.getElementById('showShipments').classList.remove('active');
                createChart('spending');
            });

            $(window).on('hashchange', handleNavigation);
            $(document).ready(handleNavigation);

            function resetFormsAndButtons() {
                // Reset all forms
                $('#single')[0]?.reset();
                $('#batch')[0]?.reset();
                
                // Clear form fields
                $('input[type="text"], input[type="number"], textarea').val('');
                $('select').prop('selectedIndex', 0);
                $('input[type="checkbox"]').prop('checked', false);
                $('input[type="radio"]:not([value="IMAGE"])').prop('checked', true);
                $('input[type="radio"][value="IMAGE"]').prop('checked', true);
                
                // Reset paste address areas and buttons
                $('.paste-address-area').remove();
                $('.paste-address-button').text('Paste Address');
                
                // Hide new sender address form
                $('#new-sender-address').hide();
                $('#sender-paste-address-button').hide();
                
                // Reset courier selection
                $('.courier-button').removeClass('active');
                
                // Clear service cards
                $('#service-cards-container').empty();
                
                // Reset rubber stamps section
                $('#rubber-stamp-fields').hide();
                
                // Reset purchase overlay
                $('#single-purchase').hide();
                $('.tracking-status.awaiting').show();
                $('.tracking-status.confirmed').hide();
                
                
                // Trigger change events for select elements
                $('select').trigger('change');
            }

            $('#home, a[href="#purchase, .home, #home-button"]').on('click', function(event) {
                event.preventDefault();
                clearAllFields();
                resetFormsAndButtons();
                window.location.href = '#purchase';
            });
            
            $(window).on('hashchange', handleHash);
            $(document).ready(function() {
                handleHash();
                $('#sender_country, #receiver_country').val('United States').each(function() {
                    handleCountryChange($(this));
                });
            });
            function handleHash() {
                const hash = window.location.hash;
                if (hash === '#rate-single' || hash === '#rate-batch') {
                    $('#stats').hide();
                    $('#graph').hide(); 
                    $('#ship').hide();
                    $('#home').show();
                    document.getElementById('home').style.display = 'flex';
                    if (hash === '#rate-batch') {
                        $('#single').hide();
                        $('#batch').show();
                    } else {
                        $('#single').show(); 
                        $('#batch').hide();
                        updateSenderAddressDropdown();
                        
                    }
                }
            }
            $('#single-button, #batch-button, a[href="#rate-single"], a[href="#rate-batch"]').on('click', function() {
                $('#stats').hide();
                $('#graph').hide();
                $('#ship').hide();
                $('#home').show();
                document.getElementById('home').style.display = 'flex';
                if (this.id === 'batch-button') {
                    $('#single').hide();
                    $('#batch').show();
                    window.location.href = '#rate-batch';
                } else {
                    $('#single').show();
                    $('#batch').hide(); 
                    window.location.href = '#rate-single';
                }
                $('#ship').hide();
            });

            $('#edit-single').on('click', function() {
                $('#single-service').hide();
                $('#single').show();
            });
        
            $('input, select').attr('placeholder', ' ');
            $('.input-container input, .input-container select').on('focus blur', function (e) {
                $(this).siblings('label').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
            });
            $('.input-container select').trigger('change');

            $('.paste-address-button').on('click', function(e) {
                e.preventDefault();
                const target = $(this).data('target');
                const container = $(`#${target}_name`).closest('.form-section');
                if ($(this).text() === 'Paste Address') {
                    container.find('.section-header').after(`
                        <div class="paste-address-area" id="${target}-paste-area">
                            <textarea class="form-control paste-address-textarea" placeholder="Paste your address here!"></textarea>
                        </div>
                    `);
                    $(this).text('Close Paste Address');
                    $(`#${target}-paste-area .paste-address-textarea`).on('input', async function() {
                        const address = $(this).val();
                        const parsedAddress = await parseAddress(address);
                        if (parsedAddress) {
                            fillFormFields(parsedAddress, target);
                        }
                    });
                } else {
                    container.find('.paste-address-area').remove();
                    $(this).text('Paste Address');
                }
            });

            $('#sender_address').on('change', async function() {
                const $newAddressForm = $('#new-sender-address');
                const $pasteButton = $('#sender-paste-address-button');
                const $senderFields = $newAddressForm.find('input, select');
                
                if ($(this).val() === 'new') {
                    // Show new address form
                    $newAddressForm.show();
                    $pasteButton.show();
                    
                    // Clear all fields and set US as default country
                    $senderFields.each(function() {
                        if ($(this).attr('id') === 'sender_country') {
                            $(this).val('United States');
                            // Trigger country change to update state/province
                            handleCountryChange($(this));
                        } else {
                            $(this).val('');
                        }
                        if ($(this).data('originally-required')) {
                            $(this).prop('required', true);
                        }
                    });
                } else {
                    // Hide new address form
                    $newAddressForm.hide();
                    $pasteButton.hide();
                    
                    // Remove required attributes
                    $senderFields.each(function() {
                        if ($(this).prop('required')) {
                            $(this).data('originally-required', true);
                            $(this).prop('required', false);
                        }
                    });
                    
                    // Fetch and fill selected address
                    try {
                        fillSavedAddress($(this).val());
                    } catch (error) {
                        console.error('Failed to fetch address details:', error);
                        showAlert('Failed to load address details', 'error');
                    }
                }
                
                // Update floating labels
                $senderFields.each(function() {
                    const $label = $(this).siblings('label');
                    $label.toggleClass('focused', $(this).val() !== '');
                });
            });

            // Handle country changes
            $('#sender_country, #receiver_country').on('change', function() {
                handleCountryChange($(this));
            });
            
            $('#weight_unit, #receiver_country, #sender_country').on('change', updateUnits);
            $('#rubber_stamps').change(function() {
                const rubberStampFields = $('#rubber-stamp-fields').find('[required]');
                if (this.checked) {
                    $('#rubber-stamp-fields').show();
                    rubberStampFields.prop('required', true);
                } else {
                    $('#rubber-stamp-fields').hide();
                    rubberStampFields.prop('required', false);
                }
            });
            $('#rubber_stamps').trigger('change');
            $('#signature_confirmation, #adult_signature').on('change', updateSignature);

            $('#single-rate-button').on('click', function(event) {
                event.preventDefault();
                const form = document.getElementById('single');
                let hasInvalidFields = false;
                const receiverFields = form.querySelectorAll('[id^="receiver_"][required]');
                let firstInvalidField = null;
                receiverFields.forEach(field => {
                    if (!field.value.trim()) {
                        hasInvalidFields = true;
                        firstInvalidField = firstInvalidField || field;
                    }
                });
                if (hasInvalidFields) {
                    firstInvalidField.focus();
                    firstInvalidField.reportValidity();
                    return;
                }
                const senderAddressSelect = document.getElementById('sender_address');
                if (senderAddressSelect.value === '') {
                    senderAddressSelect.focus();
                    senderAddressSelect.reportValidity();
                    return;
                }
                console.log(senderAddressSelect.value);
                if (senderAddressSelect.value === 'new') {
                    console.log(document.getElementById('new-sender-address'));
                    const newSenderForm = document.getElementById('new-sender-address').querySelectorAll('[id^="sender_"][required]');
                    console.log(newSenderForm);
                    let firstInvalidSenderField = null;
                    newSenderForm.forEach(field => {
                        console.log(field);
                        console.log($(field).is(':visible'));
                        if ($(field).is(':visible') && !field.value.trim()) {
                            hasInvalidFields = true;
                            firstInvalidSenderField = firstInvalidSenderField || field;
                        }
                    });
                    if (hasInvalidFields) {
                        firstInvalidSenderField.focus();
                        firstInvalidSenderField.reportValidity();
                        return;
                    }
                }
                const packageFields = form.querySelectorAll('[id^="package_"][required]');
                let firstInvalidPackageField = null;
                packageFields.forEach(field => {
                    if (!field.value.trim() || (field.type === 'number' && parseFloat(field.value) <= 0)) {
                        hasInvalidFields = true;
                        firstInvalidPackageField = firstInvalidPackageField || field;
                    }
                });
                if (hasInvalidFields) {
                    firstInvalidPackageField.focus();
                    firstInvalidPackageField.reportValidity();
                    return;
                }
                $('#single').hide();
                $('#single-service').show();
                $('#single-processing .courier-button').removeClass('active');
                $('#service-cards-container').empty();
            });

            window.selectService = function(serviceName) {

                $('#service-details').attr('data-raw-service', serviceName);
                console.log(serviceName);

                const $versionSelect = $('#service_version');
                $versionSelect.empty();
                
                if (serviceName.toLowerCase().startsWith('usps')) {
                    $versionSelect.append(`
                        <option value="USPSveVS">eVS</option>
                        <option value="USPSvShippo">Shippo</option>
                        <option value="USPSvStore" selected>Store</option>
                        <option value="USPSvUnbranded">Unbranded</option>
                    `);
                } else {
                    $versionSelect.append(`
                        <option value="UPSvRetail" selected>Retail</option>
                        <option value="UPSvWarehouse">Warehouse</option>
                    `);
                }

                const shipFromDetails = {
                    name: toTitleCase($('#sender_name').val() || ''),
                    phone: $('#sender_phone').val() || '',
                    company: toTitleCase($('#sender_company').val() || ''),
                    address1: toTitleCase($('#sender_address1').val() || ''),
                    address2: toTitleCase($('#sender_address2').val() || ''),
                    city: toTitleCase($('#sender_city').val() || ''),
                    state: ($('#sender_state_province').val() || '').toUpperCase(),
                    zip: ($('#sender_zip_postal').val() || '').toUpperCase(),
                    country: toTitleCase($('#sender_country').val() || '')
                };

                const shipToDetails = {
                    name: toTitleCase($('#receiver_name').val() || ''),
                    phone: $('#receiver_phone').val() || '',
                    company: toTitleCase($('#receiver_company').val() || ''),
                    address1: toTitleCase($('#receiver_address1').val() || ''),
                    address2: toTitleCase($('#receiver_address2').val() || ''),
                    city: toTitleCase($('#receiver_city').val() || ''),
                    state: ($('#receiver_state_province').val() || '').toUpperCase(),
                    zip: ($('#receiver_zip_postal').val() || '').toUpperCase(),
                    country: toTitleCase($('#receiver_country').val() || '')
                };
                $('#ship-from-details').html(`
                    <p><strong>${shipFromDetails.name}</strong></p>
                    <p><strong>${shipFromDetails.phone}</strong></p>
                    <p><strong>${shipFromDetails.company}</strong></p>
                    <p>${shipFromDetails.address1}</p>
                    <p>${shipFromDetails.address2}</p>
                    <p>${shipFromDetails.city ? `${shipFromDetails.city}, ` : ''}${shipFromDetails.state} ${shipFromDetails.zip}</p>
                    <p>${shipFromDetails.country}</p>
                `);
                $('#ship-to-details').html(`
                    <p><strong>${shipToDetails.name}</strong></p>
                    <p><strong>${shipToDetails.phone}</strong></p>
                    <p><strong>${shipToDetails.company}</strong></p>
                    <p>${shipToDetails.address1}</p>
                    <p>${shipToDetails.address2}</p>
                    <p>${shipToDetails.city ? `${shipToDetails.city}, ` : ''}${shipToDetails.state} ${shipToDetails.zip}</p>
                    <p>${shipToDetails.country}</p>
                `);
                const service = getServiceDetails(serviceName);
                $('#service-details').html(`
                    <p><strong>Selected Service:</strong></p>
                    <p>${service.name} • ${service.region}</p>
                    <p><strong>Added Service(s):</strong></p>
                    ${
                        (service.features.adult_signature || 
                        service.features.signature || 
                        service.features.saturday_delivery || 
                        service.features.restricted_delivery || 
                        service.manifested) 
                        ? 
                        `<p>
                            ${service.features.adult_signature ? 'Adult Signature Required Included<br>' : ''}
                            ${service.features.signature ? 'Signature Required Included<br>' : ''}
                            ${service.features.saturday_delivery ? 'Saturday Delivery Included<br>' : ''}
                            ${service.features.restricted_delivery ? 'Restricted Delivery Included<br>' : ''}
                            ${service.features.manifested ? 'Manifested Postage Included<br>' : ''}
                        </p>`
                        : 
                        '<p>No Additional Services Added</p>'
                    }
                    <p><strong>Package Details:</strong></p>
                    <p>Weight: ${$('#package_weight').val() || 0} ${$('#weight_unit').val().toUpperCase()} • Dimensions: ${$('#package_length').val() || 0}" × ${$('#package_width').val() || 0}" × ${$('#package_height').val() || 0}"</p>
                    <p class="delivery-estimate">
                        <i class="fas fa-clock"></i> ${getDeliveryEstimate(serviceName)}
                    </p>
                `);

                $('.purchase-exit, .purchase-cancel').on('click', function() {
                    $('#single-purchase').hide();
                });
                
                // Add the handler right after creating the elements
                $('#single-purchase .purchase-confirm').on('click', async function() {
                    handleSinglePurchase();
                });
                $('#single-purchase').show();
            };

            async function handleSinglePurchase() {
                $('.purchase-footer').html(`
                    <button class="purchase-history-btn">
                        <i class="fas fa-history"></i>
                        Purchase History
                    </button>
                    <button class="duplicate-label">Confirm & Duplicate</button>
                `);
            
                $('.purchase-history-btn').on('click', function() {
                    window.location.href = '#history';
                });
            
                $('.duplicate-label').on('click', function() {
                    const modal = document.createElement('div');
                    modal.className = 'single-purchase-overlay';
                    modal.style.display = 'flex';

                    const modalContent = document.createElement('div');
                    modalContent.className = 'single-purchase-content';
                    modalContent.style.maxWidth = '300px';

                    modalContent.innerHTML = `
                        <div class="single-purchase-header">
                            <h2>Confirm Label Duplication?</h2>
                            <button class="purchase-exit"><i class="fas fa-times"></i></button>
                        </div>
                        <div class="purchase-footer">
                            <button class="purchase-cancel">Cancel</button>
                            <button class="purchase-confirm">Confirm</button>
                        </div>
                    `;

                    modal.appendChild(modalContent);
                    document.body.appendChild(modal);

                    modalContent.querySelector('.purchase-exit').onclick = () => modal.remove();
                    modalContent.querySelector('.purchase-cancel').onclick = () => modal.remove();
                    modalContent.querySelector('.purchase-confirm').onclick = async () => {
                    modal.remove();
                    const rawServiceName = $('#service-details').attr('data-raw-service');
                    const loadingOverlay = $('.loading-overlay');
                    loadingOverlay.css({
                        'animation': 'none',
                        'opacity': '1'
                    });
                    
                    loadingOverlay.html(`
                        <div class="loading-circle"></div>
                        <p>Processing Shipments (0 of 1), DO NOT Refresh the Page!</p>
                    `);
                    loadingOverlay.css('display', 'flex'); 
                    console.log(rawServiceName);
                    try {
                        const response = await submitShipment(
                            $('#sender_name').val(),
                            $('#sender_company').val(),
                            $('#sender_address1').val(),
                            $('#sender_address2').val(),
                            $('#sender_city').val(),
                            $('#sender_state_province').val(),
                            $('#sender_zip_postal').val(),
                            $('#sender_country').val(),
                            $('#sender_phone').val(),
                            $('#receiver_name').val(),
                            $('#receiver_company').val(),
                            $('#receiver_address1').val(),
                            $('#receiver_address2').val(),
                            $('#receiver_city').val(),
                            $('#receiver_state_province').val(),
                            $('#receiver_zip_postal').val(),
                            $('#receiver_country').val(),
                            $('#receiver_phone').val(),
                            $('#package_weight').val(),
                            $('#weight_unit').val(),
                            $('#package_length').val(),
                            $('#package_width').val(),
                            $('#package_height').val(),
                            "",
                            $('#rubber_stamp_1').val() || "",
                            $('#rubber_stamp_2').val() || "",
                            rawServiceName,
                            $('#manifest_postage').is(':checked'),
                            $('#service_version').val(),
                            $('input[name="label-type"]:checked').val()
                        );
                        loadingOverlay.hide();
                        if (!response.base64_encoded_label || !response.tracking_number) {
                            showAlert(response.message || 'Label generation failed', 'error');
                            return;
                        }

                        showAlert(response.message, 'success');
                        $('.tracking-status.awaiting').hide();
                        $('.tracking-status.confirmed').show();
                        $('.tracking-value').text(response.tracking_number);

                        const mimeType = detectMimeType(response.base64_encoded_label);
                        const extension = mimeType === 'application/pdf' ? 'pdf' : 'png';
                        const labelUrl = `data:${mimeType};base64,${response.base64_encoded_label}`;

                        const previewContainer = document.createElement('div');
                        previewContainer.className = 'preview-container';

                        if (mimeType === 'application/pdf') {
                            const noPreview = document.createElement('div');
                            noPreview.className = 'preview-label no-preview';
                            noPreview.style.cssText = `
                                background: var(--widget-bg);
                                border: 1px solid var(--input-border);
                                border-radius: 5px;
                                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;
                                padding: 15px;
                                text-align: center;
                            `;
                            const icon = document.createElement('i');
                            icon.className = 'fas fa-file-pdf fa-2x';
                            icon.style.color = '#dc3545';
                            icon.style.marginBottom = '10px';

                            const text = document.createElement('p');
                            text.textContent = 'PDF preview not available';
                            text.style.fontSize = '12px';
                            text.style.margin = '0';

                            noPreview.appendChild(icon);
                            noPreview.appendChild(text);
                            $('.preview-label').replaceWith(noPreview);
                        } else {
                            const img = document.createElement('img'); 
                            img.src = labelUrl;
                            img.className = 'preview-label';
                            img.style.cssText = `
                                object-fit: contain;
                                background: white;
                                border-radius: 5px;
                                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                cursor: pointer;
                            `;
                            
                            $('.preview-label').replaceWith(img);

                            img.addEventListener('click', () => {
                                const modal = document.createElement('div');
                                modal.style.cssText = `
                                    position: fixed;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    background: rgba(0, 0, 0, 0.8);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    z-index: 9999;
                                `;

                                const modalImg = document.createElement('img');
                                modalImg.src = labelUrl;
                                modalImg.style.cssText = 'max-width: 90%; max-height: 90vh; object-fit: contain; background: white; padding: 5px; border-radius: 5px;';
                                modal.appendChild(modalImg);
                                modal.addEventListener('click', () => modal.remove());
                                document.body.appendChild(modal);
                            });
                        }

                        $('#single-download').off('click').on('click', function() {
                            const downloadLink = document.createElement('a');
                            downloadLink.href = labelUrl;
                            downloadLink.download = `${response.tracking_number}.${extension}`;
                            downloadLink.click();
                        });

                        updateDashboardStats();
                        cachedHistory = null;

                    } catch (error) {
                        loadingOverlay.hide();
                        showAlert(error, 'error');
                        console.error('Error submitting shipment:', error);
                    } finally {
                        // Add fade out animation before hiding
                        loadingOverlay.css({
                            'animation': 'fadeOut 0.3s ease-in-out forwards'
                        });
                        
                        // Wait for animation to complete before hiding
                        setTimeout(() => {
                            loadingOverlay.hide();
                            // Reset the loading text
                            loadingOverlay.html(`
                                <div class="loading-circle"></div>
                                <p>Contacting Validators, DO NOT Refresh the Page!</p>
                            `);
                        }, 300);
                    }
                };
            });

                const rawServiceName = $('#service-details').attr('data-raw-service');
                console.log(rawServiceName);
                saveNewAddress()
                const loadingOverlay = $('.loading-overlay');
                try {
                    loadingOverlay.css({
                        'animation': 'none',
                        'opacity': '1'
                    });
                    loadingOverlay.html(`
                        <div class="loading-circle"></div>
                        <p>Processing Shipments (0 of 1), DO NOT Refresh the Page!</p>
                    `);
                    loadingOverlay.css('display', 'flex'); 
                    const response = await submitShipment(
                        $('#sender_name').val(),
                        $('#sender_company').val(),
                        $('#sender_address1').val(),
                        $('#sender_address2').val(),
                        $('#sender_city').val(),
                        $('#sender_state_province').val(),
                        $('#sender_zip_postal').val(),
                        $('#sender_country').val(),
                        $('#sender_phone').val(),
                        $('#receiver_name').val(),
                        $('#receiver_company').val(),
                        $('#receiver_address1').val(),
                        $('#receiver_address2').val(),
                        $('#receiver_city').val(),
                        $('#receiver_state_province').val(),
                        $('#receiver_zip_postal').val(),
                        $('#receiver_country').val(),
                        $('#receiver_phone').val(),
                        $('#package_weight').val(),
                        $('#weight_unit').val(),
                        $('#package_length').val(),
                        $('#package_width').val(),
                        $('#package_height').val(),
                        "",
                        $('#rubber_stamp_1').val() || "",
                        $('#rubber_stamp_2').val() || "",
                        rawServiceName,
                        $('#manifest_postage').is(':checked'),
                        $('#service_version').val(),
                        $('input[name="label-type"]:checked').val()
                    );
                    loadingOverlay.hide();
                    if (!response.base64_encoded_label || !response.tracking_number) {
                        showAlert(response.message || 'Label generation failed', 'error');
                        return;
                    }

                    showAlert(response.message, 'success');
                    $('.tracking-status.awaiting').hide();
                    $('.tracking-status.confirmed').show();
                    $('.tracking-value').text(response.tracking_number);

                    const mimeType = detectMimeType(response.base64_encoded_label);
                    const extension = mimeType === 'application/pdf' ? 'pdf' : 'png';
                    const labelUrl = `data:${mimeType};base64,${response.base64_encoded_label}`;

                    const previewContainer = document.createElement('div');
                    previewContainer.className = 'preview-container';

                    if (mimeType === 'application/pdf') {
                        const noPreview = document.createElement('div');
                        noPreview.className = 'preview-label no-preview';
                        noPreview.style.cssText = `
                            background: var(--widget-bg);
                            border: 1px solid var(--input-border);
                            border-radius: 5px;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            padding: 15px;
                            text-align: center;
                        `;
                        const icon = document.createElement('i');
                        icon.className = 'fas fa-file-pdf fa-2x';
                        icon.style.color = '#dc3545';
                        icon.style.marginBottom = '10px';

                        const text = document.createElement('p');
                        text.textContent = 'PDF preview not available';
                        text.style.fontSize = '12px';
                        text.style.margin = '0';

                        noPreview.appendChild(icon);
                        noPreview.appendChild(text);
                        $('.preview-label').replaceWith(noPreview);
                    } else {
                        const img = document.createElement('img'); 
                        img.src = labelUrl;
                        img.className = 'preview-label';
                        img.style.cssText = `
                            object-fit: contain;
                            background: white;
                            border-radius: 5px;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                            cursor: pointer;
                        `;
                        
                        $('.preview-label').replaceWith(img);

                        img.addEventListener('click', () => {
                            const modal = document.createElement('div');
                            modal.style.cssText = `
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: rgba(0, 0, 0, 0.8);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                z-index: 9999;
                            `;

                            const modalImg = document.createElement('img');
                            modalImg.src = labelUrl;
                            modalImg.style.cssText = 'max-width: 90%; max-height: 90vh; object-fit: contain; background: white; padding: 5px; border-radius: 5px;';
                            modal.appendChild(modalImg);
                            modal.addEventListener('click', () => modal.remove());
                            document.body.appendChild(modal);
                        });
                    }

                    $('#single-download').off('click').on('click', function() {
                        const downloadLink = document.createElement('a');
                        downloadLink.href = labelUrl;
                        downloadLink.download = `${response.tracking_number}.${extension}`;
                        downloadLink.click();
                    });

                } catch (error) {
                    loadingOverlay.hide();
                    showAlert(error, 'error');
                    console.error('Error submitting shipment:', error);
                } finally {
                    // Add fade out animation before hiding
                    loadingOverlay.css({
                        'animation': 'fadeOut 0.3s ease-in-out forwards'
                    });
                    
                    // Wait for animation to complete before hiding
                    setTimeout(() => {
                        loadingOverlay.hide();
                        // Reset the loading text
                        loadingOverlay.html(`
                            <div class="loading-circle"></div>
                            <p>Contacting Validators, DO NOT Refresh the Page!</p>
                        `);
                    }, 300);
                }
            };

            $('#batch-provider-version').on('change', function() {
                const selectedCourier = $('.courier-selection .courier-button.active').data('courier');
                if (selectedCourier) {
                    courierVersions[selectedCourier.toLowerCase()] = $(this).val();
            }
});
            
            // BATCH SHIPMENT PROCESSING
            const fileInput = document.getElementById('file-input');
            const dragDropArea = document.querySelector('.drag-drop-area');
            const clearCsvButton = document.getElementById('clear-csv');
            const batchRateButton = document.getElementById('batch-rate-button');

            async function displayBatchServices(courier) {
                if (courier) {
                    // Check if USPS is selected and manifested is checked
                    if ((courier.toLowerCase() === 'usps' && $('#batch_manifest_postage').is(':checked'))) {
                        // Display error message in the UI
                        $('.batch-service-list').html(`
                            <div class="no-services" style="text-align: center; padding: 20px;">
                                <p>No services available for United States shipping with the selected options.</p>
                            </div>
                        `);
                        return;
                    }
                }
    const $container = $('.batch-service-list');
    const loadingOverlay = $('.loading-overlay');
    loadingOverlay.css({
            'animation': 'none',
            'opacity': '1'
        });
        
    loadingOverlay.html(`
        <div class="loading-circle"></div>
        <p>Processing the Pricing List, DO NOT Refresh the Page!</p>
    `);

    // Show overlay with flex display
    loadingOverlay.css('display', 'flex');    

    try {
        if (!cachedRates) {
            const response = await fetch('/application/rate');
            const data = await response.json();
            cachedRates = data.services || {};
        }

        const services = cachedRates;
        const serviceGroups = {};

        if (!cachedRates || Object.keys(cachedRates).filter(service => 
            service.toLowerCase().startsWith(courier.toLowerCase())).length === 0) {
            $('.batch-service-list').html(`
                <div class="no-services" style="text-align: center; padding: 20px;">
                    <p>No services available for ${courier} shipping with the selected options.</p>
                </div>
            `);
            loadingOverlay.hide()
            return;
        }

        // Update version select
        const $versionSelect = $('#batch-provider-version');
        $versionSelect.empty();

        const providerVersions = {
            usps: [
                { value: 'USPSveVS', label: 'eVS' },
                { value: 'USPSvShippo', label: 'Shippo' },
                { value: 'USPSvStore', label: 'Store' },
                { value: 'USPSvUnbranded', label: 'Unbranded' }
            ],
            fedex: [],
            ups: [
                { value: 'UPSvRetail', label: 'Retail' },
                { value: 'UPSvWarehouse', label: 'Warehouse' }
            ]
        };

        const versions = providerVersions[courier.toLowerCase()];
        if (versions) {
            versions.forEach(version => {
                const isSelected = version.value === courierVersions[courier.toLowerCase()];
                $versionSelect.append(`
                    <option value="${version.value}" ${isSelected ? 'selected' : ''}>
                        ${version.label}
                    </option>
                `);
            });
        }

        function categorizeService(serviceName, baseName) {
            if (serviceName === baseName || serviceName === baseName + ', United States') {
                return 'baseService';
            }
            
            const categories = [];
            if (serviceName.includes('Adult Signature')) categories.push('adultSignature');
            if (serviceName.includes('Signature Required') && !serviceName.includes('Adult')) categories.push('signature');
            if (serviceName.includes('Restricted Delivery')) categories.push('restricted');
            if (serviceName.includes('Saturday Delivery')) categories.push('saturday');
            
            return categories.length > 1 ? 'combined' : categories[0] || 'other';
        }

        // Organize services into groups
        Object.entries(services).forEach(([serviceName, details]) => {
            if (serviceName.toLowerCase().startsWith(courier.toLowerCase())) {
                const baseName = serviceName.split(',')[0];
                if (!serviceGroups[baseName]) {
                    serviceGroups[baseName] = {
                        baseService: {
                            name: baseName,
                            cost: details.standard_cost,
                            manifested_cost: details.manifested_cost
                        },
                        variants: {
                            baseService: [],
                            signature: [],
                            adultSignature: [],
                            restricted: [],
                            saturday: [],
                            combined: []
                        }
                    };
                }

                const category = categorizeService(serviceName, baseName);
                const variant = {
                    name: serviceName,
                    cost: details.standard_cost,
                    manifested_cost: details.manifested_cost
                };

                if (serviceGroups[baseName].variants[category]) {
                    serviceGroups[baseName].variants[category].push(variant);
                }
            }
        });

        // Sort each variant array by price (highest to lowest)
        Object.values(serviceGroups).forEach(group => {
            Object.keys(group.variants).forEach(category => {
                group.variants[category].sort((a, b) => {
                    const costA = $('#batch_manifest_postage').is(':checked') && a.manifested_cost ? a.manifested_cost : a.cost;
                    const costB = $('#batch_manifest_postage').is(':checked') && b.manifested_cost ? b.manifested_cost : b.cost;
                    return costB - costA;
                });
            });
        });

        // Convert to array and sort groups by base service cost
        const sortedGroups = Object.entries(serviceGroups).sort(([, a], [, b]) => {
            const costA = $('#batch_manifest_postage').is(':checked') && a.baseService.manifested_cost ? 
                         a.baseService.manifested_cost : a.baseService.cost;
            const costB = $('#batch_manifest_postage').is(':checked') && b.baseService.manifested_cost ? 
                         b.baseService.manifested_cost : b.baseService.cost;
            return costB - costA;
        });

        function createBranch(variants, title) {
            if (!variants || variants.length === 0) return '';
            
            const isManifested = $('#batch_manifest_postage').is(':checked');
            return `
                <div class="variant-branch" data-category="${title.toLowerCase().replace(' ', '-')}">
                    <div class="branch-header">
                        <i class="fas fa-caret-right"></i>
                        <span>${title} (${variants.length})</span>
                    </div>
                    <div class="branch-content" style="display: none;">
                        ${variants.map(v => `
                            <div class="variant-leaf">
                                <span class="copyable-name" title="Click to copy">${v.name}</span>
                                <span class="variant-cost" 
                                      data-standard="${v.cost}" 
                                      data-manifested="${v.manifested_cost || v.cost}">
                                    $${(isManifested && v.manifested_cost ? v.manifested_cost : v.cost).toFixed(2)}
                                </span>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        }

        // Clear container and add sorted groups
        $container.empty();

        sortedGroups.forEach(([baseName, group]) => {
            const totalServices = Object.values(group.variants)
                .reduce((sum, variants) => sum + variants.length, 0);

            const $serviceGroup = $('<div>', {
                class: 'service-group'
            });

            const baseHeader = `
                <div class="service-group-header">
                    <div class="service-group-title">
                        <i class="fas fa-chevron-right"></i>
                        <h3 class="service-name"><strong>${baseName}</strong></h3>
                        <div class="service-count">${totalServices} services</div>
                    </div>
                </div>
            `;

            const variantsTree = `
                <div class="variants-tree">
                    ${createBranch(group.variants.baseService, 'Base Service')}
                    ${createBranch(group.variants.signature, 'Signature Required')}
                    ${createBranch(group.variants.adultSignature, 'Adult Signature')}
                    ${createBranch(group.variants.restricted, 'Restricted Delivery')}
                    ${createBranch(group.variants.saturday, 'Saturday Delivery')}
                    ${createBranch(group.variants.combined, 'Combined Options')}
                </div>
            `;

            $serviceGroup.html(baseHeader + variantsTree);
            $container.append($serviceGroup);
        });

        // Event handlers
        $('.service-group-header').on('click', function() {
            const $group = $(this).closest('.service-group');
            const $variantsTree = $group.find('.variants-tree');
            const $icon = $(this).find('i');
            
            $group.toggleClass('expanded');
            $variantsTree.toggle($group.hasClass('expanded'));
            $icon.toggleClass('fa-chevron-right fa-chevron-down');
        });

        $('.branch-header').on('click', function() {
            const $branch = $(this).closest('.variant-branch');
            const $branchContent = $branch.find('.branch-content');
            const $icon = $(this).find('i');
            
            $branch.toggleClass('expanded');
            $branchContent.toggle($branch.hasClass('expanded'));
            $icon.toggleClass('fa-caret-right fa-caret-down');
        });

        $(document).on('click', '.copyable-name:not(.service-name)', function(e) {
            e.stopPropagation();
            const textToCopy = $(this).text();
            navigator.clipboard.writeText(textToCopy).then(() => {
                const $tooltip = $('<div>', { class: 'copy-tooltip', text: 'Copied!' });
                $(this).append($tooltip);
                setTimeout(() => $tooltip.remove(), 1500);
            });
        });

        loadingOverlay.hide();

    } catch (error) {
        loadingOverlay.hide();
        console.error('Error:', error);
        $container.html(`
            <div class="error-message" style="text-align: center; padding: 20px; color: #dc3545;">
                <p>Error loading services. Please try again.</p>
            </div>
        `);
    } finally {
        // Add fade out animation before hiding
        loadingOverlay.css({
            'animation': 'fadeOut 0.3s ease-in-out forwards'
        });
        
        // Wait for animation to complete before hiding
        setTimeout(() => {
            loadingOverlay.hide();
            // Reset the loading text
            loadingOverlay.html(`
                <div class="loading-circle"></div>
                <p>Contacting Validators, DO NOT Refresh the Page!</p>
            `);
        }, 300);
    }
}



            
$(document).on('input change', '#sample-number', function() {
    console.log("Sample number changed");
    console.log("Value:", $(this).val());
    let value = parseInt($(this).val());
    const max = cachedBatchShipments.length;
    console.log(max);
    
    // If empty or invalid, default to 1
    if (!value || value < 1) {
        return
    }
    // If exceeds max, set to max
    if (value > max) {
        value = max;
        $(this).val(max);
    }
    
    // Get the selected shipment (subtract 1 for zero-based array index)
    const selectedShipment = cachedBatchShipments[value - 1];
    console.log(selectedShipment);
    
    // Update the address details
    const fromDetails = `
        <p><strong>${selectedShipment.sender_name}</strong></p>
        ${selectedShipment.sender_company ? `<p>${selectedShipment.sender_company}</p>` : ''}
        ${selectedShipment.sender_phone ? `<p>${selectedShipment.sender_phone}</p>` : ''}
        <p>${selectedShipment.sender_address1}</p>
        ${selectedShipment.sender_address2 ? `<p>${selectedShipment.sender_address2}</p>` : ''}
        <p>${selectedShipment.sender_city}, ${selectedShipment.sender_state_province} ${selectedShipment.sender_zip_postal}</p>
        <p>${countryCodeToName[selectedShipment.sender_country] || selectedShipment.sender_country}</p>
    `;
    
    const toDetails = `
        <p><strong>${selectedShipment.receiver_name}</strong></p>
        ${selectedShipment.receiver_company ? `<p>${selectedShipment.receiver_company}</p>` : ''}
        ${selectedShipment.receiver_phone ? `<p>${selectedShipment.receiver_phone}</p>` : ''}
        <p>${selectedShipment.receiver_address1}</p>
        ${selectedShipment.receiver_address2 ? `<p>${selectedShipment.receiver_address2}</p>` : ''}
        <p>${selectedShipment.receiver_city}, ${selectedShipment.receiver_state_province} ${selectedShipment.receiver_zip_postal}</p>
        <p>${countryCodeToName[selectedShipment.receiver_country] || selectedShipment.receiver_country}</p>
    `;

    const service = getServiceDetails(selectedShipment.service_name);
    const serviceDetails = `
        <p><strong>Selected Service:</strong></p>
        <p>${service.name} • ${service.region}</p>
        <p><strong>Added Service(s):</strong></p>
        ${
            (service.features.adult_signature || 
            service.features.signature || 
            service.features.saturday_delivery || 
            service.features.restricted_delivery || 
            service.manifested) 
            ? 
            `<p>
                ${service.features.adult_signature ? 'Adult Signature Required Included<br>' : ''}
                ${service.features.signature ? 'Signature Required Included<br>' : ''}
                ${service.features.saturday_delivery ? 'Saturday Delivery Included<br>' : ''}
                ${service.features.restricted_delivery ? 'Restricted Delivery Included<br>' : ''}
                ${service.features.manifested ? 'Manifested Postage Included<br>' : ''}
            </p>`
            : 
            '<p>No Additional Services Added</p>'
        }
        <p><strong>Package Details:</strong></p>
        <p>Weight: ${selectedShipment.package_weight} ${selectedShipment.package_weight_unit || 'LBS'} • Dimensions: ${selectedShipment.package_length}" × ${selectedShipment.package_width}" × ${selectedShipment.package_height}"</p>
        <p class="delivery-estimate">
            <i class="fas fa-clock"></i> ${getDeliveryEstimate(selectedShipment.service_name)}
        </p>
    `;
    
    $('.shipping-address-container').find('.shipping-details-section:eq(0) .address-details').html(fromDetails);
    $('.shipping-address-container').find('.shipping-details-section:eq(1) .address-details').html(toDetails);
    $('#batch-service-details').html(serviceDetails);
});

$(document).on('input', '#shipments-search', function() {
    const searchTerm = $(this).val().toLowerCase();
    
    $('.shipment-card').each(function(index) {
        // Get the corresponding shipment data from cache
        const shipment = cachedBatchShipments[index];
        
        if (!shipment) return; // Skip if no cached data

        // Create comprehensive searchable content from cached data
        const searchableContent = [
            // Service info
            shipment.service_name,
            
            // Sender details
            shipment.sender_name,
            shipment.sender_phone,
            shipment.sender_company,
            shipment.sender_address1,
            shipment.sender_address2,
            shipment.sender_city,
            shipment.sender_state_province,
            shipment.sender_zip_postal,
            shipment.sender_country,
            
            // Receiver details
            shipment.receiver_name,
            shipment.receiver_phone,
            shipment.receiver_company,
            shipment.receiver_address1,
            shipment.receiver_address2,
            shipment.receiver_city,
            shipment.receiver_state_province,
            shipment.receiver_zip_postal,
            shipment.receiver_country,
            
            // Package details
            shipment.package_description,
            shipment.package_reference1,
            shipment.package_reference2,
            
            // Package measurements
            `${shipment.package_length}x${shipment.package_width}x${shipment.package_height}`,
            shipment.package_weight
        ]
            .filter(Boolean) // Remove null/undefined values
            .join(' ')
            .toLowerCase();

        // Show/hide based on search term
        $(this).toggle(searchableContent.includes(searchTerm));
    });
});



            function filterServices(searchTerm, manifestedOnly = false) {
                $('.service-group').each(function() {
                    const $group = $(this);
                    const $variants = $group.find('.service-variant');
                    let visibleVariants = 0;
                    
                    $variants.each(function() {
                        const $variant = $(this);
                        const variantText = $variant.find('.variant-name').text().toLowerCase();
                        const hasManifested = $variant.find('.feature-tag').text().includes('Manifested');
                        const matchesSearch = variantText.includes(searchTerm.toLowerCase());
                        const matchesManifested = !manifestedOnly || hasManifested;
                        
                        if (matchesSearch && matchesManifested) {
                            $variant.show();
                            visibleVariants++;
                        } else {
                            $variant.hide();
                        }
                    });
                    
                    $group.toggle(visibleVariants > 0);
                    if (visibleVariants > 0 && searchTerm) {
                        $group.addClass('expanded');
                    }
                });
            }

            // Update the button click handler to properly manage active states
            $(document).on('click', '.courier-button', function(e) {
                e.preventDefault();
                
                // Only deactivate buttons within the same container
                const $container = $(this).closest('.courier-selection');
                $container.find('.courier-button').removeClass('active');
                $(this).addClass('active');
                
                const courier = $(this).data('courier');
                
                // Determine if we're in batch or single mode and call appropriate function
                if ($(this).closest('#batch').length) {
                    displayBatchServices(courier);
                } else {
                    displaySingleServices(courier);
                }
            });

            $('#batch_manifest_postage').on('change', function() {
                const activeCourier = $('.courier-selection .courier-button.active').data('courier');
                if (activeCourier) {
                    // Check if USPS is selected and manifested is checked
                    if (activeCourier.toLowerCase() === 'usps' && $(this).is(':checked')) {
                        // Display error message in the UI
                        $('.batch-service-list').html(`
                            <div class="no-services" style="text-align: center; padding: 20px;">
                                <p>No services available for United States shipping with the selected options.</p>
                            </div>
                        `);
                        return;
                    }
                    displayBatchServices(activeCourier);
                }
            });

            $('.batch-search-input').on('input', function() {
                const searchTerm = $(this).val().toLowerCase().trim();
                
                // Reset and collapse everything when search is empty
                if (!searchTerm) {
                    $('.service-group').removeClass('expanded');
                    $('.variants-tree').hide();
                    $('.variant-branch').removeClass('expanded');
                    $('.branch-content').hide();
                    $('.service-group-header i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
                    $('.branch-header i').removeClass('fa-caret-down').addClass('fa-caret-right');
                    return;
                }
                
                // Process each service group
                $('.service-group').each(function() {
                    const $group = $(this);
                    let hasMatchInGroup = false;
                    
                    // Check each branch in the group
                    $group.find('.variant-branch').each(function() {
                        const $branch = $(this);
                        let hasMatchInBranch = false;
                        
                        // Check each service in the branch
                        $branch.find('.variant-leaf').each(function() {
                            const serviceName = $(this).find('.copyable-name').text().toLowerCase();
                            const matches = serviceName.includes(searchTerm);
                            $(this).toggle(matches);
                            if (matches) {
                                hasMatchInBranch = true;
                            }
                        });
                        
                        // Show/hide branch based on matches
                        $branch.toggle(hasMatchInBranch);
                        if (hasMatchInBranch) {
                            $branch.addClass('expanded');
                            $branch.find('.branch-content').show();
                            $branch.find('i').removeClass('fa-caret-right').addClass('fa-caret-down');
                            hasMatchInGroup = true;
                        } else {
                            $branch.removeClass('expanded');
                            $branch.find('.branch-content').hide();
                            $branch.find('i').removeClass('fa-caret-down').addClass('fa-caret-right');
                        }
                    });
                    
                    // Show/hide group based on matches
                    $group.toggle(hasMatchInGroup);
                    if (hasMatchInGroup) {
                        $group.addClass('expanded');
                        $group.find('.variants-tree').show();
                        $group.find('.service-group-header i').removeClass('fa-chevron-right').addClass('fa-chevron-down');
                    } else {
                        $group.removeClass('expanded');
                        $group.find('.variants-tree').hide();
                        $group.find('.service-group-header i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
                    }
                });
            });



            function getShipmentData() {
                // Return cached batch results if available
                if (cachedBatchResults && cachedBatchResults.length > 0) {
                    return cachedBatchResults.map(result => ({
                        tracking: result.tracking,
                        label: result.label,
                        cost: result.cost,
                        service: result.service,
                        recipientName: result.recipientName || '',
                        recipientAddress: result.recipientAddress || '',
                        error: result.error || ''
                    }));
                }
                
                // If no cached results, return empty array
                return [];
            }

            $(document).on('click', '.batch-download-btn', async function() {
                const buttonType = $(this).closest('.file-item').find('.file-name').text();
                const format = $('#batch input[name="label-type"]:checked').val();

                if (!cachedBatchResults || cachedBatchResults.length === 0) {
                    showAlert('No shipment data available for download', 'error');
                    return;
                }

                if (buttonType.includes('trackings.txt')) {
                    const trackings = cachedBatchResults
                        .filter(r => r.tracking)
                        .map((r, index) => `${index + 1}. ${r.tracking}`)
                        .join('\n');
                        
                    if (!trackings) {
                        showAlert('No tracking numbers available', 'error');
                        return;
                    }

                    const blob = new Blob([trackings], { type: 'text/plain' });
                    saveAs(blob, 'trackings.txt');
                    showAlert('Tracking numbers downloaded successfully', 'success');

                } else if (buttonType.includes('shipments.csv')) {
                    // Get original headers plus add tracking
                    const headers = [
                        "ServiceName",
                        "FromSenderName", "FromPhone", "FromCompany", "FromStreet1", "FromStreet2", "FromCity", "FromStateProvince", "FromZipPostal", "FromCountry",
                        "ToRecipientName", "ToPhone", "ToCompany", "ToStreet1", "ToStreet2", "ToCity", "ToStateProvince", "ToZipPostal", "ToCountry",
                        "PackageLength", "PackageWidth", "PackageHeight", "PackageWeight", "PackageDescription",
                        "PackageReference1", "PackageReference2",
                        "TrackingNumber"
                    ].map(header => `"${header}"`).join(',');

                    // Function to properly escape CSV fields
                    const escapeCSV = (field) => {
                        if (field === null || field === undefined) {
                            return '""';
                        }
                        // Convert to string and escape quotes by doubling them
                        const escaped = String(field).replace(/"/g, '""');
                        // Wrap in quotes
                        return `"${escaped}"`;
                    };

                    // Map shipments to rows with tracking numbers
                    const rows = cachedBatchShipments.map((shipment, index) => {
                        const result = cachedBatchResults[index];
                        const tracking = result && result.tracking ? result.tracking : '';

                        return [
                            shipment.service_name,
                            shipment.sender_name,
                            shipment.sender_phone,
                            shipment.sender_company,
                            shipment.sender_address1,
                            shipment.sender_address2,
                            shipment.sender_city,
                            shipment.sender_state_province,
                            shipment.sender_zip_postal,
                            shipment.sender_country,
                            shipment.receiver_name,
                            shipment.receiver_phone,
                            shipment.receiver_company,
                            shipment.receiver_address1,
                            shipment.receiver_address2,
                            shipment.receiver_city,
                            shipment.receiver_state_province,
                            shipment.receiver_zip_postal,
                            shipment.receiver_country,
                            shipment.package_length,
                            shipment.package_width,
                            shipment.package_height,
                            shipment.package_weight,
                            shipment.package_description,
                            shipment.package_reference1,
                            shipment.package_reference2,
                            tracking
                        ].map(escapeCSV).join(',');
                    });

                    const csvContent = [headers, ...rows].join('\n');
                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
                    saveAs(blob, 'shipments.csv');
                    showAlert('CSV downloaded successfully', 'success');

                } else if (buttonType.includes('shipments.zip') || buttonType.includes('shipments.pdf')) {
                    const validShipments = cachedBatchResults.filter(result => result.label);
                    
                    if (validShipments.length === 0) {
                        showAlert('No valid labels available for download', 'error');
                        return;
                    }

                    if (format === 'IMAGE') {
                        const zip = new JSZip();
                        let addedFiles = 0;

                        validShipments.forEach(result => {
                            try {
                                zip.file(
                                    `${result.tracking}.png`,
                                    result.label,
                                    {base64: true}
                                );
                                addedFiles++;
                            } catch (error) {
                                console.error(`Error adding file for tracking ${result.tracking}:`, error);
                            }
                        });

                        if (addedFiles === 0) {
                            showAlert('Failed to process any labels', 'error');
                            return;
                        }

                        try {
                            const content = await zip.generateAsync({type: 'blob'});
                            saveAs(content, 'shipments.zip');
                            showAlert(`Successfully packaged ${addedFiles} labels`, 'success');
                        } catch (error) {
                            console.error('Error creating zip:', error);
                            showAlert('Failed to create zip file', 'error');
                        }

                    } else {
                        try {
                            const mergedPdf = await PDFLib.PDFDocument.create();
                            let addedPages = 0;

                            for (const result of validShipments) {
                                try {
                                    const pdfBytes = atob(result.label);
                                    const uint8Array = new Uint8Array(pdfBytes.length);
                                    for (let i = 0; i < pdfBytes.length; i++) {
                                        uint8Array[i] = pdfBytes.charCodeAt(i);
                                    }

                                    const pdf = await PDFLib.PDFDocument.load(uint8Array);
                                    const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                                    
                                    pages.forEach(page => {
                                        mergedPdf.addPage(page);
                                        addedPages++;
                                    });

                                } catch (error) {
                                    console.error(`Error processing PDF for tracking ${result.tracking}:`, error);
                                }
                            }

                            if (addedPages === 0) {
                                throw new Error('No valid PDF pages could be processed');
                            }

                            const mergedPdfBytes = await mergedPdf.save();
                            const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
                            saveAs(blob, 'shipments.pdf');
                            showAlert(`Successfully combined ${addedPages} label pages`, 'success');

                        } catch (error) {
                            console.error('Error combining PDFs:', error);
                            showAlert('PDF combining failed - downloading as separate files instead', 'warning');
                            
                            const zip = new JSZip();
                            let addedFiles = 0;

                            validShipments.forEach(result => {
                                try {
                                    zip.file(
                                        `${result.tracking}.pdf`,
                                        result.label,
                                        {base64: true}
                                    );
                                    addedFiles++;
                                } catch (error) {
                                    console.error(`Error adding file for tracking ${result.tracking}:`, error);
                                }
                            });

                            if (addedFiles > 0) {
                                const content = await zip.generateAsync({type: 'blob'});
                                saveAs(content, 'shipments.zip');
                                showAlert(`Successfully packaged ${addedFiles} PDF files`, 'success');
                            } else {
                                showAlert('Failed to process any files', 'error');
                            }
                        }
                    }
                }
            });

            // Helper function to trigger file download
            function saveAs(blob, filename) {
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = filename;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }
            // Clear CSV button functionality

            function resetFileUpload() {
                cachedBatchShipments = [];
                cachedBatchResults = [];
                
                const dragDropArea = document.querySelector('.drag-drop-area');
                dragDropArea.innerHTML = `
                    <div class="upload-prompt">
                        <i class="fas fa-file-upload fa-2x" style="color: var(--btn-primary); margin-bottom: 15px;"></i>
                        <p><span class="file-prompt">Choose File</span> or drag and drop</p>
                        <p style="font-size: 12px; opacity: 0.7;">Accepted format: .csv</p>
                    </div>
                    <input type="file" id="file-input" name="csv_file" class="file-input" accept=".csv">
                `;
                
                // Reattach event listeners to the new file input
                attachFileInputListeners();
                
                // Reset button states
                $('#batch-rate-button').prop('disabled', true).removeClass('active');
                
                // Clear data attributes
                $(dragDropArea).removeData('csvContent');
            }
            
            $(document).on('click', '#clear-csv', resetFileUpload);

            function attachFileInputListeners() {
        
                let newFileInput = document.getElementById('file-input');
                let newClearButton = document.getElementById('clear-csv');
                
                newFileInput.addEventListener('change', function(e) {
                    if (this.files && this.files[0]) {
                        $(dragDropArea).removeData('csvContent');
                        const file = this.files[0];
                        
                        // Update UI to show selected file
                        dragDropArea.innerHTML = `
                            <div class="file-details">
                                <p><i class="fas fa-file-alt"></i> <strong>Filename:</strong> ${file.name}</p>
                                <p><i class="fas fa-weight-hanging"></i> <strong>Size:</strong> ${(file.size / 1024).toFixed(2)} KB</p>
                                <p><i class="fas fa-file-csv"></i> <strong>Type:</strong> ${file.type || 'text/csv'}</p>
                            </div>
                            <input type="file" id="file-input" name="csv_file" class="file-input" accept=".csv">
                            <button type="button" id="clear-csv" class="clear-csv-btn" style="display: block;">
                                <i class="fas fa-times"></i> Clear File
                            </button>
                        `;

                        // Enable rate button
                        batchRateButton.disabled = false;
                        batchRateButton.classList.add('active');

                        // Read file content
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            dragDropArea.dataset.csvContent = e.target.result;
                            try {
                                const shipments = parseCSV(e.target.result);
                                showAlert(`Loaded ${shipments.length} shipments from spreadsheet. Please check the details below!`, 'success');
                            } catch (error) {
                                showAlert(`Error parsing spreadsheet: ${error.message}`, 'error');
                                resetFileUpload();
                            }
                        };
                        reader.readAsText(file);
                    }
                });
                if (newClearButton) {
                    newClearButton.addEventListener('click', resetFileUpload);
                }
            }

            // Initial event listener attachment
            attachFileInputListeners();

            function downloadZipFile(shipments) {
                // Implementation for zip download
                const zip = new JSZip();
                
                zip.generateAsync({type:"blob"}).then(function(content) {
                    saveAs(content, "shipments.zip");
                });
            }

            function downloadTrackingNumbers(shipments) {
                const trackingList = generateTrackingList(shipments);
                const blob = new Blob([trackingList], {type: 'text/plain'});
                saveAs(blob, "trackings.txt");
            }

            function downloadResultsCsv(shipments) {
                const csv = generateResultsCsv(shipments);
                const blob = new Blob([csv], {type: 'text/csv'});
                saveAs(blob, "shipments.csv");
            }

            function showFilePreview(file) {
                const $container = $('.batch-processing');
                
                // Add preview section after file upload
                $container.append(`
                    <div class="file-preview">
                        <div class="section-header">
                            <h3><i class="fas fa-file-alt"></i> Uploaded File</h3>
                        </div>
                        <div class="file-details">
                            <p><strong>Filename:</strong> ${file.name}</p>
                            <p><strong>Size:</strong> ${(file.size / 1024).toFixed(2)} KB</p>
                            <p><strong>Type:</strong> ${file.type || 'text/csv'}</p>
                        </div>
                    </div>
                `);
            }

            $(document).on('change', '.file-input', function(e) {
                if (this.files && this.files[0]) {
                    $(dragDropArea).removeData('csvContent');
                    const file = this.files[0];
                    
                    // Update UI to show selected file
                    dragDropArea.innerHTML = `
                        <div class="file-details">
                            <p><i class="fas fa-file-alt"></i> <strong>Filename:</strong> ${file.name}</p>
                            <p><i class="fas fa-weight-hanging"></i> <strong>Size:</strong> ${(file.size / 1024).toFixed(2)} KB</p>
                            <p><i class="fas fa-file-csv"></i> <strong>Type:</strong> ${file.type || 'text/csv'}</p>
                        </div>
                        <input type="file" id="file-input" name="csv_file" class="file-input" accept=".csv">
                        <button type="button" id="clear-csv" class="clear-csv-btn" style="display: block;">
                            <i class="fas fa-times"></i> Clear File
                        </button>
                    `;

                    // Enable rate button
                    $('#batch-rate-button')
                        .prop('disabled', false)
                        .addClass('active');

                    // Read file content
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        dragDropArea.dataset.csvContent = e.target.result;
                        try {
                            const shipments = parseCSV(e.target.result);
                            showAlert(`Loaded ${shipments.length} shipments from spreadsheet. Please check the details below!`, 'success');
                        } catch (error) {
                            showAlert(`Error parsing spreadsheet: ${error.message}`, 'error');
                            resetFileUpload();
                        }
                    };
                    reader.readAsText(file);
                }
            });

            // Clear button functionality
            $(document).on('click', '#clear-csv', function() {
                resetFileUpload();
            });
            // Add event listeners

            // Attach event handlers
            function attachBatchPurchaseHandlers() {
                // Remove any existing handlers first
                $('#single-purchase .purchase-confirm').off('click').on('click', handleSinglePurchase);
                $('#single-purchase .purchase-cancel').off('click').on('click', function() {
                    $('#single-purchase').hide();
                });
                $('#batch-purchase .purchase-confirm').off('click').on('click', handleBatchPurchase);
                $('#batch-purchase .purchase-cancel').off('click').on('click', function() {
                    $('#batch-purchase').hide();
                });
            }

            $('.purchase-exit, .purchase-cancel').on('click', function() {
                $('#batch-purchase').hide();
                $('.purchase-footer').html(`
                    <button class="purchase-cancel">Cancel</button>
                    <button class="purchase-confirm">Confirm & Purchase</button>
                `);
                attachBatchPurchaseHandlers();
            });
            $('#batch-rate-button').on('click', function(event) {
                event.preventDefault();
                
                const dragDropArea = document.querySelector('.drag-drop-area');
                const csvContent = dragDropArea.dataset.csvContent;

                console.log(csvContent);
                
                if (!csvContent) {
                    showAlert('Please select a CSV file first', 'error');
                    return;
                }

                // Show loading state
                $('.loading-overlay').show();

                try {
                    processProvidedCSV(csvContent);
                    
                    // Show service selection after processing
                    $('.batch-service-list').show();
                    
                    // Scroll to service selection - using scrollIntoView instead of animate
                    const serviceList = document.querySelector('.batch-service-list');
                    if (serviceList) {
                        serviceList.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                    
                } catch (error) {
                    showAlert('Error processing CSV file: ' + error.message, 'error');
                } finally {
                    $('.loading-overlay').hide();
                }
            });
            // File input change handler
            $('#file-input').on('change', function(e) {
                resetFileUpload();
                console.log(this.files);
                if (this.files && this.files[0]) {
                    const file = this.files[0];
                    
                    // Enable rate button
                    $('#batch-rate-button')
                        .prop('disabled', false)
                        .addClass('active');
                        
                    // Show clear button
                    $('#clear-csv').show();
                    
                    // Update file display
                    updateFileDisplay(file);
                }
            });

            function updateFileDisplay(file) {
                const dragDropArea = $('.drag-drop-area');
                
                dragDropArea.html(`
                    <div class="file-details">
                        <p><i class="fas fa-file-alt"></i> <strong>Filename:</strong> ${file.name}</p>
                        <p><i class="fas fa-weight-hanging"></i> <strong>Size:</strong> ${(file.size / 1024).toFixed(2)} KB</p>
                        <p><i class="fas fa-file-csv"></i> <strong>Type:</strong> ${file.type || 'text/csv'}</p>
                    </div>
                    <input type="file" id="file-input" name="csv_file" class="file-input" accept=".csv">
                    <button type="button" id="clear-csv" class="clear-csv-btn">
                        <i class="fas fa-times"></i> Clear File
                    </button>
                `);
            }

            function updateBatchProgress(current, total) {
                const percent = Math.round((current / total) * 100);
                $('.batch-progress').text(`Processing: ${percent}% (${current}/${total})`);
                
                // Update status icons in the UI
                $(`.shipment-card:nth-child(${current}) .shipment-status`)
                    .removeClass('pending')
                    .addClass('success')
                    .html('<i class="fas fa-check"></i><span>Processed</span>');
            }

            function generateCSVReport(shipments, results) {
                let csv = 'ServiceName,FromName,FromAddress,ToName,ToAddress,TrackingNumber\n';
                
                shipments.forEach((shipment, idx) => {
                    const result = results.find(r => r[2] === idx + 1);
                    const tracking = result ? result[0] : 'FAILED';
                    
                    csv += `${shipment.service_name},${shipment.sender_name},${shipment.sender_address1},${shipment.receiver_name},${shipment.receiver_address1},${tracking}\n`;
                });
                
                return csv;
            }

            function downloadFile(content, filename, type) {
                const blob = new Blob([content], { type: type });
                const url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = filename;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            }

            function parseCSV(csvContent) {
                try {
                    const lines = csvContent.split('\n').filter(line => line.trim());
                    
                    if (lines.length < 2) {
                        throw new Error('CSV file is empty or invalid');
                    }
                    
                    const shipments = [];
                    for (let i = 1; i < lines.length; i++) {
                        if (!lines[i].trim()) continue;
                        
                        const values = parseCSVLine(lines[i]);
                        
                        const shipment = {
                            service_name: values[0] || '',
                            sender_name: values[1] || '',
                            sender_phone: values[2] || '',
                            sender_company: values[3] || '',
                            sender_address1: values[4] || '',
                            sender_address2: values[5] || '',
                            sender_city: values[6] || '',
                            sender_state_province: values[7] || '',
                            sender_zip_postal: values[8] || '',
                            sender_country: values[9] || '',
                            receiver_name: values[10] || '',
                            receiver_phone: values[11] || '',
                            receiver_company: values[12] || '',
                            receiver_address1: values[13] || '',
                            receiver_address2: values[14] || '',
                            receiver_city: values[15] || '',
                            receiver_state_province: values[16] || '',
                            receiver_zip_postal: values[17] || '',
                            receiver_country: values[18] || '',
                            package_length: values[19] || '',
                            package_width: values[20] || '',
                            package_height: values[21] || '',
                            package_weight: values[22] || '',
                            package_description: values[23] || '',
                            package_reference1: values[24] || '',
                            package_reference2: values[25] || ''
                        };
                        
                        shipments.push(shipment);
                    }
                    
                    if (shipments.length === 0) {
                        throw new Error('No valid shipments found in CSV');
                    }
                    
                    return shipments;
                } catch (error) {
                    throw new Error(`CSV parsing error: ${error.message}`);
                }
            }

            function parseCSVLine(line) {
                const result = [];
                let current = '';
                let inQuotes = false;
                let quoteChar = null;
                
                for (let i = 0; i < line.length; i++) {
                    const char = line[i];
                    
                    if ((char === '"' || char === "'")) {
                        if (!inQuotes) {
                            inQuotes = true;
                            quoteChar = char;
                        } else if (quoteChar === char) {
                            if (i + 1 < line.length && line[i + 1] === char) {
                                // Handle escaped quotes
                                current += char;
                                i++;
                            } else {
                                // End of quoted section
                                inQuotes = false;
                                quoteChar = null;
                            }
                        } else {
                            // Different quote character inside quotes, treat as normal character
                            current += char;
                        }
                    } else if (char === ',' && !inQuotes) {
                        // End of field
                        result.push(current.trim());
                        current = '';
                    } else {
                        current += char;
                    }
                }
                
                // Push the last field
                result.push(current.trim());
                
                return result;
            }

            // Helper function to generate CSV report
            function generateCSVReport(results) {
                const headers = [
                    'Tracking Number',
                    'Status',
                    'Cost',
                    'Service',
                    'Recipient Name',
                    'Recipient Address',
                    'Error Message'
                ].join(',');

                const rows = results.map(result => [
                    result.tracking || '',
                    result.tracking ? 'Success' : 'Failed',
                    result.cost || '0.00',
                    result.service || '',
                    result.recipientName || '',
                    result.recipientAddress || '',
                    result.error || ''
                ].map(field => `"${field}"`).join(','));

                return [headers, ...rows].join('\n');
            }

            $('#batch-purchase .purchase-confirm').on('click', async function() {
                handleBatchPurchase();
            });


            async function handleBatchPurchase() {
                
                const loadingOverlay = $('.loading-overlay');
                const failedIndices = [];

                try {
                    $('.purchase-footer').html(`
                        <button class="purchase-history-btn">
                            <i class="fas fa-history"></i>
                            Purchase History
                        </button>
                    `);

                    $('.purchase-history-btn').on('click', function() {
                        window.location.href = '#history';
                    });
                    const csvContent = $('.drag-drop-area').data('csvContent');
                    if (!csvContent) {
                        throw new Error('No CSV file loaded');
                    }
                    const format = $('#batch input[name="label-type"]:checked').val();
                    const version = $('#batch-provider-version').val();
                    const manifested = $('#batch_manifest_postage').is(':checked');

                    const shipments = parseCSV(csvContent);
                    // Remove any existing animation class and reset opacity
                    loadingOverlay.css({
                        'animation': 'none',
                        'opacity': '1'
                    });
                    
                    loadingOverlay.html(`
                        <div class="loading-circle"></div>
                        <p>Processing Shipments (0 of ${shipments.length}), DO NOT Refresh the Page!</p>
                    `);

                    // Show overlay with flex display
                    loadingOverlay.css('display', 'flex');
                    let trackingsList = '';
                    let isAllSuccessful = true;

                    // Create storage for generated labels
                    const labelFiles = [];
                    console.log(shipments);

            // Process shipments in batches of 20
            const BATCH_SIZE = 1;
            let completed = 0;

            // Create chunks of shipments
            const chunks = [];
            for (let i = 0; i < shipments.length; i += BATCH_SIZE) {
                chunks.push(shipments.slice(i, i + BATCH_SIZE));
            }

            // Process a single shipment
            async function processShipment(shipment, index) {
                const courier = shipment.service_name.split(' ')[0].toLowerCase();
                // Get the saved version for this courier
                console.log(courierVersions);
                console.log(courier);
                const version = courierVersions[courier]; // fallback to default if not found
                try {
                    const response = await fetch('/application/buy', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            sender: {
                                sender_name: shipment.sender_name,
                                sender_company: shipment.sender_company,
                                sender_address1: shipment.sender_address1,
                                sender_address2: shipment.sender_address2,
                                sender_city: shipment.sender_city,
                                sender_state_province: shipment.sender_state_province,
                                sender_zip_postal: shipment.sender_zip_postal,
                                sender_country: shipment.sender_country,
                                sender_phone: shipment.sender_phone
                            },
                            receiver: {
                                receiver_name: shipment.receiver_name,
                                receiver_company: shipment.receiver_company,
                                receiver_address1: shipment.receiver_address1,
                                receiver_address2: shipment.receiver_address2,
                                receiver_city: shipment.receiver_city,
                                receiver_state_province: shipment.receiver_state_province,
                                receiver_zip_postal: shipment.receiver_zip_postal,
                                receiver_country: shipment.receiver_country,
                                receiver_phone: shipment.receiver_phone
                            },
                            package: {
                                package_weight: shipment.package_weight,
                                package_length: shipment.package_length,
                                package_width: shipment.package_width,
                                package_height: shipment.package_height,
                                package_description: shipment.package_description,
                                package_reference1: shipment.package_reference1,
                                package_reference2: shipment.package_reference2
                            },
                            service_name: shipment.service_name,
                            manifested: manifested,
                            version: version,
                            format: format
                        })
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message);
                    }

                    if (data.tracking_number) {
                        completed++;
                        loadingOverlay.find('p:eq(0)').text(`Processing Shipments (${completed} of ${shipments.length}), DO NOT Refresh the Page!`);

                        // Success case
                        cachedBatchResults.push({
                            tracking: data.tracking_number,
                            label: data.base64_encoded_image || data.base64_encoded_pdf,
                            index: index
                        });

                        $(`.shipment-card:nth-child(${index + 2}) .shipment-status`)
                            .removeClass('pending')
                            .addClass('success')
                            .html(`<i class="fas fa-check" style="color: #28a745;"></i>
                                <span style="margin-left: 5px;color: #28a745;">Success <span style="color: var(--text-color);"">•</span> <span class="tracking-number" style="font-size: inherit" title="Click to copy">${data.tracking_number}</span></span>`);

                            return {
                            success: true,
                            tracking: data.tracking_number,
                            index: index
                        };
                    } else {
                        cachedBatchResults.push({
                            tracking: null,
                            label: null,
                            cost: 0,
                            index: index // Store original index
                        });
                        throw new Error(data.message || 'Internal System Failure. Contact Support!');
                    }

                } catch (error) {
                    completed++;
                    loadingOverlay.find('p:eq(0)').text(`Processing Shipments (${completed} of ${shipments.length}), DO NOT Refresh the Page!`);
                    
                    console.error(`Error processing shipment ${index + 2}:`, error);
                    failedIndices.push([index + 1, error.message]);
                    cachedBatchResults.push({
                        tracking: null,
                        label: null,
                        cost: 0,
                        index: index // Store original index
                    });

                    $(`.shipment-card:nth-child(${index + 2}) .shipment-status`)
                        .removeClass('pending')
                        .addClass('error')
                        .html(`<i class="fas fa-times" style="color: #dc3545;"></i>
                            <span style="margin-left: 5px;color: #dc3545;">Failed <span style="color: var(--text-color);"">-</span> <span class="tracking-number" style="font-size: inherit" title="Click to copy">${error.message.replace(/Failed to Create Shipment:/i, '')}</span></span>`);

                    return {
                        success: false,
                        error: error.message,
                        index: index
                    };
                }
            }

            // Process each chunk of shipments
            for (let chunk of chunks) {
                const promises = chunk.map((shipment, i) => 
                    processShipment(shipment, i + (chunks.indexOf(chunk) * BATCH_SIZE))
                );
                
                await Promise.all(promises);
            }

            // Sort cached results by original index
            cachedBatchResults.sort((a, b) => a.index - b.index);

                    // Update file statuses and download button
                    if (cachedBatchResults.length > 0 && failedIndices.length == 0) {
                        updateFileStatus('errors.txt', 'unavailable');
                        updateFileStatus(`shipments.${format === 'IMAGE' ? 'zip' : 'pdf'}`, 'success');
                        updateFileStatus('shipments.csv', 'success');
                        updateFileStatus('trackings.txt', 'success');
                        $('.batch-download-btn').prop('disabled', false);
                    } else if (cachedBatchResults.length > 0 && failedIndices.length > 0) {
                        updateFileStatus('errors.txt', 'success');
                        updateFileStatus(`shipments.${format === 'IMAGE' ? 'zip' : 'pdf'}`, 'success');
                        updateFileStatus('shipments.csv', 'success');
                        updateFileStatus('trackings.txt', 'success');
                        $('.batch-download-btn').prop('disabled', false);
                    } else if (cachedBatchResults.length == 0 && failedIndices.length > 0) {
                        updateFileStatus('errors.txt', 'success');
                        updateFileStatus(`shipments.${format === 'IMAGE' ? 'zip' : 'pdf'}`, 'failed');
                        updateFileStatus('shipments.csv', 'failed');
                        updateFileStatus('trackings.txt', 'failed');
                        $('.batch-download-btn').prop('disabled', false);
                    } else {
                        updateFileStatus('errors.txt', 'unavailable');
                        updateFileStatus(`shipments.${format === 'IMAGE' ? 'zip' : 'pdf'}`, 'unavailable');
                        updateFileStatus('shipments.csv', 'unavailable');
                        updateFileStatus('trackings.txt', 'unavailable');
                        $('.batch-download-btn').prop('disabled', true);
                    }

                    // Show completion message
                    if (isAllSuccessful) {
                        showAlert(`Batch of #${cachedBatchResults.length} processed successfully. Download files listed below.`, 'success');
                    } else {
                        const errorDetails = failedIndices.map(([idx, err]) => 
                            `Shipment ${idx}: ${err}`
                        ).join('\n');
                        showAlert(`Batch completed with #${failedIndices.length} errors. Download the errors.txt for detailed messages.`, 'warning');
                    }

                    let subtractedBalance = cachedBatchShipments.reduce((total, shipment, index) => {
                        const result = cachedBatchResults[index];
                        if (result && result.tracking) {
                            const rateInfo = cachedRates[shipment.service_name];
                            const isManifested = $('#batch_manifest_postage').is(':checked');
                            const cost = isManifested && rateInfo?.manifested_cost ? 
                                rateInfo.manifested_cost : 
                                rateInfo?.standard_cost || 0;
                            return total + cost;
                        }
                        return total;
                    }, 0);

                    // Update batch summary
                    updateBatchSummary(cachedBatchResults.length, subtractedBalance, failedIndices.length);
                    updateDashboardStats();
                    cachedHistory = null;

                } catch (error) {
                    console.log(error);
                    showAlert('Batch failed from an internal error!', 'error');
                    $('.batch-download-btn').prop('disabled', true);
                } finally {
                    // Add fade out animation before hiding
                    loadingOverlay.css({
                        'animation': 'fadeOut 0.3s ease-in-out forwards'
                    });
                    
                    // Wait for animation to complete before hiding
                    setTimeout(() => {
                        loadingOverlay.hide();
                        // Reset the loading text
                        loadingOverlay.html(`
                            <div class="loading-circle"></div>
                            <p>Contacting Validators, DO NOT Refresh the Page!</p>
                        `);
                    }, 300);
                }
            };

            function downloadTrackings(results) {
                if (!results || results.length === 0) {
                    showAlert('No tracking numbers available', 'error');
                    return;
                }

                try {
                    const trackingsContent = results
                        .filter(r => r.tracking)
                        .map(r => r.tracking)
                        .join('\n');

                    const blob = new Blob([trackingsContent], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = 'trackings.txt';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    URL.revokeObjectURL(url);
                    
                    showAlert('Tracking numbers downloaded successfully', 'success');
                } catch (error) {
                    console.error('Download error:', error);
                    showAlert('Failed to download tracking numbers', 'error');
                }
            }

            function updateFileStatus(fileType, status, message = '') {
                const statusMap = {
                    'success': {
                        icon: '<i class="status-icon fas fa-check" style="color: #28a745;"></i>',
                        text: 'Complete'
                    },
                    'failed': {
                        icon: '<i class="status-icon fas fa-times" style="color: #dc3545;"></i>',
                        text: 'Failed'
                    },
                    'unavailable': {
                        icon: '<i class="status-icon fas fa-minus" style="color: #6c757d;"></i>',
                        text: 'Unavailable'
                    },
                    'pending': {
                        icon: '<i class="status-icon fas fa-clock" style="color: var(--btn-secondary);"></i>',
                        text: 'Pending'
                    }
                };

                const statusInfo = statusMap[status] || statusMap.pending;
                const $fileItem = $(`.file-item:contains('${fileType}')`);
                
                $fileItem.find('.status-container').html(`
                    <div class="status-text-right">
                        <div class="status-line">
                            ${statusInfo.text}${message ? `: ${message}` : ''}
                        </div>
                    </div>
                    ${statusInfo.icon}
                `);

                // Enable/disable download button based on status
                const $downloadBtn = $fileItem.find('.batch-download-btn');
                $downloadBtn.prop('disabled', status !== 'success');
            }

            // Helper functions
            function updateProcessingStatus(current, total) {
                return new Promise(resolve => {
                    const percent = Math.round((current / total) * 100);
                    $('.processing-status').text(`Processing shipment ${current}/${total} (${percent}%)`);
                    // Add small delay for UI update
                    setTimeout(resolve, 100);
                });
            }

            function updateShipmentStatus(index, status, details) {
                // For success, details would be tracking number
                // For failure, details would be error message
                
                const statusHtml = status === 'success' ? 
                    `<i class="fas fa-check" style="color: #28a745;"></i><span style="margin-left: 5px;">${details}</span>` : 
                    `<i class="fas fa-times" style="color: #dc3545;"></i><span style="margin-left: 5px;">${details}</span>`;
                    
                const statusClass = status === 'success' ? 'success' : 'error';

                $(`#shipments-list .shipment-card:nth-child(${index}) .shipment-status`)
                    .removeClass('pending')
                    .addClass(statusClass)
                    .html(statusHtml);
            }

            function updateBatchSummary(successCount, totalCost, failedCount) {
                $('#total-shipments').text(`#${successCount + failedCount}`);
                $('#total-cost').text(`${totalCost.toFixed(2)} USD`);
                if (failedCount > 0) {
                    $('#batch-summary').append(
                        `<p class="text-danger">${failedCount} shipments failed to process</p>`
                    );
                }
            }

            function generateCSVReport(shipments, results) {
                const headers = [
                    'ServiceName',
                    'FromName', 'FromAddress1', 'FromCity', 'FromState', 'FromZip',
                    'ToName', 'ToAddress1', 'ToCity', 'ToState', 'ToZip',
                    'Weight', 'Length', 'Width', 'Height',
                    'TrackingNumber', 'Cost', 'Status'
                ].join(',');

                const rows = shipments.map((shipment, index) => {
                    const result = results.find(r => r.index === index + 1) || {};
                    return [
                        shipment.service_name || '',
                        shipment.sender_name,
                        shipment.sender_address1,
                        shipment.sender_city,
                        shipment.sender_state_province,
                        shipment.sender_zip_postal,
                        shipment.receiver_name,
                        shipment.receiver_address1,
                        shipment.receiver_city,
                        shipment.receiver_state_province,
                        shipment.receiver_zip_postal,
                        shipment.package_weight,
                        shipment.package_length,
                        shipment.package_width,
                        shipment.package_height,
                        result.tracking || 'FAILED',
                        result.cost || '0.00',
                        result.tracking ? 'Success' : 'Failed'
                    ].join(',');
                });

                return [headers, ...rows].join('\n');
            }

            dragDropArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.borderColor = 'var(--btn-primary)';
                this.style.backgroundColor = 'rgba(195, 62, 237, 0.05)';
            });


            dragDropArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.style.borderColor = '';
                this.style.backgroundColor = '';
            });

            dragDropArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.borderColor = '';
                this.style.backgroundColor = '';
                
                const file = e.dataTransfer.files[0];
                if (file && file.name.toLowerCase().endsWith('.csv')) {
                    fileInput.files = e.dataTransfer.files;
                    const event = new Event('change');
                    fileInput.dispatchEvent(event);
                } else {
                    showAlert('Please upload a CSV file', 'error');
                }
            });

            function formatDisplayName(serviceName) {
                return serviceName
                    .split(',')[0]
                    .replace(/(?:Adult |)Signature Required|United States|International|Canada/g, '')
                    .trim();
            }

            // Add this helper function for address formatting
            function formatAddressDetails(addressInfo, prefix = 'receiver') {
                return {
                    name: toTitleCase(addressInfo[`${prefix}_name`] || ''),
                    phone: addressInfo[`${prefix}_phone`] || '',
                    company: toTitleCase(addressInfo[`${prefix}_company`] || ''),
                    address1: toTitleCase(addressInfo[`${prefix}_address1`] || ''),
                    address2: toTitleCase(addressInfo[`${prefix}_address2`] || ''),
                    city: toTitleCase(addressInfo[`${prefix}_city`] || ''),
                    state: (addressInfo[`${prefix}_state_province`] || '').toUpperCase(),
                    zip: (addressInfo[`${prefix}_zip_postal`] || '').toUpperCase(),
                    country: toTitleCase(addressInfo[`${prefix}_country`] || '')
                };
            }

            async function loadShipmentHistory(filter = 'all') {
                const loadingOverlay = $('.loading-overlay');
                loadingOverlay.css({
                        'animation': 'none',
                        'opacity': '1'
                    });
                    
                loadingOverlay.html(`
                    <div class="loading-circle"></div>
                    <p>Processing Shipment History, DO NOT Refresh the Page!</p>
                `);

                // Show overlay with flex display
                try {
                    let responseData;
                    if (!cachedHistory) {
                        loadingOverlay.css('display', 'flex');
                        const response = await fetch('/application/history/read');
                        if (!response.ok) throw new Error('Failed to fetch history');
                        responseData = await response.json();
                        cachedHistory = responseData.data || {};
                    }
                    
                    const historyList = $('.history-list');
                    historyList.empty();

                    let shipments = Object.entries(cachedHistory || {}).map(([tracking, shipment]) => ({
                        tracking_number: tracking,
                        ...shipment,
                        date_created_obj: new Date(shipment.date_created)
                    }));

                    // Sort shipments by date
                    shipments.sort((a, b) => b.date_created_obj - a.date_created_obj);

                    if (shipments.length === 0) {
                        historyList.html(`
                            <div class="empty-history">
                                <i class="fas fa-box"></i>
                                <p>No shipments found</p>
                            </div>
                        `);
                        return;
                    }

                    // First, sort all shipments by time
                    let sortedByTime = Object.entries(cachedHistory || {}).map(([tracking, shipment]) => ({
                        tracking_number: tracking,
                        ...shipment,
                        date_created_obj: new Date(shipment.date_created.replace(' ', 'T').replace(' UTC', 'Z'))
                    })).sort((a, b) => b.date_created_obj - a.date_created_obj);

                    // Then do batching based on time and service
                    const batchedShipments = [];
                    if (sortedByTime.length > 0) {
                        let currentBatch = [sortedByTime[0]];
                        
                        for (let i = 1; i < sortedByTime.length; i++) {
                            const currentShipment = sortedByTime[i];
                            const previousShipment = sortedByTime[i - 1];
                            
                            // Use getTime() for more accurate time difference calculation
                            const timeDiff = Math.abs(previousShipment.date_created_obj.getTime() - currentShipment.date_created_obj.getTime()) / 1000; // difference in seconds
                            
                            // If time is within 5 seconds
                            if (timeDiff <= 5) {
                                currentBatch.push(currentShipment);
                            } else {
                                // If current batch has only one shipment, add it directly
                                if (currentBatch.length === 1) {
                                    batchedShipments.push([currentBatch[0]]);
                                } else {
                                    // Add the batch if it has multiple shipments
                                    batchedShipments.push(currentBatch);
                                }
                                // Start new batch with current shipment
                                currentBatch = [currentShipment];
                            }
                        }
                        
                        // Handle the last batch
                        if (currentBatch.length === 1) {
                            batchedShipments.push([currentBatch[0]]);
                        } else if (currentBatch.length > 1) {
                            batchedShipments.push(currentBatch);
                        }
                    }
                    // Render batched shipments
                    batchedShipments.forEach((batch) => {
                        const isBatch = batch.length > 1;
                        const primaryShipment = batch[0];
                        const formattedToAddress = formatAddressDetails(primaryShipment.receiver_information, 'receiver');
                        const formattedFromAddress = formatAddressDetails(primaryShipment.sender_information, 'sender');
                        const displayServiceName = formatDisplayName(primaryShipment.service_name);

                        const formattedDate = new Date(primaryShipment.date_created.replace(' ', 'T').replace(' UTC', 'Z')).toLocaleString(undefined, {
                            year: 'numeric',
                            month: 'numeric', 
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: true
                        });
                        console.log(batch);
                        const service = getServiceDetails(primaryShipment.service_name);
                        const cardHtml = `
                <div class="history-item">
                    <div class="history-header">
                        <div class="service-info">
                            ${(() => {
                                const couriers = getBatchCouriers(batch);
                                const uniqueServices = new Set(batch.map(s => s.service_name));
                                return `
                                    <div class="courier-icons ${couriers.length > 1 ? 'stacked-icons-container' : ''}">
                                        ${createCourierIcons(couriers)}
                                    </div>
                                    <div class="service-details">
                                        <div class="service-name">
                                            ${formatBatchServiceDisplay(batch)}
                                        </div>
                                        ${batch.length === 1 ? 
                                            `<div class="tracking-number">${batch[0].tracking_number}</div>` : 
                                            `<div>${batch.length} Shipments</div>`}
                                    </div>
                                `;
                            })()}
                        </div>
                        <div class="recipient-info">
                            <div class="recipient-address">
                                ${isBatch ? 
                                    `<p><strong>Batch Processing</strong></p>
                                    <p>Expand to View All</p>` :
                                    `<p><strong>${formattedToAddress.name}</strong></p>
                                    ${formattedToAddress.company ? `<p>${formattedToAddress.company}</p>` : ''}
                                    ${formattedToAddress.phone ? `<p>${formattedToAddress.phone}</p>` : ''}
                                    <p>${formattedToAddress.address1}</p>
                                    ${formattedToAddress.address2 ? `<p>${formattedToAddress.address2}</p>` : ''}
                                    <p>${formattedToAddress.city}, ${formattedToAddress.state} ${formattedToAddress.zip}</p>`
                                }
                            </div>
                        </div>
                        <div class="cost-info">
                            <div class="date">${formattedDate}</div>
                            <div class="price">
                                $${(batch.reduce((sum, s) => sum + parseFloat(s.service_cost), 0)).toFixed(2)}
                                <i class="fa-solid fa-chevron-down" style="transition: transform 0.3s ease;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="shipping-info-container history-details" style="display: none;">
                        ${isBatch ? 
                            `<div class="shipping-address-container">
                                <div class="history-details-section">
                                    <h3><i class="fas fa-box"></i> Batch Summary</h3>
                                    <div class="batch-details">
                                        <div class="batch-info">
                                            <p><strong>Total Shipments:</strong> #${batch.length}</p>
                                            <p><strong>Total Costs:</strong> $${(batch.reduce((sum, s) => sum + parseFloat(s.service_cost), 0)).toFixed(2)} USD</p>
                                            <p><strong>Service(s) Used:</strong></p>
                                            ${(() => {
                                                const serviceCounts = batch.reduce((counts, shipment) => {
                                                    const baseService = shipment.service_name.split(',')[0];
                                                    counts[baseService] = (counts[baseService] || 0) + 1;
                                                    return counts;
                                                }, {});
                                                return Object.entries(serviceCounts)
                                                    .map(([service, count]) => `
                                                        <div style="margin-left: 20px; margin-bottom: 10px;">
                                                            <p>• ${formatDisplayName(service)} (${count} shipment${count > 1 ? 's' : ''})</p>
                                                        </div>
                                                    `)
                                                    .join('');
                                            })()}
                                            <p><strong>Date Purchased:</strong> ${formattedDate}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="history-details-section">
                                    <h3><i class="fas fa-tags"></i> Batch Details</h3>
                                    <div class="batch-labels">
                                        <div class="labels-grid">
                                            ${batch.map((shipment, index) => `
                                                <div class="label-card">
                                                    <div class="label-header">
                                                        <span class="label-number">Shipment #${index + 1}</span>
                                                        <span class="label-cost">$${parseFloat(shipment.service_cost).toFixed(2)}</span>
                                                    </div>
                                                    <div class="tracking-info">
                                                        <span class="tracking-number" title="Click to copy">${shipment.tracking_number}</span>
                                                    </div>
                                                    <div class="label-address">
                                                        <strong>${shipment.receiver_information.receiver_name}</strong><br>
                                                        ${shipment.receiver_information.receiver_company ? `${shipment.receiver_information.receiver_company}<br>` : ''}
                                                        ${shipment.receiver_information.receiver_phone ? `${shipment.receiver_information.receiver_phone}<br>` : ''}
                                                        ${shipment.receiver_information.receiver_address1}<br>
                                                        ${shipment.receiver_information.receiver_address2 ? `${shipment.receiver_information.receiver_address2}<br>` : ''}
                                                        ${shipment.receiver_information.receiver_city}, ${shipment.receiver_information.receiver_state_province} ${shipment.receiver_information.receiver_zip_postal}
                                                    </div>
                                                </div>
                                            `).join('')}
                                        </div>
                                    </div>
                                </div>
                            </div>` :
                            `<div class="shipping-address-container">
                                <div class="shipping-details-section batch-details">
                                    <h3><i class="fas fa-box"></i> Ship From</h3>
                                    <div class="address-details">
                                        <p><strong>${formattedFromAddress.name}</strong></p>
                                        ${formattedFromAddress.company ? `<p>${formattedFromAddress.company}</p>` : ''}
                                        ${formattedFromAddress.phone ? `<p>${formattedFromAddress.phone}</p>` : ''}
                                        <p>${formattedFromAddress.address1}</p>
                                        ${formattedFromAddress.address2 ? `<p>${formattedFromAddress.address2}</p>` : ''}
                                        <p>${formattedFromAddress.city}, ${formattedFromAddress.state} ${formattedFromAddress.zip}</p>
                                        <p>${countryCodeToName[formattedFromAddress.country.toUpperCase()] || formattedFromAddress.country}</p>
                                    </div>
                                </div>
                                <div class="shipping-details-section batch-details">
                                    <h3><i class="fas fa-map-marker-alt"></i> Ship To</h3>
                                    <div class="address-details">
                                        <p><strong>${formattedToAddress.name}</strong></p>
                                        ${formattedToAddress.company ? `<p>${formattedToAddress.company}</p>` : ''}
                                        ${formattedToAddress.phone ? `<p>${formattedToAddress.phone}</p>` : ''}
                                        <p>${formattedToAddress.address1}</p>
                                        ${formattedToAddress.address2 ? `<p>${formattedToAddress.address2}</p>` : ''}
                                        <p>${formattedToAddress.city}, ${formattedToAddress.state} ${formattedToAddress.zip}</p>
                                        <p>${countryCodeToName[formattedToAddress.country.toUpperCase()] || formattedToAddress.country}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="history-details-section batch-details">
                                <h3><i class="fas fa-truck"></i> Service Details</h3>
                                <div id="batch-service-details" class="service-details">
                                    <p><strong>Selected Service:</strong></p>
                                    <p>${service.name} • ${service.region}</p>
                                    <p><strong>Added Service(s):</strong></p>
                                    ${
                                        (service.features.adult_signature || 
                                        service.features.signature || 
                                        service.features.saturday_delivery || 
                                        service.features.restricted_delivery || 
                                        service.manifested) 
                                        ? 
                                        `<p>
                                            ${service.features.adult_signature ? 'Adult Signature Required Included<br>' : ''}
                                            ${service.features.signature ? 'Signature Required Included<br>' : ''}
                                            ${service.features.saturday_delivery ? 'Saturday Delivery Included<br>' : ''}
                                            ${service.features.restricted_delivery ? 'Restricted Delivery Included<br>' : ''}
                                            ${service.features.manifested ? 'Manifested Postage Included<br>' : ''}
                                        </p>`
                                        : 
                                        '<p>No Additional Services Added</p>'
                                    }
                                    <p><strong>Package Details:</strong></p>
                                    <p>Weight: ${primaryShipment.package_information.package_weight} ${primaryShipment.package_information.package_weight_unit || 'LBS'} • Dimensions: ${primaryShipment.package_information.package_length}" × ${primaryShipment.package_information.package_width}" × ${primaryShipment.package_information.package_height}"</p>
                                    
                                    ${(primaryShipment.package_information.package_description || 
                                        primaryShipment.package_information.package_reference1 || 
                                        primaryShipment.package_information.package_reference2) 
                                        ?
                                        `<p><strong>Reference(s):</strong></p>
                                        <p>${primaryShipment.package_information.package_description ? `Description: ${primaryShipment.package_information.package_description}<br>` : ''}
                                        ${primaryShipment.package_information.package_reference1 ? `Reference 1: ${primaryShipment.package_information.package_reference1}<br>` : ''}
                                        ${primaryShipment.package_information.package_reference2 ? `Reference 2: ${primaryShipment.package_information.package_reference2}` : ''}</p>`
                                        :
                                        ''
                                    }
                                    
                                    <p><strong>Purchase Information:</strong></p>
                                    <p>Cost: $${parseFloat(primaryShipment.service_cost).toFixed(2)}<br>
                                    Date Purchased: ${formattedDate}<br>
                                    Tracking: ${primaryShipment.tracking_number}</p>
                                </div>
                            </div>`
                        }
                        <div class="action-buttons">
                            ${isBatch ? 
                                `<button onclick="downloadBatchLabels('${batch.map(s => s.tracking_number).join(',')}')" class="action-btn">
                                    <i class="fas fa-download"></i> Download All Labels
                                </button>
                                <button onclick="copyTracking('${batch.map(s => s.tracking_number).join(`\\n`)}')" class="action-btn">
                                    <i class="fas fa-copy"></i> Copy All Trackings
                                </button>` :
                                `<button onclick="downloadLabel('${primaryShipment.tracking_number}')" class="action-btn">
                                    <i class="fas fa-download"></i> Download Label
                                </button>
                                <button onclick="copyTracking('${primaryShipment.tracking_number}')" class="action-btn">
                                    <i class="fas fa-copy"></i> Copy Tracking
                                </button>`
                            }
                        </div>
                    </div>
                </div>
            `;
                        console.log(batch.map(s => s.tracking_number).join(','));
                        historyList.append(cardHtml);
                    });
                } catch (error) {
                    console.error('Error loading history:', error);
                    showAlert('System Offline: Failed to Load Shipment History', 'error');
                } finally {
                    // Add fade out animation before hiding
                    loadingOverlay.css({
                        'animation': 'fadeOut 0.3s ease-in-out forwards'
                    });
                    
                    // Wait for animation to complete before hiding
                    setTimeout(() => {
                        loadingOverlay.hide();
                        // Reset the loading text
                        loadingOverlay.html(`
                            <div class="loading-circle"></div>
                            <p>Contacting Validators, DO NOT Refresh the Page!</p>
                        `);
                    }, 300);
                }
            }


            function getBatchIcon(shipment) {
                if (shipment.batch_size > 1) {
                    return `
                        <div class="batch-icon">
                            <i class="fas fa-layer-group"></i>
                            <span class="batch-count">${shipment.batch_size}</span>
                        </div>
                    `;
                }
                return `<img src="/static/png/${shipment.service_courier.toLowerCase()}.png" 
                            alt="${shipment.service_courier}" 
                            class="rate-courier-logo" type="image/x-icon" crossorigin="anonymous">`;
            }

            function getBatchCouriers(batch) {
                const couriers = new Set(batch.map(s => s.service_name.split(' ')[0].toUpperCase()));
                return Array.from(couriers).sort();
            }

            function formatBatchServiceDisplay(batch) {
                const couriers = getBatchCouriers(batch);
                const uniqueServices = new Set(batch.map(s => s.service_name));
                
                // If it's a single label or all labels use the same service
                if (batch.length === 1 || uniqueServices.size === 1) {
                    return formatDisplayName(batch[0].service_name);
                }
                
                // If multiple services but single courier
                if (couriers.length === 1) {
                    return `${couriers[0]} Services`;
                }
                
                // If multiple couriers
                return `${couriers.join(' & ')} Services`;
            }

            function createCourierIcons(couriers) {
                return couriers.map((courier, index) => `
                    <img src="/static/png/${courier.toLowerCase()}.png" 
                        alt="${courier}" 
                        class="history-courier-logo ${couriers.length > 1 ? 'stacked-icon' : ''}"
                        style="${couriers.length > 1 ? `margin-left: -${index * 10}px; margin-top: ${index * 10}px;` : ''}"
                        type="image/x-icon" 
                        crossorigin="anonymous">
                `).join('');
            }

            $('<style>').text(`
                .history-item {
                    cursor: pointer;
                }
                
                .history-header:hover {
                    background-color: rgba(195, 62, 237, 0.05);
                }

                .history-details {
                    display: none;
                }

                .cost-info .fa-solid {
                    transition: transform 0.3s ease;
                }

                .cost-info .fa-chevron-up {
                    transform: rotate(180deg);
                }
            `).appendTo('head');
            window.downloadLabel = async function(trackingNumber) {
                try {
                    const response = await fetch(`/application/history/label/${trackingNumber}`);
                    if (!response.ok) throw new Error('Failed to fetch label');
                    
                    const data = await response.json();
                    if (!data.label) throw new Error('No label data received');
                    
                    const link = document.createElement('a');
                    link.href = `data:${data.label.type};base64,${data.label.data}`;
                    link.download = `label-${trackingNumber}.${data.label.type === 'application/pdf' ? 'pdf' : 'png'}`;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    showAlert('Label downloaded successfully', 'success');
                } catch (error) {
                    console.error('Error downloading label:', error);
                    showAlert('Failed to download label', 'error');
                }
            };

            window.copyTracking = function(trackingNumber) {
                navigator.clipboard.writeText(trackingNumber).then(() => {
                    showAlert('Tracking number(s) copied to your clipboard.', 'success');
                }).catch(() => {
                    showAlert('Failed to copy tracking number(s)!', 'error');
                });
            };

            // Helper functions
            function getStatusClass(status) {
                const statusMap = {
                    'created': 'status-created',
                    'transit': 'status-transit',
                    'delivered': 'status-delivered',
                    'exception': 'status-exception'
                };
                return statusMap[status.toLowerCase()] || 'status-default';
            }

            function getStatusIcon(status) {
                const iconMap = {
                    'created': 'fas fa-tag',
                    'transit': 'fas fa-truck',
                    'delivered': 'fas fa-check-circle',
                    'exception': 'fas fa-exclamation-circle'
                };
                return iconMap[status.toLowerCase()] || 'fas fa-circle';
            }
            // Add event listeners
            $('#history-filter').on('change', function() {
                loadShipmentHistory($(this).val());
            });

            $('.history-search-input').on('input', function() {
                const searchTerm = $(this).val().toLowerCase();
                $('.history-item').each(function() {
                    const text = $(this).text().toLowerCase();
                    $(this).toggle(text.includes(searchTerm));
                });
            });

            $(document).on('click', '.download-label-btn', async function() {
                const shipmentId = $(this).data('id');
                try {
                    const response = await fetch(`/application/history/label/${shipmentId}`);
                    if (!response.ok) throw new Error('Failed to fetch label');
                    
                    const data = await response.json();
                    const label = data.label;
                    
                    // Create download link
                    const link = document.createElement('a');
                    link.href = `data:${label.type};base64,${label.data}`;
                    link.download = `label-${shipmentId}.${label.type === 'application/pdf' ? 'pdf' : 'png'}`;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                } catch (error) {
                    console.error('Error downloading label:', error);
                    showAlert('Failed to download label', 'error');
                }
            });

            $(document).on('click', '.copy-tracking-btn', function() {
                const tracking = $(this).data('tracking');
                navigator.clipboard.writeText(tracking).then(() => {
                    showAlert('Tracking number copied to clipboard', 'success');
                }).catch(() => {
                    showAlert('Failed to copy tracking number', 'error');
                });
            });

            // Load history when the page loads
            // After appending the history items, update the event handlers
            $(document).ready(function() {
                // Remove existing click handlers
                $(document).off('click', '.history-header');
                $(document).off('click', '.tracking-number');

                // Add new click handler for tracking number
                $(document).on('click', '.tracking-number', function(e) {
                    e.stopPropagation(); // Prevent triggering the parent's click event
                    const tracking = $(this).text();
                    if (tracking.includes('Labels')) return; // Don't copy if it's a batch label count
                    
                    navigator.clipboard.writeText(tracking).then(() => {
                        // Show the alert instead of a tooltip
                        showAlert(`${tracking} Copied to Clipboard!`, 'success');
                    }).catch(() => {
                        showAlert('Failed to copy tracking number', 'error');
                    });
                });

                // Add click handler for the entire card
                $(document).on('click', '.history-header', function(e) {
                // Don't expand if clicking tracking number
                if ($(e.target).hasClass('tracking-number')) return;
                
                const $details = $(this).closest('.history-item').find('.history-details');
                const $icon = $(this).find('.cost-info .fa-solid');
                const $currentCard = $(this).closest('.history-item');
                
                // Close other cards
                $('.history-item').not($currentCard).each(function() {
                    const $otherDetails = $(this).find('.history-details');
                    $otherDetails.removeClass('expanded');
                    setTimeout(() => $otherDetails.hide(), 250);
                    $(this).find('.cost-info .fa-solid').css('transform', 'rotate(0deg)');
                });
                
                // Toggle current card
                if ($details.is(':visible')) {
                    $details.removeClass('expanded');
                    setTimeout(() => $details.hide(), 250);
                    $icon.css('transform', 'rotate(0deg)');
                } else {
                    $details.show().addClass('expanded');
                    $icon.css('transform', 'rotate(180deg)');
                }
            });
            });

            window.downloadLabel = async function(trackingNumber) {
    const modal = $(`
        <div class="single-purchase-overlay" style="display: flex;">
            <div class="single-purchase-content" style="max-width: 400px;">
                <div class="single-purchase-header">
                    <h2>Download Label</h2>
                    <button class="purchase-exit"><i class="fas fa-times"></i></button>
                </div>
                <div class="shipping-details-section">
                    <h3><i class="fas fa-file"></i> Label Format</h3>
                    <div class="label-type-container">
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="pdfv1">
                            <span class="radio-custom"></span>
                            <span class="label-text">PDFv1 Label</span>
                        </label>
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="pdfv2">
                            <span class="radio-custom"></span>
                            <span class="label-text">PDFv2 Label</span>
                        </label>
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="image" checked>
                            <span class="radio-custom"></span>
                            <span class="label-text">Image Label</span>
                        </label>
                    </div>
                </div>
                <div class="purchase-footer">
                    <button class="purchase-cancel">Cancel</button>
                    <button class="purchase-confirm">Download</button>
                </div>
            </div>
        </div>
    `);

    modal.find('.purchase-exit, .purchase-cancel').on('click', () => modal.remove());
    
    modal.find('.purchase-confirm').on('click', async function() {
        const format = modal.find('input[name="history-label-type"]:checked').val();
        modal.remove();

        try {
            const response = await fetch(`/application/history/${trackingNumber}?format=${format}`);
            if (!response.ok) throw new Error('Failed to fetch label');
            
            const data = await response.json();
            const labelData = data.data.base64_encoded_pdf || data.data.base64_encoded_image;
            if (!labelData) throw new Error('No label data received');
            
            const isPDF = !!data.data.base64_encoded_pdf;

            if (isPDF) {
                try {
                    const mergedPdf = await PDFLib.PDFDocument.create();
                    const pdfBytes = atob(labelData);
                    const uint8Array = new Uint8Array(pdfBytes.length);
                    for (let i = 0; i < pdfBytes.length; i++) {
                        uint8Array[i] = pdfBytes.charCodeAt(i);
                    }
                    
                    const pdf = await PDFLib.PDFDocument.load(uint8Array);
                    const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                    pages.forEach(page => mergedPdf.addPage(page));
                    
                    const mergedPdfBytes = await mergedPdf.save();
                    const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
                    saveAs(blob, `shipments.pdf`);
                    showAlert('Label downloaded successfully', 'success');
                } catch (error) {
                    console.error('Error processing PDF:', error);
                    showAlert('Failed to process PDF label', 'error');
                }
            } else {
                const zip = new JSZip();
                zip.file(`${trackingNumber}.png`, labelData, {base64: true});
                const content = await zip.generateAsync({type: 'blob'});
                saveAs(content, 'shipments.zip');
                showAlert('Label downloaded successfully', 'success');
            }
        } catch (error) {
            console.error('Error downloading label:', error);
            showAlert('Failed to download label', 'error');
        }
    });

    $('body').append(modal);
};

window.downloadLabel = async function(trackingNumber) {
    const modal = $(`
        <div class="single-purchase-overlay" style="display: flex;">
            <div class="single-purchase-content" style="max-width: 400px;">
                <div class="single-purchase-header">
                    <h2>Download Label</h2>
                    <button class="purchase-exit"><i class="fas fa-times"></i></button>
                </div>
                <div class="shipping-details-section">
                    <h3><i class="fas fa-file"></i> Label Format</h3>
                    <div class="label-type-container">
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="pdfv1">
                            <span class="radio-custom"></span>
                            <span class="label-text">PDFv1 Label</span>
                        </label>
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="pdfv2">
                            <span class="radio-custom"></span>
                            <span class="label-text">PDFv2 Label</span>
                        </label>
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="image" checked>
                            <span class="radio-custom"></span>
                            <span class="label-text">Image Label</span>
                        </label>
                    </div>
                </div>
                <div class="purchase-footer">
                    <button class="purchase-cancel">Cancel</button>
                    <button class="purchase-confirm">Download</button>
                </div>
            </div>
        </div>
    `);

    modal.find('.purchase-exit, .purchase-cancel').on('click', () => modal.remove());
    
    modal.find('.purchase-confirm').on('click', async function() {
    const format = modal.find('input[name="history-label-type"]:checked').val();
    modal.remove();

    const loadingOverlay = $('.loading-overlay');
    loadingOverlay.css({
        'animation': 'none',
        'opacity': '1'
    });
    loadingOverlay.html(`
        <div class="loading-circle"></div>
        <p>Processing Label Download, DO NOT Refresh the Page!</p>
    `);
    loadingOverlay.css('display', 'flex');

        try {
            const response = await fetch(`/application/history/${trackingNumber}?format=${format}`);
            if (!response.ok) throw new Error('Failed to fetch label');
            
            const data = await response.json();
            const labelData = data.data.base64_encoded_pdf || data.data.base64_encoded_image;
            if (!labelData) throw new Error('No label data received');
            
            const isPDF = !!data.data.base64_encoded_pdf;

            if (isPDF) {
                const mergedPdf = await PDFLib.PDFDocument.create();
                const pdfBytes = atob(labelData);
                const uint8Array = new Uint8Array(pdfBytes.length);
                for (let i = 0; i < pdfBytes.length; i++) {
                    uint8Array[i] = pdfBytes.charCodeAt(i);
                }
                
                const pdf = await PDFLib.PDFDocument.load(uint8Array);
                const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                pages.forEach(page => mergedPdf.addPage(page));
                
                const mergedPdfBytes = await mergedPdf.save();
                const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
                saveAs(blob, `${trackingNumber}.pdf`);
            } else {
                const blob = new Blob([Uint8Array.from(atob(labelData), c => c.charCodeAt(0))], { type: 'image/png' });
                saveAs(blob, `${trackingNumber}.png`);
            }
            showAlert('Label downloaded successfully', 'success');
        } catch (error) {
            console.error('Error downloading label:', error);
            showAlert('Failed to download label', 'error');
        } finally {
            loadingOverlay.css({
                'animation': 'fadeOut 0.3s ease-in-out forwards'
            });
            setTimeout(() => {
                loadingOverlay.hide();
                loadingOverlay.html(`
                    <div class="loading-circle"></div>
                    <p>Contacting Validators, DO NOT Refresh the Page!</p>
                `);
            }, 300);
        }
    });
    $('body').append(modal);
};

window.downloadBatchLabels = async function(trackingNumbers) {
    const modal = $(`
        <div class="single-purchase-overlay" style="display: flex;">
            <div class="single-purchase-content" style="max-width: 400px;">
                <div class="single-purchase-header">
                    <h2>Download Batch Labels</h2>
                    <button class="purchase-exit"><i class="fas fa-times"></i></button>
                </div>
                <div class="shipping-details-section">
                    <h3><i class="fas fa-file"></i> Label Format</h3>
                    <div class="label-type-container">
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="pdfv1">
                            <span class="radio-custom"></span>
                            <span class="label-text">PDFv1 Label</span>
                        </label>
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="pdfv2">
                            <span class="radio-custom"></span>
                            <span class="label-text">PDFv2 Label</span>
                        </label>
                        <label class="label-type-option">
                            <input type="radio" name="history-label-type" value="image" checked>
                            <span class="radio-custom"></span>
                            <span class="label-text">Image Label</span>
                        </label>
                    </div>
                </div>
                <div class="purchase-footer">
                    <button class="purchase-cancel">Cancel</button>
                    <button class="purchase-confirm">Download</button>
                </div>
            </div>
        </div>
    `);

    modal.find('.purchase-exit, .purchase-cancel').on('click', () => modal.remove());
    
    modal.find('.purchase-confirm').on('click', async function() {
        const format = modal.find('input[name="history-label-type"]:checked').val();
        modal.remove();

        try {
            const trackingArray = trackingNumbers.split(',');
            const loadingOverlay = $('.loading-overlay');
            loadingOverlay.css({
                'animation': 'none',
                'opacity': '1'
            });
            loadingOverlay.html(`
                <div class="loading-circle"></div>
                <p>Processing Labels (0 of ${trackingArray.length}), DO NOT Refresh the Page!</p>
            `);
            loadingOverlay.css('display', 'flex');

            let isPDF = false;
            const zip = new JSZip();
            let successCount = 0;
            const mergedPdf = await PDFLib.PDFDocument.create();

            for (const tracking of trackingArray) {
                try {
                    const response = await fetch(`/application/history/${tracking}?format=${format}`);
                    if (!response.ok) continue;
                    
                    const data = await response.json();
                    const labelData = data.data.base64_encoded_pdf || data.data.base64_encoded_image;
                    if (!labelData) continue;

                    isPDF = !!data.data.base64_encoded_pdf;

                    if (isPDF) {
                        const pdfBytes = atob(labelData);
                        const uint8Array = new Uint8Array(pdfBytes.length);
                        for (let i = 0; i < pdfBytes.length; i++) {
                            uint8Array[i] = pdfBytes.charCodeAt(i);
                        }
                        
                        const pdf = await PDFLib.PDFDocument.load(uint8Array);
                        const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                        pages.forEach(page => mergedPdf.addPage(page));
                    } else {
                        zip.file(`${tracking}.png`, labelData, {base64: true});
                    }
                    successCount++;
                    loadingOverlay.find('p').text(`Processing Download (${successCount} of ${trackingArray.length}), DO NOT Refresh the Page!`);
                } catch (error) {
                    console.error(`Error processing ${tracking}:`, error);
                }
            }

            if (successCount === 0) {
                throw new Error('No labels could be processed');
            }

            if (isPDF) {
                const mergedPdfBytes = await mergedPdf.save();
                const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
                saveAs(blob, 'shipments.pdf');
            } else {
                const content = await zip.generateAsync({type: 'blob'});
                saveAs(content, 'shipments.zip');
            }
            
            showAlert(`Successfully processed ${successCount} labels`, 'success');
        } catch (error) {
            console.error('Error downloading batch labels:', error);
            showAlert('Failed to download labels', 'error');
        } finally {
            const loadingOverlay = $('.loading-overlay');
            loadingOverlay.css({
                'animation': 'fadeOut 0.3s ease-in-out forwards'
            });
            setTimeout(() => {
                loadingOverlay.hide();
                loadingOverlay.html(`
                    <div class="loading-circle"></div>
                    <p>Contacting Validators, DO NOT Refresh the Page!</p>
                `);
            }, 300);
        }
    });

    $('body').append(modal);
};
        $('.crypto-option').on('click', function() {
            // Remove selected class from all options
            $('.crypto-option').removeClass('selected');
            // Add selected class to clicked option
            $(this).addClass('selected');
        });

        $('.create-invoice-btn').on('click', function(event) {
            event.preventDefault();
            const amount = $('#invoice_amount').val();
            
            // Get the selected crypto from the element with 'selected' class
            const selectedCrypto = $('.crypto-option.selected').length ? 
                $('.crypto-option.selected').data('crypto') : 'btc'; // Default to btc if none selected
            
            if (!amount || isNaN(amount) || amount <= 0) {
                showAlert('Please Enter a Valid Amount to Deposit!', 'error');
                return;
            }

            // Static values for rates and addresses
            const rates = {
                btc: 35000,
                ltc: 70,
                xmr: 170
            };

            const addresses = {
                btc: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
                ltc: 'ltc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
                xmr: '44AFFq5kSiGBoZ4NMDwYtN18obc8AemS33DBLWs3H7otXft3XjrpDtQGv7SqSsaBYBb98uNbr2VBBEt7f2wfn3RVGQBEP3A'
            };

            const cryptoAmount = (amount / rates[selectedCrypto]).toFixed(8);
            const cryptoUpperCase = selectedCrypto.toUpperCase();
            const paymentData = `${selectedCrypto}:${addresses[selectedCrypto]}?amount=${cryptoAmount}`;
            const paymentUrl = `https://${selectedCrypto}.com/pay/${addresses[selectedCrypto]}?amount=${cryptoAmount}`; // Example URL format

            // Create and show popup overlay
            const overlay = $(`
                <div class="single-purchase-overlay" style="display: flex;">
                    <div class="single-purchase-content">
                        <div class="single-purchase-header">
                            <h2>Payment Invoice</h2>
                            <button class="purchase-exit"><i class="fas fa-times"></i></button>
                        </div>
                        <div class="shipping-info-container">
                            <div class="payment-layout">
                                <div class="payment-details">
                                    <div class="payment-field">
                                        <label>Amount to Send:</label>
                                        <div class="copy-box">
                                            <span class="amount">${cryptoAmount}</span>
                                            <span class="currency">${cryptoUpperCase}</span>
                                            <button class="copy-btn" title="Copy amount">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="payment-field">
                                        <label>Send to Address:</label>
                                        <div class="copy-box">
                                            <span class="address">${addresses[selectedCrypto]}</span>
                                            <button class="copy-btn" title="Copy address">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="payment-field">
                                        <label>Payment Link:</label>
                                        <div class="copy-box">
                                            <a href="${paymentUrl}" target="_blank" class="payment-link" style="text-decoration: none; color: inherit;">
                                                ${paymentUrl}
                                            </a>
                                            <button class="copy-btn" title="Copy payment link">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="payment-field expiration">
                                        <label>Expires in:</label>
                                        <div class="countdown">29:59</div>
                                    </div>
                                </div>
                                <div class="qr-code">
                                    <div id="qrcode"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `);

// Add to page first so we can access the element
$('body').append(overlay);

// Generate QR code
new QRCode(document.getElementById("qrcode"), {
    text: paymentData,
    width: 200,
    height: 200,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

// Style the QR code container
$('#qrcode').css({
    'background': 'white',
    'padding': '10px',
    'border-radius': '5px',
    'display': 'inline-block'
});

// Add click handlers for close buttons
overlay.find('.purchase-exit').on('click', function() {
    overlay.remove();
});

// Add copy functionality
overlay.find('.copy-btn').on('click', function() {
    const textToCopy = $(this).siblings('a').attr('href') || $(this).siblings('.amount, .address').text();
    navigator.clipboard.writeText(textToCopy).then(() => {
        const originalHtml = $(this).html();
        $(this).html('<i class="fas fa-check"></i>');
        setTimeout(() => {
            $(this).html(originalHtml);
        }, 1500);
    }).catch(() => {
        showAlert('Failed to copy to clipboard', 'error');
    });
});

// Add countdown timer
let timeLeft = 30 * 60;
const countdownTimer = setInterval(() => {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    overlay.find('.countdown').text(
        `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    );
    
    if (timeLeft <= 0) {
        clearInterval(countdownTimer);
        overlay.remove();
        showAlert('Payment session expired. Please create a new invoice.', 'error');
    }
    timeLeft--;
}, 1000);
});

            async function loadAddressBook() {
                $('#add-address').off('click').on('click', function() {
                    showAddressModal(); // Call without parameters for new address
                });
                
                window.showAddressModal = function(existingAddress = null) {
                const modal = $(`
                    <div class="single-purchase-overlay" style="display: flex;">
                        <div class="single-purchase-content">
                            <div class="single-purchase-header">
                                <h2>${existingAddress ? 'Edit Address' : 'Add New Address'}</h2>
                                <button class="purchase-exit"><i class="fas fa-times"></i></button>
                            </div>
                            <div class="shipping-details-section">
                                <div class="section-header">
                                    <h2>Address Information</h2>
                                    <button class="paste-address-button">Paste Address</button>
                                </div>
                                <div class="paste-address-area" style="display: none;">
                                    <div class="input-container">
                                        <textarea class="form-control paste-address-textarea" placeholder=" "></textarea>
                                        <label class="floating-label">Paste your address here!</label>
                                    </div>
                                </div>
                                <form id="address-form">
                                    <div class="form-row">
                                        <div class="form-group-full">
                                            <div class="input-container">
                                                <input type="text" id="address_nickname" class="form-control" placeholder=" " 
                                                    value="${existingAddress?.nickname || ''}">
                                                <label for="address_nickname" class="floating-label">Address Nickname (optional)</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group-half">
                                            <div class="input-container">
                                                <input type="text" id="address_name" class="form-control" placeholder=" " required 
                                                    value="${existingAddress?.name || ''}">
                                                <label for="address_name" class="floating-label">Name</label>
                                            </div>
                                        </div>
                                        <div class="form-group-half">
                                            <div class="input-container">
                                                <input type="text" id="address_company" class="form-control" placeholder=" " 
                                                    value="${existingAddress?.company || ''}">
                                                <label for="address_company" class="floating-label">Company (optional)</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group-full">
                                            <div class="input-container">
                                                <input type="text" id="address_phone" class="form-control" placeholder=" " 
                                                    value="${existingAddress?.phone || ''}">
                                                <label for="address_phone" class="floating-label">Phone (optional)</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group-full">
                                            <div class="input-container">
                                                <input type="text" id="address_address1" class="form-control" placeholder=" " required 
                                                    value="${existingAddress?.address1 || ''}">
                                                <label for="address_address1" class="floating-label">Address</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group-full">
                                            <div class="input-container">
                                                <input type="text" id="address_address2" class="form-control" placeholder=" " 
                                                    value="${existingAddress?.address2 || ''}">
                                                <label for="address_address2" class="floating-label">Apt / Unit / Suite / etc. (optional)</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group-third">
                                            <div class="input-container">
                                                <input type="text" id="address_city" class="form-control" placeholder=" " required 
                                                    value="${existingAddress?.city || ''}">
                                                <label for="address_city" class="floating-label">City</label>
                                            </div>
                                        </div>
                                        <div class="form-group-third">
                                            <div class="input-container">
                                                <select id="address_state_province" class="form-control" required>
                                                    <option value="">Select Province</option>
                                                    <option value="AB" class="CA">Alberta</option>
                                                    <option value="BC" class="CA">British Columbia</option>
                                                    <option value="MB" class="CA">Manitoba</option>
                                                    <option value="NB" class="CA">New Brunswick</option>
                                                    <option value="NL" class="CA">Newfoundland and Labrador</option>
                                                    <option value="NS" class="CA">Nova Scotia</option>
                                                    <option value="ON" class="CA">Ontario</option>
                                                    <option value="PE" class="CA">Prince Edward Island</option>
                                                    <option value="QC" class="CA">Quebec</option>
                                                    <option value="SK" class="CA">Saskatchewan</option>
                                                    <option value="AL" class="US">Alabama</option>
                                                    <option value="AK" class="US">Alaska</option>
                                                    <option value="AZ" class="US">Arizona</option>
                                                    <option value="AR" class="US">Arkansas</option>
                                                    <option value="CA" class="US">California</option>
                                                    <option value="CO" class="US">Colorado</option>
                                                    <option value="CT" class="US">Connecticut</option>
                                                    <option value="DE" class="US">Delaware</option>
                                                    <option value="DC" class="US">District of Columbia</option>
                                                    <option value="FL" class="US">Florida</option>
                                                    <option value="GA" class="US">Georgia</option>
                                                    <option value="HI" class="US">Hawaii</option>
                                                    <option value="ID" class="US">Idaho</option>
                                                    <option value="IL" class="US">Illinois</option>
                                                    <option value="IN" class="US">Indiana</option>
                                                    <option value="IA" class="US">Iowa</option>
                                                    <option value="KS" class="US">Kansas</option>
                                                    <option value="KY" class="US">Kentucky</option>
                                                    <option value="LA" class="US">Louisiana</option>
                                                    <option value="ME" class="US">Maine</option>
                                                    <option value="MD" class="US">Maryland</option>
                                                    <option value="MA" class="US">Massachusetts</option>
                                                    <option value="MI" class="US">Michigan</option>
                                                    <option value="MN" class="US">Minnesota</option>
                                                    <option value="MS" class="US">Mississippi</option>
                                                    <option value="MO" class="US">Missouri</option>
                                                    <option value="MT" class="US">Montana</option>
                                                    <option value="NE" class="US">Nebraska</option>
                                                    <option value="NV" class="US">Nevada</option>
                                                    <option value="NH" class="US">New Hampshire</option>
                                                    <option value="NJ" class="US">New Jersey</option>
                                                    <option value="NM" class="US">New Mexico</option>
                                                    <option value="NY" class="US">New York</option>
                                                    <option value="NC" class="US">North Carolina</option>
                                                    <option value="ND" class="US">North Dakota</option>
                                                    <option value="OH" class="US">Ohio</option>
                                                    <option value="OK" class="US">Oklahoma</option>
                                                    <option value="OR" class="US">Oregon</option>
                                                    <option value="PA" class="US">Pennsylvania</option>
                                                    <option value="RI" class="US">Rhode Island</option>
                                                    <option value="SC" class="US">South Carolina</option>
                                                    <option value="SD" class="US">South Dakota</option>
                                                    <option value="TN" class="US">Tennessee</option>
                                                    <option value="TX" class="US">Texas</option>
                                                    <option value="UT" class="US">Utah</option>
                                                    <option value="VT" class="US">Vermont</option>
                                                    <option value="VA" class="US">Virginia</option>
                                                    <option value="WA" class="US">Washington</option>
                                                    <option value="WV" class="US">West Virginia</option>
                                                    <option value="WI" class="US">Wisconsin</option>
                                                    <option value="WY" class="US">Wyoming</option>
                                                </select>
                                                <label for="address_state_province" class="floating-label">Province</label>
                                            </div>
                                        </div>
                                        <div class="form-group-third">
                                            <div class="input-container">
                                                <input type="text" id="address_zip_postal" class="form-control" placeholder=" " required 
                                                    value="${existingAddress?.zip_postal || ''}">
                                                <label for="address_zip_postal" class="floating-label">Postal</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group-full">
                                            <div class="input-container">
                                                <select id="address_country" class="form-control" required>
                                                    <option value="United States" selected>United States</option>
                                                    <option value="Canada">Canada</option>
                                                </select>
                                                <label for="address_country" class="floating-label">Country</label>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="purchase-footer">
                                <button class="purchase-cancel">Cancel</button>
                                <button class="purchase-confirm">Save Address</button>
                            </div>
                        </div>
                    </div>
                `);

                // Add event handlers
                modal.find('.purchase-exit, .purchase-cancel').on('click', () => modal.remove());
                
                // Paste address functionality
                modal.find('.paste-address-button').on('click', function() {
                    const $pasteArea = modal.find('.paste-address-area');
                    if ($pasteArea.is(':visible')) {
                        $pasteArea.hide();
                        $(this).text('Paste Address');
                    } else {
                        $pasteArea.show();
                        $(this).text('Close Paste Address');
                    }
                });

                // Handle pasted address parsing
                modal.find('.paste-address-textarea').on('input', async function() {
                    const address = $(this).val();
                    const parsedAddress = await parseAddress(address);
                    if (parsedAddress) {
                        $('#address_name').val(parsedAddress.name);
                        $('#address_company').val(parsedAddress.company);
                        $('#address_address1').val(parsedAddress.address1);
                        $('#address_address2').val(parsedAddress.address2);
                        $('#address_city').val(parsedAddress.city);
                        $('#address_country').val(parsedAddress.country).trigger('change');
                        
                        // Set state/province after country change
                        setTimeout(() => {
                            const $stateSelect = $('#address_state_province');
                            const stateValue = parsedAddress.state_province.toUpperCase();
                            const countryClass = parsedAddress.country === 'Canada' ? 'CA' : 'US';
                            
                            const $matchingOption = $stateSelect.find(`option.${countryClass}`).filter(function() {
                                const optionValue = $(this).val().toUpperCase();
                                const optionText = $(this).text().toUpperCase();
                                return optionValue === stateValue || optionText.includes(stateValue);
                            });

                            if ($matchingOption.length) {
                                $stateSelect.val($matchingOption.val());
                            }
                        }, 100);

                        $('#address_zip_postal').val(parsedAddress.zip_postal);

                        // Update floating labels
                        modal.find('.input-container input, .input-container select').each(function() {
                            $(this).siblings('label').toggleClass('focused', this.value !== '');
                        });
                    }
                });

                // Handle country change for states/provinces
                modal.find('#address_country').on('change', function() {
                    const country = $(this).val();
                    const $stateSelect = modal.find('#address_state_province');
                    
                    // Reset state/province field
                    $stateSelect.val('');
                    
                    // Hide all options first
                    $stateSelect.find('option:not(:first)').hide();
                    
                    if (country === 'United States') {
                        $stateSelect.find('option.US').show();
                        $stateSelect.prop('disabled', false);
                        $stateSelect.removeClass('disabled');
                        $stateSelect.css('background-color', '');
                        $stateSelect.css('cursor', 'pointer');
                    } else if (country === 'Canada') {
                        $stateSelect.find('option.CA').show();
                        $stateSelect.prop('disabled', false);
                        $stateSelect.removeClass('disabled');
                        $stateSelect.css('background-color', '');
                        $stateSelect.css('cursor', 'pointer');
                    } else {
                        $stateSelect.prop('disabled', true);
                        $stateSelect.addClass('disabled');
                        $stateSelect.css('background-color', 'var(--input-border)');
                        $stateSelect.css('cursor', 'not-allowed');
                        $stateSelect.val('');
                    }
                }).trigger('change');

                if (existingAddress) {
                    modal.find('#address_country').val(existingAddress.country).trigger('change');
                    setTimeout(() => {
                        modal.find('#address_state_province').val(existingAddress.state_province);
                    }, 100);
                }

                // Handle form submission
                modal.find('.purchase-confirm').on('click', async function() {
                    const addressData = {
                        nickname: modal.find('#address_nickname').val(),
                        name: modal.find('#address_name').val(),
                        company: modal.find('#address_company').val(),
                        phone: modal.find('#address_phone').val(),
                        address1: modal.find('#address_address1').val(),
                        address2: modal.find('#address_address2').val(),
                        city: modal.find('#address_city').val(),
                        state_province: modal.find('#address_state_province').val(),
                        zip_postal: modal.find('#address_zip_postal').val(),
                        country: modal.find('#address_country').val()
                    };

                    try {
                        console.log(existingAddress);
                        if (existingAddress) {
                            // For updates, include the ID in the request
                            const response = await fetch('/application/address/update', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                                },
                                body: JSON.stringify({
                                    id: existingAddress.id,  // Include the ID
                                    address: addressData     // Include the address data
                                })
                            });

                            const data = await response.json();
                            console.log(data);
                            if (!response.ok) throw new Error(data.error || 'Failed to update address');
                        } else {
                            const response = await fetch('/application/address/create', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                                },
                                body: JSON.stringify({
                                    address: addressData
                                })
                            });

                            const data = await response.json();
                            if (!response.ok) throw new Error(data.error || 'Failed to create address');
                        }

                        modal.remove();
                        await loadAddressBook();  // Refresh the address book
                        showAlert(`Address ${existingAddress ? 'updated' : 'added'} successfully`, 'success');
                    } catch (error) {
                        console.error('Error saving address:', error);
                        showAlert(error.message || `Failed to ${existingAddress ? 'update' : 'add'} address`, 'error');
                    }
                });

                $('body').append(modal);
            };

            window.editAddress = function(id) {
                const $addressCard = $(`#address-book-container .address-card[data-id="${id}"]`);
                const address = $addressCard.data('address');
                // Add the ID to the address object explicitly
                address.id = id;  // Add this line to ensure the ID is included
                showAddressModal(address);
            };
            window.deleteAddress = async function(id) {
                // Create deletion confirmation modal
                const modal = $(`
                    <div class="single-purchase-overlay" style="display: flex;">
                        <div class="single-purchase-content" style="max-width: 300px;">
                            <div class="single-purchase-header">
                                <h2>Confirm Deletion?</h2>
                                <button class="purchase-exit"><i class="fas fa-times"></i></button>
                            </div>
                            <div class="purchase-footer">
                                <button class="purchase-cancel">Cancel</button>
                                <button class="purchase-confirm">Confirm</button>
                            </div>
                        </div>
                    </div>
                `);

                // Add event handlers
                modal.find('.purchase-exit, .purchase-cancel').on('click', () => modal.remove());
                
                modal.find('.purchase-confirm').on('click', async function() {
                    modal.remove();
                    try {
                        const response = await fetch('/application/address/delete', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ id })
                        });

                        if (!response.ok) throw new Error('Failed to delete address');

                        loadAddressBook();
                        showAlert('Address deleted successfully', 'success');
                    } catch (error) {
                        console.error('Error deleting address:', error);
                        showAlert('Failed to delete address', 'error');
                    }
                });

                $('body').append(modal);
            };
                try {
                    const response = await fetch('/application/address/read');
                    if (!response.ok) throw new Error('Failed to load addresses');
                    
                    const addresses = await response.json();
                    const container = $('#address-book-container');
                    container.empty();
                    
                    // Add search bar
                    container.append(`
                        <div class="address-search-bar">
                            <i class="fas fa-search"></i>
                            <input type="text" 
                                class="address-search-input"
                                placeholder="Search addresses..."
                                autocomplete="off"
                                spellcheck="false">
                        </div>
                    `);

                    $('.address-search-input').on('input', function() {
                        const searchTerm = $(this).val().toLowerCase();
                        $('.address-card').each(function() {
                            const addressText = $(this).find('.address-content').text().toLowerCase();
                            $(this).toggle(addressText.includes(searchTerm));
                        });
                    });

                    if (Object.keys(addresses).length === 0) {
                        container.append(`
                            <div class="no-services" style="text-align: center; padding: 20px;">
                                <p>No addresses available in your address book.</p>
                            </div>
                        `);
                        return;
                    }

                    Object.entries(addresses).forEach(([id, address], index, array) => {
                    const $card = $(`
                        <div class="address-card${index === array.length - 1 ? ' last-card' : ''}" data-id="${id}">
                            <div class="address-content">
                                <h4>${toTitleCase(address.nickname) || 'Unnamed Address'}</h4>
                                <p>${toTitleCase(address.name)}</p>
                                <p>${toTitleCase(address.address1)}</p>
                                ${address.address2 ? `<p>${toTitleCase(address.address2)}</p>` : ''}
                                <p>${toTitleCase(address.city)}, ${address.state_province.toUpperCase()} ${address.zip_postal.toUpperCase()}</p>
                                <p>${toTitleCase(address.country)}</p>
                            </div>
                            <div class="address-actions">
                                <button class="edit-address" onclick="editAddress('${id}')">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <button class="delete-address" onclick="deleteAddress('${id}')">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    `);
                    $card.data('address', address);
                    container.append($card);
                });
                } catch (error) {
                    console.error('Error loading address book:', error);
                    showAlert('Failed to load address book', 'error');
                }
            }
                    
        });
        function displayCSVTemplate(event) {  
            if (event) {
                event.preventDefault();  
            }
            
            const csvContent = "data:text/csv;charset=utf-8," + 
                "ServiceName," +
                "FromSenderName,FromPhone,FromCompany,FromStreet1,FromStreet2,FromCity,FromStateProvince,FromZipPostal,FromCountry," +
                "ToRecipientName,ToPhone,ToCompany,ToStreet1,ToStreet2,ToCity,ToStateProvince,ToZipPostal,ToCountry," +
                "PackageLength,PackageWidth,PackageHeight,PackageWeight,PackageDescription," +
                "PackageReference1,PackageReference2\n";

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "template.csv");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            return false;
        } 


        function logout() {
            window.location.href = '/logout';
        }
        
    
    </script>
</body>

</html>