swiper

@extends('layouts.template.website')

@section('css')
<link href="/css/swiper-gl.min.css" />
@endsection

@section('title')
    Homepage
@endsection

@section('content')
<div id="home">
    <div id="home-intro">
        <div class="row">
            <div class="col-lg-8">
                <div class="header">{!! $home->jumbotron_header !!}</div>
                <div class="sub-header">{!! $home->jumbotron_sub_header !!}</div>
                <button class="btn btn-default">About Us  <i class="fa-regular fa-arrow-alt-circle-right"></i></button>
            </div>
            <div class="col-lg-4">
                <img class="img-fluid" src="/img/logo_clip.png" />
            </div>
        </div>
    </div>
    <div id="home-insights">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4">
                    <h1><b>Insights</b> from Us</h1>
                    <hr />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="row">
                    @foreach($insights as $n)
                        <div id="insight-col-{{ $loop->index + 1 }}" class="col-lg-4 {{ $loop->index + 1 }}">
                            <img id="insight-img-{{ $loop->index + 1 }}" class="img-fluid insights {{ $loop->index + 1 }} shadow" src="{{ env('APP_CMS_URL', 'http://localhost') }}/foto/{{ $n->foto }}" />
                            <div id="insight-desc-{{ $loop->index + 1 }}" class="description {{ $loop->index + 1 }}">
                                <h3>{{ $n->judul }}</h3>
                                <a href="{{ route('insight.detail', $n->id) }}" target="_tab">{{ Str::limit($n->deskripsi, 250) }}</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-3">
                <a href="{{ route('insight.index') }}" target="_tab" class="btn btn-default">More Insights <i class="fa-regular fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
    </div>
    <div id="home-business">
        <div class="row">
            <div class="col-lg-6">
                <h1>
                    <b>Business</b>
                    <span>Needs</span>
                </h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales porttitor volutpat. Donec urna nunc, iaculis sed iaculis ac, sagittis pretium risus. Ut vitae rhoncus libero. Quisque vitae dignissim odio, non rutrum libero.<p>
                <label>Have any Needs in your businness?</label>
                <br />
                <a href="{{ route('solution.index', 'Business') }}" class="btn btn-default">Let's discuss  <i class="fa-regular fa-arrow-alt-circle-right"></i></a>
            </div>
            <div class="col-lg-6">
                <h1>
                    <b>Personal</b>
                    <span>Needs</span>
                </h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales porttitor volutpat. Donec urna nunc, iaculis sed iaculis ac, sagittis pretium risus. Ut vitae rhoncus libero. Quisque vitae dignissim odio, non rutrum libero.<p>
                <label>Have any Needs in your personal?</label>
                <br />
                <a href="{{ route('solution.index', 'Personal') }}" class="btn btn-default">Let's discuss  <i class="fa-regular fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
    </div>
    <div id="home-clients">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-5">
                    <h1>Our <b>Clients</b></h1>
                    <hr />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <div class="swiper clients">
            <div class="swiper-wrapper">
                @foreach($solutions as $s)
                <div class="swiper-slide">
                    <div class="swiper-slide-content">
                        <img class="swiper-slide-image swiper-gl-image" data-swiper-parallax="10%" src="{{ env('APP_CMS_URL', 'http://localhost') }}/foto/{{ $s->foto }}" />
                        <div class="swiper-description animate__animated animate__zoomIn">
                            <div class="swiper-slide-title" data-swiper-parallax="20%">{{ $s->judul }}</div>
                            <div class="swiper-slide-text" data-swiper-parallax="-23%">
                            {{ $s->deskripsi }}
                            </div>
                            <a class="swiper-description-expand" onclick="$('.swiper-description').css('height', '100%');">Read more...</a>
                        </div>

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

            <div class="swiper-pagination"></div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <div id="home-form">
        <form id="contact-us" class="container">
            <div class="header-form">
                <h1>It starts with a meaningful <b>Conversation</b></h1>
                <hr />
                <p>a person, company, etc, that seeks the advice of a professional man or woman. a customer.</p>
            </div>
            <div class="form-group">
                <label class="form-label">Name</label>
                <input class="form-control" type="text" id="name" name="name" />
            </div>
            <div class="form-group">
                <label class="form-label">E-mail</label>
                <input class="form-control" type="email" id="email" name="email" />
            </div>
            <div class="form-group">
                <label class="form-label">Message</label>
                <textarea class="form-control" id="message" name="message" rows="7"></textarea>
            </div>
            <button type="submit" class="btn btn-default">Let's Talk  <i class="fa-regular fa-arrow-alt-circle-right"></i></button>
        </form>
    </div>
</div>
@endsection

@section('js')
<script src="/js/swiper-gl.min.js"></script>
<script>
    $(document).ready(function() {
        $('#insight-img-1').mouseenter(function() {
            console.log(1);
            $('#insight-img-1').css('filter', 'brightness(50%)');
            $('#insight-desc-1').css('display', 'block');
        });
        $('#insight-img-1').mouseleave(function() {
            $('#insight-img-1').css('filter', 'brightness(100%)');
            $('#insight-desc-1').css('display', 'none');
            $('#insight-desc-1').mouseenter(function() {
                $('#insight-img-1').css('filter', 'brightness(50%)');
                $('#insight-desc-1').css('display', 'block');
            });
            $('#insight-desc-1').mouseleave(function() {
                $('#insight-img-1').css('filter', 'brightness(100%)');
                $('#insight-desc-1').css('display', 'none');
            });
        });

        $('#insight-img-2').mouseenter(function() {
            console.log(2);
            $('#insight-img-2').css('filter', 'brightness(50%)');
            $('#insight-desc-2').css('display', 'block');
        });
        $('#insight-img-2').mouseleave(function() {
            $('#insight-img-2').css('filter', 'brightness(100%)');
            $('#insight-desc-2').css('display', 'none');
            $('#insight-desc-2').mouseenter(function() {
                $('#insight-img-2').css('filter', 'brightness(50%)');
                $('#insight-desc-2').css('display', 'block');
            });
            $('#insight-desc-2').mouseleave(function() {
                $('#insight-img-2').css('filter', 'brightness(100%)');
                $('#insight-desc-2').css('display', 'none');
            });
        });

        $('#insight-img-3').mouseenter(function() {
            console.log(3);
            $('#insight-img-3').css('filter', 'brightness(50%)');
            $('#insight-desc-3').css('display', 'block');
        });
        $('#insight-img-3').mouseleave(function() {
            $('#insight-img-3').css('filter', 'brightness(100%)');
            $('#insight-desc-3').css('display', 'none');
            $('#insight-desc-3').mouseenter(function() {
                $('#insight-img-3').css('filter', 'brightness(50%)');
                $('#insight-desc-3').css('display', 'block');
            });
            $('#insight-desc-3').mouseleave(function() {
                $('#insight-img-3').css('filter', 'brightness(100%)');
                $('#insight-desc-3').css('display', 'none');
            });
        });
        var swiper = new Swiper(".swiper.clients", {
            modules: [SwiperGL],
            effect: "gl",
            gl: { shader: "flyeye" },
            centeredSlides: true,
            autoplay: {
                enabled: true,
                disableOnInteraction: false
            },
            loop: true,
            speed: 3000,
            spaceBetween: 0,
            navigation: {
                prevEl: ".swiper-button-prev",
                nextEl: ".swiper-button-next",
            },
            pagination: {zclickable: true, el: ".swiper-pagination" },
            keyboard: { enabled: true },
            parallax: { enabled: true },
        });
        $('.swiper.clients').on('mouseenter', function(e){
            swiper.autoplay.stop();
        })
        $('.swiper.clients').on('mouseleave', function(e){
            swiper.autoplay.start();
            $('.swiper-description').css('height', 'auto');
        })
    });
</script>
@endsection