@extends('website.layouts.app')

@section('meta_title', "Techne")
@section('meta_description', "Techne")
@section('meta_keywords','Techne')

@section('content')

    <section class="workshop-page bg-light" id="workshopPageSection">
        @if (! empty($workshopPageSettings['workshop_page_header_description']) || ! empty($workshopPageSettings['workshop_page_header_btn_link']))
            <div class="bg-color4 py-10">
                <div class="container text-center">
                    <h2 class="text-white text-uppercase fs-48 fw-bold mb-5">
                        {{ __('app.Workshops') }}
                    </h2>

                    <div class="mb-4">
                        @if(! empty($workshopPageSettings['workshop_page_header_description']))
                            {!! html_entity_decode($workshopPageSettings['workshop_page_header_description']) !!}
                        @endif
                    </div>

                    @if(! empty($workshopPageSettings['workshop_page_header_btn_link']))
                        <a href="{{ $workshopPageSettings['workshop_page_header_btn_link'] }}" class="btn btn-primary bg-event-color border-event-color py-1">
                            {{ $workshopPageSettings['workshop_page_header_btn_title'] }}
                        </a>
                    @endif
                </div>
            </div>
        @endif

        <div class="container-fluid py-10 px-3 px-lg-7 px-md-5">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-5">
                <h2 class="text-primary text-uppercase fs-38 fw-bold mb-0">
                    {{ __('app.Workshops') }}
                </h2>

                @if($locations->count() > 0)
                    <form method="GET" action="{{ route('website.workshops') }}" class="d-flex align-items-center gap-2">
                        <label for="location" class="form-label mb-0 fw-bold text-nowrap">{{ __('app.Filter by location') }}:</label>
                        <select 
                            name="location" 
                            id="location" 
                            class="form-select form-select-sm" 
                            style="min-width: 200px;"
                            onchange="this.form.submit()"
                        >
                            <option value="">{{ __('app.All locations') }}</option>
                            @foreach($locations as $location)
                                <option value="{{ $location }}" {{ $selectedLocation === $location ? 'selected' : '' }}>
                                    {{ $location }}
                                </option>
                            @endforeach
                        </select>

                        @if($selectedLocation)
                            <a href="{{ route('website.workshops') }}" class="btn btn-outline-secondary btn-sm" title="{{ __('app.Clear filter') }}">
                                <i class="fas fa-times"></i>
                            </a>
                        @endif
                    </form>
                @endif
            </div>

            <div class="row g-3 mb-3">
                @forelse ($workshops as $workshop)
                    <div class="col-12 col-md-6 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
                        <div class="workshop-one border h-100 d-flex flex-column">
                            <div class="row gy-1 gx-1 flex-xl-grow-1">
                                <div class="col-12 col-xxl-5">
                                    <div class="speaker-img-container">
                                        <img class="img-fluid mx-auto speaker-img" src="{{ $workshop->main_image_thumbnail ?? $workshop->main_image_path }}" alt="{{ $workshop->title }}" />
                                    </div>
                                </div>

                                <div class="col-12 col-xxl-7">
                                    <div class="p-3">
                                        <span class="workshop-level badge {{ ($workshop->level?->color() ? 'bg-'.$workshop->level->color() : bg-secondary) }}">
                                            {{ $workshop->level?->label() }}
                                        </span>

                                        <div class="text-dark fs-16 fw-bold lh-sm my-2 workshop-title">
                                            {{ Str::limit($workshop->title, 44, '...') }}
                                        </div>

                                        <div class="d-flex flex-column gap-0 fs-14 my-2">
                                            @if ($workshop->speaker)
                                                <div class="d-flex align-items-center gap-1 speaker-name">
                                                    <i class="fas fa-microphone-alt fs-16 text-primary"></i>
                                                    {{ $workshop->speaker->name }}
                                                </div>
                                                
                                                @if ($workshop->speaker->job_title)
                                                    <div class="d-flex align-items-center gap-1 job-title">
                                                        <i class="fas fa-briefcase text-primary"></i>
                                                        {{ Str::limit($workshop->speaker->job_title, 27, '...') }}
                                                    </div>
                                                @endif
                                            @endif

                                            @if ($workshop->language)
                                                <div class="d-flex align-items-center gap-1 language">
                                                    <i class="fas fa-globe-africa text-primary"></i>
                                                    {{ $workshop->language }}
                                                </div>
                                            @endif

                                            @if ($workshop->location)
                                                <div class="d-flex align-items-center gap-1 language">
                                                    <i class="fas fa-map-marker-alt text-primary"></i>
                                                    {{ $workshop->location }}
                                                </div>
                                            @endif
                                        </div>

                                        <div class="my-2 fs-14 lh-sm description">
                                            @if ($workshop->short_description)
                                                {{ Str::limit($workshop->short_description, 64, '...') }}
                                            @endif
                                        </div>

                                        <div class="mt-4">
                                            <a href="{{ route('website.workshops.show', ['ulid' => $workshop->ulid]) }}" class="btn btn-outline-dark shadow-none rounded-0 py-1 px-3 fs-15">
                                                {{ __('app.More info and register') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if(! empty($workshopPageSettings['workshop_card_who_can_attend']))
                                <div class="bg-primary text-white mt-auto d-flex flex-column flex-sm-row justify-content-between gap-2 fs-12 py-1 px-2">
                                    <div>{{ __('app.Who can attend') }}</div>

                                    <div class="d-flex align-items-center gap-1">
                                        <i class="fas fa-ticket-alt"></i>
                                        {{ $workshopPageSettings['workshop_card_who_can_attend'] }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12 mx-auto text-center">
                        <p class="lead my-16 fs-38">
                            Stay tuned
                        </p>
                    </div>
                @endforelse

                <div class="col-12 mt-3">
                    {{ $workshops->withQueryString()->links('website.layouts.pagination') }}
                    {{-- $workshops->onEachSide(1)->withQueryString()->links() --}}
                </div>
            </div>
        </div>
    </section>

    @include('website.sections.subscribe-form')

@endsection