@extends('layouts.master', ['view' => 'jobs'])


@section('editable_content')

    {{-- TODO: remove hardcoded stuff --}}

    <div class="image-wrapper">
        @include('layouts.partials.navigation')
        <div class="home-content job-content">
            <div class="home-intro grid-row">
                <section class="grid-col col-6">
                    <div class="references-slider">
                        <ul class="reference-nav">
                            <li class="" data-reference="0"></li>
{{--                            <li data-reference="1" class=""></li>--}}
{{--                            <li data-reference="2" class="active"></li>--}}
                        </ul>
{{--                        <figure class="reference image" data-reference="0" style="background-image: url('/uploads/images/dynamic/1536737489-medium-ik-ga-op-zoek.JPG');"></figure>--}}
{{--                        <figure class="reference image" data-reference="1" style="background-image: url('/uploads/images/dynamic/1536737489-medium-ik-heb-klasse.JPG');"></figure>--}}
{{--                        <figure class="reference image active" data-reference="2" style="background-image: url('/uploads/images/dynamic/1536737489-medium-ik-werk-samen.JPG');"></figure>--}}
                        <figure class="reference image active" data-reference="0" style="background-image: url('/uploads/images/dynamic/1687428773-medium-dna.jpg');"></figure>
                    </div> </section> <section class="grid-col col-5 offset-1">
                    <h1>{{$job->name}}</h1>
                    <p>
                        {{$job->translation->description}}
                    </p>

                    <div class="job-info">
                        @if(isset($job->pay) && $job->pay != '')
                            <div class="job-info__item">
                                <svg height="48" width="42">
                                    <use href="/img/icons/pay.svg#pay"></use>
                                </svg>
                                {{$job->pay}}
                            </div>
                        @endif

                        @if(isset($job->contract) && $job->contract != '')
                            <div class="job-info__item">
                                <svg height="48" width="38">
                                    <use href="/img/icons/contract.svg#contract"></use>
                                </svg>
                                {{$job->contract}}
                            </div>
                        @endif

                        @if(isset($job->possibilities) && $job->possibilities != '')
                            <div class="job-info__item">
                                <svg height="48" width="71">
                                    <use href="/img/icons/possibilities.svg#possibilities"></use>
                                </svg>
                                {{$job->possibilities}}
                            </div>
                        @endif
                    </div>



                    <div class="links-holder">
                        <a class="button internalLink" href="#vacature">
                            Lees verder
                        </a>
{{--                        <div class="contact-options"> <div class="option call">--}}
{{--                                <p> Direct contact? <a href="tel:0736847060">Bel 073 - 684 70 60</a></p>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>




{{--                    @if(isset($job->contact_name))--}}
{{--                        <div class="job-info job-info--contact">--}}
{{--                            @if(isset($job->contact_phone))--}}
{{--                                <a href="tel:{{$job->contact_phone}}" class="job-info__item">--}}
{{--                                    <svg height="48" width="48">--}}
{{--                                        <use href="/img/icons/phone.svg#phone"></use>--}}
{{--                                    </svg>--}}
{{--                                    Bel {{$job->contact_name}} voor meer info--}}
{{--                                </a>--}}
{{--                                <a href="https://wa.me/{{$job->contact_phone}}" class="job-info__item">--}}
{{--                                    <svg height="48" width="48">--}}
{{--                                        <use href="/img/icons/whatsapp.svg#whatsapp"></use>--}}
{{--                                    </svg>--}}
{{--                                    App je vraag aan {{$job->contact_name}}--}}
{{--                                </a>--}}
{{--                            @endif--}}
{{--                            @if(isset($job->contact_email))--}}
{{--                                <a href="mailto:{{$job->contact_email}}" class="job-info__item">--}}
{{--                                    <svg height="48" width="48">--}}
{{--                                        <use href="/img/icons/mail.svg#mail"></use>--}}
{{--                                    </svg>--}}
{{--                                    Solliciteer en mail je cv aan {{$job->contact_name}}--}}
{{--                                </a>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    @endif--}}




                </section>




            </div>
        </div>
    </div>
    <section class="" id="vacature">

        @if(isset($jobBlocksContent))
            @foreach($jobBlocksContent as $key => $block)
                @if($block->status && isset($block->code_name) && $block->code_name == '')

                    @if(isset($block->view) && $block->view != '')
                        @include($block->view, ['dynamicContent' => $block, 'order' => $key])
                    @else
                        @include('layouts.partials.dynamic.'.$block->typeSlug, ['dynamicContent' => $block, 'order' => $key])
                    @endif

                @endif
            @endforeach
        @endif


    </section>


    <div id="vacature-contact">
        <div class="container">
            <div class="job-info job-info--contact">
                @if(isset($job->contact_phone) && $job->contact_phone != '')
                    <a href="tel:{{$job->contact_phone}}" class="job-info__item">
                        <svg height="48" width="48">
                            <use href="/img/icons/phone.svg#phone"></use>
                        </svg>
                        Bel {{$job->contact_phone_name}} voor meer info
                    </a>
                @endif
                @if(isset($job->contact_whatsapp) && $job->contact_whatsapp != '')
                    <a href="https://wa.me/{{$job->contact_whatsapp}}" class="job-info__item">
                        <svg height="48" width="48">
                            <use href="/img/icons/whatsapp.svg#whatsapp"></use>
                        </svg>
                        App je vraag aan {{$job->contact_whatsapp_name}}
                    </a>
                @endif
                @if(isset($job->contact_email) && $job->contact_email != '')
                    <a href="mailto:{{$job->contact_email}}" class="job-info__item">
                        <svg height="48" width="48">
                            <use href="/img/icons/mail.svg#mail"></use>
                        </svg>
                        Solliciteer en mail je cv aan {{$job->contact_email_name}}
                    </a>
                @endif
            </div>
        </div>
    </div>

@endsection

@section('extra-js')
    <script src="/js/jquery.touchSwipe.min.js"></script>
    <script src="/js/referenceSlider.js"></script>
@endsection