@extends('layouts2')
@section('title')
<title>My Account</title>
@endsection


@section('user-content') 

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        .header {
            background-color: #f8f9fa;
            padding: 10px;
            text-align: right;
            font-weight: bold;
        }
        .nav-tabs {
            border-bottom: 1px solid #dee2e6;
        }
        .nav-tabs .nav-link {
            color: #007bff;
            border: 1px solid #dee2e6;
            border-radius: 0;
            margin-right: -1px;
        }
        .nav-tabs .nav-link.active {
            background-color: #fff;
            color: #000;
            border-bottom: 1px solid #fff;
        }
        .tab-content {
            padding: 15px;
        }
        
        img.rounded-circle.me-3
         {
            height: 5vh;
        }
        
        span.buyer {
            background: #2196F3;
            padding: 5px 0 0 0;
            height: 40px;
            border-radius: 55px;
            width: 40px;
            text-align: center;
            font-size: 20px;
            color: #FFFF;
            font-weight: bold;
            margin: 0 10px 0px 0px;
        }
        
         span.seller {
            background:green;
            padding: 5px 0 0 0;
            height: 40px;
            border-radius: 55px;
            width: 40px;
            text-align: center;
            font-size: 20px;
            color: #FFFF;
            font-weight: bold;
            margin: 0 10px 0px 0px;
        }

        .flex-grow-1 {
             
            padding-top: 5px;
        }
    </style>
    
    <!-- Profile Summary Card -->
    <div class="card text-center shadow-sm mb-4 border-0" style="max-width: 400px; margin: 0 auto;">
        <div class="card-body">
            <!-- Avatar -->
            <div class="d-flex justify-content-center mb-2">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 70px; height: 70px; font-size: 24px; font-weight: bold;">
                    {{ strtoupper(substr(Auth::user()->name, 0, 2)) }}
                </div>
            </div>
    
            <h6 class="fw-bold mb-2">{{ Auth::user()->name }}</h6>
            <a href="/user/my-profile" class="btn btn-primary btn-sm mb-3 w-100">View and Edit Profile</a>
            <br>
            
            <small class="text-muted">3 steps left</small>
            <div class="progress mb-2" style="height: 6px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 40%;"></div>
            </div>
            <small class="text-muted d-block mb-3" style="font-size: 12px;">We are built on trust. Help one another to get to know each other better.</small>
            <div class="list-group list-group-flush">
                <a href="/user/my-properties" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-box-seam me-2 text-dark"></i> My Products
                </a>
                <a href="/user/my-order" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-clipboard-check me-2 text-dark"></i> My Orders
                </a>
                <a href="/user/pricing-plan" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-gear me-2 text-dark"></i> Buy Packages
                </a>
                <a href="/user/my-wishlist" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-heart me-2 text-danger"></i> Wishlist
                </a>
                <a href="/faq" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-question-circle me-2 text-dark"></i> FAQ
                </a>
                <a href="/my-support" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-headset me-2 text-dark"></i> Support
                </a>
                <a href="/logout" class="list-group-item list-group-item-action d-flex align-items-center">
                    <i class="bi bi-box-arrow-right me-2 text-dark"></i> Logout
                </a>
            </div>
        </div>
    </div>

    
    <script>
        function letsGo(){
            window.location.href="{{url('properties?page_type=list_view')}}";
        }
    </script>
@endsection