@extends('layouts.user_type.guest')
@section('header_title', 'پنل کاربر')

@push('extra_css')
    <link rel="stylesheet" href="{{ url('/') }}/assets/css/style.css">
    <link rel="stylesheet" href="{{ url('/') }}/assets/css/responsive.css">
    <style>
        .user-dashboard { padding: 92px 0 56px; color: var(--text); }
        .user-dashboard__hero, .user-dashboard__panel, .user-stat { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--bg2); }
        .user-dashboard__hero { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px; margin-bottom: 18px; }
        .user-dashboard__avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(73,88,165,.55); }
        .user-dashboard__name { margin-bottom: 8px; font-size: 24px; font-weight: 900; color: #fff; }
        .user-dashboard__meta { display: flex; flex-wrap: wrap; gap: 10px; color: #9fb0cc; font-size: 13px; }
        .user-dashboard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .user-dashboard__actions a { border-radius: 8px; font-weight: 800; }
        .user-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
        .user-stat { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 18px; }
        .user-stat strong { display: block; font-size: 26px; color: #fff; }
        .user-stat span { color: #9fb0cc; font-size: 13px; }
        .user-stat i { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(73,88,165,.18); color: #fff; font-size: 18px; }
        .user-dashboard__panel { padding: 18px; height: 100%; }
        .user-dashboard__panel h2 { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 15px; }
        .user-info-table { width: 100%; color: var(--text); }
        .user-info-table th, .user-info-table td { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
        .user-info-table th { color: #9fb0cc; font-weight: 700; width: 34%; }
        .user-list { display: grid; gap: 10px; }
        .user-list__item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.035); }
        .user-list__item strong { display: block; color: #fff; line-height: 1.8; }
        .user-list__item small { color: #9fb0cc; }
        .user-empty { color: #9fb0cc; padding: 18px 0; text-align: center; }
        @media (max-width: 991px) { .user-dashboard__hero { grid-template-columns: 1fr; text-align: center; } .user-dashboard__avatar { margin: 0 auto; } .user-dashboard__meta, .user-dashboard__actions { justify-content: center; } .user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 576px) { .user-stats { grid-template-columns: 1fr; } }
    </style>
@endpush

@section('content')
    @php
        $displayName = trim(($user->fname ?? '') . ' ' . ($user->lname ?? '')) ?: 'کاربر';
        $joinedAt = $user->created_at ? \App\Helpers\xDate::jdate('j F Y', $user->created_at->timestamp) : '-';
    @endphp

    <main class="user-dashboard">
        <div class="container">
            @include('user.user_menu')

            <section class="user-dashboard__hero">
                <img class="user-dashboard__avatar" src="{{ url($user->profile->file_path) }}" alt="{{ $displayName }}">
                <div>
                    <h1 class="user-dashboard__name">{{ $displayName }}</h1>
                    <div class="user-dashboard__meta">
                        <span>شماره کاربری: {{ $user->id }}</span>
                        <span>عضویت: {{ $joinedAt }}</span>
                        <span>{{ $user->verified ? 'حساب تایید شده' : 'حساب تایید نشده' }}</span>
                    </div>
                </div>
                <div class="user-dashboard__actions">
                    <a href="{{ localized_route('user.instagram-accounts.create') }}" class="btn btn-primary">ثبت پیج اینستاگرام</a>
                    <a href="{{ localized_route('user.profile') }}" class="btn btn-outline-primary">ویرایش پروفایل</a>
                </div>
            </section>

            <section class="user-stats">
                <div class="user-stat">
                    <div><strong>{{ $dashboard['instagram_account_count'] }}</strong><span>اکانت اینستاگرام</span></div>
                    <i class="fab fa-instagram"></i>
                </div>
                <div class="user-stat">
                    <div><strong>{{ $dashboard['ticket_count'] }}</strong><span>تیکت‌ها</span></div>
                    <i class="far fa-life-ring"></i>
                </div>
                <div class="user-stat">
                    <div><strong>{{ $dashboard['friend_count'] }}</strong><span>دوستان</span></div>
                    <i class="far fa-user-friends"></i>
                </div>
                <div class="user-stat">
                    <div><strong>{{ $dashboard['active_live_room_count'] }}</strong><span>لایو فعال</span></div>
                    <i class="far fa-video"></i>
                </div>
            </section>

            <div class="row">
                <div class="col-lg-6 mb-4">
                    <section class="user-dashboard__panel">
                        <h2>آخرین اکانت‌های اینستاگرام</h2>
                        @if($dashboard['recent_instagram_accounts']->count())
                            <div class="user-list">
                                @foreach($dashboard['recent_instagram_accounts'] as $account)
                                    <a class="user-list__item" href="{{ localized_route('user.instagram-accounts.edit', $account) }}">
                                        <div>
                                            <strong dir="ltr">{{ $account->handle }}</strong>
                                            <small>{{ $account->business_name ?: 'بدون نام فروشگاه' }}</small>
                                        </div>
                                        <small>{{ $account->status_label }}</small>
                                    </a>
                                @endforeach
                            </div>
                        @else
                            <div class="user-empty">هنوز پیجی ثبت نکرده‌اید.</div>
                        @endif
                    </section>
                </div>
                <div class="col-lg-6 mb-4">
                    <section class="user-dashboard__panel">
                        <h2>اطلاعات حساب</h2>
                        <table class="user-info-table">
                            <tr><th>نام</th><td>{{ $displayName }}</td></tr>
                            <tr><th>موبایل</th><td>{{ $user->tel ?: '-' }}</td></tr>
                            <tr><th>ایمیل</th><td>{{ $user->email ?: '-' }}</td></tr>
                            <tr><th>تیکت باز</th><td>{{ $dashboard['open_ticket_count'] }}</td></tr>
                        </table>
                    </section>
                </div>
            </div>
        </div>
    </main>
@endsection