@extends('frontend.layouts.app')
@section('page_title')
{{--    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}--}}
@endsection
@push('head-scripts')

@endpush
@section('content')
    <!-- Slider Section Start  -->
    <div class="meeta-hero-section-3 d-flex align-items-center" style="background-image: url({{isset($heroBanner->image) ?  asset('storage/WebFront/HeroBanner/'.$heroBanner->image) : asset('frontend/assets/images/herobanner1.png')}});">
{{--    <div class="meeta-hero-section-3 d-flex align-items-center" style="background-image: url({{isset($heroBanner->image) ?  asset('storage/WebFront/HeroBanner/'.$heroBanner->image) : asset('frontend/assets/images/1845.png')}});">--}}
        <div class="container">
            <div class="row align-items-center">
                {{-- <div class="col-lg-6">
                    <!-- Countdown Start -->
                    <div class="meeta-countdown-wrap">
                        @if(date('Y-m-d') <= date('Y-m-d', strtotime($heroBanner->event_date )))
                            <div class="meeta-countdown-date">
                                <h3 class="number">{{isset($heroBanner->event_date) ?  date('d', strtotime($heroBanner->event_date)) : ''}}</h3>
                                <span>{{isset($heroBanner->event_date) ?  date('F', strtotime($heroBanner->event_date)) : ''}}</span>
                            </div>
                            <div class="meeta-countdown-3 countdown" data-countdown="{{isset($heroBanner->event_date) ?  date('Y/m/d', strtotime($heroBanner->event_date.' +1 day')) : "0000/00/00"}}" data-format="short">
                                <div class="single-countdown">
                                    <span class="count countdown__time daysLeft"></span>
                                    <span class="value countdown__time daysText"></span>
                                </div>
                                <div class="single-countdown countdown-2">
                                    <span class="count countdown__time hoursLeft"></span>
                                    <span class="value countdown__time hoursText"></span>
                                </div>
                                <div class="single-countdown countdown-3">
                                    <span class="count countdown__time minsLeft"></span>
                                    <span class="value countdown__time minsText"></span>
                                </div>
                                <div class="single-countdown countdown-4">
                                    <span class="count countdown__time secsLeft"></span>
                                    <span class="value countdown__time secsText"></span>
                                </div>
                            </div>
                        @else
                            <div class="meeta-registration-date mt-5">
                                <h3 class="number">Registration is closed</h3>
                            </div>
                        @endif
                    </div>
                    <!-- Countdown End -->
                </div> --}}
                <div class="col-lg-6">
                    <div class="meeta-hero-content">
                        <h3 class="text" data-aos-delay="700" data-aos="fade-up">11th Convocation of TUF & 10th Convocation of UMDC</h3>
                        <h2 class="title" data-aos-delay="800" data-aos="fade-up">CONVOCATION</h2>
                        <div class="hero-btn" data-aos-delay="900" data-aos="fade-up">
                            {{--                            @if(isset($webFront))--}}
                            <a class="btn-2" href="{{route('register')}}">Register Now</a>
                            {{--                            @endif--}}
                        </div>
                    </div>
                </div>
{{--                <div class="col-lg-6">--}}
{{--                    <div class="meeta-hero-content">--}}
{{--                        <h3 class="text" data-aos-delay="700" data-aos="fade-up">{{isset($heroBanner->event_address) ? $heroBanner->event_address : ''}}</h3>--}}
{{--                        <h2 class="title" data-aos-delay="800" data-aos="fade-up">{{isset($heroBanner->title) ? $heroBanner->title : ''}}</h2>--}}
{{--                        <div class="hero-btn" data-aos-delay="900" data-aos="fade-up">--}}
{{--                            @if(isset($webFront))--}}
{{--                                <a class="btn-2" href="{{route('register')}}">Register Now</a>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>
    <!-- Slider Section End -->

    <style>

    </style>
    <div class="card-timer ">
        <div class="container">
            <div class="meeta-hero-section-3 meeta-hero-section-timer py-5 ">
                <div class="row align-items-center justify-content-center">
                    <div class=" col-lg-6 mt-3">
                        <div class="card d-flex justify-content-center align-items-center" style="background: #AC3336">
                            <div class="card-title bg-light w-100 text-center">

                        <h1>TUF</h1>
                            </div>
                            <!-- Countdown Start -->
{{--                            <div class="meeta-countdown-wrap my-4">--}}
{{--                                @if(date('Y-m-d') <= date('Y-m-d', strtotime($heroBanner->event_date )))--}}
{{--                                    <div class="meeta-countdown-date">--}}
{{--                                        <h3 class="number">19</h3>--}}
{{--                                        <span>November</span>--}}
{{--                                    </div>--}}
{{--                                    <div class="meeta-countdown-3 countdown" data-countdown="November 19, 2023 11:00:00" data-format="short">--}}
{{--                                        <div class="single-countdown">--}}
{{--                                            <span class="count countdown__time daysLeft mb-2"></span>--}}
{{--                                            <span class="value countdown__time daysText"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="single-countdown countdown-2">--}}
{{--                                            <span class="count countdown__time hoursLeft mb-2"></span>--}}
{{--                                            <span class="value countdown__time hoursText"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="single-countdown countdown-3">--}}
{{--                                            <span class="count countdown__time minsLeft mb-2"></span>--}}
{{--                                            <span class="value countdown__time minsText"></span>--}}
{{--                                        </div>--}}
{{--                                        <div class="single-countdown countdown-4">--}}
{{--                                            <span class="count countdown__time secsLeft mb-2"></span>--}}
{{--                                            <span class="value countdown__time secsText"></span>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                @else--}}
{{--                                    <div class="meeta-registration-date mt-5">--}}
{{--                                        <h3 class="number">Registration is closed</h3>--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            </div>--}}
                            <div class="hero-btn mb-3 mt-3" data-aos-delay="900" data-aos="fade-up">
                                    <a class="btn-2" href="{{route('register')}}">Register Now</a>
                            </div>
                            <!-- Countdown End -->
                        </div>
                    </div>

                    {{-- <div class=" col-lg-6 mt-3">
                        <div class="card d-flex justify-content-center align-items-center" style="background: #AC3336">
                            <div class="card-title bg-light w-100 text-center">
                                <h1>UMDC</h1>
                            </div>
                            <!-- Countdown Start -->
                            <div class="meeta-countdown-wrap my-4">
                                @if(date('Y-m-d') <= date('Y-m-d', strtotime($heroBanner->event_date )))
                                    <div class="meeta-countdown-date">
                                        <h3 class="number">17</h3>
                                        <span>November</span>
                                    </div>
                                    <div class="meeta-countdown-3 countdown" data-countdown="2023/11/17" data-format="short">
                                        <div class="single-countdown">
                                            <span class="count countdown__time daysLeft mb-2"></span>
                                            <span class="value countdown__time daysText"></span>
                                        </div>
                                        <div class="single-countdown countdown-2">
                                            <span class="count countdown__time hoursLeft mb-2"></span>
                                            <span class="value countdown__time hoursText"></span>
                                        </div>
                                        <div class="single-countdown countdown-3">
                                            <span class="count countdown__time minsLeft mb-2"></span>
                                            <span class="value countdown__time minsText"></span>
                                        </div>
                                        <div class="single-countdown countdown-4">
                                            <span class="count countdown__time secsLeft mb-2"></span>
                                            <span class="value countdown__time secsText"></span>
                                        </div>
                                    </div>
                                @else
                                    <div class="meeta-registration-date mt-5">
                                        <h3 class="number">Registration is closed</h3>
                                    </div>
                                @endif
                            </div>

                            <div class="hero-btn mb-3" data-aos-delay="900" data-aos="fade-up">
                                <a class="btn-2" href="{{route('register')}}">Register Now</a>
                            </div>
                            <!-- Countdown End -->
                        </div>
                    </div> --}}
                    {{-- <div class="col-lg-6">
                        <div class="meeta-hero-content">
                            <h3 class="text" data-aos-delay="700" data-aos="fade-up">{{isset($heroBanner->event_address) ? $heroBanner->event_address : ''}}</h3>
                            <h2 class="title" data-aos-delay="800" data-aos="fade-up">{{isset($heroBanner->title) ? $heroBanner->title : ''}}</h2>
                            <div class="hero-btn" data-aos-delay="900" data-aos="fade-up">
                                @if(isset($webFront))
                                    <a class="btn-2" href="{{route('register')}}">Register Now</a>
                                @endif
                            </div>
                        </div>
                    </div> --}}

                    <div class="hero-btn my-4 text-center" data-aos-delay="900" data-aos="fade-up">
                        <a class="btn-2" href="{{asset('frontend/assets/images/convocation-candidate-registration.pdf')}}">Registration Guide</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- About Section Start -->
    <div class="meeta-about-section-3 section-padding">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-lg-6">

                    <!-- About Images Start -->
                    <div class="about-images-3-wrap">
                        <div class="shape-1">
                            <img src="{{asset('frontend/assets/images/shape/ab-shape-1.png')}}" alt="">
                        </div>

                        <div class="about-img-big">
                            <img src="{{asset('frontend/assets/images/image-left.png')}}" alt="">
{{--                            <img src="{{isset($introduction->image_left) ?  asset("storage/WebFront/Introduction/".$introduction->image_left) : asset('frontend/assets/images/402.png')}}" alt="">--}}
                            <div class="shape-2">
                                <img src="{{asset('frontend/assets/images/shape/ab-shape-2.png')}}" alt="">
                            </div>
                        </div>
                        <div class="about-img-small">
                            <div class="image-1">
                                <img src="{{asset('frontend/assets/images/image-right-top.png')}}" alt="">
{{--                                <img src="{{isset($introduction->image_right_top) ?  asset("storage/WebFront/Introduction/".$introduction->image_right_top) : asset('frontend/assets/images/272.png')}}" alt="">--}}
                            </div>
                            <div class="image-2">
                                <img src="{{asset('frontend/assets/images/image-right-bottom.png')}}" alt="">
{{--                                <img src="{{isset($introduction->image_right_bottom) ?  asset("storage/WebFront/Introduction/".$introduction->image_right_bottom) : asset('frontend/assets/images/272.png')}}" alt="">--}}
                            </div>
                        </div>
                    </div>
                    <!-- About Images End -->

                </div>
                <div class="col-lg-6">
                    <div class="about-content-3-wrap">
                        <!-- Section Title Start -->
                        <div class="meeta-section-title-2">
                            <h2 class="main-title">CONVOCATION 2024</h2>
{{--                            <h2 class="main-title">{{isset($introduction->title) ? $introduction->title : 'Lorem Ipsum'}}</h2>--}}
                        </div>
                        <!-- Section Title End -->

                        <!-- About Content Start -->
                        <div class="about-content-3">
{{--                            <p class="text">Grow, scrape their knees, try new things, to be vulnerable, and to have epic adventures together</p>--}}

                            <p>
                                Convocation is more than just a formal ceremony for the conferral of degrees, it’s the recognition of a longstanding tradition whereby the University community – students, faculty, staff and alumni – applaud your achievements. At TUF Convocation ceremonies, as you look forward to beginning the newest chapter in your journey, you will celebrate with your family, friends and class fellows those days and long nights of study and hard work and be welcomed as our newest alumni.
{{--                                {{isset($introduction->description) ? $introduction->description : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'}}--}}
                            </p>

                        </div>
                        <!-- About Content End -->
                    </div>

                </div>
            </div>

        </div>
    </div>
    <!-- About Section End -->

    <!-- Video Section Start -->
    <div class="meeta-video-section section-padding">
        <div class="container">
            <div class="meeta-video-wrap">
                <div class="row g-0">
                    <div class="col-lg-6">
                        <!-- Video Content Start -->
                        <div class="meeta-video-content">
                            <h3 class="main-title">Convocation Ceremony for TUF & UMDC</h3>
{{--                            <h3 class="main-title">{{isset($video->title) ? $video->title : 'Lorem Ipsum'}}</h3>--}}
                            <div class="video-info">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <p>
                                            Convocation is more than just a formal ceremony for the conferral of degrees, it’s the recognition of a longstanding tradition whereby the University community – students, faculty, staff and alumni – applaud your achievements. At TUF Convocation ceremonies, as you look forward to beginning the newest chapter in your journey, you will celebrate with your family, friends and class fellows those days and long nights of study and hard work and be welcomed as our newest alumni.
{{--                                            {{isset($video->description) ? $video->description : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'}}--}}
                                        </p>
{{--                                        <div class="video-info-item">--}}
{{--                                            <i class="far fa-clock"></i>--}}
{{--                                            <h4 class="title">When Will Start</h4>--}}
{{--                                            <p>Sunday to Wednesday July 23 to 26, 2022</p>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Video Content End -->
                    </div>
                    <div class="col-lg-6">
                        <!-- Video Image Start -->
                        <div class="meeta-video-img text-center" style="background-image: url({{asset('frontend/assets/images/thumbnail.png')}});">
{{--                        <div class="meeta-video-img text-center" style="background-image: url({{isset($video->thumbnail) ?  asset("storage/WebFront/Video/".$video->thumbnail) : asset('frontend/assets/images/652.png')}});">--}}
                            <a data-bs-toggle="modal" data-bs-target="#videoModal" class="popup-video" href=""><i class="fas fa-play"></i></a>
                        </div>
                        <!-- Video Image End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <iframe width="100%" height="500"
                        src="{{'https://www.youtube.com/embed/JnjepScXw9o?si=hx3GyahNd9ZjWRri'}}"
{{--                        src="{{isset($video->video_url) ? $video->video_url : 'https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk'}}"--}}
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <!-- Video Section End -->

    <!-- Topics Start -->
    <div class="meeta-topics-section section-padding">
        <div class="container">
            <div class="meeta-topics-wrap">
                <!-- Section Title Start -->
                <div class="meeta-section-title-2 section-title-3 text-center">
                    <h4 class="sub-title">GLIMPSES OF Tenth CONVOCATION OF TUF & Ninth CONVOCATION OF UMDC 20 November, 2023</h4>
{{--                    <h4 class="sub-title">{{isset($glimpsesTitle->description) ? $glimpsesTitle->description : ''}}</h4>--}}
                    <h2 class="main-title">GLIMPSES</h2>
{{--                    <h2 class="main-title">{{isset($glimpsesTitle->title) ? $glimpsesTitle->title : ''}}</h2>--}}
                </div>
                <!-- Section Title End -->
                <div class="meeta-topics-content-wrap meeta-topics-active slider-bullet">
                    <div class="swiper">
{{--                        <div class="swiper-wrapper">--}}
{{--                            @if(isset($glimpses) && !empty($glimpses))--}}
{{--                                @foreach($glimpses as $glimpse)--}}
{{--                                    <div class="swiper-slide">--}}
{{--                                        <!-- Topics Item Start -->--}}
{{--                                        <div class="topic-item">--}}
{{--                                            <div class="topic-img">--}}
{{--                                                <a href="#"><img src="{{ isset($glimpse->image) ?  asset("storage/WebFront/Glimpse/".$glimpse->image) : asset('frontend/assets/images/362.png')}}" alt=""></a>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <!-- Topics Item End -->--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}
{{--                            @endif--}}
{{--                        </div>--}}
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <!-- Topics Item Start -->
                                <div class="topic-item">
                                    <div class="topic-img">
                                        <a href="#"><img src="{{ asset('frontend/assets/images/glimpses1.png')}}" alt=""></a>
                                    </div>
                                </div>
                                <!-- Topics Item End -->
                            </div>
                            <div class="swiper-slide">
                                <!-- Topics Item Start -->
                                <div class="topic-item">
                                    <div class="topic-img">
                                        <a href="#"><img src="{{ asset('frontend/assets/images/glimpses2.png')}}" alt=""></a>
                                    </div>
                                </div>
                                <!-- Topics Item End -->
                            </div>
                            <div class="swiper-slide">
                                <!-- Topics Item Start -->
                                <div class="topic-item">
                                    <div class="topic-img">
                                        <a href="#"><img src="{{ asset('frontend/assets/images/glimpses3.png')}}" alt=""></a>
                                    </div>
                                </div>
                                <!-- Topics Item End -->
                            </div>
                            <div class="swiper-slide">
                                <!-- Topics Item Start -->
                                <div class="topic-item">
                                    <div class="topic-img">
                                        <a href="#"><img src="{{ asset('frontend/assets/images/glimpses4.png')}}" alt=""></a>
                                    </div>
                                </div>
                                <!-- Topics Item End -->
                            </div>
                            <div class="swiper-slide">
                                <!-- Topics Item Start -->
                                <div class="topic-item">
                                    <div class="topic-img">
                                        <a href="#"><img src="{{ asset('frontend/assets/images/glimpses5.png')}}" alt=""></a>
                                    </div>
                                </div>
                                <!-- Topics Item End -->
                            </div>
                            <div class="swiper-slide">
                                <!-- Topics Item Start -->
                                <div class="topic-item">
                                    <div class="topic-img">
                                        <a href="#"><img src="{{ asset('frontend/assets/images/glimpses6.png')}}" alt=""></a>
                                    </div>
                                </div>
                                <!-- Topics Item End -->
                            </div>
                        </div>

                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Topics End -->

    <!-- Contact Info Start -->
    <div class="section contact-info-section">
        <div class="container">
            <!-- Contact Info Wrap Start -->
            <div class="contact-info-wrap">
                <div class="row">
                    <div class="col-lg-4 col-sm-6 card">
                        <!--Single Contact Info Start -->
                        <div class="single-contact-info text-center h-100">
                            <div class="info-icon color-2">
                                <i class="flaticon-phone-call"></i>
                            </div>
                            <div class="info-content">
                                <h5 class="title">Telephone</h5>
                                <p>+92 330 198 0603</p>
{{--                                <p>{{isset($contactUs->contact_us) ? $contactUs->contact_us : ''}}</p>--}}
                            </div>
                        </div>
                        <!--Single Contact Info End -->
                    </div>
                    <div class="col-lg-4 col-sm-6 card">
                        <!--Single Contact Info Start -->
                        <div class="single-contact-info text-center h-100">
                            <div class="info-icon color-1">
                                <i class="flaticon-email"></i>
                            </div>
                            <div class="info-content">
                                <h5 class="title">Drop Your Mail</h5>
                                <p>dcexam@tuf.edu.pk</p>
{{--                                <p>{{isset($contactUs->email) ? $contactUs->email : ''}}</p>--}}
                            </div>
                        </div>
                        <!--Single Contact Info End -->
                    </div>
                    <div class="col-lg-4 col-sm-6 card">
                        <!--Single Contact Info Start -->
                        <div class="single-contact-info text-center h-100">
                            <div class="info-icon color-3">
                                <i class="flaticon-pin"></i>
                            </div>
                            <div class="info-content">
                                <h5 class="title">Location</h5>
                                <p>Sargodha Road, University Town Faisalabad.</p>
{{--                                <p>{{isset($contactUs->location) ? $contactUs->location : ''}}</p>--}}
                            </div>
                        </div>
                        <!--Single Contact Info End -->
                    </div>
                </div>
            </div>
            <!-- Contact Info Wrap End -->
        </div>
    </div>
    <!-- Contact Info End -->

    <!-- Contact Map Start -->
    <div class="section contact-map-section">
        <div class="contact-map-wrap">
            <iframe
                src="https://maps.google.com/maps?q=31.496122670412134, 73.07369155396852&hl=es;z=14&amp;output=embed"
{{--                src="https://maps.google.com/maps?q={{isset($contactUs->lang_long) ? $contactUs->lang_long : ''}}&hl=es;z=14&amp;output=embed"--}}
                width="100%" height="450" frameborder="0"></iframe>
        </div>
    </div>
    <!-- Contact Map End -->

    <!-- back to top start -->
    <div class="progress-wrap">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
    <!-- back to top end -->

@endsection
@push('footer-scripts')

@endpush