@extends('front.app')
@section('content')
<section class="wrapper bg-gradient-primary">
    <div class="container pt-10 pt-md-14 pb-8 text-center">
      <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-7">
          <figure>  <img class="img-fluid" src="{{asset('front/img/illustrations/i13.png')}}" srcset="{{asset('front/img/illustrations/i13@2x.png 2x')}}" alt="" /></figure>
        
        </div>
        <!-- /column -->
        <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start">
          <h1 class="display-1 mb-5 mx-md-n5 mx-lg-0">{{ trans('module.prog_title') }}</h1>
          <p class="lead fs-lg mb-7">{{ trans('module.prog_text') }}</p>
         
        </div> 
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </section>
  <section class="wrapper bg-light">
    <div class="container py-14 py-md-16 text-center">
    
      <!-- /.row -->
      <div class="position-relative">
        <div class="shape rounded-circle bg-soft-blue rellax w-16 h-16" data-rellax-speed="1" style="bottom: -0.5rem; right: -2.2rem; z-index: 0;"></div>
        <div class="shape bg-dot yellow rellax w-16 h-17" data-rellax-speed="1" style="top: -0.5rem; left: -2.5rem; z-index: 0;"></div>
        <div class="row gx-md-5 gy-5 text-center">
          
          
         
        @foreach($apointments as $index => $i)
<div class="col-md-6 col-xl-4">
    <div class="card shadow-lg">
        <div class="card-body">
            <h4>{{$i->name}}</h4>
            @if($index == 0)
                <p class="mb-2">{{ trans('module.prog_menu_1') }}</p>
            @elseif($index == 1)
                <p class="mb-2">{{ trans('module.prog_menu_2') }}</p>
            @elseif($index == 2)
                <p class="mb-2">{{ trans('module.prog_menu_3') }}</p>
            @endif
            <a href="{{route('schedule.show',[$i->slug])}}" class="more hover link-blue">{{ trans('module.prog_menu_link_text') }}</a>
        </div>
        <!--/.card-body -->
    </div>
    <!--/.card -->
</div>
@endforeach
       <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /.position-relative -->
    </div>
    <!-- /.container -->
  </section>
  <!-- /section -->
@endsection