@extends('themes.one.master')

@php
    $homeMeta = ($pageSettingsBySlug ?? collect())->get('home');
    $title = transField($homeMeta, 'title') ??  __('Home');

@endphp

@section('title', $title)

@section('style')
    <style>
      .team{position:relative!important;background:#fff!important;border-radius:14px!important;box-shadow:0 6px 20px rgba(0,0,0,.06)!important;height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;transition:transform .2s ease,box-shadow .2s ease!important}
      .team:hover{transform:translateY(-6px)!important;box-shadow:0 14px 32px rgba(0,0,0,.10)!important}

      .team .team-img{position:relative!important;top:auto!important;left:auto!important;transform:none!important;margin:0!important;width:100%!important;aspect-ratio:16/11!important}
      @supports not (aspect-ratio: 1/1){
          .team .team-img{height:220px!important}
      }
      .team .team-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

      .team .team-info{padding:18px 18px 20px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;flex:1 1 auto!important;text-align:center!important}

      .team .team-name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-weight:700!important;font-size:1.05rem!important;margin:0!important;text-decoration:none!important}

      .team .team-leader{margin:2px 0 8px!important;important;font-weight:600!important;font-size:.92rem!important;display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

      .team .team-info ul{margin-top:auto!important;display:flex!important;gap:10px!important;padding:0!important;justify-content:center!important}
      .team .team-info ul li{list-style:none!important}
      /* .team .team-info ul li a{width:38px!important;height:38px!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#f3f5f9!important;color:#1b224b!important;transition:background .2s ease,transform .2s ease,color .2s ease!important} */
      .team .team-info ul li a:hover{background:#2b6cb0!important;color:#fff!important;transform:translateY(-2px)!important}

      /* Grid spacing */
      .row .col-lg-4,.row .col-md-6,.row .col-sm-6{margin-bottom:24px!important}

      /* Make all columns equal height rows */
      .row{align-items:stretch!important}
    </style>

@endsection

@section('content')
    <!--=================================
    Banner -->
    <section class="banner position-ralative">
      <div id="main-slider" class="swiper-container h-800 h-lg-700 h-md-600 h-sm-400">
        <div class="swiper-wrapper">
          @isset($banners)
          <!-- Swiper Slider 1-->
            @foreach($banners as $banner)
              <div class="swiper-slide align-items-center d-flex bg-overlay-black-70" style="background-image: url(''); background-size: cover; background-position: center center;">
                <div class="swipeinner container">
                  <div class="row justify-content-center text-center">
                    <div class="col-lg-10 col-md-12">
                      <div class="slider-1">
                        <div class="animated" data-swiper-animation="fadeInUp" data-duration="1s" data-delay="0.25s">
                          <h1 class="animated text-white mb-4" data-swiper-animation="fadeInUp" data-duration="1.5s" data-delay="0.25s">{{ transField($banner, 'title'); }}</h1>
                          <div class="animated text-white px-lg-5" data-swiper-animation="fadeInUp" data-duration="2.5s" data-delay="0.25s">
                            <p class="d-none d-sm-block">{!! transField($banner, 'description') !!}</p>
                          </div>
                          <a href="{{ url('contact-us') }}" class="animated4 btn btn-white mt-4 mr-1 mr-sm-2" data-swiper-animation="fadeInUp" data-duration="3.5s" data-delay="0.25s">{{ __('Read More') }}<span></span></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          @endisset
        </div>
      </div>
     <!-- Pagination -->
      <div class="swiper-button-prev text-white"><i class="fa fa-arrow-left"></i></div>
      <div class="swiper-button-next text-white"><i class="fa fa-arrow-right"></i></div>
    </section>
    <!--=================================
    Banner -->

    <!--=================================
    Form -->
    <!-- <section class="mt-md-n5 mt-4 position-relative z-index-9">
      <div class="container">
        <form class="course-form border-radius">
          <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
              <div class="form-group mb-0">
                <label>Full Name</label>
                <input class="form-control" type="text" id="name" placeholder="Your Name">
                <i class="far fa-user"></i>
              </div>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
              <div class="form-group select-border mb-0">
                <label>Your Courses</label>
                <select class="form-control basic-select">
                  <option value="1" selected="selected">Please Choose</option>
                  <option value="2">Electrical Engineering</option>
                  <option value="3">Computer Science</option>
                  <option value="4">Biological Sciences</option>
                  <option value="4">Masters in Accounting</option>
                </select>
              </div>
            </div>
            <div class="col-md-4 align-self-center">
              <div class="course-serach">
                <a class="btn btn-dark btn-block mt-md-4" href="#">Search Course</a>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section> -->
    <!--=================================
    Form -->

    <!--=================================
    About -->
      @isset($schoolInfo)
        @php
          $longHtml     = $schoolInfo['long_desc'] ?? '';
          $longText     = trim(preg_replace('/\s+/', ' ', strip_tags($longHtml)));
          $needsToggle  = \Illuminate\Support\Str::length($longText) > 150;
          $shortText    = \Illuminate\Support\Str::limit($longText, 150, '…');
          $blockId      = 'about-readmore-'.\Illuminate\Support\Str::random(6);
        @endphp

        <section class="space-ptb">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-lg-6 mb-4 mb-lg-0 pr-xl-6">
                <div class="section-title mb-4">
                  <h2 class="title">{{ transField($schoolInfo, 'title') }}</h2>
                  <p class="lead mb-0">{!! transField($schoolInfo, 'desc') !!}</p>
                </div>
              </div>

              <div class="col-lg-6 pr-lg-5">
                <div class="row">
                  <div class="position-relative bg-overlay-black-50 border-radius overflow-hidden mt-4">
                    <img class="img-fluid border-radius" src="{{ $schoolInfo['image'] }}" alt="image">
                    @if(!empty($schoolInfo['link']))
                      <a class="btn-animation position-center popup-youtube" href="{{ $schoolInfo['link'] }}">
                        <i class="fas fa-play"></i>
                      </a>
                    @endif
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      @endisset

    <!--=================================
    About -->

    <!--=================================
    Counter -->
    @isset($counts)
    <section class="space-pb">
      <div class="container">
        <div class="row">