@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-14"><div class="wrap max-w-4xl">
    <p class="eyebrow">Partner programme</p>
    <h1 class="display">{{ \App\Support\Text::accent('Apply to become a *partner*.') }}</h1>
    <p class="lead mt-6">Tell us about your business, how you would like to work with us, and who can vouch for you. We review every application by hand and reply by email.</p>
</div></section>

<section class="on-light section !py-14"><div class="wrap max-w-3xl">
    <form method="post" action="{{ route('partners.apply.store') }}" enctype="multipart/form-data" data-steps data-key="wnx.partner-apply"
          data-first-error="{{ $errors->hasAny(['company_name','contact_name','email','phone','website']) ? 0 : ($errors->hasAny(['model']) ? 1 : ($errors->any() ? 2 : '')) }}" novalidate>
        @csrf
        <div class="absolute -left-[9999px]" aria-hidden="true"><label>Leave empty <input type="text" name="website_url" tabindex="-1" autocomplete="off"></label></div>
        <p class="mb-6 font-display text-sm text-muted" data-progress aria-live="polite">Step 1 of 3</p>

        <fieldset data-step class="space-y-5">
            <legend class="h3 mb-4">Your business</legend>
            @foreach ([['company_name','Company name','text',true,'organization'],['contact_name','Your name','text',true,'name'],['email','Work email','email',true,'email'],['phone','Phone','tel',true,'tel'],['website','Website (optional)','url',false,'url'],['country','Country','text',false,'country-name']] as [$n,$l,$t,$r,$a])
                <div><label class="label" for="{{ $n }}">{{ $l }}</label><input class="field" id="{{ $n }}" name="{{ $n }}" type="{{ $t }}" value="{{ old($n) }}" autocomplete="{{ $a }}" @if ($r) required @endif>@error($n)<p class="error">{{ $message }}</p>@enderror</div>
            @endforeach
            <div class="grid gap-5 sm:grid-cols-2">
                <div><label class="label" for="years_in_business">Years in business</label><select class="field" id="years_in_business" name="years_in_business"><option value="">Choose</option>@foreach (['Under 1', '1 to 3', '3 to 5', '5 to 10', 'Over 10'] as $o)<option @selected(old('years_in_business') === $o)>{{ $o }}</option>@endforeach</select></div>
                <div><label class="label" for="team_size">Team size</label><select class="field" id="team_size" name="team_size"><option value="">Choose</option>@foreach (['Just me', '2 to 5', '6 to 15', '16 to 50', 'Over 50'] as $o)<option @selected(old('team_size') === $o)>{{ $o }}</option>@endforeach</select></div>
            </div>
        </fieldset>

        <fieldset data-step class="space-y-5" hidden>
            <legend class="h3 mb-4">How you would like to work with us</legend>
            @foreach (['referral' => ['Referral', 'I introduce clients. Webnedrix sells and delivers. I earn a referral fee.'], 'fulfilment' => ['Fulfilment', 'I sell and own the client. Webnedrix builds under my name.'], 'both' => ['Both', 'I would like to start with one and may add the other.']] as $k => [$t, $d])
                <label class="flex cursor-pointer items-start gap-4 rounded border border-ink/20 bg-white px-5 py-4 has-[:checked]:border-violet has-[:checked]:bg-violet/5">
                    <input type="radio" name="model" value="{{ $k }}" class="mt-1.5 h-4 w-4 accent-[rgb(var(--violet))]" @checked(old('model') === $k) required>
                    <span><span class="font-display text-lg">{{ $t }}</span><span class="block text-muted">{{ $d }}</span></span>
                </label>
            @endforeach
            @error('model')<p class="error">Pick how you would like to work with us.</p>@enderror
            <div><label class="label" for="expected_volume">Projects you expect to bring in a year</label><select class="field" id="expected_volume" name="expected_volume"><option value="">Choose</option>@foreach (['1 to 2', '3 to 5', '6 to 10', 'More than 10', 'Not sure yet'] as $o)<option @selected(old('expected_volume') === $o)>{{ $o }}</option>@endforeach</select></div>
            <div><label class="label" for="sectors">Industries or clients you work with</label><input class="field" id="sectors" name="sectors" value="{{ old('sectors') }}"></div>
            <div><label class="label" for="why">Anything else about why you want to partner?</label><textarea class="field" id="why" name="why" rows="4">{{ old('why') }}</textarea></div>
        </fieldset>

        <fieldset data-step class="space-y-5" hidden>
            <legend class="h3 mb-4">Proof and references</legend>
            <div><label class="label" for="portfolio_links">Links to your work (one per line)</label><textarea class="field" id="portfolio_links" name="portfolio_links" rows="3">{{ old('portfolio_links') }}</textarea></div>
            <div class="grid gap-5 sm:grid-cols-2">
                @foreach ([1, 2] as $n)
                    <div><label class="label" for="ref{{ $n }}_name">Reference {{ $n }}: name</label><input class="field" id="ref{{ $n }}_name" name="ref{{ $n }}_name" value="{{ old("ref{$n}_name") }}" required>@error("ref{$n}_name")<p class="error">{{ $message }}</p>@enderror</div>
                    <div><label class="label" for="ref{{ $n }}_contact">Reference {{ $n }}: email or phone</label><input class="field" id="ref{{ $n }}_contact" name="ref{{ $n }}_contact" value="{{ old("ref{$n}_contact") }}" required>@error("ref{$n}_contact")<p class="error">{{ $message }}</p>@enderror</div>
                @endforeach
            </div>
            <div><label class="label" for="documents">Company registration or ID (optional, PDF or image, up to 5 MB each)</label><input class="field" id="documents" name="documents[]" type="file" multiple accept=".pdf,.jpg,.jpeg,.png">@error('documents.*')<p class="error">{{ $message }}</p>@enderror</div>
            <label class="flex items-start gap-3"><input type="checkbox" name="consent" value="1" class="mt-1.5 h-4 w-4 accent-[rgb(var(--violet))]" required @checked(old('consent'))><span>I confirm the information is accurate and Webnedrix may contact me and my references.</span></label>
            @error('consent')<p class="error">{{ $message }}</p>@enderror
        </fieldset>

        <div class="mt-8 flex items-center gap-3">
            <button type="button" class="btn btn-ghost-light" data-prev hidden>Back</button>
            <button type="button" class="btn btn-primary" data-next>Continue @include('partials.arrow')</button>
            <button type="submit" class="btn btn-primary" data-submit>Send my application @include('partials.arrow')</button>
        </div>
    </form>
</div></section>
@endsection