@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

                @foreach ($szBannerStringRC as $arBanners)
                    @if (empty($pageTitleForBreadcrumb))
                        @php
                            $pageTitleForBreadcrumb = $arBanners['szBannerTitle'];
                        @endphp
                    @endif

                    <div class="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="rcbreadcrumb">

                                                    <ul class="rcbreadcrumb 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">

                                                                            {{ $item['title'] }}

                                                                        </a>

                                                                    </li>
                                                                @else
                                                                    <li class="breadcrumb-item active">

                                                                        {{ $item['title'] }}

                                                                    </li>
                                                                @endif
                                                            @endforeach
                                                        @endif

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

                                                                {{ $pageTitleForBreadcrumb }}

                                                            </li>
                                                        @endif

                                                    </ul>

                                                </div>

                                                <h2 class="promo-slider__title">

                                                    <span>Welcome To</span>

                                                    <br>

                                                    <span>{{ $arBanners['szBannerTitle'] }}</span>

                                                </h2>

                                            </div>

                                            <div class="promo-slider__wrapper-2">

                                                <p class="promo-slider__subtitle">

                                                    {{ $arBanners['szBannerTitleDetails'] }}

                                                </p>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                @endforeach
            @endif

        </div>

        {{-- <div class="container">

            <div class="row">

                <div class="col-12">

                    <div class="promo-slider__nav d-flex align-items-center">

                        <div class="slider-controls buttons me-3" style="width:10%">

                            <button class="slider-play-pause" id="toggle" lang="en" title="Pause"
                                aria-label="Pause">

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

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </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">

                    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 --}}

                            {{--
                        @php
                            $baspath='uploads/documents/whatsnewforRC/english/';
                        @endphp

                        @foreach ($arWhatsNewRc as $WhatsNewRc)

                            <li>

                                <a
                                    class="text-white"
                                    target="_blank"
                                    href="{{ asset($baspath.$WhatsNewRc['szDocuments']) }}">

                                    {{ $WhatsNewRc['szTitle'] }}

                                    <i class="fa fa-file-pdf-o pdf2"></i>

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

                                </a>

                            </li>

                        @endforeach
                        --}}

                            <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>{{ $AboutUs->szTitle }}</span><br />
                                            <span>{{ $AboutUs->szSubTitle }}</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">
                                    {{ $AboutUs->szTitle }}
                                </span>

                                <h2 class="heading__title" tabindex="-1">
                                    <span></span>
                                    <span tabindex="0">
                                        {{ $AboutUs->szSubTitle }}
                                    </span>
                                </h2>
                            </div>

                            {!! $AboutUs->szAboutUsText !!}

                        </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 --}}
    <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">
                            @php($ii = 1)
                            @if (!empty($arLeftSideNav))
                                @foreach ($arLeftSideNav as $leftSideNav)
                                    <li>
                                        <a href="#vertical-tabs__item-{{ $ii }}">
                                            <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
                                            <span>
                                                {{ $szLanguageCode == 'hi' ? $leftSideNav->szTitleHindi : $leftSideNav->szTitle }}
                                            </span>
                                        </a>
                                    </li>
                                    @php($ii++)
                                @endforeach
                            @endif
                        </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">
                                            {!! $szLanguageCode == 'hi' ? $leftSideNav->szPageDetailsHindi : $leftSideNav->szPageDetails !!}
                                        </div>
                                    </div>
                                    @php($ic++)
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- 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 background--gray">
        <div class="container">
            <div class="row offset-70">

                @if (!empty($arMuseum_Library))
                    @foreach ($arMuseum_Library as $x => $Museum_Library)
                        @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 offset-xl-1">

                                            <h3 class="advantages-item__title">
                                                <strong>{{ $Museum_Library['szTitle'] }}</strong>
                                            </h3>

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

                                            <a href="javascript:void(0)" class="button button--primary moreless-button"
                                                lang="en" title="Read More">
                                                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>{{ $Museum_Library['szTitle'] }}</strong>
                                            </h3>

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

                                            <a href="javascript:void(0)" class="button button--primary moreless-button"
                                                lang="en" title="Read More">
                                                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
                    @endforeach
                @endif

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

    {{-- IMPORTANT LINKS --}}
    <section class="section animals-section">
        <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">
                            <span>Important</span>
                            <span>Links</span>
                        </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">
                                    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">
                                    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">
                                    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="fw-bold text-primary">

                    ←{{__('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