@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Careers')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
<!-- breadcrumb area starts here  -->
  <div class="breadcrumb-area">
    <div class="container">
      <div class="breadcrumb-wrap text-center">
        <h2 class="page-title">{{ __('Careers') }}</h2>
        <ul class="breadcrumb-pages">
          <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
          <li class="page-item">{{ __('Careers') }}</li>
        </ul>
      </div>
    </div>
  </div>
<!-- breadcrumb area ends here  -->
<!-- work area starts here  -->
  <div class="about-us-area section">
    <div class="container">
      @if(count($careers) > 0)
      <div class="row">
        <div class="col-md-4">
          <div class="emzFormBox">
            <form enctype="multipart/form-data" method="POST" action="{{route('careerForm.store')}}">
                @csrf
              <div class="emzInputBox">
                <label for="first_name" class="emzLabel">{{ __('First Name') }}</label>
                <input required type="text" id="first_name" name="FirstName" class="form-control" value="{{ old('FirstName') }}">
              </div>
              <div class="emzInputBox">
                <label for="last_name" class="emzLabel">{{ __('Last Name') }}</label>
                <input required type="text" id="last_name" name="LastName" class="form-control" value="{{ old('LastName') }}">
              </div>
              <div class="emzInputBox">
                <label for="email" class="emzLabel">{{ __('Email') }}</label>
                <input required type="email" id="email" name="Email" class="form-control" value="{{ old('Email') }}">
              </div>
              <div class="emzInputBox">
                <label for="file" class="emzLabel">{{ __('Upload CV *') }}</label>
                <input type="file" name="file" id="file" class="form-control emzOption" value="{{ old('file') }}">
              </div>
              <div class="emzInputBox">
                <label for="file" class="emzLabel">{{ __('Join Our Careers Database') }}</label>
                 <select required class="form-select emzSelectIcon emzOption" name="careers_id" aria-label="Default select example">
                    <option value="">{{ __('Select') }}</option>
                    @foreach ($careers as $key => $career)
                        <option value="{{ $career->id }}"> {{ $career->title_en }}</option>
                    @endforeach
                </select>
              </div>
              {{-- Recaptcha --}}
                   <div id="my_captcha_form">                
                     {!! NoCaptcha::renderJs() !!}
                     {!! NoCaptcha::display() !!}
                  </div>

              <button type="submit" class="btn emzSendBtn mt-5">{{ __('Send')}}</button>
            </form>
          </div>
        </div>
          <div class="col-md-8">

              @foreach ($careers as $key => $career)
                <div class="emzCareerCard">
                  <div class="emxTxt"> {{ langConverter($career->title_en ,$career->title_fr ) }} </div>
                  <div class="emzTime"> {{ $career->date }} </div>
                  <hr class="emzDividor">
                  <button type="button" data-bs-toggle="collapse" data-bs-target="#careerDetails_{{ $career->id }}" aria-expanded="false" aria-controls="careerDetails_{{ $career->id }}" class="btn emzDetails p-0"> {{ __('Details')}} </button>
                </div>
                 <div class="collapse emzDetailsCollapsed" id="careerDetails_{{ $career->id }}">
                  <div class="card border-0">
                    <div class="emzMb30">
                      <div class="emzTit">{{ __('Job Description :')}}</div>
                      <div class="emzDescription">{!!langConverter($career->desc_en ,$career->desc_fr ) !!} </div>
                    </div>
                  </div>
                </div> 
              @endforeach
              {{-- Pagination --}}
              {{ $careers->links('vendor.pagination.careers') }}
          </div>
      </div>
      @else
        <h2 class="emxTxt text-center"> {{ __('There are no careers available now')}} </h2>
      @endif
    </div>
  </div>
<!-- work area ends here  -->
@endsection