@include('frontend.layouts.master')
<!-- ... main carousel start ... -->
@if (!empty($sliders) && $sliders->count() > 0)
    <div class="main-carousel">
        <div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-indicators">
                @foreach ($sliders as $key => $slider)
                    <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="{{ $key }}"
                        class=" @if ($key === 0) active @else @endif" aria-current="true"
                        aria-label="Slide {{ $key }} "></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach ($sliders as $key => $slider)
                    <div class="carousel-item @if ($key === 0) active @else @endif"
                        style="background-image: url({{ asset($slider->banner) }});">
                        <div class="container h-100 position-relative">
                            <div class="carousel-caption">
                                <div class="animate__animated animate__fadeInDown animate__slow">
                                    {{-- <div class="d-flex align-items-center">
                                        <div class="line"></div>
                                        <span class="hero_subtitle ps-2"> {{ $slider->top_heading }}</span>
                                    </div> --}}
                                    <h1 class="text-white title">{{ $slider->title_1 }}<br>
                                        <span class="common_color">{{ $slider->title_2 }}</span>
                                    </h1>
                                    <p class="hero_subtitle">{{ $slider->sub_title }}</p>
                                    <a href="{{ route('frontend.association.index') }}"
                                        class="btn btn-primary text-uppercase btn-lg d-none d-md-flex">Explore More</a>
                                </div>
                                <a href="{{ route('frontend.association.index') }}"
                                    class="btn btn-primary text-uppercase btn-lg d-md-none d-flex animate__animated animate__fadeInUp animate__slow">Explore
                                    More</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endif

<!-- ... main carousel End here ... -->
<!-----....box card design ....-->
<div class="card_Rapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-12 aos-init aos-animate" data-aos="fade-up" data-aos-delay="0"
                data-aos-duration="800">
                <div class="card_outer common_shawdow"
                    style="background-image: url({{ asset('frontend/assets/images/card/Samadhan_img_blocks-1.jpg') }});">
                    <div class="card_outer_content">
                        <div class="emptybox"></div>
                        <span class="hero_subtitle_box box_margin ps-5"></span>
                        <h1 class="card_tittle pt-2 pb-2">Our Ventures<br></h1>
                        <p class="hero_subtitle_  pb-3">We shall deliver the best of know-how with the help of
                            professionals and industry experts to instill leadership.</p>
                        <a href="{{ route('frontend.venture.index') }}" class="card_button">Know More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 aos-init aos-animate" data-aos="fade-up" data-aos-delay="0"
                data-aos-duration="800">
                <div class="card_outer_1 common_shawdow"
                    style="background-image: url({{ asset('frontend/assets/images/card/Samadhan_img_blocks-2.jpg') }});">
                    <div class="card_outer_content">
                        <div class="emptybox"></div>
                        <span class="hero_subtitle_box box_margin ps-5"></span>
                        <h1 class="card_tittle pt-2 pb-2">Our Specialization<br></h1>
                        <p class="hero_subtitle_  pb-3">Sector wise/ Industry wise programmes which we want to
                            leverage for development of entrepreneurship.</p>
                        <a href="{{ route('frontend.specialization.index') }}" class="card_button">Know More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 aos-init aos-animate" data-aos="fade-up" data-aos-delay="0"
                data-aos-duration="800">
                <div class="card_outer_2 common_shawdow"
                    style="background-image: url({{ asset('frontend/assets/images/card/Samadhan_img_blocks-3.jpg') }});">
                    <div class="card_outer_content">
                        <div class="emptybox"></div>
                        <span class="hero_subtitle_box box_margin ps-5"></span>
                        <h1 class="card_tittle pt-2 pb-2">Our Associations<br></h1>
                        <p class="hero_subtitle_  pb-3">Find out more about us, our activities, partners and
                            associations.</p>
                        <a href="{{ route('frontend.association.index') }}" class="card_button">Know More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-----....box card design end....-->
<!------Service section start here-->
{{-- @if (!empty($specializations) && $specializations->count() > 0)
    <div class="services_section">
        <div class="container">
            <div class="services">
                <div class="row">
                    <div class="col-lg-12 aos-init aos-animate" data-aos="fade-right" data-aos-delay="0"
                        data-aos-duration="800">
                        <div class="text-left">
                            <div class="d-flex align-items-center">
                                <div class="line"></div>
                                <span class="hero_subtitle ps-2">WHERE CAN WE HELP YOU</span>
                            </div>
                            <h1 class="title pb-2">
                                Be The First<br>
                                <span class="common_color">Generation Entrepreneur</span>
                            </h1>
                            <p class="hero_subtitle w-50 pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                Doloribus ducimus unde minus modi nulla iste saepe.</p>
                        </div>
                    </div>
                </div>
                <div class="row pt-4 pb-4">
                    @foreach ($specializations as $specialization)
                        <div class="col-lg-4 col-md-4 col-sm-12 aos-init aos-animate" data-aos="fade-up"
                            data-aos-delay="0" data-aos-duration="800">
                            <div class="content_box">
                                <div class="content_box_icon">
                                    <img src="{{ asset($specialization->logo) }}" alt="icon-1">
                                </div>
                                <div class="content_box_text ps-3">
                                    <h5 class="card_tittle">{{ $specialization->short_name }}</h5>
                                    <p class="hero_subtitle_ m-0 pt-2">
                                        {{ Str::words($specialization->description, 22, $end = '....') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row pt-5 pb-5">
                    <div class="col-lg-12">
                        <div class="btn_div">
                            <a href="{{ route('frontend.specialization.index') }}"
                                class="btn btn-primary text-uppercase btn-lg d-none d-md-flex">Explore More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif --}}
<!------Service section end here-->
<!-----CLIENTS section start here-->
@if (!empty($about) && $about->count() > 0)
    <div class="client_section">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 aos-init aos-animate" data-aos="fade-right" data-aos-delay="0"
                    data-aos-duration="800">
                    <div class="client_imgdiv">
                        <img src="{{ asset($about->about_image) }}" class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-6 aos-init aos-animate" data-aos="fade-left" data-aos-delay="0"
                    data-aos-duration="800">
                    <div class="client_div_content text-left">

                        {{-- @if (!empty($about->top_heading))
                            <div class="d-flex align-items-center">
                                <div class="line"></div>
                                <span class="hero_subtitle ps-2">{{ $about->top_heading }}</span>
                            </div>
                        @endif --}}
                        <h1 class="title pb-2">
                            {{ $about->title_1 }}<br>
                            <span class="common_color">{{ $about->title_2 }}</span>
                        </h1>
                        {!! $about->description !!}
                        <div class="row pt-4 pb-4">
                            <div class="col-lg-4">
                                <div class="progress blue align-items-center justify-content-center">
                                    <span class="progress-left">
                                        <span class="progress-bar"></span>
                                    </span>
                                    <span class="progress-right">
                                        <span class="progress-bar"></span>
                                    </span>
                                    <div>
                                        <img src="{{ asset($about->icon_1) }}">
                                    </div>
                                </div>
                                <div class="progress_content pt-3 text-center">
                                    <h5 class="card_tittle">{{ $about->heading_1 }}</h5>
                                    <p class="hero_subtitle_ m-0 pt-2">{{ $about->content_1 }}
                                    </p>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="progress blue align-items-center justify-content-center">
                                    <span class="progress-left">
                                        <span class="progress-bar"></span>
                                    </span>
                                    <span class="progress-right">
                                        <span class="progress-bar"></span>
                                    </span>
                                    <div>
                                        <img src="{{ asset($about->icon_2) }}">
                                    </div>
                                </div>
                                <div class="progress_content pt-3 text-center">
                                    <h5 class="card_tittle">{{ $about->heading_2 }}
                                    </h5>
                                    <p class="hero_subtitle_ m-0 pt-2">{{ $about->content_2 }}
                                    </p>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="progress blue align-items-center justify-content-center">
                                    <span class="progress-left">
                                        <span class="progress-bar"></span>
                                    </span>
                                    <span class="progress-right">
                                        <span class="progress-bar"></span>
                                    </span>
                                    <div>
                                        <img src="{{ asset($about->icon_3) }}">
                                    </div>
                                </div>
                                <div class="progress_content pt-3 text-center">
                                    <h5 class="card_tittle">{{ $about->heading_3 }}</h5>
                                    <p class="hero_subtitle_ m-0 pt-2">{{ $about->content_3 }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
<!-----CLIENTS section end here-->
<!------user section start here-->
@if (!empty($members) && $members->count() > 0)
    <div class="user_section" style="background-image: url({{ asset('frontend/assets/images/blue-bg.jpg') }});">
        <div class="top_img">
            <img src="{{ asset('frontend/assets/images/bgn-quotes.jpg') }}">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 aos-init aos-animate" data-aos="fade-right" data-aos-delay="0"
                    data-aos-duration="800">
                    <div class="text-left">
                        {{-- <div class="d-flex align-items-center">
                            <div class="line"></div>
                            <span class="hero_subtitle ps-2 text-white">GREAT REVIEWS FOR OUR SERVICES
                            </span>
                        </div> --}}
                        <h1 class=" text-white title pb-2 ">
                            Samadhan
                            <br>
                            <span class="common_color">Management</span>
                        </h1>
                    </div>
                </div>
            </div>
            <div class="row pt-5 pb-5">
                @foreach ($members as $key => $member)
                    <div class="col-lg-4 aos-init aos-animate" data-aos="fade-up" data-aos-delay="0"
                        data-aos-duration="800">
                        <div class="user_box text-center">
                            <div class="user_box_image">
                                <img src="{{ asset($member->profile_img) }}" class="userimg">
                            </div>
                            <div class="user_box_content">
                                <h5 class="card_tittle_new pt-3 pb-3">{{ $member->name }}
                                </h5>
                                <h4 class="hero_subtitle pt-2 pb-2 common_color">{{ $member->designation }}
                                </h4>
                                <p class="hero_subtitle_ m-0 pt-2 text-white">{{ $member->description }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="aos-init aos-animate text-center" data-aos="fade-up" data-aos-delay="0"
                data-aos-duration="800">
                <a href="{{ route('frontend.member.index') }}" class="card_button">Know More</a>
            </div>
        </div>
        <div class="bottom_img">
            <img src="{{ asset('frontend/assets/images/bgn-quotes-bottom.png') }}">
        </div>
    </div>
@endif
<!------user section end here-->
<!-------client logo start here-->
@if (!empty($associations) && $associations->count() > 0)
    <div class="clientlogo_section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-center pb-4">
                        <h1 class="title pb-2">Our
                            <span class="common_color">Associations</span>
                        </h1>
                    </div>
                </div>
                <div class="col-lg-12 aos-init aos-animate" data-aos="fade-up" data-aos-delay="0"
                    data-aos-duration="800">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            @foreach ($associations as $association)
                                <div class="swiper-slide">
                                    <div class="">
                                        <img src="{{ asset($association->logo) }}" class="img-fluid"
                                            alt="img" />
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="aos-init aos-animate mt-5 text-center" data-aos="fade-up" data-aos-delay="0"
                    data-aos-duration="800">
                    <a href="{{ route('frontend.association.index') }}" class="card_button">Know More</a>
                </div>
            </div>
        </div>
    </div>
@endif
<!-------client logo end here-->
<!-----REQUEST call section start here-->
<div class="request_call_setion">
    <div class="container">
        <div class="row pb-5">
            <div class="col-lg-12 aos-init aos-animate" data-aos="fade-right" data-aos-delay="0"
                data-aos-duration="800">
                <div class="text-center">
                    {{-- <div class="d-flex align-items-center justify-content-center pt-2 pb-2">
                         <div class="line"></div> 
                        <span class="hero_subtitle ps-2">We are SAMADHAN</span>
                    </div> --}}
                    <h1 class="title pb-2">We are <span class="common_color">SAMADHAN</span> -
                        24 Years in Action
                    </h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 aos-init aos-animate" data-aos="fade-right" data-aos-delay="0"
                data-aos-duration="800">
                <div class="Request_call_videobox">
                    <iframe width="100%" height="350px" src="https://www.youtube.com/embed/W4TUQ-GIfB0"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen="" style="border-radius:8px;"></iframe>
                </div>
            </div>
            <div class="col-lg-6 aos-init aos-animate" data-aos="fade-left" data-aos-delay="0"
                data-aos-duration="800">
                <div class="request_call_videobox">
                    <iframe width="100%" height="350px" src="https://www.youtube.com/embed/1HQ01U7LuTg"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen="" style="border-radius:8px;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-----REQUEST call section end here-->
@if (!empty($counter) && $counter->count() > 0)
    <div class="counter_section"
        style="background-image: url({{ asset('frontend/assets/images/bgn-searching.jpg') }});">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="counter">
                        <div class="row">
                            {{-- @foreach ($counters as $key => $counter) --}}
                            <div class="col-lg-3 mb-4">
                                <div class="counter_item">
                                    <div class="counter_img">
                                        <img src="{{ asset($counter->icon_1) }}">
                                    </div>
                                    <div class="counter_text text-white">
                                        <b>{{ $counter->title_1 }}</b>
                                        <h3 id="value1" class="common_color counter-number">
                                            {{ $counter->count_1 }}</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-4">
                                <div class="counter_item">
                                    <div class="counter_img">
                                        <img src="{{ asset($counter->icon_2) }}">
                                    </div>
                                    <div class="counter_text text-white">
                                        <b>{{ $counter->title_2 }}</b>
                                        <h3 id="value2" class="common_color counter-number">
                                            {{ $counter->count_2 }}</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-4">
                                <div class="counter_item">
                                    <div class="counter_img">
                                        <img src="{{ asset($counter->icon_3) }}">
                                    </div>
                                    <div class="counter_text text-white">
                                        <b>{{ $counter->title_3 }}</b>
                                        <h3 id="value3" class="common_color counter-number">
                                            {{ $counter->count_3 }}</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-4">
                                <div class="counter_item">
                                    <div class="counter_img">
                                        <img src="{{ asset($counter->icon_4) }}">
                                    </div>
                                    <div class="counter_text text-white">
                                        <b>{{ $counter->title_4 }}</b>
                                        <h3 id="value4" class="common_color counter-number">
                                            {{ $counter->count_4 }}</h3>
                                    </div>
                                </div>
                            </div>
                            {{-- @endforeach --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
<!------map section start here-->
@if (!empty($basicdetails) && $basicdetails->count() > 0)
    <div class="map_section">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d56056.76120359021!2d77.32223176032717!3d28.583345411173102!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1687343397197!5m2!1sen!2sin"
            width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
        <div class="map_bg common_shawdow">
            <div class="inner_map">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="text-left">
                                <div class="d-flex align-items-center">
                                    <div class="line"></div>
                                    <span class="hero_subtitle ps-2">OUR OFFICES
                                    </span>
                                </div>
                                <h1 class="title pb-2 ">
                                    Get in
                                    <span class="common_color">Touch</span>
                                </h1>
                                <p>{!! $basicdetails->description !!}</p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="footer_box d-flex align-items-center justify-content-center">
                                <div class="footer_box_img">
                                    <img src="{{ asset('frontend/assets/images/icon/footer-1.png') }}">
                                </div>
                                <div class="footer_box_content ps-3">
                                    <h5 class="card_tittle  pt-2 pb-2">Address
                                    </h5>
                                    @if ($basicdetails->address_1)
                                        <h6>{{ $basicdetails->address_1 }}</h6>
                                    @endif
                                    @if ($basicdetails->address_2)
                                        <h6>{{ $basicdetails->address_2 }}</h6>
                                    @endif
                                    @if ($basicdetails->address_3)
                                        <h6>{{ $basicdetails->address_3 }}</h6>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="footer_box d-flex align-items-center justify-content-center">
                                <div class="footer_box_img">
                                    <img src="{{ asset('frontend/assets/images/icon/footer-2.png') }}">
                                </div>
                                <div class="footer_box_content ps-3">
                                    <h5 class="card_tittle  pt-2 pb-2">Call us
                                    </h5>
                                    @if ($basicdetails->phone)
                                        <h6>+91 {{ $basicdetails->phone }}</h6>
                                    @endif
                                    @if ($basicdetails->alt_phone)
                                        <h6>+91 {{ $basicdetails->alt_phone }}</h6>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="footer_box d-flex align-items-center justify-content-center">
                                <div class="footer_box_img">
                                    <img src="{{ asset('frontend/assets/images/icon/footer-3.png') }}">
                                </div>
                                <div class="footer_box_content ps-3">
                                    <h5 class="card_tittle  pt-2 pb-2">Email us
                                    </h5>
                                    @if ($basicdetails->email_1)
                                        <h6> {{ $basicdetails->email_1 }}</h6>
                                    @endif
                                    @if ($basicdetails->email_2)
                                        <h6> {{ $basicdetails->email_2 }}</h6>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
<script>
    const swiper = new Swiper('.swiper', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        slidesPerView: 6,
        spaceBetween: 0,
        breakpoints: {
            // when window width is >= 320px
            320: {
                slidesPerView: 1,
            },
            // when window width is >= 480px
            480: {
                slidesPerView: 3,
            },
            // when window width is >= 640px
            640: {
                slidesPerView: 4,
            },

            720: {
                slidesPerView: 6,
            }
        },

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
</script>
<script>
    // counter logic
    function animateValue(ob, duration = 1500) {
        const obj = document.getElementById(ob);
        let start = 1;
        let end = +obj.innerHTML;
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            obj.innerHTML = Math.floor(progress * (end - start) + start);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }

    // if has the section on the page - run counter when scrolled to it
    if ($(".counter")) {
        let blockTop = $(".counter").offset().top,
            wh = window.innerHeight,
            flag = true;

        $(window).scroll(function() {
            if (flag && blockTop < $(window).scrollTop() + wh) {
                flag = !flag;
                animateValue('value1', 2000);
                animateValue('value2');
                animateValue('value3');
                animateValue('value4');
                // document.querySelectorAll(".counter-number").forEach((item) => {
                //     console.log(item);
                //     animateValue(item.id, 2000); // custom duratuion (2000 ms)
                // })

            }
        });
    }
</script>
<!------map section end here-->
@include('frontend.layouts.footerbar')