@extends('frontend.master')
@section('title') {{$programs->program_name}} @stop
@section('keywords')  {{$programs->program_name.", ".$programs->facultyName->faculty_name }}@stop 
@section('description')  {{"Shreechitwan College (formerly Shree Medical and Technical College) was established in 2007 under the affiliation with council for technical Education and Vocational Training (CTEVT)"}}@stop
@section('content')
<section class="page-title-section overlay" data-background="/images/slider/slider1.jpg">
  <div class="container">
    <div class="row">
      <div class="col-md-10">
        <ul class="list-inline custom-breadcrumb">
          <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="{{ url('/programs') }}">Our Programs</a></li>
          <li class="list-inline-item text-white h3 font-secondary nasted">{{$programs->program_name}}</li>
        </ul>
        <p class="text-lighten">Shreechitwan College offers quality CTEVT-affiliated medical diploma programs with a focus on practical training and ethical healthcare.</p>
  
      </div>
    </div>
  </div>
</section>
<section class="section-sm">
  <div class="container">
    <!-- course info -->
    <div class="row align-items-center mb-5">
      <div class="col-xl-12 order-1 col-sm-6 mb-4 mb-xl-0">
        <h2>{{$programs->program_name}}</h2>
      </div>
      <div class="col-xl-6 order-sm-3 order-xl-2 col-12 order-2">
        <ul class="list-inline text-xl-center">
          <li class="list-inline-item mr-4 mb-3 mb-sm-0">
            <div class="d-flex align-items-center">
              <i class="ti-user text-primary icon-md mr-2"></i>
              <div class="text-left">
                <h6 class="mb-0">Seats</h6>
                <p class="mb-0"> {{ $programs->seats }} Seats</p>
              </div>
            </div>
          </li>
          <li class="list-inline-item mr-4 mb-3 mb-sm-0">
            <div class="d-flex align-items-center">
              <i class="ti-alarm-clock text-primary icon-md mr-2"></i>
              <div class="text-left">
                <h6 class="mb-0">DURATION</h6>
                <p class="mb-0">{{$programs->years}} Years</p>
              </div>
            </div>
          </li>
          <li class="list-inline-item mr-4 mb-3 mb-sm-0">
            <div class="d-flex align-items-center">
              <i class="ti-wallet text-primary icon-md mr-2"></i>
              <div class="text-left">
                <h6 class="mb-0">FEE</h6>
                <p class="mb-0">Contact US</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-xl-6 text-sm-right text-left order-sm-2 order-3 order-xl-3 col-sm-6 mb-4 mb-xl-0">
        <a href="#" class="btn btn-primary">Request Information</a>
      </div>
      <!-- border -->
      <div class="col-12 mt-4 order-4">
        <div class="border-bottom border-primary"></div>
      </div>
    </div>
<style>
  .rounded>.active a{
    color: white;
  }
</style>
    <!-- course details -->
    <div class="row">
      <div class="col-lg-4 col-md-4">
        <ul class="list-group list-group-flush shadow-sm rounded">
          @foreach ($programDetails as $item) 
           <li class="list-group-item {{ $item->id==$parent->id?"active":"" }}"><a href="{{url("programs/$programs->id/$item->id")}}">{{$item->heading}}</a></li>
          @endforeach
        
        </ul>
      </div>
      <div class="col-lg-8 col-md-8">
        <div class="row">
          <div class="col-12 mb-4">
            <!-- course thumb -->
            @if (!$flag)
               <img src="/programthumbnail/{{ $programs->thumbnail }}" class="img-fluid w-100">
            @endif
           
          </div>
        </div>
        
          <div class="col-12 mb-4">
            <h3>{{$parent->heading}}</h3>
            <p>{!!$parent->description!!}</p>
          </div>

      
      </div>
      
      <!-- teacher -->
      <div class="col-12">
          <div class="social-link">
            <h6 class="d-none d-sm-block">Social Link</h6>
            <ul class="list-inline">
              <li class="list-inline-item"><a class="d-inline-block text-light p-1" href="#"><i class="ti-facebook"></i></a></li>
              <li class="list-inline-item"><a class="d-inline-block text-light p-1" href="#"><i class="ti-twitter-alt"></i></a></li>
              <li class="list-inline-item"><a class="d-inline-block text-light p-1" href="#"><i class="ti-linkedin"></i></a></li>
              <li class="list-inline-item"><a class="d-inline-block text-light p-1" href="#"><i class="ti-instagram"></i></a></li>
            </ul>
          </div>
        </div>
        <div class="border-bottom border-primary mt-4"></div>
      </div>
    </div>
  </div>
</section>
<!-- /section -->

@endsection