<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl p-8 transform hover:scale-[1.01] transition-transform">
        <div class="text-center mb-8">
            <i class="fas fa-coffee text-4xl text-blue-600 mb-4 animate-bounce"></i>
            <h1 class="text-3xl font-bold text-gray-800">Add Your Information To Order</h1>
            <p class="text-gray-600 mt-2">Fill in the details below to complete your coffee order</p>
        </div>
        
        <form id="orderForm" class="space-y-6">
            <!-- Personal Information Section -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-group">
                    <i class="fas fa-user absolute left-3 top-3.5 text-gray-400 z-10"></i>
                    <input type="text" id="firstName" required class="form-input pl-10">
                    <label for="firstName">First name *</label>
                </div>
            
                <div class="form-group">
                    <i class="fas fa-phone absolute left-3 top-3.5 text-gray-400 z-10"></i>
                    <input type="tel" id="phone" required class="form-input pl-10">
                    <label for="phone">Phone *</label>
                </div>

                <div class="form-group">
                    <i class="fas fa-map-marker-alt absolute left-3 top-3.5 text-gray-400 z-10"></i>
                    <select id="state" name="state" required class="form-input pl-10">
                        <option value="" disabled selected><?php _e('Select a state...', 'yaxii-form-pro'); ?></option>
                        <?php
                        if (isset($states[$store_country]) && !empty($states[$store_country])) {
                            foreach ($states[$store_country] as $code => $name) {
                                printf(
                                    '<option value="%s">%s</option>',
                                    esc_attr($code),
                                    esc_html($name)
                                );
                            }
                        }
                        ?>
                    </select>
                    <label for="state"><?php _e('State *', 'yaxii-form-pro'); ?></label>
                </div>
                
                <div class="form-group">
                    <i class="fas fa-map-marker-alt absolute left-3 top-3.5 text-gray-400 z-10"></i>
                    <select id="city" name="city" required class="form-input pl-10" disabled>
                        <option value="" disabled selected><?php _e('Select a city...', 'yaxii-form-pro'); ?></option>
                    </select>
                    <label for="city"><?php _e('City *', 'yaxii-form-pro'); ?></label>
                </div>

                <div class="form-group">
                    <i class="fas fa-home absolute left-3 top-3.5 text-gray-400 z-10"></i>
                    <input type="text" id="streetAddress" required class="form-input pl-10">
                    <label for="streetAddress">Street address *</label>
                </div>
            </div>

            <div class="flex items-center justify-center space-x-4 my-8">
                <button type="button" class="quantity-btn pulse-animation" id="decreaseBtn">
                    <i class="fas fa-minus"></i>
                </button>
                <input type="number" id="quantity" value="1" min="1" class="w-16 text-center border-2 border-blue-200 rounded-lg py-2">
                <button type="button" class="quantity-btn pulse-animation" id="increaseBtn">
                    <i class="fas fa-plus"></i>
                </button>
            </div>

            <!-- Shipping Method Section -->
            <div class="shipping-section">
                <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
                    <i class="fas fa-truck text-blue-600"></i>
                    Shipping Method
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <label class="shipping-option">
                        <input type="radio" name="shipping" value="standard" checked>
                        <div class="shipping-card">
                            <div class="shipping-content">
                                <i class="fas fa-box text-blue-600 text-xl"></i>
                                <div>
                                    <h4 class="font-semibold">Standard Shipping</h4>
                                    <p class="text-sm text-gray-600">5-7 Business Days</p>
                                </div>
                                <span class="shipping-price">$5.00</span>
                            </div>
                        </div>
                    </label>
                    <label class="shipping-option">
                        <input type="radio" name="shipping" value="express">
                        <div class="shipping-card">
                            <div class="shipping-content">
                                <i class="fas fa-shipping-fast text-blue-600 text-xl"></i>
                                <div>
                                    <h4 class="font-semibold">Express Shipping</h4>
                                    <p class="text-sm text-gray-600">2-3 Business Days</p>
                                </div>
                                <span class="shipping-price">$15.00</span>
                            </div>
                        </div>
                    </label>
                </div>
            </div>

            <button type="submit" class="shine-button w-full py-4 rounded-xl text-white font-semibold text-lg group">
                <span class="flex items-center justify-center gap-2">
                    <i class="fas fa-shopping-cart group-hover:animate-bounce"></i>
                    CLICK TO CONFIRM YOUR ORDER
                    <i class="fas fa-arrow-right transform group-hover:translate-x-2 transition-transform"></i>
                </span>
            </button>
        </form>

        <!-- Order Summary Section -->
        <div class="mt-8">
    <button id="toggleSummary" class="w-full bg-blue-50 rounded-xl p-6 hover:shadow-lg transition-shadow flex items-center justify-between">
        <h2 class="text-xl font-semibold flex items-center gap-2">
            <i class="fas fa-shopping-basket text-blue-600"></i>
            Order Summary
        </h2>
        <i class="fas fa-chevron-down text-blue-600 transform transition-transform duration-300" id="summaryArrow"></i>
    </button>
    
    <div id="orderSummaryContent" class="bg-blue-50 rounded-b-xl p-6 -mt-2 border-t border-blue-100">
        <table class="w-full">
            <thead>
                <tr class="border-b border-blue-200">
                    <th class="text-left py-2 text-gray-600">Product</th>
                    <th class="text-center py-2 text-gray-600">Quantity</th>
                    <th class="text-right py-2 text-gray-600">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b border-blue-200">
                    <td class="py-3">
                        <div class="flex items-center gap-2">
                            <?php if ($product_image) : ?>
                                <img src="<?php echo wp_get_attachment_image_url($product_image, 'thumbnail'); ?>" class="w-8 h-8 object-cover rounded" alt="<?php echo esc_attr($product_name); ?>">
                            <?php else : ?>
                                <i class="fas fa-box text-blue-600"></i>
                            <?php endif; ?>
                            <span><?php echo esc_html($product_name); ?></span>
                        </div>
                    </td>
                    <td class="text-center" id="summaryQuantity">1</td>
                    <td class="text-right" id="summarySubtotal" 
                        data-unit-price="<?php echo esc_attr($product_price); ?>">
                        <?php echo wc_price($product_price); ?>
                    </td>
                </tr>
                <tr class="border-b border-blue-200">
                    <td class="py-3">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-truck text-blue-600"></i>
                            <span>Shipping Cost</span>
                        </div>
                    </td>
                    <td class="text-center">-</td>
                    <td class="text-right" id="summaryShipping" 
                        data-standard="5.00" 
                        data-express="15.00">
                        <?php echo wc_price(5.00); ?>
                    </td>
                </tr>
                <tr>
                    <td class="py-3 font-semibold">Order Total</td>
                    <td class="text-center">-</td>
                    <td class="text-right font-bold text-blue-600" id="summaryTotal"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
    </div>
    <script src="main.js"></script>
</div>
<script type="text/javascript">
    var yaxiiStoreCountry = '<?php echo esc_js($store_country); ?>';
</script>