@extends('layouts.app')

@section('content')
{{-- Banner --}}
<section class="promo promo--front-5">
    <div class="promo-slider">
        @if (!empty($szBannerStringRC))
            @php
                $idForIp = htmlspecialchars(request()->query('rc'));
                $pageTitleForBreadcrumb = $pageTitleForBreadcrumb ?? '';
            @endphp
                <div id="aboutCarousel"
        class="carousel slide carousel-fade"
        data-bs-ride="carousel"
        data-bs-interval="3500"
        data-bs-pause="false">

        <div class="carousel-inner">
            @foreach ($szBannerStringRC as $key=>$arBanners)
                @if (empty($pageTitleForBreadcrumb))
                    @php
                        $pageTitleForBreadcrumb = lang($arBanners['szBannerTitle'],$arBanners['szBannerTitleHindi']);
                    @endphp
                @endif
                <div class=" carousel-item {{ $key == 0 ? 'active' : '' }} promo-slider__item promo-slider__item--style-3">
                    <picture>
                        <source srcset="{{ asset('uploads/Rc_banners/' . $arBanners['szBannerName']) }}"
                            media="(min-width:992px)">
                        <img class="img--bg" src="{{ asset('uploads/Rc_banners/' . $arBanners['szBannerName']) }}"
                            alt="{{ $arBanners['szBannerTitle'] }}">
                    </picture>
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-10 offset-xl-1">
                                <div class="align-container">
                                    <div class="align-container__item text-center">
                                        <div class="promo-slider__wrapper-1">
                                            <div aria-label="breadcrumb">
                                                <ul class="breadcrumb d-flex">
                                                    @if (!empty($breadcrumb))
                                                        @foreach ($breadcrumb as $item)
                                                            @if (!empty($item['url']))
                                                                <li class="breadcrumb-item">
                                                                    <a href="{{ $item['url'] }}" class="text-white hover-yellow">
                                                                        {{ lang($item['title'],$item['titleHindi']) }}
                                                                    </a>
                                                                </li>
                                                            @else
                                                                <li class="breadcrumb-item active">

                                                                    lang($item['title'],$item['titleHindi'])

                                                                </li>
                                                            @endif
                                                        @endforeach
                                                    @endif                                                 

                                                </ul>

                                            </div>

                                            <h2 class="promo-slider__title">

                                                <span>{{ __('messages.welcome_to') }}</span>

                                                <br>

                                                <span>{{ lang($arBanners['szBannerTitle'],$arBanners['szBannerTitleHindi']) }}</span>

                                            </h2>

                                        </div>

                                        <div class="promo-slider__wrapper-2">
                                         @if (!empty($pageTitleForBreadcrumb))
                                                        <li class="breadcrumb-item active">

                                                            {{ $pageTitleForBreadcrumb }}

                                                        </li>
                                                    @endif

                                            <p class="promo-slider__subtitle">

                                                {{ lang($arBanners['szBannerTitleDetails'],$arBanners['szBannerTitleDetailsHindi']) }}

                                            </p>

                                        </div>
 
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>
            @endforeach
            </div>
            </div>

        @endif

    </div>

    <!-- Promo Panel -->

    <div class="promo-pannel mt-3" data-aos="fade-right">

        <a class="video-triggers" href="javascript:void(0);"
            onclick="return openYoutubeVideo('https://www.youtube.com/watch?v=TfbvUk-i4vk')">

            <img class="img--bg" src="{{ asset('frontend/images/zsi-v3-thumb.png') }}"
                alt="Meet Dhriti Banerjee, first woman to lead Zoological Survey of India in 105 years">

            <span class="video-trigger__icon">
                <span>Video</span>
                <i class="fa fa-play"></i>
            </span>
        </a>
        <div class="promo-pannel__weather">
            <span class="color--white">
                {{ __('messages.whats_new') }}
            </span>
            <div class="weather-lower">

                <div class="d-flex flex-column play-pause-in">

                    <button id="toggleBtn" title="Pause rolling content" onclick="toggleMarquee()">

                        <i id="toggleIcon" class="fa fa-pause"></i>

                    </button>

                </div>

                <marquee direction="up" height="70" id="marquee1">

                    <ul class="n-m-design">

                        {{-- Dynamic News --}}



                        <li>

                            <a href="#">

                                This is Demo text

                            </a>

                            <img class="pdf-img" src="{{ asset('frontend/images/pdf.jpg') }}" alt="PDF">

                        </li>

                        <li>

                            <a href="#">

                                This is Demo text

                            </a>

                            <img class="pdf-img" src="{{ asset('frontend/images/pdf.jpg') }}" alt="PDF">

                        </li>

                        <li>

                            <a href="#">

                                This is Demo text

                            </a>

                            <img class="pdf-img" src="{{ asset('frontend/images/pdf.jpg') }}" alt="PDF">

                        </li>

                    </ul>

                </marquee>

            </div>

        </div>

    </div>

</section>

{{-- About section --}}
@if (!empty($arAboutUs) && count($arAboutUs) > 0)
    @foreach ($arAboutUs as $AboutUs)
        <section class="section about-safari">
            <div class="container">
                <div class="row bottom-70">
                    <div class="col-lg-4" data-aos="fade-right">

                        <div class="info-box">
                            <div class="info-box__inner" tabindex="0">
                                <img class="img--bg" src="{{ asset('uploads/aboutUs/' . $AboutUs->szImageName) }}"
                                    alt="{{ $AboutUs->szTitle }}" />

                                <div class="heading heading--primary">
                                    <h2 class="heading__title color--white" tabindex="-1">
                                        <span>{{ lang($AboutUs->szTitle,$AboutUs->szTitleHindi) }}</span><br />
                                        <span>{{ lang($AboutUs->szSubTitle,$AboutUs->szSubTitleHindi) }}</span>
                                    </h2>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="col-lg-8" data-aos="fade-left">
                        <div class="heading heading--primary heading--style-2">
                            <span tabindex="0" class="heading__pre-title lop">
                                {{ lang($AboutUs->szTitle,$AboutUs->szTitleHindi) }}
                            </span>

                            <h2 class="heading__title" tabindex="-1">
                                <span></span>
                                <span tabindex="0">
                                    {{ lang($AboutUs->szSubTitle,$AboutUs->szSubTitleHindi) }}
                                </span>
                            </h2>
                        </div>

                        {!! lang($AboutUs->szAboutUsText,$AboutUs->szAboutUsTextHindi) !!}

                    </div>

                </div>

                <div class="row top-50 d-flex d-lg-none">
                    <div class="col-12 text-center" tabindex="0">
                        <a class="button button--primary" href="#">Read more</a>
                    </div>
                </div>
            </div>
        </section>
    @endforeach
@endif

{{-- Dropdown Menu and Data --}}
@php($ii = 1)
@if (count($arLeftSideNav))
<section class="section elements no-bottom-padding">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">

                <div class="tabs vertical-tabs">

                    <ul class="vertical-tabs__header v-tab-bg" data-aos="fade-right">

                        @foreach ($arLeftSideNav as $leftSideNav)
                        <li>
                            <a href="#vertical-tabs__item-{{ $ii }}">
                                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
                                <span>
                                    {{ lang($leftSideNav->szTitle,$leftSideNav->szTitleHindi) }}
                                </span>
                            </a>
                        </li>
                        @php($ii++)
                        @endforeach

                    </ul>

                    <div class="vertical-tabs__content" data-aos="fade-left">
                        @php($ic = 1)
                        @if (!empty($arLeftSideNav))
                        @foreach ($arLeftSideNav as $leftSideNav)
                        <div class="vertical-tabs__item" id="vertical-tabs__item-{{ $ic }}">
                            <div class="scrollbar" id="style-15">
                                {!! lang($leftSideNav->szPageDetails,$leftSideNav->szPageDetailsHindi) !!}
                            </div>
                        </div>
                        @php($ic++)
                        @endforeach
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endif
{{-- background images --}}
<section class="parallax-section4">
    <div class="container">
        <div class="parallax-content">
            <div class="row justify-content-center">
                <div class="col-lg-12 text-center">
                    <div class="events" data-aos="zoom-in-right">
                        Indian Elephants
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


{{-- MUSEUM & LIBRARY SECTION --}}
<section class="section">
    <div class="container">
        <div class="row offset-70">

            @if (!empty($arMuseum_Library) && count($arMuseum_Library) > 0)
                @foreach ($arMuseum_Library as $x => $Museum_Library)
                    @if (
                            !empty(trim(strip_tags(lang($Museum_Library['szTitle'],$Museum_Library['szTitleHindi'])))) ||
                            !empty(trim(strip_tags(lang($Museum_Library['szPageDetails'],$Museum_Library['szPageDetailsHindi'])))) ||
                            !empty($Museum_Library['szImageName'])
                        )
                        @if ($x % 2 == 0)
                            <div class="col-12" data-aos="fade-up-right">
                                <div class="advantages-item chit-1">
                                    <div class="row align-items-center">

                                        <div class="col-lg-6">
                                            <div class="advantages-item__img">
                                                <img class="img--bg"
                                                    src="{{ asset('uploads/RcMiddleMenu/' . $Museum_Library['szImageName']) }}"
                                                    alt="{{ $Museum_Library['szTitle'] }}">
                                            </div>
                                        </div>

                                        <div class="col-lg-6 col-xl-5">
                                            <h3 class="advantages-item__title">
                                                <strong>{{ lang($Museum_Library['szTitle'],$Museum_Library['szTitleHindi']) }}</strong>
                                            </h3>

                                            {!! lang($Museum_Library['szPageDetails'],$Museum_Library['szPageDetailsHindi']) !!}

                                            <a href="javascript:void(0)" class="button button--primary moreless-button" lang="en"
                                                title=" {{ __('messages.read_more') }}">
                                                {{ __('messages.read_more') }}
                                            </a>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="col-12" data-aos="fade-up-left">
                                <div class="advantages-item chit-2">
                                    <div class="row align-items-center flex-column-reverse flex-lg-row">

                                        <div class="col-lg-6 col-xl-5">

                                            <h3 class="advantages-item__title">
                                                <strong>{{ lang($Museum_Library['szTitle'],$Museum_Library['szTitleHindi']) }}</strong>
                                            </h3>

                                            {!! $Museum_Library['szPageDetails'] !!}

                                            <a href="javascript:void(0)" class="button button--primary moreless-button" lang="en"
                                                title="{{ __('messages.read_more') }}">
                                                {{ __('messages.read_more') }}
                                            </a>

                                        </div>

                                        <div class="col-lg-6 offset-xl-1 col-xl-6">

                                            <div class="advantages-item__img">
                                                <img class="img--bg"
                                                    src="{{ asset('uploads/RcMiddleMenu/' . $Museum_Library['szImageName']) }}"
                                                    alt="{{ $Museum_Library['szTitle'] }}">
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif
                @endforeach
            @endif
        </div>
    </div>
</section>

{{-- IMPORTANT LINKS --}}
<section class="">
    <div class="container">
        <div class="row bottom-50">
            <div class="col-12">
                <div class="heading heading--center">
                    <span class="heading__pre-title"></span>

                    <h2 class="heading__title no-margin-bottom">
                       {{ __('messages.implink') }}
                    </h2>

                </div>
            </div>
        </div>
        <div class="row offset-30">
            <div class="col-6 col-sm-4 col-md-4 col-xl-4 bottom-80" data-aos="fade-up">
                <div class="amimal text-center">
                    <div class="wrap">

                        <a href="{{ url('rc-publications') }}?rc={{ request('rc') }}">

                            <button class="button" title="Publication">
                                {{ __('messages.publication') }} 
                            </button>

                        </a>

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

            <div class="col-6 col-sm-4 col-md-4 col-xl-4 bottom-80" data-aos="fade-up">
                <div class="amimal text-center">
                    <div class="wrap">
                        <a href="{{ url('rc-whats-new') }}?rc={{ request('rc') }}">
                            <button class="button" title="Whats New">
                              {{ __('messages.whats_new') }}
                            </button>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-6 col-sm-4 col-md-4 col-xl-4 bottom-80" data-aos="fade-up">
                <div class="amimal text-center">
                    <div class="wrap">
                        <a href="{{ url('rc-scientist-profile') }}?rc={{ request('rc') }}">
                            <button class="button" title="Scientist Profile">
                                {{ __('messages.scientist_profile') }}
                            </button>
                        </a>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="container mt-5">

        {!! $arPageDetails['szPageContent'] ?? '' !!}

        <p class="text-end mt-4">

            <a href="javascript:void(0)" onclick="window.history.back();" class="btn btn-success">

                ←{{__('messages.previous')}}

            </a>

        </p>

    </div>
</section>
@endsection
@push('scripts')
    <script>
        function openYoutubeVideo(url) {

            const message =
                "You are being redirected to an external website (YouTube).\n\nDo you want to continue?";

            if (confirm(message)) {

                window.open(url, "_blank", "noopener,noreferrer");

            }

            return false;
        }
    </script>


    {{-- what's new play/ pause button --}}
    <script>
        let isPaused = false;

        function toggleMarquee() {
            const marquee = document.getElementById("marquee1");
            const icon = document.getElementById("toggleIcon");
            const button = document.getElementById("toggleBtn");

            if (!isPaused) {
                marquee.stop();
                icon.className = "fa fa-play";
                button.title = "Resume rolling content";
                isPaused = true;
            } else {
                marquee.start();
                icon.className = "fa fa-pause";
                button.title = "Pause rolling content";
                isPaused = false;
            }
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const links = document.querySelectorAll(".vertical-tabs__header a");
            const tabs = document.querySelectorAll(".vertical-tabs__item");

            // Hide all tabs
            tabs.forEach(tab => tab.style.display = "none");

            // Open first tab by default
            if (tabs.length) {
                tabs[0].style.display = "block";
                links[0].parentElement.classList.add("active");
            }

            links.forEach(link => {
                link.addEventListener("click", function (e) {
                    e.preventDefault();

                    // remove active
                    links.forEach(l => l.parentElement.classList.remove("active"));
                    tabs.forEach(tab => tab.style.display = "none");

                    // active menu
                    this.parentElement.classList.add("active");

                    // show selected tab
                    const target = document.querySelector(this.getAttribute("href"));
                    if (target) {
                        target.style.display = "block";
                    }
                });
            });

        });
    </script>
@endpush