@section('title', 'Campus Facilities In GIU | GIU Facilities Infrastructure | GIU')
@section('description', 'Green International University has established state-of-the-art facilities with fully developed infrastructure and fully equipped labs for students. Enroll now.')
@section('keywords', 'Campus Facilities In GIU, GIU Facilities and Services, GIU Facilities Infrastructure, Auditorium of GIU, Library of The University OF Faisalabad, Classrooms of GIU, IT Facilities, Conference Room, Labs In GIU')

@extends('front.layouts.app')
@section('content')

<div class="campus-facilities-wraper">
  <div class="container-fluid campus-facilities-head">
      <div class="banner mx-sm-5">
          <div>
              <div class="row">
                  <div class="col-xl-6 col-lg-12 col-12">
                      <nav class="space-top" style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
                          <ol class="breadcrumb">
                          <li class="breadcrumb-item color-white"><a href="#" class="text-dark">Home</a></li>
                          <li class="breadcrumb-item color-white"><a href="#" class="text-dark">About GIU</a></li>
                          <li class="breadcrumb-item color-white"><a href="#" class="text-dark">Campus Facilities</a></li>
                          </ol>
                      </nav>
                      <p class="p1">CAMPUS FACILITIES</p>
                      <h1>SEE FOR <span class="dark-green">YOURSELF</span> </h1>
                      <p class="p2">Your safe-haven to experience a <br> life-changing education</p>
                      <p class="p3">We're the fastest-growing University in the state in a region that's growing just as fast. Don't get left behind!</p>
                      <a href="https://admission.giu.edu.pk/login">
                          <button class="btn btn-success mb-3 apply">Apply Now <i class="fas fa-arrow-right text-white"></i></button>
                      </a>
                  </div>
                  <div class="col-xl-6 col-lg-12 my-4 apply-now col-12">
                      <img src="{{asset('front/images/new-giu/campus-facilities/banner.JPG')}}" alt="">
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="container-fluid campus-facilities-body">
      <h1 class="mt-3 mx-sm-5">CAMPUS FACILITIES</h1>
      <div class="row mx-sm-3">
        @foreach ($CampFac as $fac)
          <div class="col-xl-3 col-lg-4 col-md-6 p-3">
            <a href="" data-bs-toggle="modal" data-bs-target="#D-{{$fac->id}}">
                <div class="box-shadow">
                    <div class="thumb">
                        <img src="{{URL('/')}}/front/images/new-giu/campus-facilities/{{$fac->img}}" alt="">
                    </div>
                    <div>
                        <p class="ps-3 py-3">{{$fac->name}}</p>
                    </div>
                </div>
            </a>
          </div>
        @endforeach
      </div>  
  </div>
</div>
{{-- Model --}}
<!-- Modal -->
@foreach ($CampFac as $fac)
  <div class="modal fade" id="D-{{$fac->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body pop-up-content" style="padding: 0px"> 
            <div class="slider">
              <div class="">
                <div class="gallery-slider">
                  <div class="owl-carousel" data-slider-id="1">
                      @if ($fac->gallery != "")
                          @foreach(explode(',', $fac->gallery) as $info)
                              <div class="sv-slider-item">
                                  <img src="{{ asset('front/images/new-giu/campus-facilities/gallery')}}/{{$info}}" alt="">
                              </div>       
                          @endforeach
                      @endif
                  </div>
                  <div class="row m-2">
                    @foreach(explode(',', $fac->gallery) as $info)
                      <div class="col-md-3 col-6">
                        <img class="demo cursor" src="{{ asset('front/images/new-giu/campus-facilities/gallery')}}/{{$info}}" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="The Woods">
                      </div>   
                    @endforeach
                  </div>
                </div> 
              </div>   
            </div>
            <h1 class="ps-3 pt-3">{{$fac->name}}</h1>
            <p class="ps-3 pt-2">{{$fac->description}}</p>
        </div>
      </div>
    </div>
  </div>
@endforeach
@endsection
@push('js')
<script src="{{asset('assets/js/owl-carousel-thumbs.js')}}"></script>
    <script>
        $('.gallery-slider .owl-carousel').owlCarousel({
            autoplay: true,
            autoplayHoverPause: true,
            dots: false,
            nav: true,
            thumbs: true,
            thumbImage: true,
            thumbsPrerendered: true,
            thumbContainerClass: 'owl-thumbs',
            thumbItemClass: 'owl-thumb-item',
            loop: true,
            navText: [
                "<i class='fa fa-chevron-left' aria-hidden='true'></i>",
                "<i class='fa fa-chevron-right' aria-hidden='true'></i>"
            ],
            items: 1,
            responsive: {
                0: {
                    items: 1,
                },
                768: {
                    items: 1,
                },
                992: {
                    items: 1,
                }
            }
        });

    </script>
@endpush