@extends('layouts.user-dashboard-layout')
@section('user-dashboard-content')
    <style>
        .link-cards a {
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #888;
        }


        .link-cards .card {
            height: auto; 
            width: 150px;
            color: #888;
            padding: 15px 10px;
        }

        .link-cards .card span {
            font-size: 22px;
        }

        .link-cards .card i {
            font-size: 18px;
        }

        .promotion img {
            max-width: 100%;
            height: 200px;
        }

        .promotion {
            position: relative;
            margin-top: 50px;
        }

        .float {
            position: absolute;
            top: -20px;
            background-color: #30bfac;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
        }

        .article-card {
            min-width: 260px !important;
        }

        .article-card img {
            height: 150px;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            .link-cards .card {
                width: 200px;
                padding: 10px 5px;
                height: 100px;
            }

            .promotion {
                flex-direction: column !important;
                align-items: center;
            }
        }
    </style>
    <div class="container">
        <div class="container ">
            <h2 class="fs-4 text-center py-4 fw-bold mt-3 mb-5">Good Everning, Dr. Alex</h2>
            <div class="row justify-content-center gap-4">
                <div class="col-md-3 link-cards">
                    <a href="#">
                        <span class="text-dark">Promotions</span>
                        <div class="card d-flex align-items-center justify-content-center flex-row gap-2 shadow-small">
                            <span>2</span><i class="fa-solid fa-tag"></i>
                        </div>
                        <span class="font12">See all Promotions</span>
                    </a>
                </div>
                <div class="col-md-3 link-cards">
                    <a href="#">
                        <span class="text-dark">Referral Discounts</span>
                        <div class="card d-flex align-items-center justify-content-center flex-row gap-2 shadow-small">
                            <span>0</span><i class="fa-solid fa-users"></i>
                        </div>
                        <span class="font12">See all Coupons</span>
                    </a>
                </div>
                <div class="col-md-3 link-cards">
                    <a href="#">
                        <span class="text-dark">Loyalty Points</span>
                        <div class="card d-flex align-items-center justify-content-center flex-row gap-2 shadow-small">
                            <span>0</span><i class="fa-regular fa-gem"></i>
                        </div>
                        <span class="font12">Want more points?</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="container my-3">
            <div class="container d-flex justify-content-between align-items-center mt-5 mb-3">
                <div class="fs-5"><i class="fa-solid fa-clock-rotate-left"></i> &nbsp;Latest Orders</div>
                <a class="blue text-decoration-none" href="#">View All<i class="fa-solid fa-chevron-right"></i></a>
            </div>
            <hr>
            <div class="container text-center fs-5 colorGrey">No orders have been placed yet.</div>
        </div>
        <div class="container my-5">
            <div class="container d-flex justify-content-between align-items-center mt-5 mb-3">
                <div class="fs-5"><i class="fa-solid fa-tag"></i> &nbsp;Latest Promotion</div>
                <a class="blue text-decoration-none" href="#">View All<i class="fa-solid fa-chevron-right"></i></a>
            </div>
            <hr>
            <div class="card shadow-small text-center promotion d-flex justify-content-between flex-row p-3">
                <div class="container mx-4">
                    <p class="float">Refer to a Friend</p>
                    <h2>Abc, Get 10% OFF for You and Your Friends!</h2>
                    <p>You can now earn rewards by referring your friends and family to Pharmica! Each person you refer will
                        get a 10% discount to use on their first order - and when their order is dispatched, you’ll get 10%
                        OFF your next order too!</p>
                    <p>Simply click below to get started.</p>
                    <button class="btn background-blue text-white mb-4">Start Earning <i
                            class="fa-solid fa-chevron-right"></i></button>
                </div>
                <img src="{{ asset('assets/Assets/promotion.png') }}" alt="">
            </div>
        </div>
        <div class="container my-3">
            <div class="container d-flex justify-content-between align-items-center mt-5 mb-3">
                <div class="fs-5"><i class="fa-solid fa-book-open"></i> &nbsp; Popular Articles</div>
                <a class="blue text-decoration-none" href="#">View All<i class="fa-solid fa-chevron-right"></i></a>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-4">
                    <div class="card shadow-sm article-card">
                        <img src="{{ asset('assets/Assets/hair-loss.jpg') }}" alt="">
                        <div class="card-body">
                            <h5>Hey fever: causes, symptoms...</h5>
                            <p class="font12">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, natus.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow-sm article-card">
                        <img src="{{ asset('assets/Assets/hair-loss.jpg') }}" alt="">
                        <div class="card-body">
                            <h5>Hey fever: causes, symptoms...</h5>
                            <p class="font12">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, natus.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow-sm article-card">
                        <img src="{{ asset('assets/Assets/hair-loss.jpg') }}" alt="">
                        <div class="card-body">
                            <h5>Hey fever: causes, symptoms...</h5>
                            <p class="font12">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, natus.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection