@extends('layouts.app')

@section('content')
    @php
        $company = config('site.company');
        $careers = config('site.careers');
    @endphp

    <x-page-hero title="Careers" :subtitle="$careers['intro']" :breadcrumbs="[['label' => 'Careers']]">
        <a href="#current-openings" class="btn-primary">View current openings</a>
    </x-page-hero>

    {{-- Current openings: its own section, one row per opening, separate from the application form below --}}
    <section class="section scroll-mt-20" id="current-openings">
        <div class="container-page">
            <div class="mb-8 flex flex-wrap items-end justify-between gap-4">
                <x-section-heading class="!mb-0" eyebrow="Careers" title="Current openings" subtitle="Choose the role that fits you. Selecting Apply fills in the position in the form below." />

                <p class="rounded-full border border-slate-200 bg-slate-50 px-4 py-1.5 text-sm font-semibold text-slate-700">
                    {{ count($careers['positions']) }} {{ \Illuminate\Support\Str::plural('opening', count($careers['positions'])) }}
                </p>
            </div>

            @if ($careers['positions'])
                <ul class="divide-y divide-slate-200 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
                    @foreach ($careers['positions'] as $position)
                        <li class="flex flex-col gap-3 p-5 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
                            <div>
                                <h3 class="text-lg font-semibold">{{ $position['title'] }}</h3>
                                @isset($position['summary'])
                                    <p class="mt-1 text-sm text-slate-600">{{ $position['summary'] }}</p>
                                @endisset
                            </div>
                            <a href="{{ route('career', ['position' => $position['title']]) }}#apply" class="btn-outline shrink-0 self-start sm:self-center" aria-label="Apply for {{ $position['title'] }}">Apply</a>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="rounded-lg border border-slate-200 bg-slate-50 p-6 text-sm text-slate-600">There are no openings at the moment. You can still send us your details below.</p>
            @endif

            <p class="mt-6 text-sm text-slate-600">
                Do not see your role? Choose <strong>{{ $careers['other_option'] }}</strong> in the form and tell us how you can help.
            </p>
        </div>
    </section>

    {{-- Application form --}}
    <section class="section scroll-mt-20 bg-slate-50" id="apply">
        <div class="container-page grid gap-10 lg:grid-cols-3">
            <div class="lg:col-span-2">
                <x-section-heading title="Apply online" subtitle="Fill in your details and our team will contact you if your profile matches an opening." />

                @if ($errors->any())
                    <div role="alert" class="mb-6 rounded-md border border-red-300 bg-red-50 p-4 text-sm text-red-800">
                        Please fix the highlighted fields and submit again.
                    </div>
                @endif

                <form method="POST" action="{{ route('career.submit') }}" class="grid gap-5 sm:grid-cols-2" enctype="multipart/form-data" novalidate>
                    @csrf

                    {{-- Honeypot: hidden from people, bots tend to fill it. --}}
                    <div class="hidden" aria-hidden="true">
                        <label for="company_website">Leave this field empty</label>
                        <input type="text" id="company_website" name="company_website" tabindex="-1" autocomplete="off">
                    </div>

                    <x-field name="name" label="Candidate name" required autocomplete="name" />
                    <x-field name="email" label="Email" type="email" required autocomplete="email" />
                    <x-field name="mobile" label="Mobile number" type="tel" required autocomplete="tel-national" hint="10-digit Indian mobile number." />
                    <x-field name="position" label="Position" type="select" required :options="$positionOptions" :value="$selectedPosition" />
                    <x-field class="sm:col-span-2" name="cv" label="Upload your CV" type="file" required
                             :accept="'.'.implode(',.', $careers['cv_types'])"
                             :hint="strtoupper(implode(', ', $careers['cv_types'])).' file, up to '.round($careers['cv_max_kb'] / 1024).' MB.'" />
                    <x-field class="sm:col-span-2" name="message" label="Message" type="textarea" hint="Optional. Tell us briefly about your experience." />

                    <x-recaptcha class="sm:col-span-2" />

                    <div class="sm:col-span-2">
                        <button type="submit" class="btn-primary">Submit application</button>
                        <p class="mt-3 text-xs text-slate-500">
                            By submitting you agree to our <a href="{{ route('privacy-policy') }}" class="underline">Privacy Policy</a>.
                        </p>
                    </div>
                </form>
            </div>

            {{-- Details --}}
            <aside class="space-y-4 self-start rounded-lg border border-slate-200 bg-white p-6 text-sm">
                <h2 class="text-lg font-semibold">{{ $company['name'] }}</h2>
                <address class="space-y-2 not-italic">
                    <p>Phone:
                        @foreach ($company['phones'] as $phone)
                            <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}" class="text-brand-700 hover:underline">{{ $phone }}</a>@if (! $loop->last), @endif
                        @endforeach
                    </p>
                    <p>Email:
                        @foreach ($company['emails'] as $email)
                            <a href="mailto:{{ $email }}" class="break-all text-brand-700 hover:underline">{{ $email }}</a>@if (! $loop->last), @endif
                        @endforeach
                    </p>
                </address>
            </aside>
        </div>
    </section>
@endsection