<?php
/**
 * Custom Checkout Form Override
 * This template overrides WooCommerce checkout and includes custom billing & shipping details.
 */

if (!defined('ABSPATH')) {
    exit;
}

do_action('woocommerce_before_checkout_form', $checkout);

// Restrict checkout if user is not logged in and registration is disabled.
if (!$checkout->is_registration_enabled() && $checkout->is_registration_required() && !is_user_logged_in()) {
    echo esc_html(apply_filters('woocommerce_checkout_must_be_logged_in_message', __('You must be logged in to checkout.', 'woocommerce')));
    return;
}

?>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url(wc_get_checkout_url()); ?>" enctype="multipart/form-data">

    <?php if ($checkout->get_checkout_fields()) : ?>

        <?php do_action('woocommerce_checkout_before_customer_details'); ?>

        <div id="customer-details-summary" class="custom-details-container">
            
            <!-- Billidng Details (Left Column) -->
            <div class="custom-details-box billing-column">
                <div id="billing-details-summary">
                    <h3 id ="billing-edit-title">Billing details</h3>
                    <p><strong>Name:</strong> <span id="billing-name-display"><?php echo esc_html(WC()->customer->get_billing_first_name() . ' ' . WC()->customer->get_billing_last_name()); ?></span></p>

                    <p><strong>Address:</strong><span id="billing-address-display"> <?php echo esc_html(WC()->customer->get_billing_address_1()); ?></span></p>

                    <p><strong>Phone:</strong> <span id="billing-phone-display"><?php echo esc_html(WC()->customer->get_billing_phone()); ?></span></p>
                    <button type="button" id="edit-billing-custom" class="button">Edit</button>
                </div>

                <div id="billing-form" class="woocommerce-billing-fields" style="display:none;">
                    <?php do_action('woocommerce_checkout_billing'); ?>
                    <button type="button" id="save-billing-custom" class="button">Save</button>
                    <button type="button" id="cancel-billing-custom" class="button">Cancel</button>
                </div>
            </div>

            <!-- Shipping Details (Right Column) -->
            <div class="custom-details-box shipping-column">
                <div id="shipping-details-summary">
                    <h3 id ="shipping-edit-title">Shipping details</h3>
                    <p><strong>Name:</strong> <span id="shipping-name-display"> <?php echo esc_html(WC()->customer->get_shipping_first_name()); ?></span></p>

                    <p><strong>Address:</strong><span id="shipping-address-display"><?php echo esc_html(WC()->customer->get_shipping_address_1()); ?></span></p>

                    <p><strong>Company:</strong><span id="shipping-company-display"> <?php echo esc_html(WC()->customer->get_shipping_company()); ?></span></p>
                    <button type="button" id="edit-shipping-custom" class="button">Edit</button>
                    <p class="shipping-note" style="color:green; padding-top:10px;">*Transport cost will be charged as per actual expenses, including taxes.</p>
                </div>

                <div id="shipping-form" class="shipping_address">
                    <h3>Shipping details</h3>
                    <?php do_action('woocommerce_checkout_shipping'); ?>
                    <button type="button" id="save-shipping-custom" class="button">Save</button>
                    <button type="button" id="cancel-shipping-custom" class="button">Cancel</button>
                </div>


            </div>

        </div>        

        <?php do_action('woocommerce_checkout_after_customer_details'); ?>

    <?php endif; ?>
    
    <?php do_action('woocommerce_checkout_before_order_review_heading'); ?>
    
    <h3 id="order_review_heading"><?php esc_html_e('Your order', 'woocommerce'); ?></h3>
    
    <?php do_action('woocommerce_checkout_before_order_review'); ?>

    <div id="order_review" class="woocommerce-checkout-review-order">
        <?php do_action('woocommerce_checkout_order_review'); ?>
    </div>

    <?php do_action('woocommerce_checkout_after_order_review'); ?>

</form>
<script>

document.addEventListener("DOMContentLoaded", function () {
        // Get elements
        let shippingSummary = document.getElementById("shipping-details-summary");
        let shippingForm = document.getElementById("shipping-form");
        let editShippingBtn = document.getElementById("edit-shipping-custom");
        let saveShippingBtn = document.getElementById("cancel-shipping-custom");

        // Hide shipping form initially
        shippingForm.style.display = "none";

        // Show shipping form & hide summary on Edit button click
        editShippingBtn.addEventListener("click", function () {
            shippingSummary.style.display = "none";
            shippingForm.style.display = "block";

            // Ensure "Ship to a different address?" checkbox is checked using jQuery
            jQuery(document).ready(function($) {
                $('#ship-to-different-address-checkbox').prop('checked', true).trigger('change');
            });
        });

        // Hide form & show summary on Save button click
        saveShippingBtn.addEventListener("click", function () {
            shippingForm.style.display = "none";
            shippingSummary.style.display = "block";
        });

        document.getElementById('save-billing-custom').addEventListener('click', function() {
            var firstName = document.querySelector('[name="billing_first_name"]').value || "N/A";
            var lastName = document.querySelector('[name="billing_last_name"]').value || "N/A";
            var fullName = firstName + " " + lastName;
            var newAddress = document.querySelector('[name="billing_address_1"]').value;
            var newPhone = document.querySelector('[name="billing_phone"]').value;

            // Update the displayed shipping details
            document.getElementById('billing-name-display').textContent = fullName;
            document.getElementById('billing-address-display').textContent = newAddress;
            document.getElementById('billing-phone-display').textContent = newPhone;

            document.getElementById('billing-details-summary').style.display = 'block';
            document.getElementById('billing-form').style.display = 'none';
        });

        document.getElementById('save-shipping-custom').addEventListener('click', function() {
            // Fetch updated values from WooCommerce shipping fields
            var firstName = document.querySelector('[name="shipping_first_name"]').value || "N/A";
            var lastName = document.querySelector('[name="shipping_last_name"]').value || "N/A";
            var newName = firstName + " " + lastName;
            
            var newAddress = document.querySelector('[name="shipping_address_1"]').value;
            var newCompany = document.querySelector('[name="shipping_company"]').value;

            // Update the displayed shipping details
            document.getElementById('shipping-name-display').textContent = newName;
            document.getElementById('shipping-address-display').textContent = newAddress;
            document.getElementById('shipping-company-display').textContent = newCompany;

            document.getElementById('shipping-details-summary').style.display = 'block';
            document.getElementById('shipping-form').style.display = 'none';
        });
    });



  jQuery(document).ready(function($) {

    // Billing section toggle
    $('#edit-billing-custom').click(function() {
        $('#billing-details-summary').hide();
        $('#billing-form').show();
        $('#billing-edit-title').hide();
    });

    $('#cancel-billing-custom').click(function() {
        $('#billing-form').hide();
        $('#billing-details-summary').show();
        $('#billing-edit-title').show();
    });

    $('#cancel-shipping-custom').click(function() {
        $('.shipping_address').hide();
        $('#shipping-details-summary').show(); // Show the summary again
    });
});


</script>
<!-- Custom CSS for Two-Column Layout -->
<style>
    /* Flexbox Layout for Billing & Shipping */
    .custom-details-container {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 30px;
    }

    .custom-details-box {
        width: 48%; /* Adjust width to fit two columns */
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background-color: #f9f9f9;
    }

    .billing-column {
        flex: 1;
    }

    .shipping-column {
        flex: 1;
    }

    .custom-order-notes {
        width: 100%;
        margin-top: 20px;
    }
    
    #edit-billing-custom, #cancel-shipping-custom, #edit-shipping-custom, #cancel-billing-custom, #save-billing-custom,#save-shipping-custom, #place_order, #btn-billdesk, #btn-billdesk-cancel {
                background-color:#000; 
                color:#ffbd2b;
    }
    #edit-billing-custom:hover, #cancel-shipping-custom:hover, #edit-shipping-custom:hover, #cancel-billing-custom:hover,#save-billing-custom:hover,#save-shipping-custom:hover,#cancel-shipping-custom:hover #place_order:hover, #btn-billdesk:hover, #btn-billdesk-cancel:hover {
        background-color:#ffbd2b; 
        color:#000;
    }
    .woocommerce-order p {
        margin:50px;
        color:#000 !important;
        font-size:20px;
    }
    .woocommerce ul.order_details {
        margin: 34px 0 26px;
    }
    #billing-details-summary p , #shipping-details-summary p, .custom-order-notes p, .cart_item, .cart-subtotal, .order-total, .payment_methods , .woocommerce-privacy-policy-text p {
                color:#000;
    }

    #ship-to-different-address ,.woocommerce-additional-fields, .woocommerce-shipping-totals {
        display:none;
    } 
    .woocommerce-checkout #payment {
        background: #ffbd2b30 !important;
    }
    .woocommerce-checkout #payment div.payment_box {
        background-color: rgba(255, 189, 43, 0.56);
    }
</style>