@extends('web.layouts.container')

@section('content')
    <section class="recruitment-pg">
        <div class="container">
            <div class="inner">
                <div class="heading-sec mb-5 wow fadeInDown"  >
                    <h6 class="subtitle">{{$title}}</h6>
                    <h4 class="title">{{__('jobApplications.submit_job')}}</h4>
                </div>
                <div class="form-container mt-5">
                    <form method="post" action="{{route('hr.addJob')}}" class="add_job_form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input name="name" type="text" class="form-control" placeholder="{{__('jobApplications.name')}}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input name="email" type="email" class="form-control" placeholder="{{__('jobApplications.email')}}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input name="phone" type="tel" class="form-control" placeholder="{{__('jobApplications.phone')}}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input name="birth_date" class="form-control" type="date" placeholder="{{__('jobApplications.birth_date')}}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input name="job_name" type="text" class="form-control" placeholder="{{__('jobApplications.job_name')}}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <select name="country_name" class="form-control" >
                                        <option value=""> {{__('jobApplications.country_name')}} </option>
                                        @if(count($countries))
                                            @foreach($countries as $country)
                                                <option value="{{$country->name}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group file-input-group">
                                    <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="{{__('main.select')}}">{{__('jobApplications.cv')}} :</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="submit-btn add_job_button"><i class="fab fa-telegram-plane"></i> {{__('main.send')}} </button>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.add_job_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            let form = $('.add_job_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.success){
                toasterSuccess(response.message);
                setTimeout(function () {
                    window.location.reload();
                }, 200);
            }

            if (response.errors){
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }

        });
    </script>
    
    <script>
        $(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