@extends('layouts.app')
@use('Illuminate\Support\Str')

@php
  $hasFilters = collect($filters)->filter(fn ($v) => $v !== null && $v !== '')->isNotEmpty();
  $wa = 'https://wa.me/'.digits(setting('whatsapp')).'?text='.rawurlencode('Hi INFOTICS, I need help choosing a course.');
  $nextStart = fn ($c) => $c->batches->filter(fn ($b) => in_array($b->status, ['Open', 'Upcoming'], true) && $b->start_date && $b->start_date->gte(today()))->sortBy('start_date')->first();
  $vName = fn ($c) => $c->vendor?->slug === 'aws' ? 'AWS' : $c->vendor?->name;
@endphp

@section('content')
<x-site.page-hero eyebrow="Courses" title="IT certification courses in Karachi & online" :crumbs="[['Home', url('/')], ['Courses']]">
  INFOTICS Academy runs {{ $total }} instructor-led IT certification courses in {{ $vendors->count() }} technology tracks, live online or on campus in Karachi.
  @if($feeMin && $feeMax)Fees range from {{ money($feeMin) }} to {{ money($feeMax) }}.@endif
  Every course includes live classes with attendance tracking, recorded lessons, labs, a knowledge assessment and a verifiable digital badge.
  <x-slot:actions>
    <form class="cr-hero-search" method="get" action="{{ route('courses.index') }}" role="search">
      <label class="sr-only" for="cq">Search courses</label>
      <div class="searchbox"><x-icon name="search" :size="18"/><input id="cq" class="input" type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by course, exam code or vendor, e.g. AZ-104"></div>
      @foreach(['vendor', 'level', 'sort'] as $k)@if(!empty($filters[$k]))<input type="hidden" name="{{ $k }}" value="{{ $filters[$k] }}">@endif @endforeach
      <button class="btn btn-primary" type="submit">Search</button>
    </form>
  </x-slot:actions>
</x-site.page-hero>

<section class="section-sm">
  <div class="container">
    <form class="cr-filterbar" method="get" action="{{ route('courses.index') }}">
      @if(!empty($filters['q']))<input type="hidden" name="q" value="{{ $filters['q'] }}">@endif
      @if(!empty($filters['vendor']))<input type="hidden" name="vendor" value="{{ $filters['vendor'] }}">@endif
      <div class="row gap-1 cr-vendor-chips" role="group" aria-label="Filter by technology">
        <a class="chip {{ empty($filters['vendor']) ? 'active' : '' }}" href="{{ route('courses.index', array_diff_key($filters, ['vendor' => 1])) }}">All</a>
        @foreach($vendors as $v)
          <a class="chip {{ ($filters['vendor'] ?? '') === $v->slug ? 'active' : '' }}" href="{{ route('courses.index', array_merge($filters, ['vendor' => $v->slug])) }}">{{ $v->slug === 'aws' ? 'AWS' : $v->name }}</a>
        @endforeach
      </div>
      <div class="row gap-1 cr-selects">
        <label class="sr-only" for="lv">Level</label>
        <select id="lv" class="select" name="level" data-autosubmit>
          <option value="">All levels</option>
          @foreach($levels as $l)<option value="{{ $l }}" @selected(($filters['level'] ?? '') === $l)>{{ $l }}</option>@endforeach
        </select>
        <label class="sr-only" for="so">Sort by</label>
        <select id="so" class="select" name="sort" data-autosubmit>
          <option value="">Featured first</option>
          <option value="title" @selected(($filters['sort'] ?? '') === 'title')>Title A–Z</option>
          <option value="price_asc" @selected(($filters['sort'] ?? '') === 'price_asc')>Fee: low to high</option>
          <option value="price_desc" @selected(($filters['sort'] ?? '') === 'price_desc')>Fee: high to low</option>
        </select>
        <noscript><button class="btn btn-secondary btn-sm" type="submit">Apply</button></noscript>
      </div>
    </form>

    <div class="row between mb-2">
      <p class="muted mb-0" role="status">Showing <b>{{ $courses->count() }}</b> of {{ $total }} courses @if(!empty($filters['q'])) matching “{{ $filters['q'] }}”@endif</p>
      @if($hasFilters)<a class="small bold" href="{{ route('courses.index') }}">Clear filters</a>@endif
    </div>

    @if($courses->isEmpty())
      <div class="card"><x-empty icon="search" title="No courses match those filters" text="Try a different keyword, or clear the filters to see every course."><a class="btn btn-primary btn-sm" href="{{ route('courses.index') }}">Show all courses</a></x-empty></div>
    @else
      <div class="grid g-auto cr-grid">
        @foreach($courses as $c)
          <div class="reveal d{{ ($loop->index % 4) + 1 }}">@include('site._course-card', ['course' => $c])</div>
        @endforeach
      </div>
    @endif
  </div>
</section>

@if($courses->count() > 1)
<section class="section hm-white">
  <div class="container">
    <div class="section-head left reveal">
      <span class="eyebrow">Compare</span>
      <h2>Compare courses at a glance</h2>
      <p class="lead">Exam code, level, duration, fee and the next start date for every course listed above.</p>
    </div>
    <div class="table-wrap reveal">
      <table class="table">
        <thead><tr><th>Course</th><th>Technology</th><th>Exam</th><th>Level</th><th>Duration</th><th class="num">Fee</th><th>Next start</th></tr></thead>
        <tbody>
        @foreach($courses as $c)
          @php $n = $nextStart($c); @endphp
          <tr>
            <td><a class="bold" href="{{ route('courses.show', $c->slug) }}">{{ $c->title }}</a></td>
            <td>{{ $vName($c) }}</td>
            <td class="nowrap">{{ $c->exam_code ?: '—' }}</td>
            <td><span class="pill pill-blue">{{ $c->level }}</span></td>
            <td class="nowrap">{{ $c->durationLabel() }}</td>
            <td class="num nowrap">{{ $c->publicFeeLabel() }}</td>
            <td class="nowrap">{{ $n ? $n->start_date->format('d M Y') : 'On request' }}</td>
          </tr>
        @endforeach
        </tbody>
      </table>
    </div>
  </div>
</section>
@endif

<section class="section">
  <div class="container">
    <div class="cta-band reveal">
      <h2>Not sure which course fits you?</h2>
      <p class="lead mb-3">Tell us your background and goal. A counsellor will recommend a certification path and the next suitable batch, free of charge.</p>
      <div class="row" style="justify-content:center">
        <a class="btn btn-primary btn-lg" href="{{ route('contact') }}">Book free counselling</a>
        <a class="btn btn-ghost btn-lg" href="{{ $wa }}" rel="noopener"><x-icon name="whatsapp" :size="18"/> Ask on WhatsApp</a>
      </div>
    </div>
  </div>
</section>
@endsection