<?php
$page_title = 'Shopping Cart';
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="products.php" style="color:#2563eb; text-decoration:none;">Products</a> / 
    <span style="color:#0f172a;">Shopping Cart</span>
</div>

<h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0 0 24px;">Shopping Cart (2 Items)</h2>

<div style="display:grid; grid-template-columns: 2fr 1fr; gap:24px;">
    <!-- Cart Items -->
    <div class="card" style="padding:0;">
        <table style="width:100%; border-collapse:collapse; text-align:left;">
            <thead style="background:#f8fafc; border-bottom:1px solid #e2e8f0;">
                <tr>
                    <th style="padding:16px 20px; font-size:0.85rem; color:#64748b; font-weight:600;">Product Details</th>
                    <th style="padding:16px 20px; font-size:0.85rem; color:#64748b; font-weight:600;">Quantity</th>
                    <th style="padding:16px 20px; font-size:0.85rem; color:#64748b; font-weight:600;">Price</th>
                    <th style="padding:16px 20px; font-size:0.85rem; color:#64748b; font-weight:600;">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr style="border-bottom:1px solid #f1f5f9;">
                    <td style="padding:20px;">
                        <div style="display:flex; gap:16px; align-items:center;">
                            <div style="width:80px; height:80px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:2rem;"><i class="fas fa-image"></i></div>
                            <div>
                                <h4 style="margin:0 0 4px; font-size:1rem; color:#0f172a;">Premium Sink 24x18</h4>
                                <div style="font-size:0.8rem; color:#64748b;">SS 304 | Matte Finish</div>
                                <button style="margin-top:8px; background:none; border:none; color:#ef4444; font-size:0.8rem; cursor:pointer; padding:0; display:flex; align-items:center; gap:4px;"><i class="fas fa-trash-alt"></i> Remove</button>
                            </div>
                        </div>
                    </td>
                    <td style="padding:20px;">
                        <div style="display:flex; border:1px solid #cbd5e1; border-radius:6px; width:fit-content; overflow:hidden;">
                            <button style="width:30px; height:30px; background:#f8fafc; border:none; cursor:pointer; color:#475569;">-</button>
                            <input type="text" value="1" style="width:40px; height:30px; text-align:center; border:none; border-left:1px solid #cbd5e1; border-right:1px solid #cbd5e1; font-weight:600; outline:none;">
                            <button style="width:30px; height:30px; background:#f8fafc; border:none; cursor:pointer; color:#475569;">+</button>
                        </div>
                    </td>
                    <td style="padding:20px; font-weight:600; color:#0f172a;">₹4,850.00</td>
                    <td style="padding:20px; font-weight:700; color:#2563eb;">₹4,850.00</td>
                </tr>
                <tr>
                    <td style="padding:20px;">
                        <div style="display:flex; gap:16px; align-items:center;">
                            <div style="width:80px; height:80px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:2rem;"><i class="fas fa-image"></i></div>
                            <div>
                                <h4 style="margin:0 0 4px; font-size:1rem; color:#0f172a;">SS Faucet Premium</h4>
                                <div style="font-size:0.8rem; color:#64748b;">304 Grade | Glossy</div>
                                <button style="margin-top:8px; background:none; border:none; color:#ef4444; font-size:0.8rem; cursor:pointer; padding:0; display:flex; align-items:center; gap:4px;"><i class="fas fa-trash-alt"></i> Remove</button>
                            </div>
                        </div>
                    </td>
                    <td style="padding:20px;">
                        <div style="display:flex; border:1px solid #cbd5e1; border-radius:6px; width:fit-content; overflow:hidden;">
                            <button style="width:30px; height:30px; background:#f8fafc; border:none; cursor:pointer; color:#475569;">-</button>
                            <input type="text" value="2" style="width:40px; height:30px; text-align:center; border:none; border-left:1px solid #cbd5e1; border-right:1px solid #cbd5e1; font-weight:600; outline:none;">
                            <button style="width:30px; height:30px; background:#f8fafc; border:none; cursor:pointer; color:#475569;">+</button>
                        </div>
                    </td>
                    <td style="padding:20px; font-weight:600; color:#0f172a;">₹1,950.00</td>
                    <td style="padding:20px; font-weight:700; color:#2563eb;">₹3,900.00</td>
                </tr>
            </tbody>
        </table>
        <div style="padding:20px; border-top:1px solid #e2e8f0; display:flex; justify-content:space-between; align-items:center;">
            <a href="products.php" style="color:#2563eb; text-decoration:none; font-weight:500; display:flex; align-items:center; gap:8px;"><i class="fas fa-arrow-left"></i> Continue Shopping</a>
            <button style="background:#fff; border:1px solid #cbd5e1; padding:8px 16px; border-radius:6px; color:#475569; font-weight:600; cursor:pointer;"><i class="fas fa-sync-alt" style="margin-right:6px;"></i> Update Cart</button>
        </div>
    </div>

    <!-- Order Summary -->
    <div class="card" style="padding:24px; align-self:start;">
        <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="display:flex; margin-bottom:20px;">
            <input type="text" placeholder="Coupon Code" style="flex:1; padding:10px 14px; border:1px solid #cbd5e1; border-radius:6px 0 0 6px; outline:none; font-size:0.9rem;">
            <button style="background:#0f172a; color:#fff; border:none; padding:0 16px; border-radius:0 6px 6px 0; font-weight:600; cursor:pointer;">Apply</button>
        </div>

        <div style="display:flex; justify-content:space-between; margin-bottom:12px; color:#475569; font-size:0.95rem;">
            <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:20px; color:#475569; font-size:0.95rem;">
            <span>Discount</span>
            <span style="font-weight:600; color:#ef4444;">-₹0.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="checkout.php" style="display:block; width:100%; text-align:center; padding:14px; background:#2563eb; color:#fff; text-decoration:none; border-radius:8px; font-weight:600; font-size:1.1rem; transition:background 0.2s;">Proceed to Checkout</a>
        
        <div style="margin-top:16px; display:flex; justify-content:center; gap:12px; color:#cbd5e1; font-size:1.5rem;">
            <i class="fab fa-cc-visa"></i>
            <i class="fab fa-cc-mastercard"></i>
            <i class="fas fa-credit-card"></i>
            <i class="fab fa-google-pay"></i>
        </div>
    </div>
</div>

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