<?php
if (!defined('ABSPATH')) exit;

do_action('woocommerce_before_checkout_form', $checkout);

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" style="padding-top: 20px !important">

    <div class="custom-checkout-wrapper">

        <!-- LEFT COLUMN -->
        <div class="checkout-left">

            <?php if ($checkout->get_checkout_fields()) : ?>
            <?php do_action('woocommerce_checkout_before_customer_details'); ?>

            <!-- Billing -->
            <div class="custom-section">
                <h2>Billing Address</h2>
                <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua.</p> -->
                <?php do_action('woocommerce_checkout_billing'); ?>
            </div>

            <!-- Shipping -->
            <div class="custom-section" id="shipping-toggle-section">
                <h2>Shipping Address</h2>

                <div class="shipping-toggle-options">
                    <label class="shipping-option">
                        <input type="radio" name="shipping_address_option" value="same" checked>
                        <span>Same as billing address</span>
                    </label>
                    <label class="shipping-option">
                        <input type="radio" name="shipping_address_option" value="different">
                        <span>Use a different shipping address</span>
                    </label>
                </div>

                <div class="shipping_address" id="shipping-fields-container" style="display: none;">
                    <?php do_action('woocommerce_checkout_shipping'); ?>
                </div>
            </div>
            <?php endif; ?>
        </div>

        <!-- RIGHT COLUMN -->
        <div class="checkout-right">
            <h2>Order Summary</h2>
            <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p> -->
            <?php do_action('woocommerce_checkout_order_review'); ?>
            <?php foreach (WC()->cart->get_cart() as $cart_item): 
                $_product = $cart_item['data'];
                $product_id = $cart_item['product_id'];
            ?>
            <?php endforeach; ?>
        </div>
    </div>

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

<!-- JS -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const sameRadio = document.querySelector('input[value="same"][name="shipping_address_option"]');
    const diffRadio = document.querySelector('input[value="different"][name="shipping_address_option"]');
    const shippingContainer = document.getElementById("shipping-fields-container");

    function toggleShipping() {
        if (diffRadio.checked) {
            shippingContainer.style.display = "block";
            jQuery('#ship-to-different-address-checkbox').prop('checked', true).trigger('change');
        } else {
            shippingContainer.style.display = "none";
            jQuery('#ship-to-different-address-checkbox').prop('checked', false).trigger('change');
        }
    }

    if (sameRadio && diffRadio) {
        toggleShipping(); // Initial
        sameRadio.addEventListener("change", toggleShipping);
        diffRadio.addEventListener("change", toggleShipping);
    }
	
	let rent_district = localStorage.getItem('rent_district');
	let rent_state = localStorage.getItem('rent_state');
	//console.log(rent_district);
	//console.log(rent_state);
	$('#shipping_state option').filter(function() {
    return $(this).text().trim() === rent_state;
}).prop('selected', true);

// Optional: trigger change if needed
$('#shipping_state').trigger('change');
	$("#shipping_city").val(rent_district);
});
	
// 	$('#shipping_state').prop('readonly', true);
	$('#shipping_state').css({
    'pointer-events': 'none',
    'touch-action': 'none',
    'background': '#eee' 
});
$('#shipping_city').prop('readonly', true);
</script>

<!-- CSS -->
<style>
.custom-section p,
.checkout-right p,
label[for="payment_method_billdesk"] {
    color: #212121;
}

.woocommerce-checkout #payment ul.payment_methods li img {
    width: 100px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 9px;
    right: 9px;
}

.form-row.place-order {
    padding-left: 0 !important;
}

.variation dt,
.variation dd p {
    color: #4d4d4d;
    font-size: 13px;
    line-height: 18px;
}

.payment_methods {
    padding: 0 !important;
}

.term-row label {
    line-height: 1.2rem !important;
}

.shop_table tfoot,
.shop_table tr,
.shop_table th,
.shop_table td {
    border: none !important;
}

.woocommerce table.shop_table {
    color: #212121;
    border: none;
}

.woocommerce-checkout #payment {
    background-color: transparent;
}

.shop_table .cart_item td {
    background-color: transparent;
    border: none;
}

.woocommerce-billing-fields h3,
#ship-to-different-address,
.product-total {
    display: none;
}

.shipping-option {
    margin: 0;
}

.custom-checkout-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* gap: 15px; */
    padding: 40px 0;
    font-family: 'Arial', sans-serif;
}

.payment-options-section {
    border-radius: 0 !important;
    border-top: 1px solid #c4c4c4;
    padding-top: 20px !important;
}

.woocommerce-privacy-policy-text p {
    font-size: 12px;
    line-height: normal;
}

.checkout-left {
    flex: 1 1 45%;
}

.checkout-right {
    flex: 1 1 45%;
    background-color: #f9f9f9;
    border-radius: 12px;
}

.custom-section {
    margin-bottom: 30px;
}

#shipping-toggle-section {
    border-top: 1px solid #c4c4c4;
    padding-top: 30px;
}

.product-name,
.order-total {
    font-size: 20px;
    font-weight: 600;
}

.product-name>strong,
.product-name dl {
    font-size: 14px !important;
    line-height: 1.5rem;
}

.custom-section h2,
.checkout-right h2,
#payment-options-dropdown h3,
#purpose-terms-checkboxes h5 {
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: bold;
}

.custom-section select {
    padding: 12px !important;
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid #CECECE;
    box-shadow: 0px 1px 2px 0px #E4E5E73D;
}

.custom-section .pay-now-btn {
    background-color: #A70705;
    color: #fff;
    width: 100%;
}

.custom-section label {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment_box {
    background-color: #FFBD2B !important;
}

div.payment_box::before {
    border: 1em solid #FFBD2B !important;
    border-right-color: transparent !important;
    ;
    border-left-color: transparent !important;
    ;
    border-top-color: transparent !important;
    ;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 48%;
}

.woocommerce form .form-row-first {
    margin-right: auto;
}

.woocommerce form .address-field:nth-child(odd) {
    margin-right: 3%;
}

#billing_phone_field {
    width: 48%;
}

#billing_email {
    margin-left: 0px;
}

#billing_email_field .woocommerce-input-wrapper,
#order_comments_field .woocommerce-input-wrapper {
    width: 100%;
}

#billing_company_field,
#billing_country_field,
#shipping_company_field {
    width: 48%;
}

.select2-selection,
#shipping_state,
#payment-option-select {
    padding: 12px !important;
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid #CECECE;
    box-shadow: 0px 1px 2px 0px #E4E5E73D;
}

.select2-selection__rendered {
    line-height: normal !important;
}

#place_order {
    background-color: #FFBD2B;
    color: #000000;
    padding: 14px 30px;
    width: 100%;
    border-color: #FFBD2B;
}

.pay-now-btn:hover {
    background-color: #FFBD2B;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    border: 1px solid #CECECE;
    box-shadow: 0px 1px 2px 0px #E4E5E73D;
    border-radius: 12px;
    padding: 12px;
}

/* .summary-product {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
} */

.summary-image img {
    width: 100px;
    height: auto;
    border-radius: 8px;
    margin-right: 15px;
}

.summary-info h4 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.summary-info p {
    margin: 4px 0;
    font-size: 14px;
}

.summary-totals {
    margin-top: 20px;
    font-size: 16px;
}

.summary-totals h3 {
    font-size: 20px;
    font-weight: bold;
}

/* Shipping Radio Styles */
.shipping-toggle-options {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.shipping-option {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.shipping-option:last-child {
    border-bottom: none;
}

.shipping-option input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
}

.shipping-option input[type="radio"]:checked {
    border-color: #a00;
    background-color: #a00;
}

.shipping-option input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}

.shipping-option input[type="radio"]:checked+span {
    font-weight: bold;
    color: #a00;
}

@media screen and (max-width: 768px) {
    .custom-checkout-wrapper {
        flex-direction: column;
        padding: 0px;
    }

    .checkout-right {
        padding: 0;
    }

    .checkout-left,
    .checkout-right {
        width: 100%;
    }

    .cart_item {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 768px) {
    .product-image {
        width: 30%;
    }

    .checkout-right,
    .checkout-left {
        padding: 0 30px;
    }

    .checkout-left {
        border-right: 1px solid #c4c4c4;
    }
}
</style>