<?php
session_start();
require_once '../includes/product-card.php';
require_once '../config/database.php';
require_once '../models/user.php';

$page_title = 'إتمام الطلب';
$base_path = '../';

// Check login
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php?redirect=checkout');
    exit;
}

$database = new Database();
$conn = $database->getConnection();

// Initialize user model for footer
$user_model = new User($conn);

// Get cart items
$stmt = $conn->prepare("
    SELECT c.*, p.name, p.price, p.image 
    FROM cart c 
    JOIN products p ON c.product_id = p.id 
    WHERE c.user_id = ?
");
$stmt->execute([$_SESSION['user_id']]);
$cart_items = $stmt->fetchAll(PDO::FETCH_ASSOC);

if (empty($cart_items)) {
    header('Location: cart.php');
    exit;
}

// Calculate totals
$subtotal = 0;
foreach ($cart_items as $item) {
    $subtotal += $item['price'] * $item['quantity'];
}
$shipping = 0;
$tax = $subtotal * 0.15;
$total = $subtotal + $shipping + $tax;

// Get user data
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

// Get saved addresses
$stmt = $conn->prepare("SELECT * FROM addresses WHERE user_id = ? ORDER BY is_default DESC, created_at DESC");
$stmt->execute([$_SESSION['user_id']]);
$saved_addresses = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Get default address
$default_address = !empty($saved_addresses) ? $saved_addresses[0] : null;

include '../includes/unified-header.php';
?>

<!-- Hero -->
<section class="py-6 bg-gradient-to-r from-pink-50 to-purple-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center gap-2 text-sm text-gray-600 mb-3">
            <a href="index.php" class="hover:text-[#E57393]">الرئيسية</a>
            <i class="fas fa-chevron-left text-xs"></i>
            <a href="cart.php" class="hover:text-[#E57393]">السلة</a>
            <i class="fas fa-chevron-left text-xs"></i>
            <span class="text-[#E57393]">إتمام الطلب</span>
        </div>
        <h1 class="text-3xl font-bold">إتمام الطلب</h1>
    </div>
</section>

<!-- Progress Steps -->
<section class="py-4 bg-white border-b">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-center gap-3">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-[#E57393] text-white flex items-center justify-center text-sm font-bold">1</div>
                <span class="text-sm font-bold text-[#E57393]">الشحن</span>
            </div>
            <div class="w-12 h-0.5 bg-gray-300"></div>
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center text-sm font-bold">2</div>
                <span class="text-sm text-gray-600">الدفع</span>
            </div>
            <div class="w-12 h-0.5 bg-gray-300"></div>
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center text-sm font-bold">3</div>
                <span class="text-sm text-gray-600">تأكيد</span>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="py-8 bg-gray-50">
    <div class="container mx-auto px-4">
        
        <?php if (isset($_SESSION['error'])): ?>
        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg mb-6">
            <i class="fas fa-exclamation-circle ml-2"></i>
            <?php echo htmlspecialchars($_SESSION['error']); ?>
            <?php unset($_SESSION['error']); ?>
        </div>
        <?php endif; ?>
        
        <form id="checkoutForm" method="POST" action="../api/orders/create.php">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                
                <!-- Left: Forms -->
                <div class="lg:col-span-2 space-y-6">
                    
                    <!-- Saved Addresses -->
                    <?php if (!empty($saved_addresses)): ?>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold">عناوين الشحن المحفوظة</h2>
                            <button type="button" onclick="toggleNewAddress()" class="text-[#E57393] text-sm hover:underline">
                                + عنوان جديد
                            </button>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <?php foreach ($saved_addresses as $addr): ?>
                            <label class="address-option border-2 rounded-lg p-3 cursor-pointer hover:border-[#E57393] transition">
                                <div class="flex items-start gap-2">
                                    <input type="radio" name="address_id" value="<?php echo $addr['id']; ?>" 
                                           <?php echo $addr['is_default'] ? 'checked' : ''; ?>
                                           class="mt-1">
                                    <div class="flex-1 text-sm">
                                        <div class="font-bold"><?php echo htmlspecialchars($addr['title']); ?></div>
                                        <div class="text-gray-600"><?php echo htmlspecialchars($addr['full_name']); ?></div>
                                        <div class="text-gray-600"><?php echo htmlspecialchars($addr['phone']); ?></div>
                                        <div class="text-gray-600"><?php echo htmlspecialchars($addr['address_line1']); ?></div>
                                        <div class="text-gray-600"><?php echo htmlspecialchars($addr['city']); ?></div>
                                    </div>
                                </div>
                            </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <!-- New Address Form -->
                    <div id="newAddressForm" class="bg-white rounded-lg shadow-sm p-6" <?php echo !empty($saved_addresses) ? 'style="display:none"' : ''; ?>>
                        <h2 class="text-xl font-bold mb-4">معلومات الشحن</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-bold mb-1">الاسم الكامل *</label>
                                <input type="text" name="full_name" required
                                       value="<?php echo htmlspecialchars($default_address['full_name'] ?? $user['name'] ?? ''); ?>"
                                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-bold mb-1">رقم الجوال *</label>
                                <input type="tel" name="phone" required
                                       value="<?php echo htmlspecialchars($default_address['phone'] ?? $user['phone'] ?? ''); ?>"
                                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-bold mb-1">البريد الإلكتروني *</label>
                                <input type="email" name="email" required
                                       value="<?php echo htmlspecialchars($user['email'] ?? ''); ?>"
                                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]">
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-bold mb-1">العنوان *</label>
                                <input type="text" name="address_line1" required
                                       value="<?php echo htmlspecialchars($default_address['address_line1'] ?? ''); ?>"
                                       placeholder="الشارع، رقم المبنى"
                                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-bold mb-1">المدينة *</label>
                                <input type="text" name="city" required
                                       value="<?php echo htmlspecialchars($default_address['city'] ?? ''); ?>"
                                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-bold mb-1">الرمز البريدي</label>
                                <input type="text" name="postal_code"
                                       value="<?php echo htmlspecialchars($default_address['postal_code'] ?? ''); ?>"
                                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]">
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-bold mb-1">ملاحظات (اختياري)</label>
                                <textarea name="notes" rows="2"
                                          class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-[#E57393]"></textarea>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="flex items-center gap-2">
                                    <input type="checkbox" name="save_address" value="1">
                                    <span class="text-sm">حفظ العنوان للمستقبل</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Payment Method -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h2 class="text-xl font-bold mb-4">طريقة الدفع</h2>
                        
                        <label class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer hover:border-[#E57393]">
                            <input type="radio" name="payment_method" value="cod" checked>
                            <i class="fas fa-money-bill-wave text-green-600 text-xl"></i>
                            <div>
                                <div class="font-bold">الدفع عند الاستلام</div>
                                <div class="text-xs text-gray-600">ادفع نقداً عند الاستلام</div>
                            </div>
                        </label>
                    </div>
                    
                </div>
                
                <!-- Right: Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg shadow-sm p-6 sticky top-4">
                        <h3 class="text-lg font-bold mb-4">ملخص الطلب</h3>
                        
                        <!-- Items -->
                        <div class="space-y-2 mb-4 max-h-48 overflow-y-auto">
                            <?php foreach ($cart_items as $item): ?>
                            <div class="flex gap-2 text-sm">
                                <img src="../uploads/products/<?php echo $item['image']; ?>" 
                                     class="w-12 h-12 object-cover rounded">
                                <div class="flex-1">
                                    <div class="font-bold text-xs"><?php echo htmlspecialchars($item['name']); ?></div>
                                    <div class="text-gray-600 text-xs">الكمية: <?php echo $item['quantity']; ?></div>
                                </div>
                                <div class="font-bold text-[#E57393] text-sm">
                                    <?php echo number_format($item['price'] * $item['quantity'], 2); ?> ج.م
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <!-- Coupon -->
                        <div class="border-t pt-4 mb-4">
                            <div class="flex gap-2">
                                <input type="text" id="couponCode" placeholder="كود الخصم"
                                       class="flex-1 px-3 py-2 border rounded-lg text-sm focus:outline-none focus:border-[#E57393]">
                                <button type="button" onclick="applyCoupon()" 
                                        class="px-4 py-2 bg-[#E57393] text-white rounded-lg text-sm font-bold hover:bg-[#D65D7A]">
                                    تطبيق
                                </button>
                            </div>
                            <div id="couponMsg" class="text-xs mt-1"></div>
                        </div>
                        
                        <!-- Totals -->
                        <div class="border-t pt-4 space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span>المجموع الفرعي</span>
                                <span id="subtotalDisplay"><?php echo number_format($subtotal, 2); ?> ج.م</span>
                            </div>
                            <div id="discountRow" class="flex justify-between text-green-600" style="display:none">
                                <span>الخصم</span>
                                <span id="discountDisplay">0.00 ج.م</span>
                            </div>
                            <div class="flex justify-between">
                                <span>الشحن</span>
                                <span class="text-green-600">مجاني</span>
                            </div>
                            <div class="flex justify-between">
                                <span>الضريبة (15%)</span>
                                <span id="taxDisplay"><?php echo number_format($tax, 2); ?> ج.م</span>
                            </div>
                            <div class="flex justify-between font-bold text-lg border-t pt-2">
                                <span>الإجمالي</span>
                                <span class="text-[#E57393]" id="totalDisplay"><?php echo number_format($total, 2); ?> ج.م</span>
                            </div>
                        </div>
                        
                        <!-- Submit -->
                        <button type="submit" class="w-full mt-4 bg-[#E57393] text-white py-3 rounded-lg font-bold hover:bg-[#D65D7A] transition">
                            إتمام الطلب
                        </button>
                        
                        <div class="text-center text-xs text-gray-500 mt-3">
                            <i class="fas fa-lock"></i> معاملة آمنة
                        </div>
                    </div>
                </div>
                
            </div>
        </form>
    </div>
</section>

<style>
.address-option:has(input:checked) {
    border-color: #E57393;
    background: #FFF5F7;
}
</style>

<script>
const originalSubtotal = <?php echo $subtotal; ?>;
let discount = 0;
let appliedCouponCode = null;

function toggleNewAddress() {
    const form = document.getElementById('newAddressForm');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
    
    if (form.style.display === 'block') {
        document.querySelectorAll('input[name="address_id"]').forEach(r => r.checked = false);
    }
}

function applyCoupon() {
    const code = document.getElementById('couponCode').value.trim();
    const msg = document.getElementById('couponMsg');
    
    if (!code) {
        msg.className = 'text-xs mt-1 text-red-600';
        msg.textContent = 'أدخل كود الخصم';
        return;
    }
    
    msg.className = 'text-xs mt-1 text-blue-600';
    msg.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التحقق...';
    
    fetch('../api/apply_coupon.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({code: code, subtotal: originalSubtotal})
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            discount = data.discount;
            appliedCouponCode = code;
            updateTotals();
            
            msg.className = 'text-xs mt-1 text-green-600';
            msg.innerHTML = '<i class="fas fa-check"></i> ' + data.message;
            
            // Add hidden input
            let input = document.getElementById('couponInput');
            if (!input) {
                input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'coupon_code';
                input.id = 'couponInput';
                document.getElementById('checkoutForm').appendChild(input);
            }
            input.value = code;
        } else {
            msg.className = 'text-xs mt-1 text-red-600';
            msg.innerHTML = '<i class="fas fa-times"></i> ' + data.message;
        }
    })
    .catch(() => {
        msg.className = 'text-xs mt-1 text-red-600';
        msg.textContent = 'حدث خطأ';
    });
}

function updateTotals() {
    const newSubtotal = originalSubtotal - discount;
    const newTax = newSubtotal * 0.15;
    const newTotal = newSubtotal + newTax;
    
    if (discount > 0) {
        document.getElementById('discountRow').style.display = 'flex';
        document.getElementById('discountDisplay').textContent = '-' + discount.toFixed(2) + ' ج.م';
    }
    
    document.getElementById('taxDisplay').textContent = newTax.toFixed(2) + ' ج.م';
    document.getElementById('totalDisplay').textContent = newTotal.toFixed(2) + ' ج.م';
}

// Form submission with redirect
document.getElementById('checkoutForm').addEventListener('submit', function(e) {
    const hasAddress = document.querySelector('input[name="address_id"]:checked');
    const formVisible = document.getElementById('newAddressForm').style.display !== 'none';
    
    if (!hasAddress && !formVisible) {
        e.preventDefault();
        alert('اختر عنوان الشحن');
        return false;
    }
    
    // Show loading
    const submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري المعالجة...';
});
</script>

<?php include '../includes/unified-footer.php'; ?>
