<?php
/**
 * Template Name: Kasse Custom (All-in-One)
 * Description: StoffiKing Checkout – Finale Version (Desktop & Mobile mit exakter Reihenfolge)
 */

add_filter( 'woocommerce_ship_to_different_address_checked', '__return_false' );

get_header();
?>

<style>
/* =========================================================
   GRUNDLAGE
   ========================================================= */
.custom-checkout-page {
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    color: #173b37 !important;
    box-sizing: border-box !important;
}

.custom-checkout-page *,
.custom-checkout-page *::before,
.custom-checkout-page *::after {
    box-sizing: border-box !important;
}

/* =========================================================
   HAUPT-CHECKOUT FORMULAR
   ========================================================= */
.custom-checkout-page form.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    align-items: start !important;
}

/* Unerwünschte Standard-Titel ausblenden */
.custom-checkout-page .page-title,
.custom-checkout-page #order_review_heading,
.custom-checkout-page #order_payment_heading,
.custom-checkout-page .order_payment_heading {
    display: none !important;
}

/* =========================================================
   RECHNUNGSDATEN (Oben)
   ========================================================= */
.custom-checkout-page #customer_details {
    grid-column: 1 !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 25px !important;
    background: #ffffff !important;
    border: 1px solid #cfe8e2 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(47, 111, 103, 0.06) !important;
}

.custom-checkout-page #customer_details .col-1,
.custom-checkout-page #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-checkout-page .woocommerce-billing-fields,
.custom-checkout-page .woocommerce-shipping-fields,
.custom-checkout-page .woocommerce-additional-fields {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.custom-checkout-page .woocommerce-billing-fields h3,
.custom-checkout-page .woocommerce-shipping-fields h3,
.custom-checkout-page .woocommerce-additional-fields h3 {
    color: #0f5960 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #edf6f4 !important;
}

/* 3-Spalten Adressmatrix (Desktop Standard) */
.custom-checkout-page .woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 17px !important;
    width: 100% !important;
    align-items: end !important; 
}

.custom-checkout-page .woocommerce-billing-fields__field-wrapper .form-row {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}

/* EXAKTE PLATZIERUNG DER ADRESSFELDER IM 3-SPALTEN-GRID */
.custom-checkout-page #billing_first_name_field { grid-column: 1 !important; }
.custom-checkout-page #billing_last_name_field  { grid-column: 2 !important; }
.custom-checkout-page #billing_company_field    { grid-column: 3 !important; display: block !important; }
.custom-checkout-page #billing_country_field    { grid-column: 1 / -1 !important; }
.custom-checkout-page #billing_address_1_field  { grid-column: 1 !important; }
.custom-checkout-page #billing_address_2_field  { grid-column: 2 !important; }
.custom-checkout-page #billing_postcode_field   { grid-column: 3 !important; }
.custom-checkout-page #billing_city_field       { grid-column: 1 !important; }
.custom-checkout-page #billing_phone_field      { grid-column: 2 !important; }
.custom-checkout-page #billing_email_field      { grid-column: 3 !important; }

/* Formular Inputs Styling */
.custom-checkout-page .woocommerce form .form-row input.input-text,
.custom-checkout-page .woocommerce form .form-row select,
.custom-checkout-page .woocommerce form .form-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid #cfe1e5 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #173b37 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.custom-checkout-page .woocommerce form .form-row input.input-text:focus,
.custom-checkout-page .woocommerce form .form-row select:focus,
.custom-checkout-page .woocommerce form .form-row textarea:focus {
    border-color: #66cdaa !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 205, 170, 0.15) !important;
}

.custom-checkout-page .woocommerce form .form-row label {
    display: block !important;
    margin-bottom: 5px !important;
    color: #315e59 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}


/* =========================================================
   DESKTOP GRID: BESTELLUNG + RECHTE SPALTE 
   ========================================================= */
.custom-checkout-page .woocommerce-checkout-review-order {
    grid-column: 1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    column-gap: 25px !important;
    align-items: start !important;
}

/* --- LINKE SPALTE (Desktop): ÜBERSCHRIFT & TABELLE GEBÜNDELT --- */
.custom-checkout-page .left-column-wrapper {
    grid-column: 1 !important;
    grid-row: 1 / span 10 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.custom-checkout-page .custom-order-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 25px 15px !important;
    background: #ffffff !important;
    border: 1px solid #cfe8e2 !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    color: #0f5960 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.custom-checkout-page .woocommerce-checkout-review-order-table {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 25px 25px !important;
    background: #ffffff !important;
    border: 1px solid #cfe8e2 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 4px 12px rgba(47, 111, 103, 0.06) !important;
}

.custom-checkout-page .woocommerce-checkout-review-order-table th {
    color: #315e59 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 12px 8px !important;
    border-bottom: 1px solid #e6f0ee !important;
}

.custom-checkout-page .woocommerce-checkout-review-order-table td {
    padding: 15px 8px !important;
    border-bottom: 1px solid #edf4f2 !important;
    vertical-align: middle !important;
    color: #315e59 !important;
}

.custom-checkout-page .woocommerce-checkout-review-order-table .product-total,
.custom-checkout-page .woocommerce-checkout-review-order-table .amount {
    font-weight: 600 !important;
    color: #173b37 !important;
}

.custom-checkout-page .woocommerce-checkout-review-order-table .order-total th,
.custom-checkout-page .woocommerce-checkout-review-order-table .order-total td {
    padding-top: 18px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f5960 !important;
    border-top: 1px solid #cfe8e2 !important;
    border-bottom: none !important;
}


/* --- RECHTE SPALTE (Desktop): Exakte Sortierung per CSS (1 bis 4) --- */
.custom-checkout-page #payment,
.custom-checkout-page .place-order {
    display: contents !important; 
}

.custom-checkout-page #payment::before,
.custom-checkout-page #payment::after,
.custom-checkout-page .place-order::before,
.custom-checkout-page .place-order::after {
    display: none !important;
}

/* 1. Box: Zahlungsart */
.custom-checkout-page ul.payment_methods {
    grid-column: 2 !important;
    grid-row: 1 !important; 
    margin: 0 !important;
    padding: 22px 25px 25px !important;
    background: #ffffff !important;
    border: 1px solid #cfe8e2 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(47, 111, 103, 0.06) !important;
    list-style: none !important;
    width: 100% !important;
}
.custom-checkout-page ul.payment_methods li {
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #edf4f2 !important;
}
.custom-checkout-page ul.payment_methods input[type="radio"] {
    accent-color: #0f9f8f !important;
}
.custom-checkout-page ul.payment_methods label {
    color: #315e59 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}
.custom-checkout-page .payment_box {
    margin: 6px 0 0 25px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #78908c !important;
    font-size: 0.8rem !important;
}

/* 2. Box: Partnerguthaben */
.custom-checkout-page .wca-pay-with-credits {
    grid-column: 2 !important;
    grid-row: 2 !important; 
    margin: 20px 0 0 0 !important; 
    padding: 18px 22px !important;
    background: #ffffff !important;
    border: 1px solid #cfe8e2 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(47, 111, 103, 0.06) !important;
    width: 100% !important;
    display: block !important;
}

/* 3. Box: AGBs */
.custom-checkout-page .woocommerce-terms-and-conditions-wrapper {
    grid-column: 2 !important;
    grid-row: 3 !important; 
    width: 100% !important;
    margin: 20px 0 0 0 !important; 
    padding: 18px 22px !important;
    background: #ffffff !important;
    border: 1px solid #cfe8e2 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(47, 111, 103, 0.06) !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: #526e69 !important;
}
.custom-checkout-page .woocommerce-terms-and-conditions-wrapper a {
    color: #007f8c !important;
    text-decoration: underline !important;
}

/* 4. Box: Jetzt kaufen Button */
.custom-checkout-page #place_order {
    grid-column: 2 !important;
    grid-row: 4 !important; 
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 20px 0 0 0 !important; 
    padding: 14px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #0787a5 !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.18) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.custom-checkout-page #place_order:hover {
    background: #056f89 !important;
    transform: translateY(-1px) !important;
}


/* =========================================================
   FLUID & RESPONSIVE ANPASSUNGEN
   ======================================================== */

/* Stufe 1: Mittlere Bildschirme / Tablets (Unter 1024px) */
@media (max-width: 1024px) {
    .custom-checkout-page .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .custom-checkout-page #billing_first_name_field { grid-column: 1 !important; }
    .custom-checkout-page #billing_last_name_field  { grid-column: 2 !important; }
    .custom-checkout-page #billing_company_field    { grid-column: 1 / -1 !important; }
    .custom-checkout-page #billing_address_1_field  { grid-column: 1 !important; }
    .custom-checkout-page #billing_address_2_field  { grid-column: 2 !important; }
    .custom-checkout-page #billing_postcode_field   { grid-column: 1 / -1 !important; }
    .custom-checkout-page #billing_city_field       { grid-column: 1 !important; }
    .custom-checkout-page #billing_phone_field      { grid-column: 2 !important; }
    .custom-checkout-page #billing_email_field      { grid-column: 1 / -1 !important; }
}

/* Stufe 2: Smartphones & kleine Geräte (Unter 768px) */
@media (max-width: 768px) {
    .custom-checkout-page { 
        margin: 15px auto !important; 
        padding: 0 10px !important; 
    }

    /* Adressmatrix läuft komplett untereinander */
    .custom-checkout-page .woocommerce-billing-fields__field-wrapper { 
        grid-template-columns: 1fr !important; 
        row-gap: 15px !important;
    }
    
    .custom-checkout-page .woocommerce-billing-fields__field-wrapper .form-row,
    .custom-checkout-page #billing_first_name_field, 
    .custom-checkout-page #billing_last_name_field, 
    .custom-checkout-page #billing_company_field, 
    .custom-checkout-page #billing_country_field,
    .custom-checkout-page #billing_address_1_field, 
    .custom-checkout-page #billing_address_2_field, 
    .custom-checkout-page #billing_postcode_field, 
    .custom-checkout-page #billing_city_field, 
    .custom-checkout-page #billing_phone_field, 
    .custom-checkout-page #billing_email_field { 
        grid-column: 1 !important; 
    }

    /* Hauptformular wird zur flexiblen Spalte für die perfekte Reihenfolge */
    .custom-checkout-page form.woocommerce-checkout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 1. Rechnungsdaten ganz nach oben */
    .custom-checkout-page #customer_details {
        order: 1 !important;
    }

    /* 2. Review-Order Container aufteilen, damit die Elemente einzeln einsortiert werden können */
    .custom-checkout-page .woocommerce-checkout-review-order { 
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        order: 2 !important;
    }

    /* MOBILE REIHENFOLGE IM DETAILS-BEREICH:
       - Linke Spalte (Bestellung & Tabelle) = order 1
       - Zahlungsarten = order 2
       - Partnerguthaben = order 3
       - AGBs = order 4
       - Jetzt kaufen Button = order 5
    */
    .custom-checkout-page .left-column-wrapper { 
        order: 1 !important; 
        width: 100% !important;
    }
    
    .custom-checkout-page ul.payment_methods { 
        order: 2 !important; 
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
    }
    
    .custom-checkout-page .wca-pay-with-credits { 
        order: 3 !important; 
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    .custom-checkout-page .woocommerce-terms-and-conditions-wrapper { 
        order: 4 !important; 
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    .custom-checkout-page #place_order { 
        order: 5 !important; 
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        width: 100% !important;
    }
}
</style>


<div id="primary" class="content-area custom-checkout-page">
    <main id="main" class="site-main">
        <div class="checkout-container">
            <?php
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
            ?>
        </div>
    </main>
</div>


<script>
document.addEventListener("DOMContentLoaded", function () {
    function initCheckoutFixes() {
        // 1. Linke Seite zusammenfassen (schließt die Lücke unter "Deine Bestellung")
        const review = document.querySelector('.woocommerce-checkout-review-order');
        const table = document.querySelector('.woocommerce-checkout-review-order-table');
        
        if (review && table) {
            let heading = document.querySelector('.custom-order-heading');
            if (!heading) {
                heading = document.createElement('div');
                heading.className = 'custom-order-heading';
                heading.innerText = 'Deine Bestellung';
            }

            let leftWrapper = document.querySelector('.left-column-wrapper');
            if (!leftWrapper) {
                leftWrapper = document.createElement('div');
                leftWrapper.className = 'left-column-wrapper';
                review.insertBefore(leftWrapper, review.firstChild);
            }

            if (heading.parentNode !== leftWrapper) {
                leftWrapper.appendChild(heading);
            }
            if (table.parentNode !== leftWrapper) {
                leftWrapper.appendChild(table);
            }
        }

        // 2. Firmenfeld injizieren (falls vom Server weggelassen) – direkt nach dem Nachnamen
        const lastNameField = document.getElementById('billing_last_name_field');
        if (lastNameField && !document.getElementById('billing_company_field')) {
            const companyFieldHTML = `
                <p class="form-row form-row-wide validate-required" id="billing_company_field" data-priority="30">
                    <label for="billing_company">Firma (optional)</label>
                    <span class="woocommerce-input-wrapper">
                        <input type="text" class="input-text" name="billing_company" id="billing_company" placeholder="" value="" autocomplete="section-billing billing organization">
                    </span>
                </p>
            `;
            lastNameField.insertAdjacentHTML('afterend', companyFieldHTML);
        }
    }

    // Direkt ausführen
    setTimeout(initCheckoutFixes, 100);
    setTimeout(initCheckoutFixes, 500);

    // Nach jedem WooCommerce AJAX-Update erneut anwenden
    if (typeof jQuery !== 'undefined') {
        jQuery(document.body).on('updated_checkout', function () {
            initCheckoutFixes();
        });
    }
});
</script>

<?php
get_footer();
?>