@extends('layout.app')
@section('title')
<title>Study Abroad</title>
    <meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
    <meta name="robots" content="index, follow" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
    <meta property="og:title" content="ET-Visas"/>
    <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection
@section('content')
    <section class="abroad-banner-section" style="background: url({{url($service->image ?? $page->banner_image)}})">
        <!-- <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Visa</li>
            </ol>
        </nav> -->
        <div class="studyabroad-banner-header">
            <h1>{{$service->name}}</h1>
            <h5>{!!strip_tags($service->short_description)!!}</h5>
        </div>
    </section>
    <section class="student-visa-section">
        <div class="row gx-5">
          <div class="col-md-3">
            <div class="visa-table">
              @foreach($visas as $visa)
              <a href="{{url('visa/'.$visa->slug)}}" class="tab-link {{$visa->id == $service->id ? 'active' : ''}} d-flex justify-content-between align-items-center">
                {{$visa->name}} <i class="fa-solid fa-angle-right"></i>
              </a>
              @endforeach
            </div>
          </div>
          @php 
           $sections = $service->visa_service_sections()->where('status','1')->orderby('order_by','asc')->get();;
          @endphp
          @if($sections->count() > 0)
           @php $first_section = $sections[0]; @endphp
          <div class="col-md-9">
            @if($first_section->count() > 0)
            <div class="visa-content">
              <h2><img src="{{url('frontend/icons/side-bars.svg')}}" class="me-2" alt="">{{$first_section->title}}</h2>
              <h3>{{$first_section->sub_title}}</h3>
              {!!$first_section->description!!}
            </div>
            @endif
            @php $second_section = $sections[1]; @endphp
            @if($second_section->count() > 0)
            <section class="visa-display-section">
              <div class="row">
                <div class="col-md-6">
                  <div class="visa-desc">
                    <h2>{{$second_section->title}}</h2>
                      {!!$second_section->description!!}
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="visa-img">
                      <img src="{{url($second_section->image)}}" class="w-100" alt="">
                  </div>
                </div>
              </div>
            </section>
            @endif
          </div>
          @endif
        </div>
    </section>
@endsection