@extends('ecommerce::frontend.layout.main2')

@section('title') {{ $ecommerce_setting->site_title ?? 'Dashboard' }} @endsection

@section('description') {{ $ecommerce_setting->site_description ?? '' }} @endsection

@section('content')
<style>
    /* Custom styles to match the Reference Image exactly */
    .dashboard-card {
        background: #ffffff;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        padding: 30px 20px;
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .dashboard-card:hover {
        border-color: #c8102e;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transform: translateY(-5px);
    }
    .dashboard-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        color: #c8102e;
        font-size: 24px;
        transition: all 0.3s ease;
    }
    .dashboard-card:hover .dashboard-icon {
        background: #c8102e;
        color: #ffffff;
    }
    .dashboard-card h3 {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 600;
        color: #222;
    }
    .dashboard-card p {
        font-size: 14px;
        color: #777;
        margin: 0;
    }
    .sidebar-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sidebar-menu-list li {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .sidebar-menu-list li:last-child {
        border-bottom: none;
    }
    .sidebar-menu-list a {
        color: #555;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: color 0.3s;
    }
    .sidebar-menu-list a:hover, .sidebar-menu-list a.active {
        color: #c8102e;
        padding-left: 5px;
    }
</style>

<!-- Breadcrumb Area -->
<div style="padding-top:50px;" class="tf-page-title flat-spacing pb-0">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="text-start">
                    <h1 class="text-display fw-medium">{{trans('file.dashboard')}}</h1>
                    <ul class="breadcrumb-list d-flex align-items-center">
                        <li><a href="{{url('/')}}" class="link">{{trans('file.Home')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li class="active text-main fw-medium">{{trans('file.dashboard')}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Dashboard Content -->
<section style="padding-top:50px;" class="flat-spacing">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar -->
            <div class="col-lg-3 col-md-4 mb-md-0 mb-4">
                <div class="sidebar-wrapper">
                    <div class="widget-account-nav">
                        <h3 class="widget-title h5 fw-bold text-uppercase mb-4 pb-2 border-bottom">{{trans('Menu')}}</h3>
                        @include('ecommerce::frontend.customer-menu')
                    </div>
                </div>
            </div>

            <!-- Dashboard Content -->
            <div class="col-lg-9 col-md-8">
                <div class="account-dashboard">
                    
                    <!-- Welcome Header (Matches Reference) -->
                    <div class="welcome-header mb-5">
                        <h2 class="text-display fw-bold mb-2">Hello, <span class="text-primary">{{ auth()->user()->name }}</span></h2>
                        <p style="color:black !important;" class="text-secondary h6">From your account dashboard you can manage your orders, addresses, and account details.</p>
                    </div>

                    <!-- Dashboard Grid (Matches Reference Image Layout) -->
                    <div class="row g-4">
                        
                        <!-- My Orders -->
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <a href="{{ url('customer/orders') }}" class="dashboard-card text-decoration-none">
                                <div class="dashboard-icon">
                                    <i class="icon icon-package"></i>
                                </div>
                                <h3>{{trans('file.My Orders')}}</h3>
                                <p>Check your order status and history</p>
                            </a>
                        </div>

                        <!-- My Addresses -->
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <a href="{{ url('customer/address') }}" class="dashboard-card text-decoration-none">
                                <div class="dashboard-icon">
                                    <i class="icon icon-map-pin"></i> <!-- Fallback icon if map-pin not in your set -->
                                </div>
                                <h3>{{trans('file.My Addresses')}}</h3>
                                <p>Manage your shipping addresses</p>
                            </a>
                        </div>

                        <!-- My Wishlist -->
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <a href="{{ url('customer/wishlist') }}" class="dashboard-card text-decoration-none">
                                <div class="dashboard-icon">
                                    <i class="icon icon-heart"></i>
                                </div>
                                <h3>{{trans('file.My Wishlist')}}</h3>
                                <p>View your favorite products</p>
                            </a>
                        </div>

                        <!-- Account Details -->
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <a href="{{ url('customer/account-details') }}" class="dashboard-card text-decoration-none">
                                <div class="dashboard-icon">
                                    <i class="icon icon-user"></i>
                                </div>
                                <h3>{{trans('file.Account Details')}}</h3>
                                <p>Edit your password and profile info</p>
                            </a>
                        </div>

                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</section>
@endsection