@extends('layouts.front')

@section('title', $user->name . ' — ' . getSiteName())

@section('content')
<section class="page-section active" id="page-profile">
<div class="profile-head">
  <div class="container" style="display:flex; gap:26px; align-items:center; flex-wrap:wrap;">
    <div class="ph p-avatar">
      <img src="{{ $user->getImage() }}" alt="{{ $user->name }}" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;">
    </div>
    <div class="p-info">
      <h1 style="font-size:24px;">{{ $user->name }}</h1>
      <div class="role">{{ __('front.profile.learner_since', ['date' => $joinedAt]) }}</div>
    </div>
  </div>
</div>

<div class="container dash-grid">
  <div>
    <div class="card panel">
      <h3>{{ __('front.profile.continue_learning') }}</h3>
      @forelse($enrolledCourses as $course)
        <a href="{{ route('front.courses.show', $course) }}" class="course-progress">
          <div class="ph cp-thumb">
            @if($course->getImage())
              <img src="{{ $course->getImage() }}" alt="{{ $course->title }}" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;">
            @else
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2.5" y="4.5" width="19" height="15" rx="3"/><path d="M10.3 9.1v5.8a.6.6 0 0 0 .9.53l4.9-2.9a.6.6 0 0 0 0-1.04l-4.9-2.9a.6.6 0 0 0-.9.51Z" fill="currentColor" stroke="none"/></svg>
            @endif
          </div>
          <div class="cp-info">
            <b>{{ $course->title }}</b>
            <div class="bar"><i style="width:{{ $course->progress_percent }}%;"></i></div>
          </div>
          <span class="cp-pct">
            @if($course->progress_percent >= 100)
              {{ __('front.profile.course_completed') }}
            @elseif($course->progress_percent > 0)
              {{ __('front.profile.percent_complete', ['percent' => $course->progress_percent]) }}
            @else
              {{ __('front.profile.not_started') }}
            @endif
          </span>
        </a>
      @empty
        <p class="muted">{{ __('front.profile.no_enrolled') }}</p>
        <a href="{{ route('front.courses.index') }}" class="btn btn-ghost btn-sm" style="margin-top:10px;">{{ __('front.profile.browse_courses') }}</a>
      @endforelse
    </div>

    <div class="card panel" id="profile-points">
      <h3>{{ __('front.profile.points_history') }}</h3>
      @forelse($pointTransactions as $tx)
        <div class="history-row">
          <span>
            {{ __('front.profile.points_' . $tx->reason) }}@if($tx->source?->title) — {{ $tx->source->title }}@endif
            <span class="muted" style="font-size:11px;">· {{ $tx->created_at->translatedFormat('M j, Y · g:i A') }}</span>
          </span>
          <span class="pts">+{{ number_format($tx->points) }}</span>
        </div>
      @empty
        <p class="muted">{{ __('front.profile.no_activity') }}</p>
      @endforelse

      @if($pointTransactions->hasPages())
        <div class="pager">
          @if($pointTransactions->onFirstPage())
            <span class="disabled">‹</span>
          @else
            <a href="{{ $pointTransactions->previousPageUrl() }}#profile-points">‹</a>
          @endif

          @foreach(range(1, $pointTransactions->lastPage()) as $page)
            <a href="{{ $pointTransactions->url($page) }}#profile-points" class="{{ $page == $pointTransactions->currentPage() ? 'active' : '' }}">{{ $page }}</a>
          @endforeach

          @if($pointTransactions->hasMorePages())
            <a href="{{ $pointTransactions->nextPageUrl() }}#profile-points">›</a>
          @else
            <span class="disabled">›</span>
          @endif
        </div>
      @endif
    </div>
  </div>

  <div>
    <div class="card xp-hero">
      <span class="eyebrow" style="justify-content:center;">{{ __('front.profile.your_points') }}</span>
      <div class="big">{{ number_format($points) }}</div>
      <div class="xp-bar-wrap">
        <div class="xp-bar"><i style="width:{{ min(100, round($points / 3000 * 100)) }}%;"></i></div>
      </div>
    </div>

    @foreach($activeSubscriptions as $sub)
      <div class="card panel sub-status-card">
        <div class="sub-status-head">
          <h3 style="margin-bottom:0;">{{ __('front.profile.subscription_title') }}</h3>
          <span class="sub-status-pill active">{{ __('front.profile.subscription_active') }}</span>
        </div>
        <div class="sub-status-plan">{{ __('front.subscriptions.' . $sub->plan) }}</div>
        <div class="sub-status-date">
          {{ __('front.profile.subscription_expires_on', ['date' => $sub->expires_at->translatedFormat('M j, Y')]) }}
        </div>
        <a href="{{ route('front.subscriptions.index') }}" class="btn btn-ghost btn-sm btn-block" style="margin-top:14px;">
          {{ __('front.profile.subscription_renew') }}
        </a>
      </div>
    @endforeach

    @if($latestExpiredSubscription)
      <div class="card panel sub-status-card">
        <div class="sub-status-head">
          <h3 style="margin-bottom:0;">{{ __('front.profile.subscription_title') }}</h3>
          <span class="sub-status-pill expired">{{ __('front.profile.subscription_expired') }}</span>
        </div>
        <div class="sub-status-plan">{{ __('front.subscriptions.' . $latestExpiredSubscription->plan) }}</div>
        <div class="sub-status-date">
          {{ __('front.profile.subscription_expired_on', ['date' => $latestExpiredSubscription->expires_at->translatedFormat('M j, Y')]) }}
        </div>
        <a href="{{ route('front.subscriptions.index') }}" class="btn btn-primary btn-sm btn-block" style="margin-top:14px;">
          {{ __('front.profile.subscription_renew_now') }}
        </a>
      </div>
    @endif
  </div>

  <div class="card panel" id="profile-exams" style="grid-column:1 / -1;">
    <h3>{{ __('front.profile.exams_title') }}</h3>
    @forelse($examResults as $result)
      <div class="history-row">
        <div>
          <b style="display:block;">{{ $result->exam->title }}</b>
          <span class="muted" style="font-size:12px;">{{ $result->exam->course->title ?? '' }} · {{ $result->created_at->translatedFormat('M j, Y') }}</span>
        </div>
        <div style="display:flex; align-items:center; gap:14px;">
          <span class="pts" style="color:{{ $result->status === 'pass' ? 'var(--green)' : 'var(--coral)' }};">
            {{ $result->score }}% · {{ $result->status === 'pass' ? __('front.profile.exam_passed') : __('front.profile.exam_failed') }}
          </span>
          <a href="{{ route('front.exams.show', $result->exam) }}" title="{{ __('front.profile.view_result') }}" aria-label="{{ __('front.profile.view_result') }}" style="display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; border:1px solid var(--border); color:var(--text-muted); flex-shrink:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </a>
        </div>
      </div>
    @empty
      <p class="muted">{{ __('front.profile.no_exams') }}</p>
    @endforelse

    @if($examResults->hasPages())
      <div class="pager">
        @if($examResults->onFirstPage())
          <span class="disabled">‹</span>
        @else
          <a href="{{ $examResults->previousPageUrl() }}#profile-exams">‹</a>
        @endif

        @foreach(range(1, $examResults->lastPage()) as $page)
          <a href="{{ $examResults->url($page) }}#profile-exams" class="{{ $page == $examResults->currentPage() ? 'active' : '' }}">{{ $page }}</a>
        @endforeach

        @if($examResults->hasMorePages())
          <a href="{{ $examResults->nextPageUrl() }}#profile-exams">›</a>
        @else
          <span class="disabled">›</span>
        @endif
      </div>
    @endif
  </div>
</div>
</section>
@endsection