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

@php
  $u = auth()->user();
  $isStudent = $u?->isStudent() ?? false;
  $active = collect($filters)->filter(fn ($v) => $v !== null && $v !== '');
  $hasFilters = $active->isNotEmpty();
  $types = ['Full-time', 'Part-time', 'Contract', 'Internship'];
  $modes = ['Onsite', 'Remote', 'Hybrid'];
  $levels = ['Entry' => 'Entry (0–2 years)', 'Mid' => 'Mid (2–5 years)', 'Senior' => 'Senior (5+ years)'];
  $activeSkill = $skillOptions->firstWhere('slug', $filters['skill'] ?? null);
  // keep the other form's fields when one of the two forms (hero search / filter bar) is submitted
  $keep = fn (array $except) => $active->except($except);
  $wa = 'https://wa.me/'.digits(setting('whatsapp')).'?text='.rawurlencode('Hi INFOTICS, I would like to hire IT talent from the career portal.');

  $faqs = [
      ['How do I apply for a job on the INFOTICS career portal?', 'Log in to your learner account, open a job and press Apply. Add a short cover letter, your phone number and a CV (PDF or Word) or reuse the CV saved in your profile, then confirm that the employer may see your application. You receive a confirmation email straight away.'],
      ['Who can apply?', 'Any registered learner account can apply. The board is built for people training with INFOTICS, and the strongest applications include the verified badges and certificates that appear on your profile. Individual employers may list their own requirements on each job.'],
      ['Who can see my CV and profile?', 'Only employers you apply to can download your CV. When you apply you allow that employer to see your application, contact details and verified credentials. Your portfolio is visible to other employers only if you make it public, and you can withdraw an employer’s access at any time from your learner dashboard.'],
      ['How do employers know my credentials are real?', 'Certificates and badges issued by INFOTICS carry a verification code and a public verification page. Employers can check a credential in seconds instead of taking a CV claim on trust.'],
      ['Are the jobs and employers checked?', 'Yes. Employers and their job postings are reviewed by INFOTICS before a posting appears on the public job board. If a role looks wrong to you, contact us and we will look into it.'],
      ['Can I track my application?', 'Yes. Open My applications in your learner portal to follow each application from submitted to in review, shortlisted, interview, offer and hired. The employer’s status changes are also emailed to you.'],
      ['How much do these jobs pay?', 'Some employers publish a monthly salary range on the job page, and others prefer to discuss pay at interview. Where a range is shown it is per month in the currency stated on the job.'],
  ];

  seo()->description('Browse '.$openCount.' open IT '.Str::plural('job', $openCount).' from '.$employerCount.' '.Str::plural('employer', $employerCount).' hiring INFOTICS-trained cloud, networking, Linux, DevOps and service-desk talent. Apply with verified credentials.')
      ->schema([
          '@type' => 'ItemList', 'name' => 'Open IT jobs on the INFOTICS career portal', 'numberOfItems' => $jobs->total(),
          'itemListElement' => $jobs->getCollection()->values()->map(fn ($j, $i) => [
              '@type' => 'ListItem', 'position' => $jobs->firstItem() + $i, 'url' => route('careers.show', $j->slug), 'name' => $j->title.' — '.$j->employer?->company_name,
          ])->all(),
      ])
      ->schema([
          '@type' => 'FAQPage',
          'mainEntity' => collect($faqs)->map(fn ($f) => ['@type' => 'Question', 'name' => $f[0], 'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f[1]]])->all(),
      ]);
@endphp

@section('content')
<x-site.page-hero eyebrow="Career portal" title="Hire and get hired: INFOTICS-verified IT talent" :crumbs="[['Home', url('/')], ['Careers']]">
  The INFOTICS career portal lists <b>{{ $openCount }}</b> open IT {{ Str::plural('role', $openCount) }} from <b>{{ $employerCount }}</b> {{ Str::plural('employer', $employerCount) }} hiring cloud, networking, Linux, DevOps and service-desk people. Learners apply with a CV and verified badges; employers check credentials instead of taking claims on trust.
  <x-slot:actions>
    <form class="cp-search" method="get" action="{{ route('careers.index') }}" role="search">
      @foreach($keep(['q', 'location']) as $k => $v)<input type="hidden" name="{{ $k }}" value="{{ $v }}">@endforeach
      <div class="searchbox cp-search-q">
        <x-icon name="search" :size="18"/>
        <label class="sr-only" for="cp-q">Search jobs</label>
        <input id="cp-q" class="input" type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Job title, skill or company, e.g. Azure">
      </div>
      <div class="cp-search-loc">
        <label class="sr-only" for="cp-loc">Location</label>
        <select id="cp-loc" class="select" name="location">
          <option value="">All locations</option>
          @foreach($locations as $l)<option value="{{ $l }}" @selected(($filters['location'] ?? '') === $l)>{{ $l }}</option>@endforeach
        </select>
      </div>
      <button class="btn btn-primary" type="submit"><x-icon name="search" :size="17"/> Search jobs</button>
    </form>
  </x-slot:actions>
  <x-slot:aside>
    <div class="cp-stats reveal" role="group" aria-label="Career portal at a glance">
      <div class="cp-stat"><b data-count="{{ $openCount }}">{{ $openCount }}</b><span>Open roles</span></div>
      <div class="cp-stat"><b data-count="{{ $employerCount }}">{{ $employerCount }}</b><span>{{ Str::plural('Employer', $employerCount) }} hiring</span></div>
      <div class="cp-stat"><b data-count="{{ $skillOptions->count() }}">{{ $skillOptions->count() }}</b><span>Skills in demand</span></div>
      <p class="cp-stats-note"><x-icon name="badge-check" :size="20"/> Every employer and job posting is reviewed by INFOTICS before it goes live.</p>
    </div>
  </x-slot:aside>
</x-site.page-hero>

<section class="section-sm" id="jobs">
  <div class="container">
    <div class="cp-layout">
      <div>
        <form class="cp-filterbar" method="get" action="{{ route('careers.index') }}" aria-label="Filter jobs">
          @foreach($keep(['type', 'mode', 'level', 'skill']) as $k => $v)<input type="hidden" name="{{ $k }}" value="{{ $v }}">@endforeach
          <span class="cp-filterbar-label"><x-icon name="filter" :size="17"/> Filter</span>
          <label class="sr-only" for="f-type">Job type</label>
          <select id="f-type" class="select" name="type" data-autosubmit>
            <option value="">All types</option>
            @foreach($types as $t)<option value="{{ $t }}" @selected(($filters['type'] ?? '') === $t)>{{ $t }}</option>@endforeach
          </select>
          <label class="sr-only" for="f-mode">Work mode</label>
          <select id="f-mode" class="select" name="mode" data-autosubmit>
            <option value="">Any mode</option>
            @foreach($modes as $m)<option value="{{ $m }}" @selected(($filters['mode'] ?? '') === $m)>{{ $m }}</option>@endforeach
          </select>
          <label class="sr-only" for="f-level">Experience level</label>
          <select id="f-level" class="select" name="level" data-autosubmit>
            <option value="">Any experience</option>
            @foreach($levels as $k => $l)<option value="{{ $k }}" @selected(($filters['level'] ?? '') === $k)>{{ $l }}</option>@endforeach
          </select>
          <label class="sr-only" for="f-skill">Skill</label>
          <select id="f-skill" class="select" name="skill" data-autosubmit>
            <option value="">Any skill</option>
            @foreach($skillOptions as $s)<option value="{{ $s->slug }}" @selected(($filters['skill'] ?? '') === $s->slug)>{{ $s->name }}</option>@endforeach
          </select>
          <noscript><button class="btn btn-secondary btn-sm" type="submit">Apply filters</button></noscript>
        </form>

        <div class="cp-results-head">
          <p class="muted" role="status">
            @if($jobs->total() > 0)
              Showing <b>{{ $jobs->firstItem() }}–{{ $jobs->lastItem() }}</b> of <b>{{ $jobs->total() }}</b> open {{ Str::plural('role', $jobs->total()) }}@if($hasFilters) matching your search @endif
            @else
              No open roles match your search
            @endif
          </p>
          @if($hasFilters)<a class="small bold" href="{{ route('careers.index') }}">Clear all filters</a>@endif
        </div>

        @if($hasFilters)
          <div class="cp-active" aria-label="Active filters">
            @foreach($active as $k => $v)
              @php
                $label = match ($k) {
                    'q' => 'Search: '.$v, 'location' => $v, 'level' => ($levels[$v] ?? $v), 'skill' => ($activeSkill?->name ?? $v), 'mode' => $v.' work', default => $v,
                };
              @endphp
              <a href="{{ route('careers.index', $active->except($k)->all()) }}" aria-label="Remove filter {{ $label }}">{{ $label }} <x-icon name="x" :size="14"/></a>
            @endforeach
          </div>
        @endif

        @if($jobs->isEmpty())
          <div class="card">
            @if($hasFilters)
              <x-empty icon="search" title="No open roles match those filters" text="Try a broader keyword, another location, or clear the filters to see every open role."><a class="btn btn-primary btn-sm" href="{{ route('careers.index') }}">Show all open roles</a></x-empty>
            @else
              <x-empty icon="briefcase" title="No open roles right now" text="Employers post new roles regularly. Create your learner account and complete your profile so you can apply the moment one appears."><a class="btn btn-primary btn-sm" href="{{ $u ? $u->homeUrl() : route('register') }}">{{ $u ? 'Go to my portal' : 'Create a free account' }}</a></x-empty>
            @endif
          </div>
        @else
          <div class="cp-jobs">
            @foreach($jobs as $job)
              @php
                $emp = $job->employer;
                $posted = $job->posted_at ?? $job->created_at;
                $isNew = $posted && $posted->gte(now()->subDays(7));
                $didApply = in_array($job->id, $applied, true);
                $isSaved = in_array($job->id, $saved, true);
                $salary = $job->salaryLabel();
                $skillList = $job->skills;
              @endphp
              <article class="card card-hover job-card cp-job reveal {{ $job->featured ? 'is-featured' : '' }}">
                <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 class="cp-job-main">
                  <div class="cp-job-top">
                    <div>
                      <h3><a href="{{ route('careers.show', $job->slug) }}">{{ $job->title }}</a></h3>
                      <div class="cp-company">
                        <b>{{ $emp?->company_name }}</b>
                        @if($job->location)<span><x-icon name="map-pin" :size="14"/> {{ $job->location }}</span>@endif
                      </div>
                    </div>
                    <div class="cp-flags">
                      @if($didApply)<span class="pill pill-green"><x-icon name="check" :size="13"/> Applied</span>@endif
                      @if($job->featured)<span class="pill pill-amber"><x-icon name="star" :size="13"/> Featured</span>@elseif($isNew && ! $didApply)<span class="pill pill-blue">New</span>@endif
                      @if($isStudent)
                        <form class="cp-save-form" method="post" action="{{ route('careers.save', $job->slug) }}">@csrf
                          <button class="cp-save {{ $isSaved ? 'is-saved' : '' }}" type="submit" aria-pressed="{{ $isSaved ? 'true' : 'false' }}" aria-label="{{ $isSaved ? 'Remove '.$job->title.' from saved jobs' : 'Save '.$job->title }}" title="{{ $isSaved ? 'Saved' : 'Save job' }}"><x-icon name="bookmark" :size="18"/></button>
                        </form>
                      @endif
                    </div>
                  </div>
                  <div class="cp-tags">
                    <span class="pill pill-blue">{{ $job->employment_type }}</span>
                    <span class="pill">{{ $job->work_mode }}</span>
                    <span class="pill pill-violet">{{ $job->experience_level }} level</span>
                    @if($salary)<span class="cp-salary"><x-icon name="dollar" :size="15"/> {{ $salary }}</span>@endif
                  </div>
                  <p class="cp-excerpt">{{ Str::limit(strip_tags($job->description), 190) }}</p>
                  @if($skillList->isNotEmpty())
                    <div class="cp-skills" aria-label="Skills">
                      @foreach($skillList->take(4) as $s)<span class="skill-tag">{{ $s->name }}</span>@endforeach
                      @if($skillList->count() > 4)<span class="skill-tag more">+{{ $skillList->count() - 4 }} more</span>@endif
                    </div>
                  @endif
                  <div class="cp-job-foot">
                    <span><x-icon name="clock" :size="14"/> Posted <time datetime="{{ $posted->toIso8601String() }}">{{ $posted->diffForHumans() }}</time></span>
                    <span><x-icon name="calendar" :size="14"/> {{ $job->closes_at ? 'Closes '.$job->closes_at->format('d M Y') : 'Open until filled' }}</span>
                    <a class="btn {{ $didApply ? 'btn-secondary' : 'btn-primary' }} btn-sm" href="{{ route('careers.show', $job->slug) }}">{{ $didApply ? 'View application' : 'View and apply' }} <x-icon name="arrow-right" :size="15"/></a>
                  </div>
                </div>
              </article>
            @endforeach
          </div>
          {{ $jobs->links() }}
        @endif
      </div>

      <aside class="cp-aside" aria-label="Career portal help">
        <section class="card cp-aside-card reveal">
          @if($isStudent)
            <h2>Your job search</h2>
            <div class="cp-mini-kpis">
              <div><b>{{ count($applied) }}</b><span>Applied</span></div>
              <div><b>{{ count($saved) }}</b><span>Saved</span></div>
            </div>
            <a class="btn btn-primary btn-sm" href="{{ route('student.applications') }}"><x-icon name="send" :size="16"/> My applications</a>
            <a class="btn btn-secondary btn-sm" href="{{ route('account.edit') }}"><x-icon name="file-text" :size="16"/> Update profile and CV</a>
          @elseif($u)
            <h2>Signed in as {{ Str::of($u->role)->headline() }}</h2>
            <p>Job applications are made from learner accounts. Head to your portal to manage your work.</p>
            <a class="btn btn-primary btn-sm" href="{{ $u->homeUrl() }}"><x-icon name="dashboard" :size="16"/> Go to my portal</a>
          @else
            <h2>Apply in minutes</h2>
            <p>Create a free learner account, add your CV once and apply to any role. Employers see your verified badges and certificates.</p>
            <a class="btn btn-primary btn-sm" href="{{ route('register', ['next' => '/careers']) }}"><x-icon name="user-plus" :size="16"/> Create a free account</a>
            <a class="btn btn-secondary btn-sm" href="{{ route('login', ['next' => '/careers']) }}"><x-icon name="log-in" :size="16"/> Log in</a>
          @endif
        </section>

        @if($skillOptions->isNotEmpty())
        <section class="card cp-aside-card reveal d1" aria-labelledby="cp-skills-h">
          <h2 id="cp-skills-h">Browse by skill</h2>
          <div class="cp-skill-cloud">
            @foreach($skillOptions->take(14) as $s)
              <a class="chip {{ ($filters['skill'] ?? '') === $s->slug ? 'active' : '' }}" href="{{ route('careers.index', array_merge($active->except('skill')->all(), ['skill' => $s->slug])) }}#jobs">{{ $s->name }} <em>{{ $s->open_jobs_count }}</em></a>
            @endforeach
          </div>
        </section>
        @endif

        <section class="card cp-aside-card reveal d2">
          <a class="cp-verify-link" href="{{ route('verify') }}"><x-icon name="shield" :size="22"/><span><b>Employer? Verify a credential</b>Check any INFOTICS certificate or badge by its code, no login needed.</span></a>
        </section>
      </aside>
    </div>
  </div>
</section>

<section class="section hm-white" aria-labelledby="cp-how-h">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">How the career portal works</span>
      <h2 id="cp-how-h">From classroom to hired, with proof</h2>
      <p class="lead">Your learner account doubles as your career profile. Employers see evidence of what you can do, and only the parts you agree to share.</p>
    </div>
    <div class="grid cp-steps steps">
      @foreach([
          ['layers', 'Build your portfolio', 'Complete labs, projects and assessments in your course. Your portfolio and CV collect the work in one profile.'],
          ['badge-check', 'Earn verifiable badges', 'Pass proctored exams and finish courses to receive digital badges and certificates with a public verification code.'],
          ['send', 'Apply in one step', 'Pick a role, add a short cover letter and send your CV. Follow every application from submitted to offer.'],
          ['user-check', 'Employers verify, with your consent', 'When you apply you allow that employer to view your application and credentials. You can withdraw access at any time.'],
      ] as [$ico, $t, $d])
        <div class="card step reveal d{{ $loop->iteration }}">
          <span class="cp-step-ico"><x-icon :name="$ico" :size="24"/></span>
          <h3>{{ $t }}</h3>
          <p>{{ $d }}</p>
        </div>
      @endforeach
    </div>
  </div>
</section>

<section class="section-sm">
  <div class="container">
    <div class="cta-band cp-cta reveal">
      <span class="eyebrow">For employers</span>
      <h2>Hire INFOTICS-verified talent</h2>
      <p>Post a role, review applications and check badges and certificates in seconds. Learners share their profile with you only when they choose to, and every posting is reviewed by our team before it goes live.</p>
      <ul class="cp-cta-points">
        <li><x-icon name="check-circle" :size="18"/> Candidates trained in Azure, AWS, VMware, Cisco, Red Hat, DevOps and ITIL</li>
        <li><x-icon name="check-circle" :size="18"/> Credentials you can verify online</li>
        <li><x-icon name="check-circle" :size="18"/> Applicant tracking in your employer portal</li>
      </ul>
      <div class="cp-cta-actions">
        <a class="btn btn-primary btn-lg" href="{{ route('contact', ['topic' => 'hiring']) }}"><x-icon name="briefcase" :size="18"/> Talk to our hiring team</a>
        <a class="btn btn-ghost btn-lg" href="{{ $wa }}" rel="noopener"><x-icon name="whatsapp" :size="18"/> WhatsApp us</a>
        @guest<a class="btn btn-ghost btn-lg" href="{{ route('login') }}">Employer login</a>@endguest
      </div>
    </div>
  </div>
</section>

<section class="section hm-white" aria-labelledby="cp-faq-h">
  <div class="container cp-faq">
    <div class="section-head left reveal">
      <span class="eyebrow">Career portal FAQ</span>
      <h2 id="cp-faq-h">Questions about applying and hiring</h2>
      <p class="lead">Short answers about applications, privacy and how credentials are verified. Need more help? <a href="{{ route('contact') }}">Contact our team</a> or read the <a href="{{ route('faq') }}">general FAQ</a>.</p>
    </div>
    <div class="faq reveal">
      @foreach($faqs as $f)<details @if($loop->first) open @endif><summary>{{ $f[0] }}</summary><div>{{ $f[1] }}</div></details>@endforeach
    </div>
  </div>
</section>
@endsection