@extends('layouts.app')

@section('title', 'Post a Healthcare Job Free | healthcareers.app')
@section('description', 'Free healthcare job postings: post your job free for 5 days, with no account or password. Confirm your email and it goes live. Candidates reply privately.')

@php
    $pre = $prefill ?? [];
    $v = fn (string $k, $d = null) => old($k, array_key_exists($k, $pre) && $pre[$k] !== null ? $pre[$k] : $d);
@endphp

@section('content')
    <div class="post-head">
        <h1>Post a job</h1>
        <p class="muted">No account needed. We email you a link to publish the post and manage it.</p>
        <p class="small">Several jobs? <a href="{{ route('post-a-job.bulk') }}">Upload them from a CSV file</a> (<a href="{{ route('post-a-job.bulk.sample') }}">sample CSV</a>).</p>
    </div>
    <div class="post-layout">
        <form class="card form" method="post" action="{{ route('post-a-job.store') }}" id="post-form" data-reach="{{ route('post-a-job.reach') }}" data-currencies='@json($countryCurrency)' enctype="multipart/form-data" novalidate>
            @csrf
            @include('partials.errors')

            <div class="eyebrow">1 · Listing</div>
            <div class="tiers">
                <label class="tier"><input type="radio" name="tier" value="basic" data-cents="0" @checked(old('tier', 'basic') === 'basic')>
                    <span class="eyebrow">Basic</span><span class="price">Free <small>/ {{ config('pricing.listings.basic.days') }} days</small></span>
                    <span class="hint">Text-only listing. Replies through the app. One free post at a time per organization; verified organizations {{ \App\Services\PostingRules::verifiedFreePosts() }}.</span></label>
                <label class="tier"><input type="radio" name="tier" value="standard" data-cents="{{ \App\Support\Pricing::cents('standard') }}" @checked(old('tier') === 'standard')>
                    <span class="eyebrow">Standard</span><span class="price">{{ \App\Support\Pricing::dollars('standard') }} <small>/ {{ config('pricing.listings.standard.days') }} days</small></span>
                    <span class="hint">The same listing, running for a full month. No limit per organization.</span></label>
            </div>
            @if (! empty($packChoices))
                <label class="checkline pack-use" id="pack-use-box"><input type="checkbox" name="use_pack" value="1" id="use-pack" @checked(old('_token') ? old('use_pack') : true)>
                    Use a post from your job pack for Standard (no card payment):
                    {{ collect($packChoices)->map(fn ($c) => $c[0].', '.$c[1].' left')->implode('; ') }}</label>
            @endif
            <details class="upgrade-box" @if (old('upgrades')) open @endif>
                <summary><strong>Add upgrades</strong> <span class="muted">(optional, on any listing)</span></summary>
                @include('post._upgrades', ['available' => \App\Http\Controllers\PostJobController::NEW_POST_UPGRADES])
            </details>

            <div class="eyebrow">2 · The job</div>
            <div class="field">
                <label for="f-title">Job title <span class="muted">(what candidates see)</span></label>
                <input id="f-title" name="title" value="{{ $v('title') }}" maxlength="80" required placeholder="e.g. Night Shift RN – Med/Surg">
            </div>
            <div class="two">
                <div class="field">
                    <label for="f-role">Standard job title <span class="muted">(for matching)</span></label>
                    <select id="f-role" name="job_title_id" required>
                        <option value="">Choose the closest title</option>
                        @foreach (\App\Models\JobTitle::grouped($titles) as $group => $list)
                            <optgroup label="{{ $group }}">
                                @foreach ($list as $t)
                                    <option value="{{ $t->id }}" data-cat="{{ $t->category }}" @selected((string) $v('job_title_id') === (string) $t->id)>{{ $t->name }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                    <span class="hint">Not listed? Pick the nearest one; your own wording goes in Job title above.</span>
                </div>
                <div class="field">
                    <label for="f-cat">Category</label>
                    <select id="f-cat" name="category" required>
                        @foreach (config('board.categories') as $c)<option @selected($v('category', 'Nursing') === $c)>{{ $c }}</option>@endforeach
                    </select>
                </div>
            </div>
            <div class="field">
                <label for="f-org">Organization</label>
                <input id="f-org" name="org_name" value="{{ $v('org_name') }}" maxlength="100" required>
            </div>

            <div class="eyebrow">3 · Where</div>
            <div class="two">
                <div class="field">
                    <label for="f-country">Country</label>
                    <select id="f-country" name="country" required>
                        @foreach ($countries as $code => $name)<option value="{{ $code }}" @selected($v('country', 'US') === $code)>{{ $name }}</option>@endforeach
                    </select>
                </div>
                <div class="field">
                    <label for="f-region">State / province / region</label>
                    @php $selCountry = $v('country', 'US'); $hasList = \App\Support\Places::hasRegionList($selCountry); @endphp
                    <select id="f-region" name="region" data-regions='@json($regions)' @if (! $hasList) hidden disabled @endif>
                        <option value="">Choose…</option>
                        @foreach (\App\Support\Places::regions($selCountry) as $code => $name)<option value="{{ $code }}" @selected((string) $v('region') === (string) $code)>{{ $name }}</option>@endforeach
                    </select>
                    <input id="f-region-text" name="region" value="{{ $hasList ? '' : $v('region') }}" maxlength="80" placeholder="Optional" @if ($hasList) hidden disabled @endif>
                </div>
            </div>
            <div class="two">
                <div class="field">
                    <label for="f-city">City</label>
                    <input id="f-city" name="city" value="{{ $v('city') }}" maxlength="80">
                </div>
                <div class="field">
                    <label class="checkline"><input type="hidden" name="is_remote" value="0"><input type="checkbox" id="f-remote" name="is_remote" value="1" @checked($v('is_remote'))> Remote job (anywhere in this country)</label>
                </div>
            </div>

            <div class="eyebrow">4 · Pay and details</div>
            @include('post._pay')

            <div class="eyebrow">5 · You</div>
            <div class="field">
                <label for="f-email">Your email <span class="muted">(private, never shown)</span></label>
                <input id="f-email" name="email" type="email" value="{{ $email }}" autocomplete="email" required maxlength="255">
                <span class="hint">We send the publish link here, and forward candidates' replies here once replies open. Use your work email: to keep scams off the board, posts from Gmail-type addresses, and first posts from organizations we haven't verified yet, are checked by our team before going live (usually within one business day).</span>
            </div>
            @if (count($orgChoices ?? []) > 1)
                <div class="field">
                    <label for="f-orgid">Posting for</label>
                    <select id="f-orgid" name="organization_id">
                        @foreach ($orgChoices as $id => $name)<option value="{{ $id }}" @selected((string) old('organization_id') === (string) $id)>{{ $name }}</option>@endforeach
                    </select>
                </div>
            @endif
            <div class="hp" aria-hidden="true"><label>Website <input name="website" tabindex="-1" autocomplete="off"></label></div>
            @include('partials.turnstile')
            <p class="small muted">By posting you agree to the <a href="{{ route('terms') }}">terms</a> and accept our <a href="{{ route('no-ghosting') }}">No Ghosting Policy</a>: answer every candidate within {{ \App\Services\Orgs\ReplyStats::PENDING_DAYS }} business days. Posts are checked for spam and scams. Paid posts go live once your card payment clears; payments are handled by Stripe.</p>
            <div class="order-total" id="order-total" hidden><span>Total</span><span id="order-total-amount"></span></div>
            <button class="btn accent" type="submit" id="post-submit" data-free="Post job free" data-paid="Continue to payment">Post job free</button>
        </form>

        <aside class="post-side">
        <section class="card post-help">
            <h2>How it works</h2>
            <ol>
                <li>Fill in the job. No account or password.</li>
                <li>Click the link we email you. The job goes live for {{ config('pricing.listings.basic.days') }} days.</li>
                <li>Candidates reply through the site. Their messages come to your inbox; your address stays private.</li>
            </ol>
            <h2>Not allowed</h2>
            <p class="muted">Emails, phone numbers, web addresses or social handles in the post, non-English posts, and fees charged to applicants.</p>
        </section>
        <section class="card preview-box" id="preview" aria-live="polite" data-symbols='@json(config('countries.symbols'))'>
            <div class="eyebrow">Live preview</div>
            <p class="small muted">How your post appears in search results:</p>
            <div class="list"><article class="row" id="pv-row">
                <div class="avatar none" id="pv-logo" aria-hidden="true">no<br>logo</div>
                <div>
                    <div class="t" id="pv-title">Job title</div>
                    <div class="meta" id="pv-meta">Organization · City · Setting</div>
                    <div class="tags" id="pv-tags"></div>
                </div>
                <div class="pthumb" id="pv-thumb" hidden><img alt=""><span class="pcount" hidden></span></div>
                <div class="right"><div class="pay" id="pv-pay"></div><div class="ago">just now</div></div>
            </article></div>
            <p class="small muted" style="margin-top:14px">On the job page:</p>
            <div class="pv-job">
                <div class="eyebrow" id="pv-cat"></div>
                <div class="pv-h" id="pv-title2">Job title</div>
                <dl class="facts" id="pv-facts"></dl>
                <div class="pv-desc" id="pv-desc"></div>
                <div class="gallery" id="pv-gallery" hidden></div>
            </div>
        </section>
        </aside>
    </div>
@endsection