@extends('layouts.redesigned-front-layout')
@section('content')

 <div class="container py-5">

        <!-- Page Title -->
        <h2 class="fw-bold mb-4 text-center">Your Cart</h2>

        <div class="row g-4">

            <!-- LEFT SIDE CART -->
            <div class="col-lg-8">

                <!-- ITEM 1 -->
                <div class="cart-item-card mb-3">
                    <img src="{{ asset('redesigned-assets/images/nivea-after-sun-l-35594.webp') }}" alt="">
                    <div class="flex-grow-1">
                        <h5 class="mb-1">Test Product 1</h5>
                        <p class="text-muted small">2 tablets (£15 each)</p>
                        <strong>£30.00</strong>
                    </div>

                    <div class="qty-control">
                        <button>-</button>
                        <input type="text" value="2" readonly>
                        <button>+</button>
                    </div>

                    <a href="#" class="btn-remove"><i class="fa-solid fa-trash"></i></a>
                </div>

                <!-- ITEM 2 -->
                <div class="cart-item-card mb-3">
                    <img src="{{ asset('redesigned-assets/images/nivea-sun-lotion-l-35589.webp') }}" alt="">
                    <div class="flex-grow-1">
                        <h5 class="mb-1">Test Product 2</h5>
                        <p class="text-muted small">1 pack (£30 each)</p>
                        <strong>£30.00</strong>
                    </div>

                    <div class="qty-control">
                        <button>-</button>
                        <input type="text" value="1" readonly>
                        <button>+</button>
                    </div>

                    <a href="#" class="btn-remove"><i class="fa-solid fa-trash"></i></a>
                </div>

            </div>

            <!-- ORDER SUMMARY -->
            <div class="col-lg-4">
                <div class="summary-card mb-4">
                    <h4 class="fw-bold mb-3">Order Summary</h4>

                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal</span>
                        <span>£60.00</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Shipping</span>
                        <span>£4.99</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between fw-bold">
                        <span>Total</span>
                        <span>£64.99</span>
                    </div>

                    <button class="btn-checkout w-100 mt-4"><a class="text-decoration-none" href="{{ route('redesigned.checkout') }}">Proceed to Checkout</a></button>
                </div>

                <!-- PAYMENT OPTIONS -->
                <div class="summary-card">
                    <h5 class="fw-bold mb-3">Payment</h5>

                    <div class="pay-option mb-2">
                        <i class="fa-brands fa-google-pay me-2"></i> Google Pay
                    </div>

                    <div class="pay-option mb-2">
                        <i class="fa-solid fa-credit-card me-2"></i> Credit Card
                    </div>

                    <div class="pay-option">
                        <i class="fa-brands fa-paypal me-2"></i> PayPal
                    </div>
                </div>

            </div>
        </div>

        <!-- HOW IT WORKS SECTION -->
        <div class="glass-box mt-5">

            <h3 class="text-center mb-4 fw-bold">How Does It Work?</h3>

            <p class="text-center mb-4">
                Our platform connects you with licensed healthcare professionals
                who can provide personalized consultations and treatment options.
                Simply choose a treatment area, book a consultation, and receive
                expert guidance tailored to your needs.
            </p>

            <div class="video-box mb-5">
                <video controls>
                    <source src="your-video.mp4" type="video/mp4">
                </video>
            </div>

            <div class="row g-4 justify-content-center">
                <div class="col-md-4">
                    <div class="feature-card">
                        <img style="max-height: 180px; width: auto; object-fit: contain;" src="{{ asset('redesigned-assets/images/home1.png') }}" alt="Online Consultation">
                        <h5 class="fw-bold">Online Consultation</h5>
                        <p class="small">
                            Complete a free online medical consultation to check your eligibility.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card">
                        <img style="max-height: 180px; width: auto; object-fit: contain;" src="{{ asset('redesigned-assets/images/home2.png') }}" alt="Choose a Treatment">
                        <h5 class="fw-bold">Choose a Treatment</h5>
                        <p class="small">
                            Select from a choice of suitable treatments from leading brands.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card">
                        <img style="max-height: 180px; width: auto; object-fit: contain;" src="{{ asset('redesigned-assets/images/home3.png') }}" alt="Express Delivery">
                        <h5 class="fw-bold">Express Delivery</h5>
                        <p class="small">
                            Medication is dispensed and delivered to your home or work.
                        </p>
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection