@extends('layouts.site')
@section('title', $job->t('title'))
@section('content')
@php
    $en = app()->getLocale() === 'en';
    $submitted = session('success');
@endphp
<section class="section section-cream page-v4" style="padding-top:3rem;">
<div class="container" style="max-width:900px;">
    <a href="{{ route('careers.index') }}" style="color:var(--gold);">← {{ $en ? 'All Positions' : 'كل الوظائف' }}</a>
    <h1 class="sec-title" style="margin-top:1rem;">{{ $job->t('title') }}</h1>
    <p style="color:var(--text-muted);">{{ $job->department }} · {{ $job->t('location') }} · {{ $job->work_type }}</p>
    <p style="line-height:1.9;margin:1.5rem 0;">{{ $job->t('summary') }}</p>

    <div class="feat-card" style="margin-bottom:1.5rem;">
        <h2 style="color:var(--gold);margin-bottom:1rem;">{{ $en ? 'Responsibilities' : 'المسؤوليات' }}</h2>
        <ul>@foreach($job->responsibilities ?? [] as $r)<li>{{ is_array($r)?($r[app()->getLocale()]??$r['ar']??reset($r)):$r }}</li>@endforeach</ul>
    </div>
    <div class="feat-card" style="margin-bottom:1.5rem;">
        <h2 style="color:var(--gold);margin-bottom:1rem;">{{ $en ? 'Qualifications' : 'المتطلبات' }}</h2>
        <ul>@foreach($job->qualifications ?? [] as $q)<li>{{ is_array($q)?($q[app()->getLocale()]??$q['ar']??reset($q)):$q }}</li>@endforeach</ul>
    </div>

    <div class="feat-card" id="apply-box">
        <h2 style="color:var(--gold);margin-bottom:1rem;">{{ $en ? 'Apply Now' : 'قدّم الآن' }}</h2>

        @if($submitted)
        <div class="ald-alert ok" role="status" aria-live="polite">
            <strong>{{ $en ? 'Application received.' : 'تم استلام طلبك.' }}</strong>
            <p style="margin:.4rem 0 0;">{{ $submitted }}</p>
        </div>
        <p style="color:var(--text-muted);margin-top:1rem;">
            {{ $en ? 'We will contact you if your profile matches.' : 'سنتواصل معك إذا كان ملفك مناسبًا.' }}
        </p>
        @else
            @if($errors->any())
            <div class="ald-alert err" role="alert">
                <strong>{{ $en ? 'Could not submit — please fix the following:' : 'تعذّر الإرسال — صحّح التالي:' }}</strong>
                <ul style="margin:.5rem 0 0;padding-inline-start:1.2rem;">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
            @endif

            <form method="POST" action="{{ route('careers.apply', $job) }}" enctype="multipart/form-data" class="ald-form" id="job-apply-form">
                @csrf
                <div class="grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                    <div><label>{{ $en ? 'First Name' : 'الاسم الأول' }} *</label><input name="first_name" required value="{{ old('first_name') }}"></div>
                    <div><label>{{ $en ? 'Last Name' : 'اسم العائلة' }} *</label><input name="last_name" required value="{{ old('last_name') }}"></div>
                </div>
                <div><label>{{ __('Email') }} *</label><input type="email" name="email" required value="{{ old('email') }}"></div>
                <div><label>{{ __('Mobile') }} *</label><input name="phone" required value="{{ old('phone') }}"></div>
                <div><label>LinkedIn</label><input name="linkedin" value="{{ old('linkedin') }}"></div>
                <div>
                    <label>CV * <span style="font-weight:400;color:var(--text-muted);font-size:.85rem;">(PDF / DOC — {{ $en ? 'max 5MB' : 'بحد أقصى 5 ميجا' }})</span></label>
                    <input type="file" name="cv" accept=".pdf,.doc,.docx,application/pdf" required>
                </div>
                <div><label>{{ $en ? 'Cover Note' : 'ملاحظة' }}</label><textarea name="cover_note" rows="3">{{ old('cover_note') }}</textarea></div>
                <button class="btn btn-gold" type="submit" id="job-apply-btn">{{ $en ? 'Submit Application' : 'إرسال الطلب' }}</button>
                <p id="job-apply-hint" style="display:none;margin-top:.75rem;color:var(--text-muted);font-size:.9rem;">
                    {{ $en ? 'Uploading your CV… please wait.' : 'جاري رفع السيرة الذاتية… يرجى الانتظار.' }}
                </p>
            </form>
        @endif
    </div>
</div>
</section>
@endsection
@push('scripts')
<script>
(function(){
  const box=document.getElementById('apply-box');
  if(box && (box.querySelector('.ald-alert'))){
    box.scrollIntoView({behavior:'smooth',block:'center'});
  }
  const form=document.getElementById('job-apply-form');
  if(!form) return;
  const btn=document.getElementById('job-apply-btn');
  const hint=document.getElementById('job-apply-hint');
  const busyLabel=@json($en ? 'Sending…' : 'جاري الإرسال…');
  form.addEventListener('submit',function(){
    if(btn){ btn.disabled=true; btn.textContent=busyLabel; }
    if(hint){ hint.style.display='block'; }
  });
})();
</script>
@endpush