@extends('layouts.front')

@section('title', 'Instructors — ' . getSiteName())

@section('content')
<section class="page-section active" id="page-instructors">
<div class="page-hero">
  <div class="container">
    <div class="breadcrumb"><a href="{{ url('/') }}" data-page="home">{{ __('front.nav.home') }}</a> / {{ __('front.nav.instructors') }}</div>
    <h1>{{ __('front.instructors.title') }}</h1>
    <p>{{ __('front.instructors.subtitle') }}</p>
  </div>
</div>

<div class="container layout">
  <aside class="filters" id="instructorsFilters">
    <div class="filters-mobile-head">
      <b>{{ __('front.instructors.filters') }}</b>
      <button type="button" class="filters-close" aria-label="{{ __('front.instructors.close_filters') }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>
    </div>
    @if(request()->except(['page', 'sort']))
    <div class="filter-group" style="display:flex; justify-content:space-between; align-items:center;">
      <span class="muted" style="font-size:12.5px;">{{ __('front.instructors.active_filters') }}</span>
      <a href="{{ route('front.instructors.index', request()->only('sort')) }}" class="btn btn-ghost btn-sm">{{ __('front.instructors.clear_all_filters') }}</a>
    </div>
    @endif
    <div class="filter-group">
      <h4>{{ __('front.instructors.search') }}</h4>
      <form method="GET" action="{{ route('front.instructors.index') }}" class="search-wrap">
        @if(request('specialty_id'))<input type="hidden" name="specialty_id" value="{{ request('specialty_id') }}">@endif
        @if(request('sort'))<input type="hidden" name="sort" value="{{ request('sort') }}">@endif
        <input type="text" name="search" class="filter-search" placeholder="{{ __('front.instructors.search_placeholder') }}" value="{{ request('search') }}">
        <button type="submit" class="search-submit" aria-label="{{ __('front.instructors.search') }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        </button>
      </form>
    </div>
    <div class="filter-group">
      <h4>{{ __('front.instructors.specialties') }}</h4>
      @forelse($specialties as $specialty)
        <a href="{{ route('front.instructors.index', array_merge(request()->except(['specialty_id', 'page']), ['specialty_id' => $specialty->id])) }}" class="filter-opt" style="text-decoration:none;">
          <span><input type="checkbox" style="pointer-events:none;" {{ request('specialty_id') == $specialty->id ? 'checked' : '' }}>{{ $specialty->name }}</span>
          <span class="count">{{ $specialty->instructors_count }}</span>
        </a>
      @empty
        <span class="muted" style="font-size:13px;">{{ __('front.instructors.no_specialties') }}</span>
      @endforelse
      @if(request('specialty_id'))
        <a href="{{ route('front.instructors.index', request()->except(['specialty_id', 'page'])) }}" style="font-size:12.5px; color:var(--primary); display:inline-block; margin-top:8px;">{{ __('front.instructors.clear_filter') }}</a>
      @endif
    </div>
  </aside>
  <div class="filters-backdrop"></div>

  <div>
    <div class="toolbar">
      <button type="button" class="filters-toggle" aria-controls="instructorsFilters">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
        {{ __('front.instructors.filters') }}
      </button>
      <span class="result-count">{{ trans_choice('front.instructors.instructor_count', $instructors->total(), ['count' => number_format($instructors->total())]) }}</span>
      @php
        $sortOptions = [
          'popular' => __('front.instructors.sort_popular'),
          'rating'  => __('front.instructors.sort_rating'),
          'newest'  => __('front.instructors.sort_newest'),
        ];
        $currentSort = request('sort', 'popular');
      @endphp
      <select class="sort-select" onchange="location.href=this.value">
        @foreach($sortOptions as $value => $label)
          <option value="{{ route('front.instructors.index', array_merge(request()->except(['sort', 'page']), ['sort' => $value])) }}" {{ $currentSort === $value ? 'selected' : '' }}>{{ $label }}</option>
        @endforeach
      </select>
    </div>

    <div class="course-grid">
      @forelse($instructors as $instructor)
      <a href="{{ route('front.instructors.show', $instructor) }}" class="card instr-card">
        <div class="instr-top">
          <img class="instr-avatar" src="{{ $instructor->user->getImage() }}" alt="{{ $instructor->user->name }}">
          <div>
            <div class="instr-name">{{ $instructor->user->name }}</div>
            @if($instructor->user->title)<div class="instr-title">{{ $instructor->user->title }}</div>@endif
          </div>
        </div>
        @if($instructor->specialty)
          <span class="tag instr-specialty">{{ $instructor->specialty->name }}</span>
        @endif
        @if($instructor->user->bio)
          <p class="instr-bio">{{ \Illuminate\Support\Str::limit($instructor->user->bio, 110) }}</p>
        @endif
        <div class="instr-stats">
          <span class="instr-stat-group">
            <span>★ {{ $instructor->ratings_avg_rating ? number_format($instructor->ratings_avg_rating, 1) : '—' }}</span>
            <span>{{ trans_choice('front.instructors.course_count', $instructor->courses_count, ['count' => $instructor->courses_count]) }}</span>
          </span>
          <span class="instr-view">{{ __('front.instructors.view_profile') }}</span>
        </div>
      </a>
      @empty
      <p class="muted">{{ __('front.instructors.no_match') }}</p>
      @endforelse
    </div>

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

      @for($page = 1; $page <= $instructors->lastPage(); $page++)
        <a href="{{ $instructors->url($page) }}" class="{{ $page == $instructors->currentPage() ? 'active' : '' }}">{{ $page }}</a>
      @endfor

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