@extends('layouts.app')
@section('page_title', __('careers.title'))
@section('page_description', __('careers.description'))
@section('page_keywords', __('careers.keywords'))
@section('og_title', __('careers.title'))
@section('og_description', __('careers.description'))
@section('twitter_title', __('careers.title'))
@section('twitter_description', __('careers.description'))
@section('page_content')
    <div class="page-content bg-white">
        <div class="dlab-bnr-inr bg-pt" style="background-image:url({{ asset('assets/images/about/banner.jpg') }});">
            <div class="container">
                <div class="dlab-bnr-inr-entry">
                    <h1 class="text-white">@lang('careers.title')</h1>
                    <div class="breadcrumb-row">
                        <ul class="list-inline">
                            <li><a href="javascript:void(0);">@lang('home.title')</a></li>
                            <li>@lang('careers.title')</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-block">
            <div class="section-full content-inner bg-gray">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 inner-text">
                            <div class="pb-4"><img src="{{ asset('assets/images/career/karriera.jpg') }}" alt=""></div>
                            <p>@lang('careers.section1.description')</p>
                            <h4 class="title">@lang('careers.section2.title')</h4>
                            <p>@lang('careers.section2.description')</p>
                            <h4 class="title">@lang('careers.section3.title')</h4>
                            <p>@lang('careers.section3.description')</p>
                            <h4 class="title">@lang('careers.section4.title')</h4>
                            <p>@lang('careers.section4.description')</p>
                        </div>
                        @foreach($careers as $career)
                            <div class="col-lg-12 col-md-12 col-sm-12 m-b30">
                                <div class="icon-bx-wraper row bx-style-1 p-a30 center fly-box m-b30 bg-white">
                                    <div class="col-lg-4 col-md-12 col-sm-12">
                                    <img src="{{ $career->featured_image_url }}" alt="">
                                </div>
                                    <div class="icon-content col-lg-8 col-md-12 col-sm-12" style="text-align: left">
                                        <h5 id="position-{{ $career->id }}" class="dlab-tilte text-uppercase">{{ $career->position }}</h5>
                                        <div>@lang('careers.expire-txt') <b>{{ $career->expired_at ->format('m/d/Y') }}</b></div>
                                        <p>{!! $career->description !!}</p>
                                        <button class="site-button apply-now-btn" style="float: right" data-id="{{ $career->id }}">@lang('careers.apply-btn')</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="section-full bg-img-fix" id="apply" style="background-image:url({{ asset('assets/images/background.png') }}); background-color:#003c77;">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5 col-md-12 content-inner chosesus-content text-white">
                            <div class="icon-xl m-b30">
                                <span class="icon-cell"><i class="flaticon-worker"></i></span>
                            </div>
                            <h2 class="title-box font-weight-300 m-b15 wow fadeInLeft" data-wow-delay="0.2s">@lang('careers.apply-form.heading')<span class="bg-primary"></span></h2>
                            <h4 class="font-weight-300 wow fadeInLeft" data-wow-delay="0.8s">@lang('careers.apply-form.heading2')</h4>
                            <ul class="list-checked primary wow fadeInLeft" data-wow-delay="1s">
                                <li><span>@lang('careers.apply-form.option1')</span></li>
                                <li><span>@lang('careers.apply-form.option2')</span></li>
                                <li><span>@lang('careers.apply-form.option3')</span></li>
                            </ul>
                        </div>
                        <div class="col-lg-7 col-md-12 m-b30">
                            <form enctype="multipart/form-data" class="app-form inquiry-form contact-project bg-white box-shadow wow fadeInUp" id="app-form" data-wow-delay="0.2s" method="POST" action="{{ route('static.careers.post') }}">
                                <x-honeypot></x-honeypot>
                                @csrf
                                <h3 class="title-box font-weight-300 m-t0 m-b10">@lang('careers.apply-form.title')</h3>
                                <div class="row">
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="ti-user text-primary"></i></span>
                                                <input name="name" id="name" type="text" class="form-control" placeholder="@lang('careers.apply-form.name')" value="">
                                                <span class="invalid-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="ti-mobile text-primary"></i></span>
                                                <input name="phone" id="phone" type="tel" class="form-control" placeholder="@lang('careers.apply-form.phone')">
                                                <span class="invalid-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-sm-12">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="ti-email text-primary"></i></span>
                                                <input name="email" id="email" type="email" class="form-control"  placeholder="@lang('careers.apply-form.email')" >
                                                <span class="invalid-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="ti-file text-primary"></i></span>
                                                <input name="cv" id="cv" type="file" class="form-control" placeholder="@lang('careers.apply-form.cv')">
                                                <span class="invalid-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <select name="position" id="pos">
                                                    <option value="">@lang('careers.apply-form.poz')</option>
                                                    @foreach($careers as $career)
                                                        <option value="{{ $career->position }}">{{ $career->position }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="invalid-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-sm-12">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="ti-agenda text-primary"></i></span>
                                                <textarea name="message" id="message" rows="4" class="form-control" placeholder="@lang('careers.apply-form.message')"></textarea>
                                                <span class="invalid-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-sm-12">
                                        <button name="submit" type="submit" value="Submit" class="apply-btn site-button button-lg"> <span>@lang('careers.apply-form.btn')</span> </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            $('.apply-now-btn').click(function () {
                $('#pos').val($(`#position-${$(this).data('id')}`).text()).change();
                $('html, body').animate({
                    scrollTop: $('#apply').offset().top - 150
                }, 500);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('form.app-form').submit(function (e) {
                e.preventDefault();
                let $form = $(this),
                    $btn = $form.find('.apply-btn'),
                    $spinner = $form.find('.fa-spin');

                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    data: new FormData($form[0]),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        $form.find('span.invalid-feedback').html('');
                        $form.find('.is-invalid').removeClass('is-invalid');
                        $btn.attr('disabled', true);
                        $spinner.show();
                    },
                    success: function(data){
                        $form[0].reset();
                        $spinner.hide();

                        if (data.success) {
                            $form.prepend('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                        } else {
                            $form.prepend('<div class="alert alert-danger" role="alert">'+data.message+'</div>');
                        }

                        setTimeout(function () {
                            location.reload();
                        }, 5000);
                    },
                    error: function(data){
                        if(data.status === 422) {
                            $.each(data.responseJSON.errors, function(inputName, errorMessage){
                                let $input = $('[name=' + inputName + ']');
                                $input.addClass('is-invalid');
                                $input.siblings('span.invalid-feedback').text(errorMessage[0]);
                            });
                        }
                        $btn.attr('disabled', false);
                        $spinner.hide();
                    }
                });
            });
        });
    </script>
@endsection