@extends('site.app')
@section('pageTitle', __('menu.jobs'))
@section('content')

<!-- BANNER AREA -->
@if (isset($banner) && $banner->image)
    <div class="trabaja-banner-area" style="background-image: url('/assets/images/banners/{{$banner->image}}');">>
        <div class="container">
            <div class="row">
                <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                    <div class="trabaja-text cmn-style">
                        <h2>{{__('banner.jobs')}}</h2>
                        <span><a href="{{route('site.index')}}">{{__('menu.home')}}</a></span>
                        <a href="{{ route('site.trabaja') }}">{{__('menu.jobs')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- TRABAJA AREA -->
<div class="trabaja-text-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                <div class="trabaja-title">
                    <h2>{{__('jobs.title')}}</h2>
                </div>
                <div class="trabaja-text">
                    <p>
                    	{{ __('jobs.description') }}
                    	<br>{{ __('jobs.required_fields') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="trabaja-form-area">
    {!! Form::open(['route' => 'site.work.send', 'method' => 'POST', 'class' => 'contact-form', 'enctype'=> 'multipart/form-data']) !!}
    @csrf
    {!! (new App\Models\ReCaptcha)->field('newagent') !!}
	    <div class="container">
	        <div class="row">
	            <div class="col-lg-5 col-lg-offset-1 col-md-6 col-xs-12">
	                <!-- cUSTOM SELECT -->
	                <div class="custom-select" style="width:100%;">
	                    <select name="unidad">
	                        <option value="">{{__('jobs.form_unit')}}</option>
                            @foreach ($units as $unit )
                                <option value="{{$unit->name}}">{{$unit->name}}</option>
                            @endforeach
	                    </select>
	                </div>
	                <div class="trabaja-form-left-area">
	                    <div class="select-option">
	                    </div>
	                    <div class="form-area">
	                        <div class="form-group">
                                {!! Form::label('fullname', trans(__('jobs.form_fullname')).'(*)') !!}
                                {!! Form::text('fullname', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
                                {!! Form::label('cellphone', trans(__('jobs.form_phone')).'(*)') !!}
                                {!! Form::text('cellphone', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
                                {!! Form::label('nationality', trans(__('jobs.form_nationality')).'(*)') !!}
                                {!! Form::text('nationality', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
                                {!! Form::label('address', trans(__('jobs.form_address')).'(*)') !!}
                                {!! Form::text('address', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
                                {!! Form::label('msg', trans(__('jobs.form_message')).'(*)') !!}
                                {!! Form::textarea('msg', null, ['class'=>'form-control', 'row'=>'7', 'placeholder'=>trans('jobs.form_message_text')]) !!}
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="col-lg-5 col-md-6 col-xs-12">
	            	<!-- cUSTOM SELECT -->
	                <div class="custom-select" style="width:100%;">
	                    <select name="cargo">
	                        <option value="">{{__('jobs.form_position')}}</option>
                            <option value="{{__('administration_finance')}}">{{__('administration_finance')}}</option>
                            <option value="{{__('accounting')}}">{{__('accounting')}}</option>
                            <option value="{{__('machine_operator')}}">{{__('machine_operator')}}</option>
                            <option value="{{__('electrician_technician')}}">{{__('electrician_technician')}}</option>
	                    </select>
	                </div>
	                <div class="trabaja-form-left-area">
	                    <div class="form-area">
	                        <div class="form-group">
                                {!! Form::label('email', trans(__('jobs.form_email')).'(*)') !!}
                                {!! Form::email('email', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
                                {!! Form::label('ci', trans(__('jobs.form_ci')).'(*)') !!}
                                {!! Form::text('ci', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
	                            <label for="gender">{{ __('jobs.form_gender') }}</label>
	                            <div class="custom-select" style="width:100%;">
				                    <select name="gender">
				                        <option value="Masculino">{{ __('jobs.form_gender_male') }}</option>
				                        <option value="Femenino">{{ __('jobs.form_gender_female') }}</option>
				                        <option value="Sin espeficiar">{{ __('jobs.form_gender_none') }}</option>
				                    </select>
			                	</div>
	                        </div>
	                        <!-- single form -->
	                        <div class="form-group">
                                {!! Form::label('city', trans(__('jobs.form_city'))) !!}
                                {!! Form::text('city', null, ['class'=>'form-control']) !!}
	                        </div>
	                        <div class="file-uplode">
	                            <h2>{{__('jobs.form_attached')}} (*)</h2>
	                            <input type="file" name="archivo" id="archivo" class="inputfile inputfile-1"  multiple />
                                <label for="archivo"><span>{{ __('jobs.form_attached_text')}}</span></label>
	                        </div>
	                        <div class="enviar-btn">
	                            <button type="submit" data-attach-loading><span>{{__('jobs.form_send')}} <i class="fa fa-paper-plane"></i></span></button>
                                @if(count($errors->all()) > 0 || (isset($_GET['test']) && $_GET['test'] == 'error'))
                                <p class="form-message error mb-0 mt-2 fw-semibold">
                                    @foreach ($errors->all() as $er)
                                        - {{$er}} <br/>
                                    @endforeach
                                </p>
                                @endif
                                @if(session()->has('success') || (isset($_GET['test']) && $_GET['test'] == 'success'))
                                    <p class="form-message success mb-0 mt-20">{{__('thank.alert')}}</p>
                                @endif
                            </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
    {!! Form::close() !!}
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
    var fileInput = document.getElementById('archivo');
    var fileLabel = document.querySelector('label[for="archivo"] span');

    fileInput.addEventListener('change', function(event) {
        var input = event.target;
        var fileName = input.files.length > 1
            ? `${input.files.length} files selected`
            : input.files[0].name;

        fileLabel.textContent = fileName;
    });
});
</script>

@endsection