@extends('web.layouts.container')

@section('inner_header')
    <section class="inner-header text-center" style="background-image: url({{asset('assets/web/images/Careers_1_ban.jpg')}});">
        <div class="container">
            <h2>{{__('main.careers')}}</h2>
            <h6><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home')}} </a> <i class="fas fa-chevron-right"></i> {{__('main.careers')}}</h6>
        </div>
    </section>
@endsection

@section('content')

    <!-- -------------- about-pg --------------- -->
    <section class="contact-pg section-padding">
        <div class="container">

            <form action="{{route('contactUs.storeCareers')}}" method="post" class="contact-form pt-5 careers_form">
                @csrf()
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="content">
                            <div class="section-head text-center wow fadeInUp">
                                <h2>{{__('main.careers')}}</h2>
                                {{-- <p>Sed ut perspiciatis unde omnis iste natus error</p> --}}
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input name="name" class="form-control" placeholder="{{__('visitorMessages.name')}}">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input name="email" class="form-control" placeholder="{{__('visitorMessages.email')}}">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input name="phone" class="form-control" placeholder="{{__('visitorMessages.phone')}}">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="file" class="d-flex align-items-center">
                                            <a class="file_button d-flex align-items-center">{{__('careers.chose_file')}}</a>
                                            <input type="file" name="file" id="file" class="d-none">
                                            <input type="text" class="form-control d-flex file_name" placeholder="{{__('careers.no_file_chosen')}}">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <button class="butn color careers_button"><span class="text-uppercase">{{__('main.send')}}</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.navbar').addClass('inner-nav');

        $('input[type="file"]').change(function () {
            $('.file_name').val($(this).val().replace(/C:\\fakepath\\/i, ''))
        })

        if("{{getCurrentLocale()}}" === 'en'){
            $('.file_button').toggleClass('file_button_en');
            $('.file_name').toggleClass('file_name_en');
        }

    </script>
@endsection