@extends('layouts.UserDashboard')
@section('user')
    <!-- Profile Card -->
    <div class="card shadow-lg border-0 mb-5 rounded-4 profile-card">
        <div class="card-body d-flex align-items-center p-4">
            @if (!empty(Auth::user()->user_profile->profile_image) && file_exists(Auth::user()->user_profile->profile_image))
                <img src="{{ asset(Auth::user()->user_profile->profile_image) }}"
                    class="rounded-circle me-4 border border-3 border-light shadow-sm profile-avatar" alt="User Avatar">
            @else
                <img src="https://img.freepik.com/free-vector/blue-circle-with-white-user_78370-4707.jpg"
                    class="rounded-circle me-4 border border-3 border-light shadow-sm profile-avatar" alt="User Avatar">
            @endif

            <div class="flex-grow-1">
                <h4 class="fw-semibold mb-1 text-dark">{{ Auth::user()->name }}</h4>
                <p class="text-muted small mb-2">User ID: <strong>#{{ Auth::user()->user_id }}</strong></p>
                <div class="d-flex flex-wrap gap-2">
                    <span class="badge rounded-pill bg-gradient-primary text-black px-3 py-2 shadow-sm">
                        <i class="bi bi-person-badge-fill"></i> {{ ucfirst($roles[0]) ?? '' }}
                    </span>
                    {{-- @if ($check_agent)
                        <span class="badge rounded-pill bg-gradient-success text-black px-3 py-2 shadow-sm">
                            <i class="bi bi-shield-lock-fill"></i> Agent: {{ $check_agent->agent->user_id ?? '' }}
                        </span>
                    @endif --}}

                    @if ($add_member)
                        <span class="badge rounded-pill bg-gradient-success text-black px-3 py-2 shadow-sm">
                            <i class="bi bi-shield-lock-fill"></i> {{ ucfirst($add_member->added_by_role) ?? '' }}:
                            {{ $add_member->added_by_user->user_id ?? '' }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Helper function -->
    @php
        if (!function_exists('dashboardCard')) {
            function dashboardCard($icon, $color, $title, $link = null)
            {
                $card = '<div class="col-4 col-sm-4 col-md-4 col-lg-3">';
                $card .= '<div class="crypto-card text-center p-3 rounded-4 border-0 h-100 hover-card">';
                // Only icon has colored background
                $card .=
                    '<div class="avatar-sm rounded-circle text-white mx-auto mb-2 d-flex align-items-center justify-content-center shadow-sm icon-circle bg-' .
                    $color .
                    '">';
                $card .= '<i class="bi ' . $icon . ' fs-5 icon-style"></i></div>';
                $card .= '<h6 class="fw-semibold text-dark mb-0 fs-13">';
                if ($link) {
                    $card .=
                        '<a href="' .
                        $link .
                        '" class="stretched-link text-dark text-decoration-none">' .
                        $title .
                        '</a>';
                } else {
                    $card .= $title;
                }
                $card .= '</h6></div></div>';
                return $card;
            }
        }
    @endphp

    <!-- Sections -->
    <div class="card shadow-lg border-0 mb-5 rounded-4 section-card" style="margin-top: -30px;">
        <div class="card-body p-0"> <!-- removed padding -->
            <div class="row g-0"> <!-- no gutter spacing -->
                {!! dashboardCard('bi-cash-coin', 'warning', 'Income', route('user.income')) !!}
                {!! dashboardCard('bi-broadcast', 'primary', 'Broadcast Data') !!}
                {!! dashboardCard('bi-bank', 'info', 'Bank Account', route('user.bank.account')) !!}
            </div>
        </div>
    </div>

    <!-- Team Management -->
    <div class="card shadow-lg border-0 mb-5 rounded-4 section-card" style="margin-top: -30px;">
        <div class="card-body p-0">
            <div class="row g-0">
                @if (Auth::user()->hasRole('agency'))
                    {!! dashboardCard('bi-journal-text', 'success', 'Request Record', route('user.request.record')) !!}
                @endif
                {!! dashboardCard('bi-person-plus-fill', 'success', 'Invite Member', route('user.invite.memeber')) !!}

                 @if ((Auth::user()->hasRole('superadmin')) || (Auth::user()->hasRole('directseller') || Auth::user()->hasRole('coinseller')))
                    {!! dashboardCard(
                        'bi-cash-stack',
                        'warning',
                        'Buy Coin',
                        route('user.request.coin'),
                    ) !!}
                @endif

                @if ((Auth::user()->hasRole('superadmin')) || (Auth::user()->hasRole('directseller')))
                    {!! dashboardCard(
                        'bi-cash-coin',
                        'success',
                        'Sell Coin',
                        route('user.requested.coin.list'),
                    ) !!}
                @endif

                @if ((Auth::user()->hasRole('superadmin')) || (Auth::user()->hasRole('directseller') || Auth::user()->hasRole('coinseller')))
                    {!! dashboardCard(
                        'bi-cash-coin',
                        'success',
                        'Recharge Coin',
                        route('user.send.wallet.coin.view'),
                    ) !!}
                @endif

                @if (Auth::user()->hasRole('superadmin'))
                    {!! dashboardCard('bi-journal-text', 'success', 'Sub Admin', route('user.subadmin.members')) !!}
                @endif

                @if (Auth::user()->hasRole('subadmin') || Auth::user()->hasRole('superadmin'))
                    {!! dashboardCard('bi-people-fill', 'primary', 'BD Members', route('user.bd.members')) !!}
                @endif

                @if (Auth::user()->hasRole('subadmin') || Auth::user()->hasRole('bd') || Auth::user()->hasRole('superadmin'))
                    {!! dashboardCard('bi-building', 'primary', 'Agency Members', route('user.agency.members')) !!}
                @endif

                @if (Auth::user()->hasRole('superadmin'))
                    {!! dashboardCard('bi-journal-text', 'success', 'Direct Seller', route('user.directseller.members')) !!}
                @endif

                @if (Auth::user()->hasRole('superadmin'))
                    {!! dashboardCard('bi-journal-text', 'success', 'Send Gift', route('user.gift.send')) !!}
                @endif

                @if (Auth::user()->hasRole('directseller'))
                    {!! dashboardCard('bi-cart-check', 'primary', 'Coin Seller Members', route('user.sub.seller.members')) !!}
                @endif

                @if (Auth::user()->hasRole('agency'))
                    {!! dashboardCard('bi-hdd-network', 'danger', 'Host Members', route('user.host.members')) !!}
                @endif

                {{-- ✅ New Menu Items --}}
                @if (Auth::user()->hasRole('directseller'))
                    {!! dashboardCard(
                        'bi-cash-stack',
                        'warning',
                        'Send Seller Coin to Coin-Seller',
                        route('user.send.coin.user', ['send_to' => 'coinseller']),
                    ) !!}
                @endif

                @if (Auth::user()->hasRole('directseller') || Auth::user()->hasRole('coinseller'))
                    {!! dashboardCard(
                        'bi-currency-exchange',
                        'danger',
                        'Send Seller Coin to User',
                        route('user.send.coin.user', ['send_to' => 'user']),
                    ) !!}
                @endif
                @if (!Auth::user()->hasRole('agency'))
                    {!! dashboardCard('bi-diagram-3-fill', 'pink', 'Team Members', route('user.team.members')) !!}
                @endif
                {!! dashboardCard('bi-file-text-fill', 'info', 'Platform Policy', route('user.platform.policy')) !!}
                {!! dashboardCard('bi-gear-fill', 'secondary', 'Setting', route('user.setting')) !!}
                {!! dashboardCard('bi-shield-check', 'warning', 'KYC', route('user.kyc')) !!}
            </div>
        </div>
    </div>

    <!-- Account Settings -->

    <style>
        .hover-card {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .hover-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
        }

        .profile-card {
            background: linear-gradient(135deg, #f8f9fa, #ffffff);
        }

        .section-card {
            background: linear-gradient(135deg, #ffffff, #f8f9fa);
        }

        .section-title {
            font-size: 1.3rem;
            border-left: 5px solid #ddd;
            padding-left: 12px;
        }

        .icon-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-avatar {
            width: 90px;
            height: 90px;
            object-fit: cover;
        }

        .crypto-card h6 {
            font-size: 0.85rem;
        }

        .icon-style {
            transition: all 0.3s ease;
        }

        .icon-style:hover {
            transform: scale(1.2);
            color: #fff;
        }

        /* Mobile: 3 cards per row */
        @media (max-width: 576px) {
            .col-4 {
                flex: 0 0 33.3333%;
                max-width: 33.3333%;
            }
        }
    </style>
@endsection