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

@endpush
@section('content')
    <style>
        .oval-background h3{
            background-color: #007bff; /* Change this to your desired color */
            color: white; /* Text color */
            border-radius: 30px; /* Oval shape */
            padding: 10px 20px; /* Padding for spacing */
            text-align: center; /* Center the text */
            display: inline-block; /* Makes the background fit the text */
        }



        .owl-carousel .item img {
            max-width: 100%;         /* Ensures images are responsive */
            height: auto;            /* Maintains aspect ratio */
            max-height: 100%;        /* Restricts image height */
        }


    </style>
    <!-- popup 1 -->
{{--    <div class="modal fade" id="popup-modal-1" aria-labelledby="exampleModalLabel" aria-hidden="true">--}}
{{--        <div class="modal-dialog modal-lg modal-aspect">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header" style="background: #D8D8D8">--}}
{{--                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--}}
{{--                </div>--}}
{{--                <div class="modal-body" style="padding: 0px">--}}
{{--                    <div id="carouselExampleSlidesOnly" class="carousel Model_slide" data-ride="carousel">--}}
{{--                        <div class="carousel-inner">--}}
{{--                            <div class="w-100">--}}
{{--                                --}}{{--                        <a href="https://tuf.edu.pk/cm-honhaar-scholarship/">--}}
{{--                                <img src="{{asset('/frontn/convocationUpdatePopUp.jpeg')}}"--}}
{{--                                     class="d-block w-100 h-100 img-responsive">--}}
{{--                                --}}{{--                        </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <main class="main">

        <div class="hero-section">
            <div class="hero-scroll-box">
                <div class="hero-scroll">
                    <div class="scroller"></div>
                </div>
            </div>
            <div class="hero-slider owl-carousel owl-theme">
                <div class="hero-single"
                     style="background-image: url({{isset($heroBanner->image) ?  asset('storage/WebFront/HeroBanner/'.$heroBanner->image) : asset('frontn/img/ban2.jpg')}});">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-7 mx-auto">
                                <div class="hero-content text-center">
                                    <h1 class="hero-title" data-animation="fadeInRight" data-delay=".50s">
                                        <span>Convocation</span> 2025
                                    </h1>
                                    <div class="hero-date" data-animation="fadeInDown" data-delay=".25s">
                                        {{--                                        <h1>25</h1>--}}
                                        <div class="date-content">
{{--                                            <span>November 2024</span>--}}
                                            <p>12th Convocation of TUF</p>

                                            <p>11th Convocation of UMDC</p>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="hero-single"
                     style="background-image: url({{isset($heroBanner->image) ?  asset('storage/WebFront/HeroBanner/'.$heroBanner->image) : asset('frontn/img/ban3.jpg')}});">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-7 mx-auto">
                                <div class="hero-content text-center">
                                    <h1 class="hero-title" data-animation="fadeInRight" data-delay=".50s">
                                        <span>Convocation</span> 2025
                                    </h1>
                                    <div class="hero-date" data-animation="fadeInDown" data-delay=".25s">
                                        {{--                                        <h1>25</h1>--}}
                                        <div class="date-content">
                                            {{--                                            <span>November 2024</span>--}}
                                            <p>12th Convocation of TUF</p>

                                            <p>11th Convocation of UMDC</p>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hero-single"
                     style="background-image: url({{isset($heroBanner->image) ?  asset('storage/WebFront/HeroBanner/'.$heroBanner->image) : asset('frontn/img/ban.jpg')}});">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-7 mx-auto">
                                <div class="hero-content text-center">
                                    <h1 class="hero-title" data-animation="fadeInRight" data-delay=".50s">
                                        <span>Convocation</span> 2025
                                    </h1>
                                    <div class="hero-date" data-animation="fadeInDown" data-delay=".25s">
                                        {{--                                        <h1>25</h1>--}}
                                        <div class="date-content">
                                            {{--                                            <span>November 2024</span>--}}
                                            <p>12th Convocation of TUF</p>

                                            <p>11th Convocation of UMDC</p>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="schedule-area2 bg py-90">
            <div class="container">
                <div class="row">
                    {{--                    <div class="col-lg-12">--}}
                    {{--                        <div class="site-heading text-center wow fadeInDown" data-wow-delay=".25s">--}}
                    {{--                            <span class="site-title-tagline">Event Schedule</span>--}}
                    {{--                            <h2 class="site-title">Our Events <span>Schedule</span> Plan</h2>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                </div>


                <div class="tab-content wow fadeInUp" data-wow-delay=".25s" id="pills-tabContent-schedule">

                    <div class="tab-pane fade show active" id="pills-schedule1" role="tabpanel"
                         aria-labelledby="pills-schedule-tab1" tabindex="0">
                        <div class="row g-4">

                            @if(isset($convocation_details) && $convocation_details->isNotEmpty())
                                <div class="hero-btn d-flex justify-content-end " data-animation="fadeInUp"
                                     data-delay="1s">

                                    <a href="{{asset('frontn/img/guidelines.pdf')}}"
                                       class="theme-btn theme-btn2">Registration Guide<i
                                            class="fas fa-arrow-right"></i></a>
                                </div>
                                @foreach($convocation_details as $convo)
                                    <div class="col-lg-12">
                                        <div class="schedule-item">
                                <span class="schedule-count">
                               {{ date('j', strtotime($convo->event_date)) }} <span> {{ date('M', strtotime($convo->event_date)) }}</span>
                              </span>
                                            <div class="schedule-content-wrap">
                                                <div class="schedule-content">
                                                    <div class="schedule-info">

                                                        <h1 class="" style="color: #FC226AFF">
                                                            <a>{{$convo->convocationSession->title}}</a></h1>

                                                        <div class="event-countdown ec-2 pt-10 pb-10">
                                                            <div class="container">
                                                                <div class="row align-items-center">
                                                                    <div class="">
                                                                        <div class="event-countdown-wrap">
                                                                            <div data-countdown="{{$convo->event_date}}"
                                                                                 class="event-countdown"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="schedule-bottom">
                                                    <a href="{{route('register')}}" class="theme-btn">Register Now<i
                                                            class="fas fa-arrow-right"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-lg-12">
                                    <div class="schedule-item">
                                <span class="schedule-count">
                               <span> </span>
                              </span>
                                        <div class="schedule-content-wrap">

                                            <div class="schedule-content">
                                                <div class="schedule-info">

                                                    <h2 class="hero-title text-center " data-animation="fadeInRight" data-delay=".50s">
                                                        REGISTRATION IS
                                                    </h2>
                                                    <h2 class="hero-title text-center"   data-animation="fadeInRight" data-delay=".50s">
                                                       NOW <span style="color: #fc226a">CLOSED </span><span style="color: #01054c">! </span>
                                                    </h2>
                                                    <div class="oval-background d-flex justify-content-center">
                                                      <h3>Thanks for your amazing responses</h3>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @endif


                        </div>
                    </div>
                </div>
            </div>
            <div class="counter-area mt-5 pt-80 pb-80">
                <div class="container">
                    <div class="row g-4 align-items-center">
                        <div class="col-lg-5">
                            <div class="counter-info">
                                <div class="site-heading mb-3">
{{--                                    <span class="site-title-tagline text-white">Fun Fact</span>--}}
                                    <h2 class="site-title text-white">
                                        We inspire people to be creative enough.
                                    </h2>
                                </div>
{{--                                <p class="text-white">There are many variations of passages the majority have suffered--}}
{{--                                    alteration--}}
{{--                                    in some form slightly believable. If you are going to use a passage of need to be--}}
{{--                                    sure.</p>--}}
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="row g-4 justify-content-center">
                                <div class="col-md-6">
                                    <div class="counter-box wow fadeInUp" data-wow-delay=".25s">
                                        <div class="icon">
                                            <img src="{{asset('frontn/img/icon/workshop.svg')}}" alt>
                                        </div>
                                        <div class="counter-content">
                                            <div class="counter-info">
                                                <span class="counter" data-count="+" data-to="1000"
                                                      data-speed="3000">1000+</span>
                                                <span class="counter-unit">+</span>
                                            </div>
                                            <h6 class="title">Research Work</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="counter-box wow fadeInDown" data-wow-delay=".25s">
                                        <div class="icon">
                                            <img src="{{asset('frontn/img/icon/participant.svg')}}" alt>
                                        </div>
                                        <div class="counter-content">
                                            <div class="counter-info">
                                                <span class="counter" data-count="+" data-to="435"
                                                      data-speed="3000">435</span>
                                                <span class="counter-unit">+</span>
                                            </div>
                                            <h6 class="title">Faculty Members</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="counter-box wow fadeInUp" data-wow-delay=".25s">
                                        <div class="icon">
                                            <img src="{{asset('frontn/img/icon/speaker-2.svg')}}" alt>
                                        </div>
                                        <div class="counter-content">
                                            <div class="counter-info">
                                                <span class="counter" data-count="+" data-to="9000"
                                                      data-speed="3000">9000</span>
                                                <span class="counter-unit">+</span>
                                            </div>
                                            <h6 class="title">Enrolled Students</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="counter-box wow fadeInDown" data-wow-delay=".25s">
                                        <div class="icon">
                                            <img src="{{asset('frontn/img/icon/speaker-2.svg')}}" alt>
                                        </div>
                                        <div class="counter-content">
                                            <div class="counter-info">
                                                <span class="counter" data-count="+" data-to="25"
                                                      data-speed="3000">25</span>
                                                <span class="counter-unit">+</span>
                                            </div>
                                            <h6 class="title">Departments</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="about-area py-120">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="about-left wow fadeInRight" data-wow-delay=".25s">
                                <div class="about-img">
                                    <img class="img-1" src="{{asset('/frontn/img/about/asset1.jpg')}}" alt>
                                    <img class="img-2" src="{{asset('/frontn/img/circles/asset5.png')}}" alt>
                                    <img class="img-3" src="{{asset('/frontn/img/circles/asset6.png')}}" alt>
                                </div>
                                <div class="about-experience">
                                    <span>23</span>
                                    <h5>Years Of <br> Experience</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="about-right wow fadeInLeft" data-wow-delay=".25s">
                                <div class="site-heading mb-3">

                                    <h2 class="site-title">
                                        CONVOCATION <span>2025</span>
                                    </h2>
{{--                                    <div class="site-shadow-text wow fadeInRight" data-wow-delay=".35s">Convocation--}}
                                    </div>
                                </div>
                                <p class="about-text">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.</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="partner-area partner-bg py-80">
                <div class="container">
{{--                    <div class="row">--}}
{{--                        <div class="col-lg-12">--}}
{{--                            <div class="site-heading text-center wow fadeInDown" data-wow-delay=".25s">--}}
{{--                                <span class="site-title-tagline">Sponsors</span>--}}
{{--                                <h2 class="site-title">Let's Check Our <span>Sponsors</span></h2>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="partner-wrapper wow fadeInUp" data-wow-delay=".25s">
                        <div class="owl-carousel owl-theme">




                            <div class="item px-1">

                                <img src="{{asset('frontn/img/sponsors/ranking1.png')}}" alt="thumb">
                            </div>


                            <div class="item px-1">

                                <img src="{{asset('frontn/img/sponsors/ranking2.png')}}" alt="thumb">
                            </div>


                            <div class="item px-1">

                                <img src="{{asset('frontn/img/sponsors/ranking3.png')}}" alt="thumb">
                            </div>


                            <div class="item px-1 ">

                                <img src="{{asset('frontn/img/sponsors/ranking4.png')}}" alt="thumb">
                            </div>


                            <div class="item px-1">

                                <img src="{{asset('frontn/img/sponsors/ranking5.png')}}" alt="thumb">
                            </div>


                             <div class="item">
                                 <img src="{{asset('frontn/img/sponsors/ranking6.png')}}" alt="thumb">
                             </div>
                        </div>
                    </div>

                </div>
            </div>



            <div class="gallery-area py-120">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="site-heading text-center wow fadeInDown" data-wow-delay=".25s">
                                {{--                                <span class="site-title-tagline">Gallery</span>--}}
                                <h2 class="site-title"><span>Glimpse</span></h2>
                                <div class="site-shadow-text wow fadeInRight" data-wow-delay=".35s">Our Glimpse</div>
                            </div>
                        </div>
                    </div>


                    @if($glimpse->isEmpty())

                    @else
                    <div class="row g-4 popup-gallery">
                        <div class="col-md-12">
                            <div class="row g-4">
                                <div class="col-4">
                                    <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                        <div class="gallery-img">
                                            <img src="{{asset('storage/Glimpse/images/'.$image1)}}" alt>
                                            <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$image1)}}"><i
                                                    class="fal fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                        <div class="gallery-img">
                                            <img src="{{asset('storage/Glimpse/images/'.$image2)}}" alt>
                                            <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$image2)}}"><i
                                                    class="fal fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                        <div class="gallery-img">
                                            <img src="{{asset('storage/Glimpse/images/'.$image3)}}" alt>
                                            <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$image3)}}"><i
                                                    class="fal fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                        <div class="gallery-img">
                                            <img src="{{asset('storage/Glimpse/images/'.$image4)}}" alt>
                                            <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$image4)}}"><i
                                                    class="fal fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                        <div class="gallery-img">
                                            <img src="{{asset('storage/Glimpse/images/'.$image5)}}" alt>
                                            <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$image5)}}"><i
                                                    class="fal fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                        <div class="gallery-img">
                                            <img src="{{asset('storage/Glimpse/images/'.$image6)}}" alt>
                                            <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$image6)}}"><i
                                                    class="fal fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="mt-3 text-center">
                        <a href="{{route('more-glimpse')}}" class="theme-btn">More<i class="fas fa-arrow-right"></i></a>
                    </div>
                    @endif
                </div>
            </div>
        </div>

    </main>

@endsection
@push('footer-scripts')


    <script>
        $(document).ready(function(){
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    800: {
                        items: 3
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 4
                    }
                }
            });
        });

        // $(document).ready(function () {
        //     $("#popup-modal-1").modal('show');
        // });
    </script>



@endpush