<?php
$page_title = 'Checkout';
require_once __DIR__ . '/header.php';
?>

<div class="breadcrumb" style="margin-bottom:20px; font-size:0.9rem; color:#64748b;">
    <a href="index.php" style="color:#2563eb; text-decoration:none;">Home</a> / 
    <a href="cart.php" style="color:#2563eb; text-decoration:none;">Cart</a> / 
    <span style="color:#0f172a;">Checkout</span>
</div>

<h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0 0 24px;">Secure Checkout</h2>

<div style="display:grid; grid-template-columns: 2fr 1fr; gap:24px;">
    <!-- Left: Forms -->
    <div>
        <div class="card" style="margin-bottom:24px;">
            <h3 style="margin:0 0 16px; color:#0f172a; font-size:1.1rem; border-bottom:1px solid #e2e8f0; padding-bottom:12px;">1. Delivery Address</h3>
            
            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px;">
                <div style="border:2px solid #2563eb; padding:16px; border-radius:8px; background:#eff6ff; position:relative; cursor:pointer;">
                    <i class="fas fa-check-circle" style="position:absolute; top:16px; right:16px; color:#2563eb; font-size:1.2rem;"></i>
                    <h4 style="margin:0 0 8px; color:#0f172a;">Home Address</h4>
                    <p style="margin:0; font-size:0.85rem; color:#475569; line-height:1.5;">123, Industrial Area, Morbi,<br>Gujarat - 363641<br>Phone: 9876543210</p>
                </div>
                <div style="border:1px solid #cbd5e1; padding:16px; border-radius:8px; background:#fff; cursor:pointer;">
                    <h4 style="margin:0 0 8px; color:#0f172a;">Office Address</h4>
                    <p style="margin:0; font-size:0.85rem; color:#475569; line-height:1.5;">Plot 45, GIDC Phase 2,<br>Ahmedabad, Gujarat - 380015<br>Phone: 9123456780</p>
                </div>
            </div>
            <button style="background:none; border:none; color:#2563eb; font-weight:600; cursor:pointer; font-size:0.9rem; padding:0; display:flex; align-items:center; gap:6px;"><i class="fas fa-plus"></i> Add New Address</button>
        </div>

        <div class="card" style="margin-bottom:24px;">
            <h3 style="margin:0 0 16px; color:#0f172a; font-size:1.1rem; border-bottom:1px solid #e2e8f0; padding-bottom:12px;">2. Shipping Options</h3>
            <label style="display:flex; justify-content:space-between; align-items:center; padding:16px; border:1px solid #cbd5e1; border-radius:8px; margin-bottom:12px; cursor:pointer;">
                <div style="display:flex; align-items:center; gap:12px;">
                    <input type="radio" name="shipping" checked style="accent-color:#2563eb;">
                    <div>
                        <div style="font-weight:600; color:#0f172a;">Standard Delivery</div>
                        <div style="font-size:0.8rem; color:#64748b;">Estimated delivery by 20 May 2026</div>
                    </div>
                </div>
                <div style="font-weight:600; color:#16a34a;">Free</div>
            </label>
            <label style="display:flex; justify-content:space-between; align-items:center; padding:16px; border:1px solid #cbd5e1; border-radius:8px; cursor:pointer;">
                <div style="display:flex; align-items:center; gap:12px;">
                    <input type="radio" name="shipping" style="accent-color:#2563eb;">
                    <div>
                        <div style="font-weight:600; color:#0f172a;">Express Delivery</div>
                        <div style="font-size:0.8rem; color:#64748b;">Estimated delivery by 18 May 2026</div>
                    </div>
                </div>
                <div style="font-weight:600; color:#0f172a;">₹250.00</div>
            </label>
        </div>

        <div class="card">
            <h3 style="margin:0 0 16px; color:#0f172a; font-size:1.1rem; border-bottom:1px solid #e2e8f0; padding-bottom:12px;">3. Payment Gateway</h3>
            
            <div style="display:grid; grid-template-columns: 1fr; gap:12px;">
                <label style="display:flex; align-items:center; gap:12px; padding:16px; border:2px solid #2563eb; background:#eff6ff; border-radius:8px; cursor:pointer;">
                    <input type="radio" name="payment" checked style="accent-color:#2563eb;">
                    <i class="fas fa-credit-card" style="color:#2563eb; font-size:1.2rem; width:24px;"></i>
                    <div style="font-weight:600; color:#0f172a;">Credit / Debit Card</div>
                </label>
                
                <div style="padding:16px; border:1px solid #cbd5e1; border-top:none; border-radius:0 0 8px 8px; margin-top:-14px; background:#fff;">
                    <input type="text" placeholder="Card Number" style="width:100%; padding:10px 14px; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:12px; outline:none;">
                    <div style="display:flex; gap:12px;">
                        <input type="text" placeholder="MM/YY" style="width:100%; padding:10px 14px; border:1px solid #cbd5e1; border-radius:6px; outline:none;">
                        <input type="text" placeholder="CVV" style="width:100%; padding:10px 14px; border:1px solid #cbd5e1; border-radius:6px; outline:none;">
                    </div>
                </div>

                <label style="display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #cbd5e1; border-radius:8px; cursor:pointer;">
                    <input type="radio" name="payment" style="accent-color:#2563eb;">
                    <i class="fab fa-google-pay" style="color:#64748b; font-size:1.5rem; width:24px; text-align:center;"></i>
                    <div style="font-weight:600; color:#0f172a;">UPI / Google Pay</div>
                </label>

                <label style="display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #cbd5e1; border-radius:8px; cursor:pointer;">
                    <input type="radio" name="payment" style="accent-color:#2563eb;">
                    <i class="fas fa-university" style="color:#64748b; font-size:1.2rem; width:24px; text-align:center;"></i>
                    <div style="font-weight:600; color:#0f172a;">Net Banking</div>
                </label>

                <label style="display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #cbd5e1; border-radius:8px; cursor:pointer;">
                    <input type="radio" name="payment" style="accent-color:#2563eb;">
                    <i class="fas fa-wallet" style="color:#64748b; font-size:1.2rem; width:24px; text-align:center;"></i>
                    <div style="font-weight:600; color:#0f172a;">Pay from Wallet (Bal: ₹12,450.00)</div>
                </label>
            </div>
        </div>
    </div>

    <!-- Right: Order Summary -->
    <div class="card" style="align-self:start; padding:24px;">
        <h3 style="margin:0 0 20px; color:#0f172a; font-size:1.1rem; border-bottom:1px solid #e2e8f0; padding-bottom:12px;">Order Summary</h3>
        
        <div style="margin-bottom:20px; display:flex; flex-direction:column; gap:12px;">
            <div style="display:flex; gap:12px;">
                <div style="width:50px; height:50px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#cbd5e1;"><i class="fas fa-image"></i></div>
                <div style="flex:1;">
                    <div style="font-weight:600; font-size:0.85rem; color:#0f172a;">Premium Sink 24x18</div>
                    <div style="font-size:0.75rem; color:#64748b;">Qty: 1</div>
                </div>
                <div style="font-weight:600; font-size:0.85rem; color:#0f172a;">₹4,850</div>
            </div>
            <div style="display:flex; gap:12px;">
                <div style="width:50px; height:50px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#cbd5e1;"><i class="fas fa-image"></i></div>
                <div style="flex:1;">
                    <div style="font-weight:600; font-size:0.85rem; color:#0f172a;">SS Faucet Premium</div>
                    <div style="font-size:0.75rem; color:#64748b;">Qty: 2</div>
                </div>
                <div style="font-weight:600; font-size:0.85rem; color:#0f172a;">₹3,900</div>
            </div>
        </div>

        <div style="display:flex; justify-content:space-between; margin-bottom:12px; color:#475569; font-size:0.95rem; border-top:1px solid #e2e8f0; padding-top:16px;">
            <span>Subtotal</span>
            <span style="font-weight:600; color:#0f172a;">₹8,750.00</span>
        </div>
        <div style="display:flex; justify-content:space-between; margin-bottom:12px; color:#475569; font-size:0.95rem;">
            <span>Shipping</span>
            <span style="font-weight:600; color:#16a34a;">Free</span>
        </div>
        <div style="display:flex; justify-content:space-between; margin-bottom:12px; color:#475569; font-size:0.95rem;">
            <span>Estimated GST (18%)</span>
            <span style="font-weight:600; color:#0f172a;">₹1,575.00</span>
        </div>

        <div style="display:flex; justify-content:space-between; margin-bottom:24px; color:#0f172a; font-size:1.2rem; font-weight:700; border-top:1px solid #e2e8f0; padding-top:16px;">
            <span>Total</span>
            <span>₹10,325.00</span>
        </div>

        <a href="success.php" style="display:block; width:100%; text-align:center; padding:14px; background:#16a34a; color:#fff; text-decoration:none; border-radius:8px; font-weight:600; font-size:1.1rem; transition:background 0.2s;">Pay ₹10,325.00</a>
        <div style="text-align:center; font-size:0.75rem; color:#64748b; margin-top:12px;">
            <i class="fas fa-lock"></i> Secure & Encrypted Payment
        </div>
    </div>
</div>

<?php 
echo '</div></main></body></html>'; 
?>
