@extends('layouts.app')
@section('content')

<!-- CONTENT -->
{{-- cover --}}
<div class="content welcome" >
    <section class="cover">
        <div class="container"> 
            <div class="row">
                <div class="col-md-4">
                    <h1>Üdvözlünk a Škoda <span class="little">i</span>V Akadémián!</h1>
                    <div>
                        Elektromos, benzines, dízel vagy plug-in hybrid? Vajon melyik a legjobb meghajtás 2021-ben? Megéri elektromosban gondolkodni? 
                        Melyiket válaszd, ha új autót vennél?  Megannyi kérdés, azonban a Škoda iV Akadémián minderre megtalálhatod a választ. 
                        Videósorozatunkban ugyanis Magyarósi Csaba vezetésével megismerheted az e-mobilitás izgalmas világát. Tarts velünk! 
                    </div>
                    <a href="{{url('/#videos-knowledge')}}">
                        <button class="button-green">Induljunk!</button>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- modal --}}
    @if(Session::get('kviz-success'))
    <div id="overlay">
        <div class="overlay-content">
            <h1 class="title"> Köszönjük, hogy jelentkeztél.</h1>
            <img src="{{ asset('../images/modal_car.png') }}" class="overlay-img">
            <div>
                A nyertessel a megadott e-mail címen fogjuk felvenni a kapcsolatot. 
            </div>
            <a href="{{url('/')}}">
                <button class="button-transparent">Vissza a főoldalra</button>
            </a>
        </div>
    </div>
    @endif
    
    {{-- <div class="videos-knowledge" id="videos-knowledge" @if(!(count($news) > 0)) style="background-position-y: 20vh;" @endif @if(count($news) > 0) class="isNews" @endif> --}}
    <div class="videos-knowledge @if(count($news) > 0) isNews @endif" id="videos-knowledge">
        {{-- news --}}
        @if(count($news) > 0)
        <div class="news nav-anchor-welcome"  id="news">
            <div class="container ">
                <div class="row">
                    <div class="col-md-12 text-center my-5">
                        <h1>Hírek A Škoda világából</h1>
                    </div> 

                    <div class="col-md-12 news-card-div">
                        @foreach($news as $key => $new)
                        @if($key < 3)
                        <div class="news-card-news">
                            <div class="card">
                                <img class="card-img-top" src="{{ asset('storage/'.$new->image) }}" alt="news">
                                <div class="card-body">
                                    <h5 class="card-title">{{$new->title}}</h5>
                                    <p class="card-text">{!! $new->lead !!}</p>
                                    <a href="{{route('news', ['slug' => $new->slug])}}" class="button-arrow">Részletek  <img src="{{ asset('images/arrow-right.svg') }}" alt="arrow" class="arrow-right"></a>
                                </div>
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    @if(count($news) > 3)
                    <div class="col-md-12">
                        <div class="d-flex justify-content-center text-center mb-3"> 
                            <a href="{{url('/blog')}}" class="button-transparent">Még több hír</a>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif
        {{-- videos --}}
        {{------------------------------------ TODO: IMG CHANGES AND BUTTONS  ---------------------------------------------}}
        <div class="videos nav-anchor-welcome" id="academia">
            <div class="container"> 
                <div class="row">
                    <div class="col-md-12 text-center">
                        {{-- <h1>Skoda IV&nbsp;VIDEÓK</h1> --}}
                        <h1>Irány a Škoda <span class="little">i</span>V Akadémia</h1>
                    </div>
                    <div class="col-md-12 text-center mt-3 mb-1">
                        Nézd meg videóinkat, amiben alaposabban is megismerheted a legújabb plug-in hybrid és elektromos modelleket. De az is kiderül, milyen az élet benzinkutakon túl!
                    </div>
                    
                    @if(!empty($videos))
                    <div class="video-main-container">
                        <div class="video-container">
                            @foreach($videos as $key => $video)
                                @if($key < 4)
                                <div class="video-div">
                                    <img src="{{ asset('storage/'.$video->image) }}" class="video">
                                    <a href="{{url(route('video', ['slug' => $video->slug]))}}" class="video-img-button">
                                        <button class="button-green">Megnézem</button>
                                    </a>
                                </div>
                                @else 
                                <div class="video-div more-video">
                                    <img src="{{ asset('storage/'.$video->image) }}" class="video">
                                    <a href="{{url(route('video', ['slug' => $video->slug]))}}" class="video-img-button">
                                        <button class="button-green">Megnézem</button>
                                    </a>
                                </div>
                                @endif
                            @endforeach
                        </div>
                        @endif
                        
                        @if(count($videos) > 4)
                        <div class="col-md-12 text-center mb-5">
                            @if(!(count($news) > 0)) <button class="button-transparent" id="more-videos">Továbbiak betöltése</button> @endif
                            @if(count($news) > 0) <button class="button-grey" id="more-videos">Továbbiak betöltése</button> @endif
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    {{-- knowledge --}}
    @if(!empty($kviz))
    <section class="knowledge" id="exam">
        <div class="container"> 
            <div class="knowledge-card">
                <div class="row">
                    <div class="col-md-5 align-self-center">
                        <h1>Nyerj Škoda Enyaq <span class="little">i</span>V teszthétvégét!</h1>
                        <div class="text-sm-center text-md-left">
                            Ha megnézted akadémiánk legújabb videóit, akkor itt a lehetőség, hogy megmutasd, mit tanultál belőlük! <br/> Mindössze 9 kérdésre kell helyesen válaszolnod, hogy esélyed legyen megnyerni legújabb elektromos modellünket egy hétvégére.                            
                        </div>
                        <a href="{{url(route('teszt.view'))}}"><button class="button-green">Irány a teszt!</button></a>
                    </div>
                    <div class="col-md-7">
                        <img src="{{ asset('storage/'.$kviz->image) ?? asset('images/welcome/knowledge.png') }}" class="knowledge-img">
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- magyarosi --}}
    <section class="magyarosi nav-anchor-welcome" id="magyarosi">
        <div class="container">
            <div class="magyarosi-card">
                <div class="row">
                    <div class="col-md-5 align-self-center">
                        <h1>A házigazda: Magyarósi Csaba</h1>
                        <div>
                            Nincs akadémia oktató nélkül. Házigazdánk a kötetlen és laza stílusáról, illetve szórakoztatóan informatív videóiról ismert youtuber, Magyarósi Csaba, aki annak ellenére, hogy a hétköznapokban gyakran vezet egy Škoda CITIGOe iV-t, minden témát a tőle megszokott objektivitással közelít meg.   
                        </div>
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-6">
                        <img src="{{ asset('images/welcome/magyarosi-1.jpg') }}" class="magyarosi-img">
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    {{-- divider --}}
    <div class="divider">
        <img src="{{ asset('images/dividers/divider-001.png') }}" class="divider-img">
    </div>
    
    {{-- future --}}
    <section class="future nav-anchor-welcome" id="future">
        <div class="container"> 
            <div class="future-card">
                <div class="row">
                    <div class="col-md-6 align-self-center d-none d-md-block">
                        <img src="{{ asset('images/welcome/jovobol-a-jelenbe.jpg') }}" class="future-img">
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-5 align-self-center">
                        <h1>A jövőből a jelenbe</h1>
                        <div>
                            A márkánál sosem volt kérdés, hogy a technológiának utasaink kényelmét és érdekeit kell szolgálnia. Ezért a mára klasszikussá vált benzines- és dízel autóink mellett a legújabb Škoda iV modellek (elektromos, illetve plug-in hybrid verziók) esetében is ezt tartottuk szem előtt. De vajon mit takar az iV rövidítés? Az "i” betű sugallja az innovációt, intelligenciát és az inspirációt, a "V" betű pedig az angol jármű (vehicle) kifejezést takarja.
                        </div>
                    </div>
                    <div class="col-md-5 my-4 align-self-center d-block d-md-none">
                        <img src="{{ asset('images/welcome/jovobol-a-jelenbe.jpg') }}" class="future-img">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- divider --}}
    <div class="divider">
        <img src="{{ asset('images/dividers/divider-001.png') }}" class="divider-img">
    </div>

        {{-- toltes --}}
    <section class="magyarosi nav-anchor-welcome" id="tech">
        <div class="container">
            <div class="magyarosi-card">
                <div class="row">
                    <div class="col-md-5 align-self-center">
                        <h1>Töltési technológia</h1>
                        <div>
                            Az akkumulátor talán a legfontosabb eleme az elektromos, illetve hybrid autóknak. Éppen ezért fontos megismerni, hogyan is tölthetjük őket a leghatékonyabban. Legyünk otthon vagy egy távoli töltőpontnál. Nézd meg, milyen Škoda megoldások léteznek!
                        </div>
                        <a href="{{url('/skoda-akkumulator-technologia')}}">
                            <button class="button-light-green">Tovább</button>
                        </a>
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-6">
                        <img src="{{ asset('images/welcome/skoda-toltes-0720.jpg') }}" class="magyarosi-img">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- divider --}}
    <div class="divider">
        <img src="{{ asset('images/dividers/divider-001.png') }}" class="divider-img">
    </div>

    {{-- powerpass --}}
    <section class="future nav-anchor-welcome" id="powerpass">
        <div class="container"> 
            <div class="future-card">
                <div class="row">
                    <div class="col-md-6 align-self-center d-none d-md-block">
                        <img src="{{ asset('images/welcome/skoda-powerpass.jpg') }}" class="future-img">
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-5 align-self-center">
                        <h1>Villanyautó egyszerű töltése</h1>
                        <div>
                            Csupán egyetlen kártyára van szükséged ahhoz, hogy egyszerűen feltölthesd elektromos autódat, akármerre is jársz. 
                            A Powerpass segítségével ugyanis használhatod a legtöbb nyilvános szolgáltató töltőlehetőségeit és egy alkalmazásban láthatod az összes töltési adatodat, valamint fizetési előzményeidet. 
                            Fedezd fel, mi mindent tartogat számodra!
                        </div>
                        <a href="{{url('/elli-powerpass')}}">
                            <button class="button-light-green">Megnézem a Powerpasst!</button>
                        </a>
                    </div>
                    <div class="col-md-5 my-4 align-self-center d-block d-md-none">
                        <img src="{{ asset('images/welcome/skoda-powerpass.jpg') }}" class="future-img">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- divider --}}
    <div class="divider">
        <img src="{{ asset('images/dividers/divider-002.png') }}" class="divider-img">
    </div>
    {{------------------------------------ TODO: CAROUSEL  ---------------------------------------------}}
    {{-- models --}}

    <section class="mt-5  nav-anchor-welcome" id="models-title">
        <div class="container"> 
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1>Teljesen elektromos @if (count($cars) > 1) modelljeink @else modellünk @endif</h1>
                </div>
            </div>
        </div>
    </section>
    <div class="models"  id="models">
        <div class="container"> 
            <div class="row">
                <div class="carousel">
                <div class="carousel-inner">
                    @foreach($cars as $key => $car)
                    <div class="carousel-item @if($key == 0) @endif">
                        <div class="model-card">
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="{{ $car->image }}" class="knowledge-img">
                                </div>
                                <div class="col-md-5 align-self-center model-content-div">
                                    <h1>{{$car->title}}</h1>
                                    <div>
                                        {!! $car->description !!}    
                                    </div>
                                    <div class="d-flex flex-wrap text-center"> 
                                        
                                        <a href="{{$car->url }}" target="_blank" class="button-light-green mr-md-4">Részletek</a>
                                        <a href="{{$car->config}}" target="_blank" class="button-grey">Tesztvezetés</a>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                </div>
                            </div>
                            
                            <button class="arrow-div left slider-left">
                                <div class="arrow">
                                   <img src="{{ asset('images/arrow-right-white.svg') }}" alt="arrow" class="arrow-right">    
                                </div>
                            </button>
                           
                            <button class="arrow-div right slider-right" >
                                <div class="arrow">
                                     <img src="{{ asset('images/arrow-right-white.svg') }}" alt="arrow" class="arrow-right">   
                                </div>
                            </button>
                            
                        </div>
                    </div>
                    @endforeach
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer')
<div class="row">
        <small>*A videóban elhangzó információk a videó készítésének időpontjában érvényes állapotot tükrözik.</small>
</div>

@endsection