@extends('frontend.layouts.app')

@section('title', 'Cart Page')
@section('content')
   <main class="container cart-page">
        <h2 class="section-title" style="margin-top: 0;">Your Shopping Cart</h2>
        <div class="cart-container">
            <div class="cart-items">
                <div class="cart-item">
                    <img src="https://via.placeholder.com/150/2c3e50/fff?text=Product+1" alt="Product 1">
                    <div class="item-info">
                        <h4>Men's Casual Shirt</h4>
                        <p>Size: M, Color: Blue</p>
                        <p class="item-price">₹1,599</p>
                    </div>
                    <div class="quantity-control">
                        <button>-</button>
                        <span>1</span>
                        <button>+</button>
                    </div>
                </div>
                <div class="cart-item">
                    <img src="https://via.placeholder.com/150/e74c3c/fff?text=Product+2" alt="Product 2">
                    <div class="item-info">
                        <h4>Wireless Headphones</h4>
                        <p>Color: Red</p>
                        <p class="item-price">₹2,499</p>
                    </div>
                    <div class="quantity-control">
                        <button>-</button>
                        <span>1</span>
                        <button>+</button>
                    </div>
                </div>
            </div>
            <div class="cart-summary">
                <h3>Order Summary</h3>
                <div class="summary-row">
                    <span>Subtotal:</span>
                    <span>₹4,098</span>
                </div>
                <div class="summary-row">
                    <span>Shipping:</span>
                    <span>₹50</span>
                </div>
                <div class="summary-row">
                    <span>Taxes:</span>
                    <span>₹200</span>
                </div>
                <div class="summary-total summary-row">
                    <span>Total:</span>
                    <span>₹4,348</span>
                </div>
                <a href="{{ route('checkout') }}" class="btn">Proceed to Checkout</a>
            </div>
        </div>
    </main>
  @endsection