@extends('web.layouts.layout')

@section('title', $services_details->title ?? 'About Online Course')
@section('meta_title', $services_details->meta_title ?? 'About Online Course')
@section('meta_description', $services_details->meta_description ?? '')
@section('meta_keywords', $services_details->meta_keywords ?? '')

@section('content')
<main>
    <!-- Breadcrumb area start -->
    <section class="bd-breadcrumb-area p-relative fix z-index-11">
        <div class="bd-breadcrumb-bg-two" data-background="/assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
        <div class="bd-breadcrumb-wrapper p-relative">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="bd-breadcrumb style-two d-flex justify-content-center align-items-center">
                            <div class="bd-breadcrumb-content text-center">
                                <h1 class="bd-breadcrumb-title">{{ $services_details->title ?? '' }}</h1>
                                <div class="bd-breadcrumb-list">
                                    <span><a href="{{ url('/') }}">Home</a></span>
                                    <span class="divider"><i class="fa-regular fa-angle-right"></i></span>
                                    <span class="active">{{ $services_details->title ?? '' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb area end -->

    <!-- Service description section -->
    <section class="bd-why-choose-area online-self py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-12">
                    <div class="bd-section-wrapper section-title-space" style="text-align: justify;">
                        {!! $services_details->description ?? '' !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Courses section -->
    <section class="bd-courses-area py-5 courses-list">
        <div class="container">
            <div class="row">
                 @if ($services_details->id == 12)
                <h3>Active Learning Circle</h3>
                @endif
                @foreach($cources as $course)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="bd-course-wrapper style-seven card h-100">
                        <a href="{{ $course->link ?? '#' }}" class="bd-course-thumb-wrapper bd-course-thumb-style p-relative">
                            <div class="bd-course-thumb-bg">
                                <img src="{{ asset('upload/courses/' . $course->image) }}" alt="course image" class="img-fluid w-100">
                            </div>
                        </a>
                        <div class="bd-course-content p-3">
                            <div class="bd-course-content-bottom d-flex align-items-center gap-3 mb-3">
                                <div class="bd-course-lesson has-separator">
                                    <span><i class="fa-light fa-clock"></i> {{ $course->lessons ?? '' }}</span>
                                </div>
                                <div class="bd-course-lesson">
                                    <span><i class="fa-sharp fa-solid fa-list"></i> {{ $course->students ?? '' }}</span>
                                </div>
                            </div>
                            <h5 class="bd-course-title mb-2">
                                <a href="{{ $course->link ?? '#' }}">{{ $course->title ?? '' }}</a>
                            </h5>
                            <p class="bd-course-description mb-3">{{ $course->short_title ?? '' }}</p>
                            <div class="bd-course-rating d-flex align-items-center gap-2 mb-4">
                                <div class="bd-course-rating-icon d-flex">
                                    @php
                                        $rating = $course->rating ?? 0;
                                        $fullStars = floor($rating);
                                        $halfStar = ($rating - $fullStars) >= 0.5;
                                        $emptyStars = 5 - ceil($rating);
                                    @endphp
                                    @for ($i = 0; $i < $fullStars; $i++)
                                        <i class="fa-solid fa-star text-warning"></i>
                                    @endfor
                                    @if ($halfStar)
                                        <i class="fa-solid fa-star-half text-warning"></i>
                                    @endif
                                    @for ($i = 0; $i < $emptyStars; $i++)
                                        <i class="fa-solid fa-star" style="color: #e4e4e4;"></i>
                                    @endfor
                                </div>
                                <div class="bd-course-rating-text">
                                    <span>({{ $course->rating ?? '' }} / 5 Ratings)</span>
                                </div>
                            </div>
                            <div class="bd-course-info">
                                <a class="bd-badge badge-primary mb-3 d-inline-block" href="#">{{ $course->certificate_badge ?? '' }}</a>
                                <div class="bd-course-info-label mb-3">Level: <span>{{ $course->level ?? '' }}</span></div>
                                <p class="mb-3">{{ $course->description ?? '' }}</p>
                                <div class="bd-course-price mb-4">
                                    <span class="current-price fw-bold fs-5">₹ {{ $course->amount2 ?? '' }}</span>
                                    <span class="old-price text-muted text-decoration-line-through">₹ {{ $course->amount ?? '' }}</span>
                                </div>
                                <div class="bd-course-action-btn">
                                    <a href="{{route('course-details',['id'=>$course->slug])}}" class="btn btn-outline-primary">View Details</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
           
        </div>
    </section>

    @if ($services_details->id == 12)
    <section class="bd-courses-area py-5 courses-list">
        <div class="container">
            <div class="row">
                <h3>Inactive Learning Circle</h3>
                @foreach($expierycources as $course)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="bd-course-wrapper style-seven card h-100">
                        <a href="{{ $course->link ?? '#' }}" class="bd-course-thumb-wrapper bd-course-thumb-style p-relative">
                            <div class="bd-course-thumb-bg">
                                <img src="{{ asset('upload/courses/' . $course->image) }}" alt="course image" class="img-fluid w-100">
                            </div>
                        </a>
                        <div class="bd-course-content p-3">
                            <div class="bd-course-content-bottom d-flex align-items-center gap-3 mb-3">
                                <div class="bd-course-lesson has-separator">
                                    <span><i class="fa-light fa-clock"></i> {{ $course->lessons ?? '' }}</span>
                                </div>
                                <div class="bd-course-lesson">
                                    <span><i class="fa-sharp fa-solid fa-list"></i> {{ $course->students ?? '' }}</span>
                                </div>
                            </div>
                            <h5 class="bd-course-title mb-2">
                                <a href="{{ $course->link ?? '#' }}">{{ $course->title ?? '' }}</a>
                            </h5>
                            <p class="bd-course-description mb-3">{{ $course->short_title ?? '' }}</p>
                            <div class="bd-course-rating d-flex align-items-center gap-2 mb-4">
                                <div class="bd-course-rating-icon d-flex">
                                    @php
                                        $rating = $course->rating ?? 0;
                                        $fullStars = floor($rating);
                                        $halfStar = ($rating - $fullStars) >= 0.5;
                                        $emptyStars = 5 - ceil($rating);
                                    @endphp
                                    @for ($i = 0; $i < $fullStars; $i++)
                                        <i class="fa-solid fa-star text-warning"></i>
                                    @endfor
                                    @if ($halfStar)
                                        <i class="fa-solid fa-star-half text-warning"></i>
                                    @endif
                                    @for ($i = 0; $i < $emptyStars; $i++)
                                        <i class="fa-solid fa-star" style="color: #e4e4e4;"></i>
                                    @endfor
                                </div>
                                <div class="bd-course-rating-text">
                                    <span>({{ $course->rating ?? '' }} / 5 Ratings)</span>
                                </div>
                            </div>
                            <div class="bd-course-info">
                                <a class="bd-badge badge-primary mb-3 d-inline-block" href="#">{{ $course->certificate_badge ?? '' }}</a>
                                <div class="bd-course-info-label mb-3">Level: <span>{{ $course->level ?? '' }}</span></div>
                                <p class="mb-3">{{ $course->description ?? '' }}</p>
                                <div class="bd-course-price mb-4">
                                    <span class="current-price fw-bold fs-5">₹ {{ $course->amount2 ?? '' }}</span>
                                    <span class="old-price text-muted text-decoration-line-through">₹ {{ $course->amount ?? '' }}</span>
                                </div>
                                <div class="bd-course-action-btn">
                                    <a href="{{route('course-details',['id'=>$course->slug])}}" class="btn btn-outline-primary">View Details</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

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