@extends('layouts.app')

@section('title', __('navigation.title'))

@section('content')

<!-- Page Header Start -->
<div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
    <div class="container text-center">
        <h1 class="display-4 text-white animated slideInDown mb-4">{{ __('navigation.title') }}</h1>
        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a class="text-white" href="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('navigation.home') }}</a></li>
                <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                <li class="breadcrumb-item text-primary active" aria-current="page">{{ __('navigation.title') }}</li>
            </ol>
        </nav>
    </div>
</div>
<!-- Page Header End -->

<!-- Courses Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('navigation.trending_courses') }}</h6>
            <h1 class="display-6 mb-4">{{ __('navigation.upskill_you') }}</h1>
        </div>
        @if($courses && $courses->count() > 0)
        <div class="row g-4 justify-content-center">
            @foreach($courses as $course)
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="courses-item d-flex flex-column bg-white overflow-hidden h-100">
                    <div class="text-center p-4 pt-0">
                        <div class="d-inline-block bg-primary text-white fs-5 py-1 px-4 mb-4">{{ __('navigation.price_format', ['price' => $course->price ?? 99]) }}</div>
                        <h5 class="mb-3">{{ $course->title }}</h5>
                        <p>{{ $course->description }}</p>
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item small"><i class="fa fa-signal text-primary me-2"></i>{{ $course->localized_level ?? __('courses.beginner') }}</li>
                            <li class="breadcrumb-item small"><i class="fa fa-calendar-alt text-primary me-2"></i>{{ $course->duration ?? '3' }} {{ __('courses.week') }}</li>
                        </ol>
                    </div>
                    <div class="position-relative mt-auto">
                        <img class="img-fluid" src="{{ $course->featured_image ? asset('storage/' . $course->featured_image) : asset('img/drivin/courses-1.jpg') }}" alt="{{ $course->title }}">
                        <div class="courses-overlay">
                            <a class="btn btn-outline-primary border-2" href="{{ route('courses.show', ['locale' => app()->getLocale(), 'id' => $course->id]) }}">{{ __('navigation.read_more') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="text-center">
            <h3>{{ __('navigation.no_courses_found') }}</h3>
            <p>{{ __('navigation.check_back_later') }}</p>
        </div>
        @endif
    </div>
</div>
<!-- Courses End -->

@endsection