@extends('layouts.app')
@use('Illuminate\Support\Str')

@php
  $u = auth()->user();
  $isStudent = $u?->isStudent() ?? false;
  $emp = $job->employer;
  $isOpen = $job->isOpen();
  $posted = $job->posted_at ?? $job->created_at;
  $salary = $job->salaryLabel();
  $skills = $job->skills;
  $levels = ['Entry' => 'Entry (0–2 years)', 'Mid' => 'Mid (2–5 years)', 'Senior' => 'Senior (5+ years)'];
  $lines = fn ($t) => collect(preg_split('/\R+/', trim((string) $t)))->map(fn ($l) => trim(ltrim(trim($l), "-•*· ")))->filter()->values();
  $paras = collect(preg_split('/\R{2,}/', trim((string) $job->description)))->map(fn ($p) => trim($p))->filter()->values();
  $duties = $lines($job->responsibilities);
  $reqs = $lines($job->requirements);
  $perks = $lines($job->benefits);

  $daysLeft = $job->closes_at ? (int) now()->startOfDay()->diffInDays($job->closes_at->copy()->startOfDay(), false) : null;
  $closedOn = $job->closes_at && $job->closes_at->isPast() ? $job->closes_at : null;

  $levelWord = Str::lower($job->experience_level).'-level';
  $summary = $job->title.' is '.(preg_match('/^[aeiou]/i', $levelWord) ? 'an' : 'a').' '.$levelWord.' '.Str::lower($job->employment_type).' position at '.$emp->company_name
      .($job->location ? ' in '.$job->location : '').' ('.Str::lower($job->work_mode).'). '
      .($salary ? 'Pay is '.$salary.'. ' : '')
      .(! $isOpen ? 'This role is now closed to new applications.' : ($job->closes_at ? 'Applications close on '.$job->closes_at->format('d M Y').'.' : 'Applications stay open until the role is filled.'))
      .($skills->isNotEmpty() ? ' Key skills: '.$skills->take(4)->pluck('name')->implode(', ').'.' : '');

  $avail = collect(['Immediately', 'Within 2 weeks', 'Within 1 month', 'Within 2 months', 'After I finish my current course'])->mapWithKeys(fn ($a) => [$a => $a])->all();
  $portfolioUrl = $isStudent ? ($u->portfolio?->is_public ? route('portfolio.show', $u->portfolio->slug) : ($u->linkedin_url ?: $u->github_url)) : null;
  $next = '/'.ltrim(request()->path(), '/');
  $shareUrl = route('careers.show', $job->slug);
  $shareText = $job->title.' at '.$emp->company_name.' — INFOTICS career portal';
  $maxMb = config('infotics.careers.resume_max_mb');
  $mimes = config('infotics.careers.resume_mimes');
@endphp

@section('content')
<x-site.page-hero :eyebrow="$emp->company_name" :title="$job->title" :crumbs="[['Home', url('/')], ['Careers', route('careers.index')], [$job->title]]">
  {{ $summary }}
  <x-slot:actions>
    <div class="cp-hero-btns">
      @if(! $isOpen)
        <span class="pill pill-red">Closed</span>
        <a class="btn btn-primary" href="{{ route('careers.index') }}"><x-icon name="briefcase" :size="17"/> Browse open roles</a>
      @elseif($application)
        <span class="pill pill-green"><x-icon name="check" :size="13"/> You applied</span>
        <a class="btn btn-ghost" href="#apply">View your application</a>
      @else
        <a class="btn btn-primary btn-lg" href="#apply"><x-icon name="send" :size="18"/> Apply now</a>
        @if($job->apply_url)<a class="btn btn-ghost btn-lg" href="{{ $job->apply_url }}" target="_blank" rel="noopener nofollow">Apply on employer site <x-icon name="external-link" :size="16"/></a>@endif
      @endif
      @if($isStudent)
        <form method="post" action="{{ route('careers.save', $job->slug) }}">@csrf
          <button class="btn btn-ghost cp-save-btn {{ $saved ? 'is-saved' : '' }}" type="submit" aria-pressed="{{ $saved ? 'true' : 'false' }}"><x-icon name="bookmark" :size="17"/> {{ $saved ? 'Saved' : 'Save job' }}</button>
        </form>
      @endif
    </div>
  </x-slot:actions>
  <x-slot:aside>
    <div class="cp-emp reveal">
      <div class="cp-emp-head">
        <span class="co-logo" aria-hidden="true">@if($emp->logoUrl())<img src="{{ $emp->logoUrl() }}" alt="" loading="lazy">@else{{ initials($emp->company_name) }}@endif</span>
        <div><b>{{ $emp->company_name }}</b><small>{{ collect([$emp->industry, $emp->location])->filter()->implode(' · ') }}</small></div>
      </div>
      <dl>
        @if($emp->company_size)<dt>Company size</dt><dd>{{ $emp->company_size }} people</dd>@endif
        <dt>Open roles</dt><dd><a href="{{ route('careers.index', ['q' => $emp->company_name]) }}">{{ $employerOpenCount }} on this portal</a></dd>
        @if($emp->website)<dt>Website</dt><dd><a href="{{ $emp->website }}" target="_blank" rel="noopener nofollow">{{ preg_replace('#^https?://(www\.)?#', '', rtrim($emp->website, '/')) }}</a></dd>@endif
      </dl>
    </div>
  </x-slot:aside>
</x-site.page-hero>

<div class="container cp-detail">
  <div class="cp-main">
    @unless($isOpen)
      <div class="callout warn mb-3" role="status"><x-icon name="alert" :size="20"/><div><b>This role is closed.</b> {{ $closedOn ? 'Applications closed on '.$closedOn->format('d M Y').'.' : 'The employer is no longer accepting applications.' }} Browse the <a href="{{ route('careers.index') }}">open roles</a> or see similar jobs below.</div></div>
    @endunless

    <section class="cp-block cp-prose" aria-labelledby="h-about">
      <h2 id="h-about">About the role</h2>
      @foreach($paras as $p)<p>{!! nl2br(e($p)) !!}</p>@endforeach
    </section>

    @if($duties->isNotEmpty())
    <section class="cp-block" aria-labelledby="h-duties">
      <h2 id="h-duties">What you will do</h2>
      <ul class="cp-list">@foreach($duties as $d)<li><x-icon name="check-circle" :size="19"/><span>{{ $d }}</span></li>@endforeach</ul>
    </section>
    @endif

    @if($reqs->isNotEmpty())
    <section class="cp-block" aria-labelledby="h-reqs">
      <h2 id="h-reqs">What you need</h2>
      <ul class="cp-list is-req">@foreach($reqs as $d)<li><x-icon name="target" :size="19"/><span>{{ $d }}</span></li>@endforeach</ul>
    </section>
    @endif

    @if($perks->isNotEmpty())
    <section class="cp-block" aria-labelledby="h-perks">
      <h2 id="h-perks">What you get</h2>
      <ul class="cp-list is-perk">@foreach($perks as $d)<li><x-icon name="sparkles" :size="19"/><span>{{ $d }}</span></li>@endforeach</ul>
    </section>
    @endif

    @if($skills->isNotEmpty())
    <section class="cp-block" aria-labelledby="h-skills">
      <h2 id="h-skills">Skills for this role</h2>
      <p class="muted">Employers look for these on your verified profile. Select a skill to see other roles that use it.</p>
      <div class="cp-skill-links">@foreach($skills as $s)<a class="skill-tag" href="{{ route('careers.index', ['skill' => $s->slug]) }}#jobs">{{ $s->name }}</a>@endforeach</div>
    </section>
    @endif

    <section class="cp-block" aria-labelledby="h-emp">
      <h2 id="h-emp">About {{ $emp->company_name }}</h2>
      <div class="cp-emp-about">
        <span class="co-logo" aria-hidden="true">@if($emp->logoUrl())<img src="{{ $emp->logoUrl() }}" alt="" loading="lazy">@else{{ initials($emp->company_name) }}@endif</span>
        <div>
          @if($emp->description)<p>{{ Str::limit($emp->description, 320) }}</p>@endif
          <p class="small muted mb-0">{{ collect([$emp->industry, $emp->location, $emp->company_size ? $emp->company_size.' people' : null])->filter()->implode(' · ') }}@if($employerOpenCount > 1) · <a href="{{ route('careers.index', ['q' => $emp->company_name]) }}">{{ $employerOpenCount }} open roles</a>@endif</p>
          <p class="small mt-1 mb-0"><x-icon name="badge-check" :size="16"/> INFOTICS reviews employers and their postings before they go live.</p>
        </div>
      </div>
    </section>

    {{-- Apply --}}
    @if($isOpen)
    <section class="cp-block" id="apply" aria-labelledby="h-apply">
      @if(! $u)
        <div class="card cp-apply">
          <div class="cp-gate">
            <span class="cp-gate-ico"><x-icon name="user" :size="28"/></span>
            <div><h2 id="h-apply">Log in to apply</h2><p>Applications are sent from your INFOTICS learner account, so {{ $emp->company_name }} can see your profile and verified credentials.</p></div>
            <div class="cp-gate-actions">
              <a class="btn btn-primary btn-lg" href="{{ route('login', ['next' => $next]) }}"><x-icon name="log-in" :size="18"/> Log in to apply</a>
              <a class="btn btn-secondary btn-lg" href="{{ route('register', ['next' => $next]) }}"><x-icon name="user-plus" :size="18"/> Create a free account</a>
            </div>
            <ul class="cp-gate-needs" aria-label="What you need to apply">
              <li><x-icon name="check" :size="16"/> Your CV ({{ strtoupper(implode(', ', $mimes)) }}, up to {{ $maxMb }} MB)</li>
              <li><x-icon name="check" :size="16"/> A phone number</li>
              <li><x-icon name="check" :size="16"/> A short cover letter (optional)</li>
            </ul>
          </div>
        </div>
      @elseif(! $isStudent)
        <div class="card cp-apply">
          <div class="cp-gate">
            <span class="cp-gate-ico"><x-icon name="info" :size="28"/></span>
            <div><h2 id="h-apply">Applications are made from learner accounts</h2><p>You are signed in as {{ Str::of($u->role)->headline() }}. Log in with a learner account to apply for this role.</p></div>
            <div class="cp-gate-actions"><a class="btn btn-secondary" href="{{ $u->homeUrl() }}"><x-icon name="dashboard" :size="17"/> Go to my portal</a></div>
          </div>
        </div>
      @elseif($application)
        <div class="card cp-apply">
          <div class="cp-applied">
            <span class="cp-applied-ico"><x-icon name="check-circle" :size="30"/></span>
            <div>
              <h2 id="h-apply">You applied for this role</h2>
              <div class="cp-applied-meta"><x-pill :status="$application->status"/><span>Sent on {{ $application->created_at->format('d M Y') }}@if($application->status_changed_at && $application->status_changed_at->gt($application->created_at->copy()->addMinutes(2))) · status updated {{ $application->status_changed_at->diffForHumans() }}@endif</span></div>
              <p class="mt-1">{{ $emp->company_name }} can see your application, profile and verified credentials. We emailed you a confirmation, and you will get an email when the status changes.</p>
            </div>
            <a class="btn btn-secondary" href="{{ route('student.applications') }}"><x-icon name="list-checks" :size="17"/> Track application</a>
          </div>
        </div>
      @else
        <div class="card cp-apply">
          <h2 id="h-apply">Apply for this role</h2>
          <p class="muted mb-0">It takes about two minutes. {{ $emp->company_name }} is notified as soon as you send it.</p>
          <div class="cp-apply-for">
            <span class="co-logo" aria-hidden="true">@if($emp->logoUrl())<img src="{{ $emp->logoUrl() }}" alt="" loading="lazy">@else{{ initials($emp->company_name) }}@endif</span>
            <div><b>{{ $job->title }}</b><small>{{ $emp->company_name }}@if($job->location) · {{ $job->location }}@endif</small></div>
          </div>
          @if($errors->any())
            <div class="callout danger mt-2" role="alert" data-apply-errors><x-icon name="alert" :size="20"/><div>Your application has not been sent yet. Please fix the highlighted fields below.</div></div>
          @endif
          <form method="post" action="{{ route('careers.apply', $job->slug) }}" enctype="multipart/form-data">
            @csrf
            <div class="form-grid">
              <x-field name="phone" type="tel" label="Phone number" :value="$u->phone" required autocomplete="tel" placeholder="+92 300 1234567" help="The employer uses this to contact you."/>
              <x-field name="availability" type="select" label="When can you start?" :options="$avail" blank="Select an option"/>
              <x-field name="expected_salary" label="Expected salary (optional)" :value="$u->expected_salary" placeholder="e.g. PKR 120,000 per month"/>
              <x-field name="portfolio_url" type="url" label="Portfolio or LinkedIn link (optional)" :value="$portfolioUrl" placeholder="https://"/>
              <x-field name="cover_letter" type="textarea" label="Cover letter (optional)" :rows="6" full placeholder="Say why this role fits you. Mention relevant labs, projects or badges." help="Up to 3,000 characters."/>

              <div class="field full">
                <span class="label" id="cv-label">CV / resume @unless($hasResume)<span class="req">*</span>@endunless</span>
                @if($hasResume)
                  <div class="cp-cv">
                    <x-icon name="file-text" :size="24"/>
                    <div class="grow"><b>Your profile CV will be sent</b><span class="xs muted">To send a different CV with this application, choose a file below.</span></div>
                    <a class="btn btn-secondary btn-sm" href="{{ route('account.resume') }}" target="_blank" rel="noopener"><x-icon name="download" :size="15"/> Open</a>
                  </div>
                @endif
                <div class="dropzone">
                  <x-icon name="upload" :size="28"/>
                  <div class="bold" data-dz-label>{{ $hasResume ? 'Optional: upload a different CV' : 'Choose your CV or drag it here' }}</div>
                  <div class="xs muted">{{ strtoupper(implode(', ', $mimes)) }} · up to {{ $maxMb }} MB</div>
                  <input type="file" id="resume" name="resume" accept=".{{ implode(',.', $mimes) }}" data-max-mb="{{ $maxMb }}" aria-labelledby="cv-label" @required(! $hasResume)>
                </div>
                @unless($hasResume)<div class="help">We also save this CV to your profile, so you will not need to upload it again.</div>@endunless
                @error('resume')<div class="field-error">{{ $message }}</div>@enderror
              </div>

              <div class="field full">
                <div class="cp-consent {{ $errors->has('consent') ? 'is-invalid' : '' }}">
                  <label class="check" for="consent">
                    <input type="checkbox" id="consent" name="consent" value="1" required @checked(old('consent'))>
                    <span>I agree to share my application, contact details, profile and verified INFOTICS credentials with <b>{{ $emp->company_name }}</b> so they can consider me for this role. I can withdraw their access at any time from my learner dashboard.</span>
                  </label>
                </div>
                @error('consent')<div class="field-error">{{ $message }}</div>@enderror
              </div>
            </div>
            <div class="cp-submit mt-3">
              <button class="btn btn-primary btn-lg" type="submit"><x-icon name="send" :size="18"/> Send application</button>
              <p>You will get a confirmation email, and you can follow the status under <a href="{{ route('student.applications') }}">My applications</a>.</p>
            </div>
          </form>
        </div>
      @endif
    </section>
    @endif

    @if($related->isNotEmpty())
    <section class="cp-block" aria-labelledby="h-related">
      <h2 id="h-related">{{ $isOpen ? 'Similar open roles' : 'Open roles you may like' }}</h2>
      <div class="grid cp-related">
        @foreach($related as $r)
          <article class="card card-hover cp-rel reveal d{{ $loop->iteration }}">
            <div class="cp-rel-top">
              <span class="co-logo" aria-hidden="true">@if($r->employer?->logoUrl())<img src="{{ $r->employer->logoUrl() }}" alt="" loading="lazy">@else{{ initials($r->employer?->company_name) }}@endif</span>
              <div style="min-width:0">
                <h3><a href="{{ route('careers.show', $r->slug) }}">{{ $r->title }}</a></h3>
                <div class="cp-company"><b>{{ $r->employer?->company_name }}</b>@if($r->location)<span><x-icon name="map-pin" :size="13"/> {{ $r->location }}</span>@endif</div>
              </div>
            </div>
            <div class="cp-tags"><span class="pill pill-blue">{{ $r->employment_type }}</span><span class="pill">{{ $r->work_mode }}</span><span class="pill pill-violet">{{ $r->experience_level }}</span></div>
          </article>
        @endforeach
      </div>
    </section>
    @endif

    <p class="xs muted mb-0">Posted {{ $posted->format('d M Y') }} · Last updated {{ $job->updated_at->format('d M Y') }} · <a href="{{ route('careers.index') }}">All INFOTICS career portal jobs</a></p>
  </div>

  <aside class="cp-side" aria-label="Job details">
    <div class="card cp-facts sticky-card">
      <h2>Job details</h2>
      <dl class="kv">
        <dt>Company</dt><dd>{{ $emp->company_name }}</dd>
        <dt>Location</dt><dd>{{ $job->location ?: 'Not specified' }}</dd>
        <dt>Work mode</dt><dd>{{ $job->work_mode }}</dd>
        <dt>Job type</dt><dd>{{ $job->employment_type }}</dd>
        <dt>Experience</dt><dd>{{ $levels[$job->experience_level] ?? $job->experience_level }}</dd>
        <dt>Salary</dt><dd>{{ $salary ?? 'Not disclosed' }}</dd>
        <dt>Posted</dt><dd><time datetime="{{ $posted->toDateString() }}">{{ $posted->format('d M Y') }}</time></dd>
        <dt>Closing date</dt><dd>@if($job->closes_at)<time datetime="{{ $job->closes_at->toDateString() }}">{{ $job->closes_at->format('d M Y') }}</time>@else Open until filled @endif</dd>
      </dl>
      @if(! $isOpen)
        <div class="cp-deadline is-closed"><x-icon name="clock" :size="18"/> Applications are closed</div>
      @elseif($daysLeft !== null && $daysLeft <= 14)
        <div class="cp-deadline"><x-icon name="clock" :size="18"/> {{ $daysLeft <= 0 ? 'Closes today' : 'Closes in '.$daysLeft.' '.Str::plural('day', $daysLeft) }}</div>
      @endif
      <div class="cp-facts-cta">
        @if(! $isOpen)
          <a class="btn btn-primary" href="{{ route('careers.index') }}">Browse open roles</a>
        @elseif($application)
          <a class="btn btn-secondary" href="#apply"><x-icon name="check" :size="16"/> You applied</a>
        @else
          <a class="btn btn-primary" href="#apply"><x-icon name="send" :size="17"/> Apply now</a>
        @endif
      </div>
      <div class="cp-facts-share">
        <button class="btn btn-secondary" type="button" data-copy="{{ $shareUrl }}"><x-icon name="copy" :size="15"/> Copy link</button>
        <a class="btn btn-secondary" href="https://wa.me/?text={{ rawurlencode($shareText.' '.$shareUrl) }}" target="_blank" rel="noopener"><x-icon name="whatsapp" :size="15"/> WhatsApp</a>
        <a class="btn btn-secondary" href="https://www.linkedin.com/sharing/share-offsite/?url={{ rawurlencode($shareUrl) }}" target="_blank" rel="noopener"><x-icon name="linkedin" :size="15"/> LinkedIn</a>
      </div>
    </div>

  </aside>
</div>

@if($errors->any())
@push('scripts')
<script nonce="{{ csp_nonce() }}">document.getElementById('apply')?.scrollIntoView({block:'start'});</script>
@endpush
@endif
@endsection