@extends('layouts.users')

@section('title', 'Learning Path')

@section('content')

    <section class="learning-path" id="learning-path">
        <div class="section-container">
            <div class="section-header">
                <div class="section-label" data-aos="fade-up">
                    Learning Path
                </div>

                <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">
                    Jalur Pembelajaran Pilihan Anda
                </h2>

                <p class="section-description" data-aos="fade-up" data-aos-delay="200">
                    Pilih jalur pembelajaran di <strong>NP Digital Academy</strong> PLN Nusantara Power yang dirancang
                    secara terstruktur.
                </p>
            </div>

            <div class="section-search" data-aos="fade-up" data-aos-delay="300">
                <form method="GET" action="{{ route('learning-path.index') }}" class="search-form">
                    <input type="text" name="search" placeholder="Cari learning path..." value="{{ request('search') }}">

                    <button type="submit" class="btn-search">
                        Cari
                    </button>

                    @if(request('search'))
                        <a href="{{ route('learning-path.index') }}" class="btn-reset">
                            Reset
                        </a>
                    @endif
                </form>
            </div>

            <div class="learning-path-grid">
                @forelse($learningPaths as $path)
                    <div class="learning-path-card" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">

                        <h3>{{ $path->title }}</h3>
                        <p>{{ Str::limit($path->description, 100) }}</p>

                        <a href="{{ route('learning-path.show', $path->slug) }}" class="btn-learning-path">
                            Mulai Belajar
                        </a>
                    </div>
                @empty
                    <p data-aos="fade-up" style="text-align: center">
                        Data Kosong
                    </p>
                @endforelse
            </div>

        </div>
    </section>

@endsection