@extends('web.layouts.container')

@section('header')
    <div class="container">
        <div class="inner">
            <div class="top">
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">{{__('main.home')}}</a>
                <span>{{$jobPage->title}}</span>
            </div>
{{--            <h2>{{$jobPage->title}}</h2>--}}
{{--            <p>{{stripText($jobPage->description)}}</p>--}}
        </div>
    </div>
@endsection

@section('content')
    <section class="form-app">
        <div class="container">
            <div class="inner">
                <div class="heading-sec wow zoomIn " data-wow-duration="2s">
                    <h4>{{__('jobs.application_form')}}</h4>
                </div>
                <form method="post" action="{{route('job.store')}}" class="jobs_form">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>{{__('jobs.name')}}</label>
                                <input name="name" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>{{__('jobs.email')}}</label>
                                <input name="email" class="form-control" type="email">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>{{__('jobs.phone')}}</label>
                                <input name="phone" class="form-control" type="tel">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>{{__('jobs.nationality')}}</label>
                                <input name="nationality" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>{{__('jobs.speciality_id')}}</label>
                                <select name="speciality_id" class="form-control">
                                    <option>{{__('jobs.speciality_id')}}</option>
                                    @if(count($specialities))
                                        @foreach($specialities as $speciality)
                                            <option value="{{$speciality->id}}">{{$speciality->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <label>{{__('jobs.experience_years')}}</label>
                            <input type="number" min="1" name="experience_years" class="form-control">
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group file-input-group">
                                <label>{{__('jobs.cv')}}</label>
                                <div class="wrap">
                                    <div class="file">
                                        <div class="file__input" id="file__input">
                                            <input class="file__input--file" id="customFile" type="file" multiple="multiple" name="cv" />
                                            <label class="file__input--label" for="customFile" data-text-btn="{{__('jobs.choose')}}">{{__('jobs.choose_file')}}:</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>{{__('jobs.details')}}</label>
                                <textarea name="details" rows="11" class="form-control"></textarea>
                            </div>
                        </div>
                        <button class="main-btn jobs_button"><span>{{__('jobs.send')}}</span></button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        let url = "{{asset($jobPage->image)}}";
        $('header').addClass('inner_header').attr('style', 'background: url('+url+')');
        $('.navs-container').addClass('inner_nav');


        $('.jobs_button').click(async function (e) {
            e.preventDefault();

            let form = $('.jobs_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.errors) {
                toasterError(response.errors);
            }
            if (response.message) {
                toasterSuccess(response.message);
                $('.jobs_form input, textarea').val('');
            }
        });


        $(document).ready(function() {

            // ------------  File upload BEGIN ------------
            $('.file__input--file').on('change', function(event) {
                var files = event.target.files;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    $("<div class='file__value'><div class='file__value--text'>" + file.name + "</div><div class='file__value--remove' data-id='" + file.name + "' ></div></div>").insertAfter('#file__input');
                }
            });

            //Click to remove item
            $('body').on('click', '.file__value', function() {
                $(this).remove();
            });
            // ------------ File upload END ------------

        });

    </script>
@endsection