@extends('frontend.layouts.app')

@section('title', 'Cart Page')
@section('content')
  <main class="container checkout-page">
        <h2 class="section-title" style="margin-top: 0;">Checkout</h2>
        <div class="checkout-container">
            <div class="checkout-form">
                <h3>Shipping Information</h3>
                <form>
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" id="address" name="address" required>
                    </div>
                    <div class="form-group">
                        <label for="city">City</label>
                        <input type="text" id="city" name="city" required>
                    </div>
                    <div class="form-group">
                        <label for="state">State</label>
                        <input type="text" id="state" name="state" required>
                    </div>
                    <div class="form-group">
                        <label for="zip">Zip Code</label>
                        <input type="text" id="zip" name="zip" required>
                    </div>
                </form>
                
                <h3 style="margin-top: 40px;">Payment Information</h3>
                <form>
                    <div class="form-group">
                        <label for="card">Card Number</label>
                        <input type="text" id="card" name="card" required>
                    </div>
                    <div class="form-group">
                        <label for="exp">Expiration Date</label>
                        <input type="text" id="exp" name="exp" placeholder="MM/YY" required>
                    </div>
                    <div class="form-group">
                        <label for="cvv">CVV</label>
                        <input type="text" id="cvv" name="cvv" required>
                    </div>
                    <button type="submit" class="btn">Place Order</button>
                </form>
            </div>
            <div class="order-summary-checkout">
                <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>
            </div>
        </div>
    </main>
  @endsection