@extends('web.layouts.container')

@section('header')
    <div class="inner-header text-center" style="background-image: url({{$image ? asset($image) : asset('assets/web/images/contact.jpg')}});">
        <h4><span>{{$title ?? __('careers.inner_page')}}</span></h4>
    </div>
@endsection

@section('content')
    <div class="contact2">
        <div class="contact-for section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-success ajaxSuccess d-none"></div>
                        <div class="alert alert-danger ajaxError d-none"></div>
                        <form action="{{route('careers')}}" method="post" class="form-row career_form" enctype="multipart/form-data">
                            @csrf()
                            <div class="form-group col-lg-6">
                                <label>{{__('careers.name')}}</label>
                                <input type="text" name="name" class="form-control" placeholder="{{__('careers.name')}}">
                            </div>
                            <div class="form-group col-lg-6">
                                <label>{{__('careers.email')}}</label>
                                <input type="text" name="email" class="form-control" placeholder="{{__('careers.email')}}">
                            </div>
                            <div class="form-group col-lg-6">
                                <label>{{__('careers.phone')}}</label>
                                <input type="tel" name="phone" class="form-control" placeholder="{{__('careers.phone')}}">
                            </div>
                            <div class="form-group col-lg-6">
                                <label>{{__('careers.select')}}</label>
                                <select class="form-control" name="type">
                                    <option value="individuals">{{__('careers.individuals')}}</option>
                                    <option value="companies">{{__('careers.companies')}}</option>
                                </select>
                            </div>
                            <div class="form-group col-12">
                                <div class="file-upload">
                                    <div class="file-upload-wrapper" data-text="{{__('careers.press_to_upload')}}">
                                        <input name="job_file" type="file" class="file-upload-field" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <label> {{__('careers.message')}}</label>
                                <textarea name="message" rows="6" class="form-control" placeholder="{{__('careers.message')}}"></textarea>
                            </div>
                            <div class="form-group col-lg-12 text-center">
                                <button class="butn color career_button"><span>{{__('careers.send')}}</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.career_button').click(async function (e) {
                e.preventDefault();

                let interval = setInterval(function () {
                    $('.ajaxError, .ajaxSuccess').slideUp(400);
                    clearInterval(interval)
                }, 3000);

                let form = $('.career_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) {
                    $('.ajaxError').removeClass('d-none').slideDown().html(response.errors);
                    $('.ajaxSuccess').addClass('d-none');
                }
                if (response.message) {
                    $('.ajaxSuccess').removeClass('d-none').slideDown().html(response.message);
                    $('.ajaxError').addClass('d-none');
                    $('.career_form input[type!="file"], textarea').val('')
                }
            });
        });
    </script>
@endsection