@extends('web.layouts.layout')
<title>@yield('meta_title', 'Services Online Course')</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@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-center">
              <div class="bd-breadcrumb-content">
                <h1 class="bd-breadcrumb-title"> Online Self-Learning Courses </h1>
                <div class="bd-breadcrumb-list"> <span><a href="/">Home</a></span> <span class="divider"><i class="fa-regular fa-angle-right"></i></span> <span class="active"> Online Self-Learning Courses </span> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- breadcrumb area end -->
  <section class="bd-why-choose-area fix online-self">
    <div class="container">
       <div class="row justify-content-center">
              <div class="col-xl-10">
                 <div class="bd-section-wrapper section-title-space text-center">
                   <p> PIA’s online self-learning courses are an opportunity for learners to engage in self-paced learning through engaging, creative and informative pedagogies. These online courses have been designed keeping the learners’ needs at the centre, ensuring that the learning outcomes align with the contemporary requirements of the development and non-profit sectors. Each of these courses engage learners for a maximum duration of 10 hours, ensuring that they can be completed alongside their primary responsibilities. </p>

                   <p> Since 2005, a total of 6,563 people worldwide have enrolled in PIA’s online self-learning courses. </p>
                </div>
              </div>
         </div>


       <div class="row g-30">
        @foreach($online_self_learning_courses as $course)
        <div class="col-xl-4 col-lg-4 col-md-6">
          <div class="bd-why-choose-wrapper style-two">
            <div class="bd-why-choose-item bg-flashlight"> 
             <div class="online-self-img"><img src="{{asset('/admin_upload/'.$course->image??'')}}" alt="{{$course->title??''}}"> </div>
              <div class="bd-why-choose-content">
                <h5 class="bd-why-choose-title"> {{$course->title??''}} </h5>
                <p class="bd-why-choose-description">{{$course->short_description??''}} </p>
                <div class="bd-postbox-comment-reply">
                <a href="{{ route('online_self_learing_detail', ['id' => $course->id]) }}">Learn More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        @endforeach   
      </div>
    </div>
  </section>




</main>
@endsection