@extends('layouts.app')

@section('title', $siteContext->name)

@section('content')
    <!-- hero slider -->
    <div class="hero-section">
        <div class="hero-slider owl-carousel owl-theme">
            @php
                $sliders = [
                    ['img' => asset('wp-content/uploads/2026/04/a.jpg'), 'title' => 'Striving for <span>Academic Glory</span> & Synonymous to Excellence'],
                    ['img' => asset('wp-content/uploads/2026/04/gg.jpg'), 'title' => 'Education for <span>Discipline</span> and Outstanding Achievement'],
                    ['img' => asset('wp-content/uploads/2026/04/4-scaled.jpg'), 'title' => 'Empowering <span>Generations</span> Since 2043 B.S.'],
                ];
            @endphp
            @foreach($sliders as $slider)
                <div class="hero-single" style="background: url('{{ $slider['img'] }}')">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-12 col-lg-7">
                                <div class="hero-content">
                                    <h6 class="hero-sub-title" data-animation="fadeInDown" data-delay=".25s">
                                        <i class="far fa-book-open-reader"></i>{{ $siteContext->name }}
                                    </h6>
                                    <h1 class="hero-title" data-animation="fadeInRight" data-delay=".50s">
                                        {!! $slider['title'] !!}
                                    </h1>
                                    <p data-animation="fadeInLeft" data-delay=".75s">
                                        {{ $siteContext->metaDescription }}
                                    </p>
                                    <div class="hero-btn" data-animation="fadeInUp" data-delay="1s">
                                        <a href="{{ route('about') }}" class="theme-btn">About More<i class="fas fa-arrow-right-long"></i></a>
                                        <a href="{{ route('contact') }}" class="theme-btn theme-btn2">Contact Us<i class="fas fa-arrow-right-long"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <!-- hero slider end -->

    <!-- feature area -->
    <div class="feature-area fa-negative">
        <div class="col-xl-9 ms-auto">
            <div class="feature-wrapper">
                <div class="row g-4">
                    <div class="col-md-6 col-lg-3">
                        <div class="feature-item">
                            <span class="count">01</span>
                            <div class="feature-icon">
                                <img src="{{ asset('assets/img/icon/scholarship.svg') }}" alt="">
                            </div>
                            <div class="feature-content">
                                <h4 class="feature-title">Scholarship Facility</h4>
                                <p>Generous scholarships for meritorious, talented, and needy students.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="feature-item">
                            <span class="count">02</span>
                            <div class="feature-icon">
                                <img src="{{ asset('assets/img/icon/teacher.svg') }}" alt="">
                            </div>
                            <div class="feature-content">
                                <h4 class="feature-title">Skilled Lecturers</h4>
                                <p>Experienced and highly qualified faculty members providing personal care.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="feature-item">
                            <span class="count">03</span>
                            <div class="feature-icon">
                                <img src="{{ asset('assets/img/icon/library.svg') }}" alt="">
                            </div>
                            <div class="feature-content">
                                <h4 class="feature-title">Book Library Facility</h4>
                                <p>Well-stocked resources with study spaces and e-learning access.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="feature-item">
                            <span class="count">04</span>
                            <div class="feature-icon">
                                <img src="{{ asset('assets/img/icon/money.svg') }}" alt="">
                            </div>
                            <div class="feature-content">
                                <h4 class="feature-title">Affordable Price</h4>
                                <p>Quality education delivered with transparent and affordable fees.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- feature area end -->

    <!-- about area -->
    <div class="about-area py-120">
        <div class="container">
            <div class="row g-4 align-items-center">
                <div class="col-lg-6">
                    <div class="about-left wow fadeInLeft" data-wow-delay=".25s">
                        <div class="about-img">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <img class="img-1" src="{{ asset('wp-content/uploads/2026/04/2.jpg') }}" alt="">
                                    <div class="about-experience mt-4">
                                        <div class="about-experience-icon">
                                            <img src="{{ asset('assets/img/icon/exchange-idea.svg') }}" alt="">
                                        </div>
                                        <b class="text-start">30 Years Of <br> Quality Service</b>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <img class="img-2" src="{{ asset('wp-content/uploads/2021/06/Hotel_management.jpg') }}" alt="">
                                    <img class="img-3 mt-4" src="{{ asset('wp-content/uploads/2021/06/Sciencelab9.jpg') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-right wow fadeInRight" data-wow-delay=".25s">
                        <div class="site-heading mb-3">
                            <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> About Our {{ $siteContext->isSchool() ? 'School' : 'College' }}</span>
                            <h2 class="site-title">
                                {{ $siteContext->name }} <span>Inspires</span> You More.
                            </h2>
                        </div>
                        <p class="about-text">
                            We believe in holistic student development, where academics meet practical knowledge, critical thinking, and character building. Our experienced faculty and high-quality infrastructures ensure students are fully prepared to meet global challenges.
                        </p>
                        <div class="about-content">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="about-item">
                                        <div class="about-item-icon">
                                            <img src="{{ asset('assets/img/icon/open-book.svg') }}" alt="">
                                        </div>
                                        <div class="about-item-content">
                                            <h5>Education Services</h5>
                                            <p>Tailored curriculum promoting deep subject knowledge.</p>
                                        </div>
                                    </div>
                                    <div class="about-item">
                                        <div class="about-item-icon">
                                            <img src="{{ asset('assets/img/icon/global-education.svg') }}" alt="">
                                        </div>
                                        <div class="about-item-content">
                                            <h5>International Hubs</h5>
                                            <p>Preparing students for globally competitive paths.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="about-quote">
                                        <p>Our commitment is to guide each individual student toward academic success and social responsibility.</p>
                                        <i class="far fa-quote-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="about-bottom">
                            <a href="{{ route('about') }}" class="theme-btn">Discover More<i class="fas fa-arrow-right-long"></i></a>
                            <div class="about-phone">
                                <div class="icon"><i class="fal fa-headset"></i></div>
                                <div class="number">
                                    <span>Call Now</span>
                                    <h6><a href="tel:{{ $siteContext->phone }}">{{ $siteContext->phone }}</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- about area end -->

    <!-- counter area -->
    <div class="counter-area pt-60 pb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="counter-box">
                        <div class="icon">
                            <img src="{{ asset('assets/img/icon/course.svg') }}" alt="">
                        </div>
                        <div>
                            <span class="counter" data-count="+" data-to="20" data-speed="3000">20</span>
                            <h6 class="title">+ Programs </h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="counter-box">
                        <div class="icon">
                            <img src="{{ asset('assets/img/icon/graduation.svg') }}" alt="">
                        </div>
                        <div>
                            <span class="counter" data-count="+" data-to="1500" data-speed="3000">1500</span>
                            <h6 class="title">+ Our Students</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="counter-box">
                        <div class="icon">
                            <img src="{{ asset('assets/img/icon/teacher-2.svg') }}" alt="">
                        </div>
                        <div>
                            <span class="counter" data-count="+" data-to="50" data-speed="3000">50</span>
                            <h6 class="title">+ Skilled Lecturers</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="counter-box">
                        <div class="icon">
                            <img src="{{ asset('assets/img/icon/award.svg') }}" alt="">
                        </div>
                        <div>
                            <span class="counter" data-count="+" data-to="15" data-speed="3000">15</span>
                            <h6 class="title">+ Excellence Years</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- counter area end -->

    <!-- academics section / courses -->
    <div class="course-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Our Programs</span>
                        <h2 class="site-title">Let's Check Our <span>Programs</span></h2>
                        <p>Explore our carefully designed programs and curriculum that align with academic standards and cater to diverse interests.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($programs as $program)
                    <div class="col-md-6 col-lg-4">
                        <div class="course-item wow fadeInUp" data-wow-delay=".25s">
                            <div class="course-img">
                                <span class="course-tag"><i class="far fa-bookmark"></i> Academics</span>
                                @if($program->image)
                                    <img src="{{ asset('storage/' . $program->image) }}" alt="{{ $program->name }}">
                                @else
                                    <img src="{{ asset('assets/img/course/01.jpg') }}" alt="{{ $program->name }}">
                                @endif
                                <a href="{{ route('academics.show', $program->slug) }}" class="btn"><i class="far fa-link"></i></a>
                            </div>
                            <div class="course-content">
                                <div class="course-meta">
                                    <span class="course-meta-left"><i class="far fa-clock"></i> {{ $program->duration }}</span>
                                </div>
                                <h4 class="course-title">
                                    <a href="{{ route('academics.show', $program->slug) }}">{{ $program->name }}</a>
                                </h4>
                                <p class="course-text">
                                    {{ Str::limit($program->description, 100) }}
                                </p>
                                <div class="course-bottom">
                                    <a href="{{ route('academics.show', $program->slug) }}" class="theme-btn">Learn More<i class="fas fa-arrow-right-long"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted">
                        <p>No programs published yet.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    <!-- academics section end -->

    <!-- choose-area -->
    <div class="choose-area pt-80 pb-80">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="choose-content wow fadeInUp" data-wow-delay=".25s">
                        <div class="choose-content-info">
                            <div class="site-heading mb-0">
                                <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Why Choose Us</span>
                                <h2 class="site-title text-white mb-10">We Are Expert & <span>Do Our Best</span> For Your Goal</h2>
                                <p class="text-white">
                                    Our school & college environments are structured to provide holistic growth, modern technical knowledge, academic focus, and individual attention.
                                </p>
                            </div>
                            <div class="choose-content-wrap">
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <div class="choose-item">
                                            <div class="choose-item-icon">
                                                <img src="{{ asset('assets/img/icon/teacher-2.svg') }}" alt="">
                                            </div>
                                            <div class="choose-item-info">
                                                <h4>Expert Teachers</h4>
                                                <p>Guiding students with interactive smart pedagogy.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="choose-item">
                                            <div class="choose-item-icon">
                                                <img src="{{ asset('assets/img/icon/course-material.svg') }}" alt="">
                                            </div>
                                            <div class="choose-item-info">
                                                <h4>Quality Material</h4>
                                                <p>Comprehensive text and digital references.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="choose-item">
                                            <div class="choose-item-icon">
                                                <img src="{{ asset('assets/img/icon/online-course.svg') }}" alt="">
                                            </div>
                                            <div class="choose-item-info">
                                                <h4>E-Learning Portal</h4>
                                                <p>Extended homework, notes, and study guides.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="choose-item">
                                            <div class="choose-item-icon">
                                                <img src="{{ asset('assets/img/icon/money.svg') }}" alt="">
                                            </div>
                                            <div class="choose-item-info">
                                                <h4>Affordable Fees</h4>
                                                <p>Reasonable payment structures and terms.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="choose-img wow fadeInRight" data-wow-delay=".25s">
                        <img src="{{ asset('wp-content/uploads/2021/06/PRATIVASS-24-scaled.jpg') }}" alt="Prativa School Campus">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- choose-area end -->

    <!-- teacher/team-area -->
    <div class="team-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Our Faculty</span>
                        <h2 class="site-title">Meet Our Academic <span>Staff</span></h2>
                        <p>Dedicated professionals committed to nurturing curiosity and excellence in every student.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($teachers as $teacher)
                    <div class="col-md-6 col-lg-3">
                        <div class="team-item wow fadeInUp" data-wow-delay=".25s">
                            <div class="team-img">
                                @if($teacher->image)
                                    <img src="{{ asset('storage/' . $teacher->image) }}" alt="{{ $teacher->name }}">
                                @else
                                    <img src="{{ asset('assets/img/team/01.jpg') }}" alt="{{ $teacher->name }}">
                                @endif
                            </div>
                            <div class="team-social">
                                @if($siteContext->social('facebook'))
                                    <a href="{{ $siteContext->social('facebook') }}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                @endif
                            </div>
                            <div class="team-content">
                                <div class="team-bio">
                                    <h5><a href="#">{{ $teacher->name }}</a></h5>
                                    <span>{{ $teacher->designation }}</span>
                                </div>
                            </div>
                            <span class="team-social-btn"><i class="far fa-share-nodes"></i></span>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted">
                        <p>Faculty details will be listed soon.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    <!-- teacher/team-area end -->

    <!-- gallery-area -->
    <div class="gallery-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Gallery</span>
                        <h2 class="site-title">Our Photo <span>Gallery</span></h2>
                        <p>A visual journey through school life, classrooms, activities, celebrations, and achievements.</p>
                    </div>
                </div>
            </div>
            <div class="row popup-gallery">
                @php
                    $photos = [
                        'wp-content/uploads/2021/06/Prativa_Photo-1.jpg',
                        'wp-content/uploads/2021/06/Prativa_Photo-2.jpg',
                        'wp-content/uploads/2021/06/Prativa_Photo-3.jpg',
                        'wp-content/uploads/2021/06/Prativa_Photo-4.jpg',
                        'wp-content/uploads/2021/06/Prativa_Photo-5.jpg',
                        'wp-content/uploads/2021/06/Prativa_Photo-6.jpg',
                    ];
                @endphp
                @foreach($photos as $index => $photo)
                    <div class="col-md-4 wow fadeInUp" data-wow-delay="{{ ($index + 1) * 0.25 }}s">
                        <div class="gallery-item mb-4">
                            <div class="gallery-img" style="height: 250px; overflow: hidden;">
                                <img src="{{ asset($photo) }}" alt="Gallery Image {{ $index + 1 }}" class="w-100 h-100" style="object-fit: cover;">
                            </div>
                            <div class="gallery-content">
                                <a class="popup-img gallery-link" href="{{ asset($photo) }}"><i class="fal fa-plus"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- gallery-area end -->

    <!-- cta-area -->
    <div class="cta-area">
        <div class="container">
            <div class="cta-wrapper">
                <div class="row align-items-center">
                    <div class="col-lg-5 ms-lg-auto">
                        <div class="cta-content">
                            <h1>Admission Open - Apply Today For Classes</h1>
                            <p>Register online to secure a seat for your child. Admissions are open for both Secondary School and Plus Two College courses.</p>
                            <div class="cta-btn">
                                <a href="{{ route('contact') }}" class="theme-btn">Apply Now<i class="fas fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- cta-area end -->

    <!-- event area -->
    <div class="event-area bg py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Events</span>
                        <h2 class="site-title">Our Upcoming <span>Events</span></h2>
                        <p>Keep track of our school and college calendar events, co-curricular tournaments, and parent assemblies.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($events as $event)
                    <div class="col-md-6 col-lg-6">
                        <div class="event-item mb-4">
                            <div class="event-location">
                                <span><i class="far fa-map-marker-alt"></i> {{ $event->location }}</span>
                            </div>
                            <div class="event-img">
                                @if($event->image)
                                    <img src="{{ asset('storage/' . $event->image) }}" alt="{{ $event->title }}">
                                @else
                                    <img src="{{ asset('assets/img/event/01.jpg') }}" alt="{{ $event->title }}">
                                @endif
                            </div>
                            <div class="event-info">
                                <div class="event-meta">
                                    <span class="event-date"><i class="far fa-calendar-alt"></i> {{ $event->event_date->format('d M, Y') }}</span>
                                    <span class="event-time"><i class="far fa-clock"></i> {{ $event->event_date->format('g:i A') }}</span>
                                </div>
                                <h4 class="event-title"><a href="#">{{ $event->title }}</a></h4>
                                <p>{{ Str::limit($event->description, 120) }}</p>
                                <div class="event-btn">
                                    <a href="{{ route('contact') }}" class="theme-btn">Join Event<i class="fas fa-arrow-right-long"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted">No upcoming events listed.</div>
                @endforelse
            </div>
        </div>
    </div>
    <!-- event area end -->

    <!-- testimonial area -->
    <div class="testimonial-area ts-bg pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Testimonials</span>
                        <h2 class="site-title text-white">What Our Community <span>Says</span></h2>
                        <p class="text-white">Hear from our students, alumni, parents, and community about their Prativa experience.</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-slider owl-carousel owl-theme">
                @forelse($testimonials as $testimonial)
                    <div class="testimonial-item">
                        <div class="testimonial-rate">
                            @for($i = 0; $i < $testimonial->rating; $i++)
                                <i class="fas fa-star"></i>
                            @endfor
                        </div>
                        <div class="testimonial-quote">
                            <p>
                                "{{ $testimonial->feedback }}"
                            </p>
                        </div>
                        <div class="testimonial-content">
                            <div class="testimonial-author-img">
                                @if($testimonial->image)
                                    <img src="{{ asset('storage/' . $testimonial->image) }}" alt="{{ $testimonial->author_name }}">
                                @else
                                    <img src="{{ asset('assets/img/testimonial/01.jpg') }}" alt="{{ $testimonial->author_name }}">
                                @endif
                            </div>
                            <div class="testimonial-author-info">
                                <h4>{{ $testimonial->author_name }}</h4>
                                <p>{{ $testimonial->author_designation }}</p>
                            </div>
                        </div>
                        <span class="testimonial-quote-icon"><i class="far fa-quote-right"></i></span>
                    </div>
                @empty
                    <div class="text-center text-white col-12">No testimonials added yet.</div>
                @endforelse
            </div>
        </div>
    </div>
    <!-- testimonial area end -->

    <!-- blog/news area -->
    <div class="blog-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> News & notices</span>
                        <h2 class="site-title">Latest Updates & <span>Notices</span></h2>
                        <p>Stay informed with the latest notifications, announcement boards, and highlight releases.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($news as $newsItem)
                    <div class="col-md-6 col-lg-4">
                        <div class="blog-item wow fadeInUp" data-wow-delay=".25s">
                            <div class="blog-date"><i class="fal fa-calendar-alt"></i> {{ $newsItem->published_at->format('F d, Y') }}</div>
                            <div class="blog-item-img">
                                @if($newsItem->image)
                                    <img src="{{ asset('storage/' . $newsItem->image) }}" alt="{{ $newsItem->title }}">
                                @else
                                    <img src="{{ asset('assets/img/blog/01.jpg') }}" alt="{{ $newsItem->title }}">
                                @endif
                            </div>
                            <div class="blog-item-info">
                                <h4 class="blog-title">
                                    <a href="{{ route('news.show', $newsItem->slug) }}">{{ $newsItem->title }}</a>
                                </h4>
                                <p class="text-muted mt-2">
                                    {{ Str::limit(strip_tags($newsItem->content), 100) }}
                                </p>
                                <a class="theme-btn mt-3" href="{{ route('news.show', $newsItem->slug) }}">Read Notice<i class="fas fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted">No news updates posted yet.</div>
                @endforelse
            </div>
        </div>
    </div>
    <!-- blog area end -->
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Counter animation
        if ($('.counter').length) {
            $('.counter').each(function () {
                var $this = $(this),
                    countTo = $this.attr('data-to');
                $({ countNum: $this.text()}).animate({
                    countNum: countTo
                },
                {
                    duration: 3000,
                    easing:'linear',
                    step: function() {
                        $this.text(Math.floor(this.countNum));
                    },
                    complete: function() {
                        $this.text(this.countNum);
                    }
                });
            });
        }
        
        // Owl Carousels
        if ($('.hero-slider').length) {
            $('.hero-slider').owlCarousel({
                items: 1,
                loop: true,
                autoplay: true,
                autoplayTimeout: 6000,
                nav: true,
                dots: true,
                navText: ["<i class='far fa-long-arrow-left'></i>", "<i class='far fa-long-arrow-right'></i>"],
                animateOut: 'fadeOut'
            });
        }
        
        if ($('.testimonial-slider').length) {
            $('.testimonial-slider').owlCarousel({
                loop: true,
                margin: 30,
                autoplay: true,
                nav: false,
                dots: true,
                responsive: {
                    0: { items: 1 },
                    768: { items: 2 },
                    1024: { items: 3 }
                }
            });
        }
    });
</script>
@endsection