@extends('layouts.public')
@section('title', 'Speakers | Kenya Diaspora Alliance')
@section('content')
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        <h1 class="page-title">
                            Speakers
                        </h1>
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Speakers</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section id="pricing" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
                            Meet our speakers
                        </h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Introducing Our Speakers: Explore a diverse lineup of industry experts, thought leaders, and
                            <br>
                            influencers who will enlighten and inspire you. Get ready to connect with visionary voices at
                            <br>
                            our event.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center mb-4">
                <div class="col-md-6">
                    <p class="mb-0 text-muted">
                        Browse the line-up for <strong>{{ $selectedYear === 'all' ? 'all years' : $selectedYear }}</strong>
                        sorted by most recently added.
                    </p>
                </div>
                <div class="col-md-6 text-md-end text-start">
                    <form method="get" action="{{ route('event.speakers') }}" class="d-inline-flex align-items-center"
                        style="gap: 0.5rem;">
                        <label class="mb-0 fw-semibold">Year:</label>
                        <select name="year" class="form-select form-control" onchange="this.form.submit()"
                            style="max-width: 180px;">
                            <option value="all" {{ ($selectedYear ?? '') === 'all' ? 'selected' : '' }}>All years</option>
                            @foreach (($years ?? []) as $year)
                                <option value="{{ $year }}"
                                    {{ (string) $year === (string) ($selectedYear ?? '') ? 'selected' : '' }}>
                                    {{ $year }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>
            </div>
            <div class="row g-3">
                @if (isset($speakers) && count($speakers) == 0)
                    <div class="col-12 text-center">
                        <p>Coming Soon...</p>
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                @else
                    @foreach ($speakers as $speaker)
                        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center">
                            <div class=" position-relative text-center ">
                                <a href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}">
                                    <div class="rounded-2 overflow-hidden ">
                                        <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt=""
                                            class="img-fluid rounded-2">
                                    </div>
                                </a>
                                <div class="position-absolute bottom-0 bg-transparent "></div>
                            </div>
                            <div class="mt-2 ">
                                <div class="">
                                    <a class="text-decoration-none "
                                        href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}"><strong>{{ $speaker->name }}</strong></a>
                                </div>
                            </div>
                            <div class="">
                                {{ $speaker->title }}
                            </div>
                            <div class="">
                                {{ $speaker->organization }}
                            </div>
                        </div>
                    @endforeach

                @endif
            </div>
        </div>
    </section>
@endsection