@extends('site.master', ['namespace' => 'spinWin'])

@section('content')

    {{-- Header section --}}

    <div class="contained-layout  spinWin__heading">
        <div class="offset-1 col-7 text-block">

            <h1 style="margin-top: 0;">Spin & Win</h1>

            <p>"Geef een slinger aan het rad en zie of je gewonnen hebt. Zonder addertjes en 100% gratis.
                Waarom?&nbsp;We&nbsp;maken bedrijven graag&nbsp;gelukkig."</p>

            <p>Het liefst met een nieuwe huisstijl of website ;)</p>

            <span data-target="roulette" class="button stroked blue arrow  scroll-to-target arrow">
                Test je geluk
            </span>

        </div>

        <div class="col-3  account-managers-holder">
            <div class="account-manager" itemscope itemtype="http://data-vocabulary.org/Person">
                <div class="portrait">
                    <img src="/img/komma/accountmanager_vincent_small.jpg" alt="Vincent van Lierop" itemprop="image" />
                </div>
                <span class="name" itemprop="name">Vincent van Lierop</span>
                <a href="mailto:vincent@komma.nl" itemprop="email">vincent@komma.nl</a><br />
            </div>
        </div>
    </div>

    <div class="container  spinWin__roulette-container" id="roulette">

        <div class="spinWin__roulette">
            <div class="roulette" style="display:none;">
                <img data-name="Adviesgesprek" data-description="Strategisch adviesgesprek, t.w.v €300" src="/img/spinWin/adviesgesprek.svg"/>
                <img data-name="Visitekaartje" data-description="Ontwerp visitekaartje, t.w.v €475" src="/img/spinWin/visitekaartje.svg"/>
                <img data-name="Web scan" data-description="Website scan, t.w.v €400" src="/img/spinWin/web-scan.svg"/>
            </div>
            <p class="spinWin__price"></p>
        </div>

    </div>

    <div class="container spinWin__trigger">
        <button class="spinWin__button spin-button start">Geef een flinke zwierp</button>
        <p class="spinWin__teaser">(niet valsspelen hé)</p>
    </div>


    {{-- Vragen callout --}}
    <section  class="spinWin__winning  @if(!$errors->any()) is-hidden @endif">
        <div class="c-questions">
            <figure class="c-questions__figure">
                <img class="c-questions__img" src="/img/komma/vincent_square.jpg" alt="">
            </figure>

            <div class="c-questions__body  c-questions__body--small">
                <h3 class="c-questions__header">"Gefeliciteerd! Jij slaapt zeker tussen de&nbsp;klavertjes vier?"</h3>
                <p data-target="form" class="c-questions__button  button stroked white scroll-to-target">Verzilver meteen je prijs</p>
                <p class="c-questions__info">(nou vooruit, over 5 minuten mag ook)</p>
            </div>
        </div>
    </section>

    {{-- Form --}}
    <section id="form" class="contained-layout  spinWin__form  @if(!$errors->any()) is-hidden @endif">
        <div class="c-subsection">

            <div class="l-split  c-apply" id="apply-cta--custom-block">

                <div class="l-split__item  c-apply__title">
                    <h2 class="c-subheader">Vul je gegevens in</h2>
                </div>

                <div class="l-split__item  c-apply__form">
                    <form id="vacancyCustomForm" action="{{ route('spinWin.process') }}" method="POST" >

                        @if($errors->any())
                            <p class="spinWin__form-error">{!! $errors->first() !!}</p>
                        @endif

                        {{ csrf_field() }}

                        <input type="hidden" class="price_value" name="price" value="{{ old('price') }}">

                        {{-- Name --}}
                        @include('site.partials.form.text',['key'=>'name', 'autofocusWhenError' => true, 'htmlRequired' => true])
                        @include('site.partials.form.text',['key'=>'company', 'autofocusWhenError' => true, 'htmlRequired' => true])
                        @include('site.partials.form.text',['key'=>'phone', 'autofocusWhenError' => true, 'htmlRequired' => true])

                        <button class="c-button" type="submit">Claim prijs</button>

                    </form>
                </div>

            </div>

{{--            @include('site.blocks.vacancies.applyCtaCustom')--}}
        </div>
    </section>

@endsection

{{-- Footer --}}
@section('footer_button')
    @include('site.partials.footerButton',[
            'label' => "Aanpak",
            'href' => "/aanpak"
        ])
@endsection

@section('body_end')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
    <script src="/js/site/rouletteSpinWin.js"></script>
@endsection