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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Checkout | B-A Home Appliances</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" type="image/png" href="img/logo.png">
    <style>
    /* =========================================
       VARIABLES & CORE CSS
       ========================================= */
    :root {
        --primary: #00c6ff;
        --primary-hover: #0072ff;
        --secondary: #F4F6F9;
        --bg-color: #ffffff;
        --text-main: #1a1a1a;
        --text-muted: #6c757d;
        --border-color: #e9ecef;
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(255, 255, 255, 0.3);
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.05);
        --shadow-hover: 0 12px 48px rgba(0, 198, 255, 0.15);
        --radius-sm: 8px;
        --radius-md: 16px;
        --transition: all 0.3s ease;
    }

    [data-theme="dark"] {
        --bg-color: #121212;
        --secondary: #1e1e1e;
        --text-main: #f8f9fa;
        --text-muted: #adb5bd;
        --border-color: #2d2d2d;
        --glass-bg: rgba(30, 30, 30, 0.85);
        --glass-border: rgba(255, 255, 255, 0.05);
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 12px 48px rgba(0, 198, 255, 0.15);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        background-color: var(--bg-color);
        color: var(--text-main);
        line-height: 1.6;
        transition: background-color 0.3s, color 0.3s;
        -webkit-font-smoothing: antialiased;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
    }

    .glass {
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-hover), #00c6ff);
        color: white;
        padding: 16px 24px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: 1.1rem;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    .btn-primary:disabled {
        background: var(--text-muted);
        cursor: not-allowed;
        opacity: 0.7;
        transform: none;
        box-shadow: none;
    }

    .btn-outline {
        background: transparent;
        border: 1px solid var(--primary-hover);
        color: var(--primary-hover);
        padding: 12px 24px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .btn-outline:hover {
        background: linear-gradient(135deg, var(--primary-hover), #00c6ff);
        border-color: transparent;
        color: white;
    }

    /* =========================================
       HEADER
       ========================================= */
    header.header-premium {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 16px 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(225, 225, 234, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] header.header-premium {
        background: rgba(30, 30, 30, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .brand-logo {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .brand-icon {
        height: 36px;
        width: auto;
        object-fit: contain;
        filter: brightness(0) opacity(0.8);
    }

    [data-theme="dark"] .brand-icon {
        filter: brightness(1);
    }

    .brand-text {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .text-ba {
        font-size: 2rem;
        font-weight: 900;
        background: linear-gradient(135deg, #0B5ED7 0%, #00f2fe 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: "Arial Black", Impact, system-ui, sans-serif;
        letter-spacing: -1px;
        line-height: 1;
    }

    .text-appliances {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .back-link {
        color: var(--text-main);
        font-weight: 600;
        font-size: 1rem;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .back-link:hover {
        color: var(--primary-hover);
        transform: translateX(-5px);
    }

    /* =========================================
       CHECKOUT LAYOUT
       ========================================= */
    .checkout-container {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        padding: 40px 5%;
        align-items: start;
    }

    .checkout-sections {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .checkout-block {
        padding: 24px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
    }

    .checkout-block h3 {
        margin-bottom: 20px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 12px;
    }

    /* CART ITEMS */
    .cart-item {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
    }

    .cart-item img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
    }

    .cart-item-info {
        flex: 1;
    }

    .product-price {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-hover);
    }

    .qty-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
    }

    .qty-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--secondary);
        color: var(--text-main);
        font-weight: bold;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qty-btn:hover {
        background: var(--border-color);
    }

    /* FORMS */
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .form-row .form-group {
        margin-bottom: 0;
    }

    .form-group label {
        margin-bottom: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .form-control {
        padding: 14px 12px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
        background: var(--secondary);
        color: var(--text-main);
        outline: none;
        transition: var(--transition);
        font-family: inherit;
        font-size: 16px;
        /* 16px prevents iOS zoom */
    }

    .form-control:focus {
        border-color: var(--primary-hover);
        box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.15);
        background: var(--bg-color);
    }

    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
        padding-right: 40px;
        cursor: pointer;
    }

    /* COMPACT SELECTION CARDS */
    .selection-card {
        background: var(--secondary);
        border: 1px solid var(--border-color);
        padding: 16px 20px;
        border-radius: var(--radius-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .selection-card:hover {
        border-color: var(--primary-hover);
        box-shadow: var(--shadow-soft);
        background: rgba(0, 198, 255, 0.05);
    }

    .selection-info p {
        margin-bottom: 4px;
        font-size: 0.95rem;
        color: var(--text-main);
    }

    .selection-info strong {
        color: var(--primary-hover);
        font-size: 1.1rem;
    }

    .edit-btn {
        color: var(--text-muted);
        font-size: 0.9rem;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        padding: 10px 16px;
        border-radius: 50px;
        font-weight: 600;
        transition: var(--transition);
        pointer-events: none;
    }

    .selection-card:hover .edit-btn {
        background: linear-gradient(135deg, var(--primary-hover), #00c6ff);
        color: white;
        border-color: transparent;
    }

    .arrow-icon {
        color: var(--text-muted);
        font-size: 1.2rem;
        transition: var(--transition);
    }

    .selection-card:hover .arrow-icon {
        color: var(--primary-hover);
        transform: translateX(5px);
    }

    /* MODAL OPTION CARDS */
    .option-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .option-label {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 2px solid var(--border-color);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: var(--transition);
        background: var(--secondary);
    }

    .option-label:hover {
        border-color: var(--primary-hover);
    }

    .option-label input[type="radio"] {
        display: none;
    }

    .option-icon {
        font-size: 2rem;
        color: var(--text-muted);
        transition: var(--transition);
        width: 45px;
        text-align: center;
    }

    .option-details {
        flex: 1;
    }

    .option-title {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--text-main);
        display: block;
    }

    .option-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        display: block;
        margin-top: 4px;
    }

    .option-label:has(input:checked) {
        border-color: var(--primary-hover);
        background: rgba(0, 198, 255, 0.05);
    }

    .option-label:has(input:checked) .option-icon,
    .option-label:has(input:checked) .option-title {
        color: var(--primary-hover);
    }

    /* SAVED ADDRESS SUMMARY */
    .saved-address-card {
        background: rgba(0, 198, 255, 0.05);
        border: 1px solid var(--primary-hover);
        padding: 16px;
        border-radius: var(--radius-sm);
        margin-top: 16px;
        display: none;
        justify-content: space-between;
        align-items: center;
    }

    .saved-address-card p {
        margin-bottom: 4px;
        font-size: 0.95rem;
    }

    /* ORDER SUMMARY */
    .order-summary {
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 30px;
        position: sticky;
        top: 100px;
        box-shadow: var(--shadow-soft);
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    .summary-total {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
        font-size: 1.1rem;
        color: var(--text-main);
    }

    .summary-due-today {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 2px dashed var(--border-color);
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--primary-hover);
    }

    /* MOBILE BOTTOM BAR (Hidden on Desktop) */
    .mobile-bottom-bar {
        display: none;
    }

    /* MODALS */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    .modal-content {
        background: var(--bg-color);
        width: 95%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: var(--radius-md);
        padding: 24px;
        position: relative;
        transform: translateY(50px);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: var(--shadow-hover);
    }

    .modal-overlay.active .modal-content {
        transform: translateY(0);
    }

    .close-modal {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
        background: var(--secondary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: var(--text-muted);
        transition: var(--transition);
    }

    .close-modal:hover {
        color: var(--primary-hover);
        background: var(--border-color);
        transform: rotate(90deg);
    }

    .modal-header {
        margin-bottom: 20px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 15px;
    }

    /* TOASTS */
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .toast-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .toast {
        background: var(--text-main);
        color: var(--bg-color);
        padding: 16px 24px;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-soft);
        animation: slideInRight 0.3s ease-out;
        transition: opacity 0.3s;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
    }

    /* =========================================
       MOBILE RESPONSIVENESS (The Magic)
       ========================================= */
    @media (max-width: 1024px) {
        .checkout-container {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {

        /* Adjust Header */
        header.header-premium {
            padding: 12px 4%;
        }

        .brand-icon {
            height: 28px;
        }

        .text-ba {
            font-size: 1.6rem;
        }

        .text-appliances {
            display: none;
            /* Save space on mobile */
        }

        .back-link {
            font-size: 0.9rem;
        }

        .back-link span {
            display: none;
            /* Hide 'Back to Shop' text, keep icon */
        }

        /* Adjust Main Layout */
        .checkout-container {
            padding: 20px 4%;
            gap: 20px;
            padding-bottom: 120px;
            /* Crucial: Make room for sticky bottom bar */
        }

        .checkout-block {
            padding: 16px;
            border-radius: var(--radius-sm);
        }

        .checkout-block h3 {
            font-size: 1.1rem;
        }

        /* Forms */
        .form-row {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .form-row .form-group {
            margin-bottom: 16px;
        }

        /* Cart Items */
        .cart-item {
            padding: 12px;
            gap: 12px;
        }

        .cart-item img {
            width: 65px;
            height: 65px;
        }

        .product-price {
            font-size: 1rem;
        }

        /* Hide Desktop Checkout Button */
        .desktop-checkout-btn,
        .desktop-warning {
            display: none !important;
        }

        .order-summary {
            padding: 20px;
            position: static;
            box-shadow: none;
            border-radius: var(--radius-sm);
        }

        /* * MOBILE BOTTOM BAR 
       * Sticks to the bottom of the screen for easy one-handed checkout
       */
        .mobile-bottom-bar {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 16px 4%;
            box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
            z-index: 1500;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--glass-border);
        }

        .mobile-total-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .mobile-total-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
        }

        .mobile-total-amount {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--primary-hover);
            line-height: 1;
        }

        .mobile-bottom-bar .btn-primary {
            width: auto;
            padding: 14px 32px;
            margin: 0;
            border-radius: 50px;
            /* Pill shape for mobile */
        }

        /* Toast position adjustments for mobile */
        .toast-container {
            bottom: 90px;
            right: 5%;
            left: 5%;
            width: 90%;
        }

        .toast {
            justify-content: center;
        }
    }
    </style>
</head>

<body>

    <header class="header-premium">
        <a href="index.php" class="brand-logo">
            <img src="img/head.png" alt="B-A Logo" class="brand-icon">
            <div class="brand-text">
                <span class="text-ba">B-A</span>
                <span class="text-appliances">appliances.</span>
            </div>
        </a>
        <a href="index.php" class="back-link">
            <i class="fa-solid fa-arrow-left"></i> <span>Back to Shop</span>
        </a>
    </header>

    <main class="checkout-container">

        <div class="checkout-sections">

            <section class="checkout-block">
                <h3><i class="fa-solid fa-cart-shopping" style="color: var(--primary-hover);"></i> Review Order</h3>
                <div id="cartItemsContainer"></div>
            </section>

            <section class="checkout-block">
                <h3><i class="fa-regular fa-address-card" style="color: var(--primary-hover);"></i> Delivery Address
                </h3>

                <div id="emptyAddressState">
                    <p style="color: var(--text-muted); margin-bottom: 16px; font-size: 0.95rem;">Please provide a US
                        shipping address to continue.</p>
                    <button type="button" class="btn-outline" onclick="openModal('addressModal')">
                        <i class="fa-solid fa-location-dot"></i> Enter Address
                    </button>
                </div>

                <div id="savedAddressCard" class="saved-address-card">
                    <div>
                        <p><strong id="displayTargetName"></strong> <span
                                style="color:var(--text-muted); font-size:0.85rem; margin-left:8px;"
                                id="displayTargetPhone"></span></p>
                        <p id="displayTargetStreet"></p>
                        <p><span id="displayTargetCity"></span>, <span id="displayTargetState"></span> <span
                                id="displayTargetZip"></span></p>
                    </div>
                    <button type="button" class="edit-btn" onclick="openModal('addressModal')"
                        style="pointer-events: all; background:var(--bg-color);"><i
                            class="fa-solid fa-pen"></i></button>
                </div>
            </section>

            <section class="checkout-block">
                <h3><i class="fa-solid fa-wallet" style="color: var(--primary-hover);"></i> Payment Plan</h3>
                <div class="selection-card" onclick="openModal('paymentModal')">
                    <div class="selection-info" style="display: flex; align-items: center; gap: 16px;">
                        <i class="fa-brands fa-paypal" style="font-size: 2.2rem; color: #00457C;"
                            id="mainPaymentIcon"></i>
                        <div>
                            <p><strong id="displayPaymentName">Pay $0.00</strong></p>
                            <p style="color: var(--text-muted); font-size: 0.85rem;" id="displayPaymentDesc">Secure full
                                payment via PayPal</p>
                        </div>
                    </div>
                    <i class="fa-solid fa-chevron-right arrow-icon"></i>
                </div>
            </section>

        </div>

        <aside>
            <div class="order-summary glass">
                <h3 style="margin-bottom: 24px;"><i class="fa-solid fa-file-invoice-dollar"
                        style="color: var(--primary-hover);"></i> Order Summary</h3>
                <div class="summary-row"><span>Subtotal</span><span>$<span id="summarySubtotal">0.00</span></span></div>
                <div class="summary-row"><span>Shipping Fee</span><span>$<span id="summaryShipping">10.00</span></span>
                </div>
                <div class="summary-row"><span>State Tax (8%)</span><span>$<span id="summaryTax">0.00</span></span>
                </div>

                <div style="margin: 20px 0; position: relative;">
                    <i class="fa-solid fa-tag"
                        style="position: absolute; left: 16px; top: 15px; color: var(--text-muted);"></i>
                    <input type="text" placeholder="Promo Code" class="form-control"
                        style="padding-left: 45px; width: 100%;">
                </div>

                <div class="summary-total"><span>Grand Total</span><span>$<span id="summaryTotal">0.00</span></span>
                </div>
                <div class="summary-due-today"><span>Due Today</span><span>$<span
                            id="summaryDueToday">0.00</span></span></div>

                <button type="button" class="btn-primary desktop-checkout-btn trigger-checkout"
                    style="margin-top: 24px;" disabled>
                    <i class="fa-solid fa-lock"></i> Place Secure Order
                </button>
                <p class="desktop-warning validation-warning"
                    style="color: #dc3545; font-size: 0.85rem; text-align: center; margin-top: 10px;">
                    Please enter your delivery address to proceed.
                </p>
            </div>
        </aside>

    </main>

    <div class="mobile-bottom-bar">
        <div class="mobile-total-info">
            <span class="mobile-total-label">Due Today</span>
            <span class="mobile-total-amount">$<span id="mobileSummaryDueToday">0.00</span></span>
        </div>
        <button type="button" class="btn-primary trigger-checkout" disabled>
            <i class="fa-solid fa-lock"></i> Pay Now
        </button>
    </div>

    <div class="modal-overlay" id="addressModal">
        <div class="modal-content">
            <button type="button" class="close-modal" onclick="closeModal('addressModal')"><i
                    class="fa-solid fa-xmark"></i></button>
            <h3 class="modal-header"><i class="fa-solid fa-map-location-dot" style="color: var(--primary-hover);"></i>
                Delivery Address</h3>

            <form id="addressForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="fullName">Full Name</label>
                        <input type="text" id="fullName" class="form-control" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone (US)</label>
                        <input type="tel" id="phone" class="form-control" placeholder="(555) 000-0000" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="street">Street Address</label>
                    <input type="text" id="street" class="form-control" placeholder="123 Main Street, Apt 4B" required>
                </div>
                <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" id="city" class="form-control" placeholder="Los Angeles" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="state">State</label>
                        <select id="state" class="form-control" required>
                            <option value="" disabled selected>Select State</option>
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                            <option value="AZ">Arizona</option>
                            <option value="CA">California</option>
                            <option value="CO">Colorado</option>
                            <option value="FL">Florida</option>
                            <option value="NY">New York</option>
                            <option value="TX">Texas</option>
                            <option value="WA">Washington</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="zip">ZIP Code</label>
                        <input type="text" id="zip" class="form-control" placeholder="90001" pattern="[0-9]{5}"
                            title="Five digit zip code" required>
                    </div>
                </div>
                <button type="submit" class="btn-primary" style="margin-top: 10px;">Save Address</button>
            </form>
        </div>
    </div>

    <div class="modal-overlay" id="paymentModal">
        <div class="modal-content">
            <button type="button" class="close-modal" onclick="closeModal('paymentModal')"><i
                    class="fa-solid fa-xmark"></i></button>
            <h3 class="modal-header"><i class="fa-solid fa-wallet" style="color: var(--primary-hover);"></i> Choose
                Payment Plan</h3>

            <form id="paymentForm" class="option-grid">

                <label class="option-label">
                    <input type="radio" name="payment_method" value="paypal_full" checked>
                    <i class="fa-brands fa-paypal option-icon" style="color: #00457C;"></i>
                    <div class="option-details">
                        <span class="option-title">Pay $<span id="modalFullPrice">0.00</span></span>
                        <span class="option-desc">Secure, immediate payment via PayPal</span>
                    </div>
                </label>

                <label class="option-label">
                    <input type="radio" name="payment_method" value="paypal_installments">
                    <i class="fa-brands fa-cc-paypal option-icon" style="color: #0079C1;"></i>
                    <div class="option-details">
                        <span class="option-title">4 Installments of $<span
                                id="modalInstallmentPrice">0.00</span></span>
                        <span class="option-desc">Interest-free payments via PayPal</span>
                    </div>
                </label>

                <label class="option-label">
                    <input type="radio" name="payment_method" value="delivery">
                    <i class="fa-solid fa-truck-ramp-box option-icon" style="color: #172C50;"></i>
                    <div class="option-details">
                        <span class="option-title">Pay Shipping Only ($10.00)</span>
                        <span class="option-desc">Pay the balance via Cash or PayPal upon delivery</span>
                    </div>
                </label>

                <button type="submit" class="btn-primary" style="margin-top: 16px;">Confirm Plan</button>
            </form>
        </div>
    </div>

    <div class="toast-container" id="toastContainer"></div>

    <script>
    // --- STATE MANAGEMENT ---
    let cart = JSON.parse(localStorage.getItem('homepro_cart')) || [];
    let currentShippingCost = 10.00;
    let currentPaymentMethod = 'paypal_full';
    let isAddressSaved = false;

    // --- UTILITIES ---
    const saveCart = () => localStorage.setItem('homepro_cart', JSON.stringify(cart));
    const formatPrice = (price) => Number(price).toFixed(2);

    function showToast(message, icon = "fa-check-circle") {
        const container = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.innerHTML = `<i class="fa-solid ${icon}"></i> ${message}`;
        container.appendChild(toast);
        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    // Modal Control Functions
    window.openModal = (id) => {
        if (id === 'paymentModal') updateTotals();
        document.getElementById(id).classList.add('active');
        document.body.style.overflow = 'hidden'; // Prevent background scrolling on mobile
    };
    window.closeModal = (id) => {
        document.getElementById(id).classList.remove('active');
        document.body.style.overflow = '';
    };

    document.querySelectorAll('.modal-overlay').forEach(modal => {
        modal.addEventListener('click', (e) => {
            if (e.target === modal) window.closeModal(modal.id);
        });
    });

    // --- CART RENDERING ---
    const container = document.getElementById('cartItemsContainer');
    const subEl = document.getElementById('summarySubtotal');
    const shipEl = document.getElementById('summaryShipping');
    const taxEl = document.getElementById('summaryTax');
    const totalEl = document.getElementById('summaryTotal');
    const dueTodayEl = document.getElementById('summaryDueToday');
    const mobileDueTodayEl = document.getElementById('mobileSummaryDueToday');

    function renderCheckout() {
        container.innerHTML = '';
        if (cart.length === 0) {
            container.innerHTML =
                '<p style="color:var(--text-muted); padding: 10px 0;">Your cart is empty. <a href="index.html" style="color:var(--primary-hover); font-weight:bold;">Continue shopping</a>.</p>';
            updateTotals();
            validateCheckoutState();
            return;
        }

        cart.forEach((item, index) => {
            const el = document.createElement('div');
            el.className = 'cart-item';
            el.innerHTML = `
          <img src="${item.main_img || item.img}" alt="${item.name}">
          <div class="cart-item-info">
            <span style="font-size:0.75rem; color:var(--text-muted); text-transform: uppercase; font-weight: 600;">${item.cat}</span>
            <h4 style="margin-bottom:4px; font-size: 0.95rem; line-height: 1.3;">${item.name}</h4>
            <div class="product-price">$${formatPrice(item.price)}</div>
            <div class="qty-controls">
              <button type="button" class="qty-btn" onclick="updateQty(${index}, -1)"><i class="fa-solid fa-minus" style="font-size:0.7rem;"></i></button>
              <span style="font-weight:bold; min-width: 24px; text-align:center;">${item.quantity}</span>
              <button type="button" class="qty-btn" onclick="updateQty(${index}, 1)"><i class="fa-solid fa-plus" style="font-size:0.7rem;"></i></button>
              <button type="button" onclick="removeItem(${index})" style="margin-left:auto; color:#dc3545; font-size:0.85rem; display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; padding: 4px;">
                <i class="fa-regular fa-trash-can"></i> <span style="display: none;">Remove</span>
              </button>
            </div>
          </div>
        `;
            container.appendChild(el);
        });
        updateTotals();
        validateCheckoutState();
    }

    window.updateQty = (index, delta) => {
        cart[index].quantity += delta;
        if (cart[index].quantity <= 0) cart.splice(index, 1);
        saveCart();
        renderCheckout();
    };

    window.removeItem = (index) => {
        cart.splice(index, 1);
        saveCart();
        renderCheckout();
        showToast("Item removed", "fa-trash");
    };

    // --- MATH & DISPLAY LOGIC ---
    function updateTotals() {
        let subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
        let shipping = subtotal > 0 ? currentShippingCost : 0;
        let tax = subtotal * 0.08;
        let grandTotal = subtotal + shipping + tax;

        subEl.innerText = formatPrice(subtotal);
        shipEl.innerText = formatPrice(shipping);
        taxEl.innerText = formatPrice(tax);
        totalEl.innerText = formatPrice(grandTotal);

        document.getElementById('modalFullPrice').innerText = formatPrice(grandTotal);
        document.getElementById('modalInstallmentPrice').innerText = formatPrice(grandTotal / 4);

        let dueToday = 0;
        if (subtotal > 0) {
            if (currentPaymentMethod === 'paypal_full') dueToday = grandTotal;
            else if (currentPaymentMethod === 'paypal_installments') dueToday = grandTotal / 4;
            else if (currentPaymentMethod === 'delivery') dueToday = shipping;
        }

        dueTodayEl.innerText = formatPrice(dueToday);
        mobileDueTodayEl.innerText = formatPrice(dueToday); // Sync mobile bar

        updatePaymentMainDisplay(grandTotal, shipping, dueToday);
    }

    function updatePaymentMainDisplay(total, shipping, dueToday) {
        const nameEl = document.getElementById('displayPaymentName');
        const descEl = document.getElementById('displayPaymentDesc');
        const iconEl = document.getElementById('mainPaymentIcon');

        if (currentPaymentMethod === 'paypal_full') {
            nameEl.innerText = `Pay $${formatPrice(total)}`;
            descEl.innerText = "Secure full payment via PayPal";
            iconEl.className = "fa-brands fa-paypal";
        } else if (currentPaymentMethod === 'paypal_installments') {
            nameEl.innerText = `Pay $${formatPrice(dueToday)} today`;
            descEl.innerText = `4 Installments of $${formatPrice(total / 4)} via PayPal`;
            iconEl.className = "fa-brands fa-cc-paypal";
        } else if (currentPaymentMethod === 'delivery') {
            nameEl.innerText = `Pay $${formatPrice(shipping)} today`;
            descEl.innerText = "Shipping fee now, balance paid on delivery";
            iconEl.className = "fa-solid fa-truck-ramp-box";
        }
    }

    function validateCheckoutState() {
        const finalBtns = document.querySelectorAll('.trigger-checkout');
        const warnings = document.querySelectorAll('.validation-warning');

        if (cart.length > 0 && isAddressSaved) {
            finalBtns.forEach(btn => btn.disabled = false);
            warnings.forEach(w => w.style.display = 'none');
        } else {
            finalBtns.forEach(btn => btn.disabled = true);
            warnings.forEach(w => {
                w.style.display = 'block';
                w.innerText = cart.length === 0 ? "Add items to your cart to proceed." :
                    "Please enter your delivery address to proceed.";
            });
        }
    }

    // --- FORM SUBMISSIONS ---
    document.getElementById('addressForm').addEventListener('submit', (e) => {
        e.preventDefault();

        document.getElementById('displayTargetName').innerText = document.getElementById('fullName').value;
        document.getElementById('displayTargetPhone').innerText = document.getElementById('phone').value;
        document.getElementById('displayTargetStreet').innerText = document.getElementById('street').value;
        document.getElementById('displayTargetCity').innerText = document.getElementById('city').value;
        document.getElementById('displayTargetState').innerText = document.getElementById('state').value;
        document.getElementById('displayTargetZip').innerText = document.getElementById('zip').value;

        document.getElementById('emptyAddressState').style.display = 'none';
        document.getElementById('savedAddressCard').style.display = 'flex';

        isAddressSaved = true;
        closeModal('addressModal');
        validateCheckoutState();
        showToast("Address saved!", "fa-check");
    });

    document.getElementById('paymentForm').addEventListener('submit', (e) => {
        e.preventDefault();
        currentPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;
        updateTotals();
        closeModal('paymentModal');
        showToast("Payment plan updated", "fa-wallet");
    });

    // --- FINAL CHECKOUT ROUTING (Attached to both Desktop and Mobile buttons) ---
    document.querySelectorAll('.trigger-checkout').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.trigger-checkout').forEach(b => {
                b.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
                b.disabled = true;
            });

            // Simulate a secure network request
            setTimeout(() => {
                window.location.href = 'paypal/paypal.html';
            }, 1500);
        });
    });

    // --- THEME SYNC ---
    if (localStorage.getItem('homepro_theme') === 'dark') {
        document.body.setAttribute('data-theme', 'dark');
    }

    // Init
    renderCheckout();
    </script>
</body>

</html>