@extends('layouts.front')

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

@section('content')
<section class="page-section active" id="page-instructor">
<div class="profile-head">
  <div class="container" style="display:flex; gap:28px; flex-wrap:wrap;">
    <img class="ph p-avatar" src="{{ $instructor->user->getImage() }}" alt="{{ $instructor->user->name }}" style="object-fit:cover;">
    <div class="p-info">
      <span class="eyebrow">{{ __('front.instructors.profile') }}</span>
      <h1 style="margin-top:8px;">{{ $instructor->user->name }}</h1>
      @if($instructor->user->title || $instructor->specialty)
        <div class="role">{{ $instructor->user->title }}@if($instructor->user->title && $instructor->specialty) · @endif{{ optional($instructor->specialty)->name }}</div>
      @endif
      @if($instructor->user->bio)
        <p class="bio">{{ $instructor->user->bio }}</p>
      @endif
      <div class="p-stats">
        <div><b>{{ $coursesCount }}</b><span>{{ __('front.instructors.courses') }}</span></div>
        <div><b>{{ $instructor->ratings_avg_rating ? number_format($instructor->ratings_avg_rating, 1) : '—' }}</b><span>{{ __('front.instructors.rating') }}</span></div>
        <div><b>{{ number_format($studentsCount) }}</b><span>{{ __('front.instructors.students') }}</span></div>
        <div><b>{{ number_format($instructor->ratings_count) }}</b><span>{{ __('front.instructors.reviews') }}</span></div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="tabs">
    <div class="tab active" data-itab="courses">{{ __('front.instructors.tab_courses') }}</div>
    <div class="tab" data-itab="about">{{ __('front.instructors.tab_about') }}</div>
  </div>

  <div class="itab-panel active" id="itab-courses">
  <div class="course-grid">
    @forelse($courses as $course)
    <div class="card">
      @if($course->getImage())
        <div class="ph ph-video course-thumb">
          <img src="{{ $course->getImage() }}" alt="{{ $course->title }}" style="width:100%;height:100%;object-fit:cover;">
        </div>
      @else
        <div class="ph ph-video course-thumb shimmer"><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></div>
      @endif
      <div class="course-body">
        @if($course->category)<span class="tag">{{ $course->category->name }}</span>@endif
        <h3>{{ $course->title }}</h3>
        <div class="course-foot"><div class="price">EGP {{ number_format($course->price) }}</div><a href="{{ route('front.courses.show', $course) }}" class="btn btn-ghost btn-sm">{{ __('front.instructors.view') }}</a></div>
      </div>
    </div>
    @empty
    <p class="muted">{{ __('front.instructors.no_courses') }}</p>
    @endforelse
  </div>

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

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

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

  <div class="itab-panel" id="itab-about">
    <div class="about-main" style="max-width:640px;">
      <h3>{{ __('front.instructors.biography') }}</h3>
      @if($instructor->user->bio)
        <p class="muted" style="line-height:1.7; font-size:14.5px;">{{ $instructor->user->bio }}</p>
      @else
        <p class="muted">{{ __('front.instructors.no_bio') }}</p>
      @endif
    </div>
  </div>
</div>
  </section>
@endsection