<?php
// buy-now.php
require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/functions.php';

// Check if user is logged in
if (!isLoggedIn()) {
    header('Location: login.php?redirect=buy-now.php');
    exit;
}

// Get product data from POST or GET
$product_id = intval($_POST['product_id'] ?? $_GET['product_id'] ?? 0);
$quantity = intval($_POST['quantity'] ?? $_GET['quantity'] ?? 1);
$variants = [];

// Collect variants from POST or GET
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    foreach ($_POST as $key => $value) {
        if (strpos($key, 'variant') === 0) {
            $attr_name = str_replace('variant', '', $key);
            $variants[$attr_name] = $value;
        }
    }
} else {
    // If coming from GET (URL parameters)
    if (isset($_GET['variants']) && is_array($_GET['variants'])) {
        $variants = $_GET['variants'];
    }
}

// Get product details
$product = getProduct($pdo, $product_id);
if (!$product) {
    header('Location: shop.php');
    exit;
}

// Calculate price
$price = $product['sale_price'] ?: $product['price'];
$subtotal = $price * $quantity;
$shipping_charge = floatval(getSetting($pdo, 'shipping_charge') ?: 70);
$discount = 0;
$total = $subtotal + $shipping_charge - $discount;

// Get user data
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();

include __DIR__ . '/includes/header.php';
?>

<style>
/* ===== Checkout Styles ===== */
.checkout_area {
    padding: 45px 0;
}

.checkout_form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.checkout_form_title h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

.checkout_form_group {
    margin-bottom: 18px;
    position: relative;
}

.checkout_form_group label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #334155;
    margin-bottom: 5px;
}

.checkout_form_group input,
.checkout_form_group textarea,
.checkout_form_group select {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.checkout_form_group input:focus,
.checkout_form_group textarea:focus,
.checkout_form_group select:focus {
    border-color: #047dc3;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(4, 125, 195, 0.1);
    outline: none;
}

.checkout_form_group i {
    position: absolute;
    right: 15px;
    bottom: 14px;
    color: #94a3b8;
    font-size: 16px;
}

.checkout_form_checkbox_group h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.checkout_form_checkbox {
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.checkout_form_checkbox:last-child {
    margin-bottom: 0;
}

.checkout_form_checkbox:hover {
    border-color: #047dc3;
    background: #f8fafc;
}

.checkout_form_checkbox input[type="radio"] {
    margin-right: 10px;
    accent-color: #047dc3;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkout_form_checkbox label {
    cursor: pointer;
    font-size: 14px;
    color: #334155;
}

.checkout_form_btn {
    margin-top: 20px;
}

.checkout_form_btn_link {
    width: 100%;
    padding: 14px;
    background: #047dc3;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.checkout_form_btn_link:hover {
    background: #0369a1;
}

.checkout_form_btn_link:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ===== Order Summary ===== */
.checkout_order_summary {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.apply_coupon_group {
    margin-bottom: 20px;
}

.apply_coupon_item {
    display: flex;
    gap: 10px;
}

.apply_coupon_item input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.apply_coupon_item input:focus {
    border-color: #047dc3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 125, 195, 0.1);
}

.apply_coupon_item_link {
    padding: 10px 25px;
    background: #047dc3;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.apply_coupon_item_link:hover {
    background: #0369a1;
    color: #fff;
}

#coupon_valid {
    color: #22c55e;
    font-size: 14px;
    margin-top: 8px;
    display: none;
}

#coupon_invalid {
    color: #ef4444;
    font-size: 14px;
    margin-top: 8px;
    display: none;
}

/* ===== Order Table ===== */
.order_summary_table {
    overflow-x: auto;
}

.order_summary_table table {
    width: 100%;
    border-collapse: collapse;
}

.order_summary_table thead tr {
    border-bottom: 2px solid #e2e8f0;
}

.order_summary_table thead th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 13px;
}

.order_summary_table tbody tr {
    border-bottom: 1px solid #f1f5f9;
}

.order_summary_table tbody td {
    padding: 12px 8px;
    vertical-align: middle;
}

.checkout_product_td_left {
    padding-left: 0 !important;
}

.checkout_product_td_right {
    text-align: right;
    padding-right: 0 !important;
}

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

.checkout_product_name_image img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

.products_checkout_name p {
    margin: 0;
    font-size: 14px;
    color: #1e293b;
}

.products_checkout_name p:last-child {
    font-size: 12px;
    color: #94a3b8;
}

.checkout_product_qty {
    display: flex;
    align-items: center;
}

.checkout_product_qty_minus,
.checkout_product_qty_plus {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.checkout_product_qty_minus:hover,
.checkout_product_qty_plus:hover {
    background: #047dc3;
    color: #fff;
    border-color: #047dc3;
}

.checkout_product_qty input {
    width: 40px;
    height: 30px;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-left: none;
    border-right: none;
    font-size: 14px;
}

.checkout_product_price p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.checkout_product_total_price p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #047dc3;
}

.checkout_product_delete_icon_link {
    color: #ef4444;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.checkout_product_delete_icon_link:hover {
    color: #dc2626;
}

/* ===== Price Summary ===== */
.price_summary_table_cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.price_summary_table_cell:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.price_summary_table_cell strong {
    font-weight: 500;
    color: #1e293b;
    font-size: 15px;
}

.price_summary_table_cell strong:last-child {
    font-weight: 600;
    color: #047dc3;
}

/* ===== Success Message ===== */
.order-success-message {
    display: none;
    background: #f0fdf4;
    border: 1px solid #22c55e;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.order-success-message .success-icon {
    font-size: 50px;
    color: #22c55e;
    margin-bottom: 15px;
}

.order-success-message h3 {
    color: #1e293b;
    margin-bottom: 10px;
}

.order-success-message .invoice-text {
    color: #64748b;
    font-size: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .checkout_form {
        padding: 20px;
    }
    .checkout_order_summary {
        padding: 20px;
    }
    .checkout_form_title h3 {
        font-size: 20px;
    }
    .checkout_product_qty input {
        width: 35px;
    }
}

@media (max-width: 576px) {
    .checkout_area {
        padding: 20px 0;
    }
    .apply_coupon_item {
        flex-direction: column;
    }
    .apply_coupon_item_link {
        width: 100%;
        justify-content: center;
    }
}
</style>

<div class="content">
    <!--============ Checkout Area Start ============-->
    <section class="checkout_area section_padding">

        <!-- Success Message -->
        <div id="orderSuccessMessage" class="order-success-message" style="display: none;">
            <div class="success-icon">
                <i class="fa-solid fa-circle-check"></i>
            </div>
            <h3>Order Placed Successfully!</h3>
            <p class="invoice-text">Your order has been placed. Invoice: <strong id="invoiceNo"></strong></p>
            <p class="text-muted">We will contact you shortly for confirmation.</p>
            <div class="mt-3">
                <a href="profile.php" class="btn btn-primary">View My Orders</a>
                <a href="index.php" class="btn btn-secondary">Continue Shopping</a>
            </div>
        </div>

        <!-- Order Form -->
        <div id="orderFormContainer">
            <form id="order_form" method="POST" action="process-buy-now.php">
                <div class="container">
                    <div class="row gy-4">
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-12">
                            <div class="checkout_form">
                                <div class="checkout_form_title">
                                    <h3>Please Order Now</h3>
                                </div>
                                
                                <div class="checkout_form_group">
                                    <label>Full Name</label>
                                    <input type="text" required name="name" value="<?php echo $user['name'] ?? ''; ?>" placeholder="Full Name">
                                    <i class="fa-regular fa-user"></i>
                                </div>
                                
                                <div class="checkout_form_group">
                                    <label>Mobile Number</label>
                                    <input type="number" name="mobile_no" value="<?php echo $user['phone'] ?? ''; ?>" placeholder="01xxxxxxxxx" maxlength="11" minlength="11" onkeyup="setNumber(this.value, 1)" oninput="if(this.value.length > 11) this.value = this.value.slice(0, 11);">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                                
                                <input type="hidden" id="free_delivery" value="" name="free_delivery">
                                <input type="hidden" id="show_city_sub_city" value="0">
                                
                                <div class="checkout_form_checkbox_group">
                                    <h4>Delivery Area</h4>
                                    <div class="checkout_form_checkbox form-check">
                                        <input required class="form-check-input" value="70" checked onclick="shippingChargeBySelectArea(this.id, 70)" type="radio" name="shipping_charge" id="1">
                                        <label class="form-check-label" for="1">
                                            In Dhaka City 70TK
                                        </label>
                                    </div>
                                    <div class="checkout_form_checkbox form-check">
                                        <input required class="form-check-input" value="100" onclick="shippingChargeBySelectArea(this.id, 100)" type="radio" name="shipping_charge" id="2">
                                        <label class="form-check-label" for="2">
                                            Saver, Keranigonj, Gazipur & Narayanganj - 100TK
                                        </label>
                                    </div>
                                    <div class="checkout_form_checkbox form-check">
                                        <input required class="form-check-input" value="120" onclick="shippingChargeBySelectArea(this.id, 120)" type="radio" name="shipping_charge" id="10">
                                        <label class="form-check-label" for="10">
                                            Other Districts 120TK
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="checkout_form_group">
                                    <label>Full Address</label>
                                    <input type="text" required name="address" value="<?php echo $user['address'] ?? ''; ?>" placeholder="Full Address">
                                    <i class="fa-solid fa-location-dot"></i>
                                </div>
                                
                                <div class="checkout_form_group">
                                    <label>Delivery Note</label>
                                    <input type="text" name="note" value="" placeholder="Delivery Note">
                                    <i class="fa-regular fa-comment"></i>
                                </div>
                                
                                <!-- Hidden fields -->
                                <input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
                                <input type="hidden" name="quantity" value="<?php echo $quantity; ?>">
                                <input type="hidden" name="subtotal" value="<?php echo $subtotal; ?>">
                                <input type="hidden" name="total" id="hidden_total" value="<?php echo $total; ?>">
                                <input type="hidden" name="discount" value="0">
                                <input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id']; ?>">
                                <input type="hidden" name="coupon_amount" id="coupon_amount" value="0">
                                
                                <!-- Variants -->
                                <?php foreach ($variants as $attr => $val): ?>
                                <input type="hidden" name="variant<?php echo $attr; ?>" value="<?php echo $val; ?>">
                                <?php endforeach; ?>
                                
                                <div class="checkout_form_btn">
                                    <button id="order_form_submit" class="checkout_form_btn_link">
                                        <i class="fa-solid fa-cart-shopping"></i>
                                        Order Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-12">
                            <div class="checkout_order_summary">
                                <div class="apply_coupon_group">
                                    <input type="hidden" id="coupon_amount" name="coupon_amount">
                                    <div class="apply_coupon_item">
                                        <input type="text" id="coupon_name" name="coupon" placeholder="Coupon Code">
                                        <a id="coupon_apply" class="apply_coupon_item_link">Apply</a>
                                    </div>
                                    <span id="coupon_valid" style="color: green;display:none">Congratulations. This Coupon is Valid.</span>
                                    <span id="coupon_invalid" style="color: red;display:none">Oops Sorry! This Coupon is Invalid.</span>
                                </div>
                                
                                <div class="order_summary_table">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th class="checkout_product_td_left">Product</th>
                                                <th class="checkout_product_th_qty">Quantity</th>
                                                <th class="checkout_product_th_price">Price</th>
                                                <th class="checkout_product_th_total_price">Total Price</th>
                                                <th class="checkout_product_td_right">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="check_out_carts">
                                            <tr>
                                                <td class="checkout_product_td_left">
                                                    <div class="checkout_product_name_image">
                                                        <img src="<?php echo ASSETS_URL; ?>images/products/<?php echo $product['image'] ?: 'default.jpg'; ?>" alt="<?php echo $product['name']; ?>">
                                                    </div>
                                                    <div class="products_checkout_name">
                                                        <p><?php echo substr($product['name'], 0, 30) . '...'; ?></p>
                                                        <?php if (!empty($variants)): ?>
                                                            <?php foreach ($variants as $attr => $val): ?>
                                                            <p><?php echo $attr; ?>: <?php echo $val; ?></p>
                                                            <?php endforeach; ?>
                                                        <?php endif; ?>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="checkout_product_qty">
                                                        <div id="product_qty" onclick="cartDecrement(this.id)" class="checkout_product_qty_minus">
                                                            <i class="fa-solid fa-minus"></i>
                                                        </div>
                                                        <input type="text" class="product_qty" value="<?php echo $quantity; ?>">
                                                        <div id="product_qty" onclick="cartIncrement(this.id)" class="checkout_product_qty_plus">
                                                            <i class="fa-solid fa-plus"></i>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="checkout_product_price">
                                                        <p><?php echo number_format($price); ?> TK</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="checkout_product_total_price">
                                                        <p><?php echo number_format($subtotal); ?> TK</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="checkout_product_delete_icon">
                                                        <a href="javascript:void(0)" onclick="removeItem()" class="checkout_product_delete_icon_link">
                                                            <i class="fa-solid fa-trash"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div>
                                    <div class="price_summary_table_cell">
                                        <strong>Sub Total :</strong>
                                        <input id="cart_sub_total" type="hidden" value="<?php echo $subtotal; ?>">
                                        <strong id="show_cart_sub_total"><?php echo number_format($subtotal); ?> TK</strong>
                                    </div>
                                    <div class="price_summary_table_cell">
                                        <strong>Shipping Charge :</strong>
                                        <strong id="show_shipping_charge"><?php echo number_format($shipping_charge); ?> TK</strong>
                                    </div>
                                    <div class="price_summary_table_cell">
                                        <strong>Discount Amount :</strong>
                                        <strong id="show_discount">0 TK</strong>
                                    </div>
                                    <div class="price_summary_table_cell">
                                        <strong>Payable Amount :</strong>
                                        <strong id="show_payable"><?php echo number_format($total); ?> TK</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>

<script>
// ========================================
// SHIPPING CHARGE
// ========================================
var shipping_charge = <?php echo $shipping_charge; ?>;
var sub_total = <?php echo $subtotal; ?>;
var discount = 0;
var coupon = null;
var product_id = <?php echo $product_id; ?>;
var quantity = <?php echo $quantity; ?>;

function shippingChargeBySelectArea(id, charge) {
    shipping_charge = charge;
    calculateTotal();
}

// ========================================
// CALCULATE TOTAL
// ========================================
function calculateTotal() {
    var subtotal = <?php echo $subtotal; ?>;
    var discount_amount = parseFloat(document.getElementById('coupon_amount').value) || 0;
    var total = subtotal + shipping_charge - discount_amount;
    
    document.getElementById('show_shipping_charge').textContent = shipping_charge + ' TK';
    document.getElementById('show_discount').textContent = discount_amount + ' TK';
    document.getElementById('show_payable').textContent = total + ' TK';
    document.getElementById('hidden_total').value = total;
}

// ========================================
// CART OPERATIONS
// ========================================
function cartIncrement(id) {
    var qty = document.querySelector('.product_qty');
    var value = parseInt(qty.value) + 1;
    qty.value = value;
    // Update hidden quantity
    document.querySelector('input[name="quantity"]').value = value;
    // Update price
    updatePrice(value);
}

function cartDecrement(id) {
    var qty = document.querySelector('.product_qty');
    var value = parseInt(qty.value);
    if (value > 1) {
        value = value - 1;
        qty.value = value;
        document.querySelector('input[name="quantity"]').value = value;
        updatePrice(value);
    }
}

function updatePrice(qty) {
    var price = <?php echo $price; ?>;
    var subtotal = price * qty;
    var total = subtotal + shipping_charge - discount;
    
    document.querySelector('.checkout_product_total_price p').textContent = subtotal + ' TK';
    document.getElementById('cart_sub_total').value = subtotal;
    document.getElementById('show_cart_sub_total').textContent = subtotal + ' TK';
    document.getElementById('show_payable').textContent = total + ' TK';
    document.querySelector('input[name="subtotal"]').value = subtotal;
    document.querySelector('input[name="total"]').value = total;
}

function removeItem() {
    if (confirm('Remove this item?')) {
        window.location.href = 'shop.php';
    }
}

// ========================================
// COUPON APPLY
// ========================================
document.getElementById('coupon_apply').addEventListener('click', function() {
    var coupon_name = document.getElementById('coupon_name').value;
    
    if (!coupon_name) {
        showToast('Please enter a coupon code', 'warning');
        return;
    }
    
    fetch('apply-coupon.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'coupon=' + encodeURIComponent(coupon_name) + '&subtotal=' + <?php echo $subtotal; ?>
    })
    .then(response => response.json())
    .then(res => {
        if (res.success) {
            coupon = res.coupon;
            document.getElementById('coupon_amount').value = res.discount_amount;
            document.getElementById('coupon_valid').style.display = 'block';
            document.getElementById('coupon_invalid').style.display = 'none';
            calculateTotal();
            showToast(res.message, 'success');
        } else {
            document.getElementById('coupon_valid').style.display = 'none';
            document.getElementById('coupon_invalid').style.display = 'block';
            showToast(res.message, 'error');
        }
    })
    .catch(error => {
        showToast('Something went wrong', 'error');
    });
});

// ========================================
// FORM SUBMIT
// ========================================
document.getElementById('order_form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Validate form
    var name = document.querySelector('input[name="name"]').value;
    var mobile_no = document.querySelector('input[name="mobile_no"]').value;
    var address = document.querySelector('input[name="address"]').value;
    var shipping_charge = document.querySelector('input[name="shipping_charge"]:checked');
    
    if (!name) {
        showToast('Please enter your name', 'error');
        return;
    }
    
    if (!mobile_no || mobile_no.length < 11) {
        showToast('Please enter a valid 11-digit mobile number', 'error');
        return;
    }
    
    if (!address) {
        showToast('Please enter your address', 'error');
        return;
    }
    
    if (!shipping_charge) {
        showToast('Please select a delivery area', 'error');
        return;
    }
    
    // Disable submit button
    var btn = document.getElementById('order_form_submit');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
    
    var formData = new FormData(this);
    
    fetch('process-buy-now.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(res => {
        if (res.success) {
            document.getElementById('orderFormContainer').style.display = 'none';
            document.getElementById('orderSuccessMessage').style.display = 'block';
            document.getElementById('invoiceNo').textContent = res.invoice_no;
            showToast('Order placed successfully!', 'success');
        } else {
            showToast(res.message || 'Failed to place order', 'error');
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-cart-shopping"></i> Order Submit';
        }
    })
    .catch(error => {
        showToast('Something went wrong. Please try again.', 'error');
        btn.disabled = false;
        btn.innerHTML = '<i class="fa-solid fa-cart-shopping"></i> Order Submit';
    });
});

// ========================================
// SET NUMBER
// ========================================
function setNumber(val, incomplete_order_system) {
    // Optional: Save incomplete order data
}

// ========================================
// TOAST NOTIFICATION
// ========================================
function showToast(message, type) {
    var colors = {
        success: '#22c55e',
        error: '#ef4444',
        warning: '#f59e0b',
        info: '#3b82f6'
    };
    
    var toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 24px;
        background: ${colors[type] || colors.info};
        color: #fff;
        border-radius: 8px;
        z-index: 9999;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        animation: slideIn 0.3s ease;
        max-width: 400px;
    `;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(function() {
        toast.style.opacity = '0';
        toast.style.transition = 'opacity 0.3s ease';
        setTimeout(function() { toast.remove(); }, 300);
    }, 3000);
}

// Add CSS animation
var style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0%); opacity: 1; }
    }
`;
document.head.appendChild(style);
</script>

<?php include __DIR__ . '/includes/footer.php'; ?>