@extends('layout.mainlayout')

@section('content')
  <main class="page-main">
<!-- Start Breadcrubms Section -->
<section class="new-sec breadcrumbs-sec without-border">
        <div class="container">
          <h3 class="page-title">{{trans('web.join_our_team')}}</h3>
          <i class="ri-arrow-down-s-line icon"></i>
        </div>
      </section>
      <!-- End Breadcrubms Section -->
      <!-- Start Apply Section -->
      <section class="new-sec apply-sec">
        <div class="container">
          <div class="sec-header">
            <h2 class="title" id="position-title">Product Manager</h2>
            <p class="job-info">
              <span class="location">Jordan, Amman</span>
              <span class="separator"></span>
              <span class="type">Full time</span>
            </p>
          </div>
          <div class="sec-form">
            <form class="form" method="POST" action="/applyPosition">
              {{-- Honeypot anti-spam field: hidden from real users, bots fill it and get rejected --}}
              <div style="position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden" aria-hidden="true">
                <input type="text" name="company_registration" tabindex="-1" autocomplete="off" value="">
              </div>
              <div class="form-part">
                <h3 class="part-title">Personal information</h3>
                <div class="part-inputs">
                  <div class="twice">
                    <div class="form-group">
                      <input type="text" class="form-control" required name="first_name" placeholder="{{trans('web.first_name')}}*">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" required name="last_name" placeholder="{{trans('web.last_name')}}*">
                    </div>
                  </div>
                  <div class="twice">
                    <div class="form-group">
                      <input type="text" class="form-control" required name="email" placeholder="{{trans('web.email')}}*">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" required name="contact_number" placeholder="{{trans('web.contact_number')}}*">
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-part">
                <h3 class="part-title">Details</h3>
                <div class="part-inputs">
                  <div class="twice">
                    <div class="form-group">
                      <input type="text" class="form-control" name="country" placeholder="{{trans('web.country')}}">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" name="city" placeholder="{{trans('web.city')}}">
                    </div>
                  </div>
                  <div class="form-group">
                    <textarea class="form-control" name="cover_letter" placeholder="{{trans('web.cover_letter')}}"></textarea>
                  </div>
                </div>
              </div>
              <div class="form-part">
                <h3 class="part-title">{{trans('web.resume')}}</h3>
                <div class="part-inputs">
                  <div class="form-group file">
                    <input type="file" id="resume" class="d-none" accept=".docx, .doc, .rtf, .pdf">
                    <label class="btn file-label" for="resume">
                      Choose file
                    </label>
                    <p class="upload-note">File types accepted: .docx, .doc, .rtf, .pdf. File size limit 500KB</p>
                  </div>
                </div>
              </div>
              <div class="form-part">
                <div class="form-group">
                  <button class="btn btn-blazma">
                    <span>{{trans('web.apply')}}</span>
                    <span class="icon">@if(app('translator')->getLocale() == 'ar') &#10229; @else &#10230; @endif</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>
      <!-- End Apply Section -->
      @include('still-have-question')
  </main>
@endsection

@section('frontend_scripts')
  <script>
    var position = getUrlParameter('position').replace('-', ' ');

    document.getElementById('position-title').textContent = position;
  </script>
@endsection