@extends('layouts.front-layout')
@section('content')
    <style>
        body {
            background-color: white !important;

        }


        .card-consult .card-title {
            font-weight: 600;
        }

        .card-consult {
            border: none;
            box-shadow: none;
            position: relative;
            transition: box-shadow 0.3s ease;
        }

        .card-consult::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            height: 2px;
            width: 0;
            background-color: #30bfac;
            transform: translateX(-50%);
            transition: width 0.3s ease;
        }

        .card-consult:hover::before {
            width: 30%;
        }

        .card-consult:hover {
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
        }
    </style>
    <div class="container my-5">
        <h2 class="mb-4"> Add to Cart</h2>



        <div class="row" id="cart-content">
            <!-- Cart Items -->

            @if (isset($cart_data) && Cookie::get('shopping_cart'))
                @include('front.cart.cart-list')
            @else
                @include('front.cart.empty-cart-message')
            @endif

        </div>



        <section class="work-section bg-white">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Text Content -->
                    <div class="mb-4 text-center">
                        <div class="heading">How Does It Work?</div>
                        <div class="text-details text-center">
                            <p>
                                Our platform connects you with licensed healthcare professionals
                                who can provide personalized consultations and treatment
                                options.
                            </p>
                            <p>
                                Simply choose a treatment area, book a consultation, and receive
                                expert guidance tailored to your needs.
                            </p>
                        </div>
                    </div>

                    <!-- Video Content -->

                    <div class="video">
                        <video controls>
                            <source src="{{ asset('assets/Assets/How it works.mp4') }}" type="video/mp4" />
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </section>



        <div class="container my-5">
            <div class="container my-3">
                <div class="row g-4 justify-content-center">

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="card card-consult shadow-small h-100">
                            <img src="{{ asset('assets/Assets/home1.png') }}" class="card-img-top"
                                alt="Related Product 1" />
                            <div class="card-body text-center">
                                <h5 class="card-title">Online Consultation</h5>
                                <p class="card-text">Complete a free online medical consultation to check your eligibility
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="card card-consult shadow-small h-100">
                            <img style="max-height: 180px; width: auto; object-fit: contain;"
                                src="{{ asset('assets/Assets/home2.png') }}" class="card-img-top" alt="Related Product 1" />
                            <div class="card-body text-center">
                                <h5 class="card-title">Choose a Treatment</h5>
                                <p class="card-text">Select from a choice of suitable treatments from leading brands</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="card card-consult shadow-small h-100">
                            <img src="{{ asset('assets/Assets/home3.png') }}" class="card-img-top"
                                alt="Related Product 1" />
                            <div class="card-body text-center">
                                <h5 class="card-title">Express Delivery</h5>
                                <p class="card-text">Medication is dispensed and delivered to your home or work</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
@endsection