@extends('layouts.front')

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

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

<div class="container layout">
  <aside class="filters" id="coursesFilters">
    <div class="filters-mobile-head">
      <b>{{ __('front.courses.filters') }}</b>
      <button type="button" class="filters-close" aria-label="{{ __('front.courses.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.courses.active_filters') }}</span>
      <a href="{{ route('front.courses.index', request()->only('sort')) }}" class="btn btn-ghost btn-sm">{{ __('front.courses.clear_all_filters') }}</a>
    </div>
    @endif
    <div class="filter-group">
      <h4>{{ __('front.courses.search') }}</h4>
      <form method="GET" action="{{ route('front.courses.index') }}" class="search-wrap">
        @foreach(request()->except(['search', 'page']) as $key => $value)
          <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach
        <input type="text" name="search" class="filter-search" placeholder="{{ __('front.courses.search_placeholder') }}" value="{{ request('search') }}">
        <button type="submit" class="search-submit" aria-label="{{ __('front.courses.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.courses.specialties') }}</h4>
      @forelse($specialties as $specialty)
        <a href="{{ route('front.courses.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->courses_count }}</span>
        </a>
      @empty
        <span class="muted" style="font-size:13px;">{{ __('front.courses.no_specialties') }}</span>
      @endforelse
      @if(request('specialty_id'))
        <a href="{{ route('front.courses.index', request()->except(['specialty_id', 'page'])) }}" style="font-size:12.5px; color:var(--primary); display:inline-block; margin-top:8px;">{{ __('front.courses.clear_filter') }}</a>
      @endif
    </div>
    <div class="filter-group">
      <h4>{{ __('front.courses.access_type') }}</h4>
      @foreach(['buy_once' => __('front.courses.buy_once'), 'subscription' => __('front.courses.included_sub')] as $accessValue => $accessLabel)
        <a href="{{ route('front.courses.index', array_merge(request()->except('page'), ['access_type' => $accessValue])) }}" class="filter-opt" style="text-decoration:none;">
          <span><input type="checkbox" style="pointer-events:none;" {{ request('access_type') == $accessValue ? 'checked' : '' }}>{{ $accessLabel }}</span>
        </a>
      @endforeach
      @if(request('access_type'))
        <a href="{{ route('front.courses.index', request()->except(['access_type', 'page'])) }}" style="font-size:12.5px; color:var(--primary); display:inline-block; margin-top:8px;">{{ __('front.courses.clear_filter') }}</a>
      @endif
    </div>
    <div class="filter-group">
      <h4>{{ __('front.courses.level') }}</h4>
      @foreach(['beginner' => __('front.courses.beginner'), 'intermediate' => __('front.courses.intermediate'), 'advanced' => __('front.courses.advanced')] as $levelValue => $levelLabel)
        <a href="{{ route('front.courses.index', array_merge(request()->except('page'), ['level' => $levelValue])) }}" class="filter-opt" style="text-decoration:none;">
          <span><input type="checkbox" style="pointer-events:none;" {{ request('level') == $levelValue ? 'checked' : '' }}>{{ $levelLabel }}</span>
        </a>
      @endforeach
      @if(request('level'))
        <a href="{{ route('front.courses.index', request()->except(['level', 'page'])) }}" style="font-size:12.5px; color:var(--primary); display:inline-block; margin-top:8px;">{{ __('front.courses.clear_filter') }}</a>
      @endif
    </div>
  </aside>
  <div class="filters-backdrop"></div>

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

    <div class="course-grid" id="courseGrid">
      @forelse($courses as $course)
        <div class="card course-card">
          <div style="position:relative;">
            <span class="free-pill">{{ __('front.courses.lesson_1_free') }}</span>
            @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>
          <div class="course-body">
            <div style="display:flex;justify-content:space-between;">
              <span class="tag">{{ $course->category->name ?? __('front.courses.general') }}</span>
              <span class="tag">{{ __('front.courses.' . $course->level) }}</span>
              <span class="tag tag-gold">★ {{ $course->ratings_avg_rating ? number_format($course->ratings_avg_rating, 1) : '—' }}</span>
            </div>
            <h3>{{ $course->title }}</h3>
            <div class="course-meta">
              <div class="ph avatar-xs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 8a2 2 0 0 1 2-2h1.2a1 1 0 0 0 .89-.55L8.7 4.1A2 2 0 0 1 10.48 3h3.04a2 2 0 0 1 1.78 1.1l.6 1.35A1 1 0 0 0 16.8 6H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"/><circle cx="12" cy="13" r="3.4"/></svg></div>
              <span>{{ __('front.courses.by_instructor', ['name' => optional($course->instructor->user)->name ?? __('front.courses.unknown_instructor')]) }}</span>
            </div>
            <div class="course-foot">
              <div class="price">EGP {{ number_format($course->price, 0) }}</div>
              <a href="{{ route('front.courses.show', $course) }}" class="btn btn-ghost btn-sm">{{ __('front.courses.preview') }}</a>
            </div>
          </div>
        </div>
      @empty
        <p class="muted">{{ __('front.courses.no_courses') }}</p>
      @endforelse
    </div>

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

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

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