@extends('layouts.public')

@section('title', 'Create a Partner Account — SYSTRONICS')
@section('meta_description', 'Register as a SYSTRONICS Partner. No fees are charged to become a SYSTRONICS Partner.')

@section('content')
    @include('public.partials.page-chrome', [
        'eyebrow' => 'Partner Area',
        'title' => 'SYSTRONICS Partner Registration',
        'lede' => 'No fees are charged to become a SYSTRONICS Partner. Mandatory fields are marked with an asterisk.',
        'crumbs' => [
            ['label' => 'Home', 'url' => route('public.home')],
            ['label' => 'Partners Area', 'url' => route('login')],
            ['label' => 'Create a Partner Account'],
        ],
    ])

    <section class="section">
        <p id="activation-note"><strong>Shortly after submitting your Partner Registration, you will receive an email requesting confirmation to activate your account. Please fill in the optional Alternate Email address(es), if you <u>will not</u> be activating your account from your Corporate Email address.</strong></p>
        <p id="activation-note-manual" hidden><strong>Shortly after submitting your Partner Registration, you will receive an email confirming your registration. Please note that you will be able to access the SYSTRONICS Partners area only after your account is activated by SYSTRONICS within 24 hours.</strong></p>
        <p><strong>We value your privacy and shall never sell or disclose your personal information to third parties without your express permission.</strong></p>
        <p class="form-text">Your country decides your price list after activation (used on the Prices page).</p>

    <form class="theme-form theme-form--grid" method="POST" action="{{ route('register') }}" id="register-form" style="margin-top:22px">
        @csrf

        <fieldset class="reg-section">
            <legend>Personal Information</legend>
            <div class="auth-form-grid">
                <div class="form-group">
                    <label class="col-form-label" for="first_name">First Name <span class="text-danger">*</span></label>
                    <input class="form-control @error('first_name') is-invalid @enderror" id="first_name" name="first_name" value="{{ old('first_name') }}" maxlength="50" required>
                    @error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="last_name">Last Name <span class="text-danger">*</span></label>
                    <input class="form-control @error('last_name') is-invalid @enderror" id="last_name" name="last_name" value="{{ old('last_name') }}" maxlength="50" required>
                    @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </fieldset>

        <fieldset class="reg-section">
            <legend>Contact Information</legend>
            <div class="auth-form-grid">
                <div class="form-group">
                    <label class="col-form-label" for="email">Corporate Email <span class="text-danger">*</span></label>
                    <input class="form-control @error('email') is-invalid @enderror" id="email" type="email" name="email" value="{{ old('email') }}" maxlength="50" required>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="phone">Phone <span class="text-danger">*</span></label>
                    <input class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" maxlength="50" required>
                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group form-group-full">
                    <label class="col-form-label" for="country">Country <span class="text-danger">*</span></label>
                    <select class="form-select @error('country') is-invalid @enderror"
                            id="country"
                            name="country"
                            required
                            data-searchable
                            data-placeholder="Start typing a country name…"
                            data-hint-target="#country-note">
                        <option value="">Select your country…</option>
                        @foreach ($countries as $option)
                            <option value="{{ $option['name'] }}"
                                    data-flag="{{ $option['flag'] }}"
                                    data-note="{{ $option['note'] }}"
                                    @selected(old('country') === $option['name'])>{{ $option['name'] }}</option>
                        @endforeach
                    </select>
                    <p class="form-text ss__hint" id="country-note" hidden></p>
                    @error('country')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    @if ($suggested !== [])
                        <div class="chip-group mt-2">
                            @foreach ($suggested as $option)
                                <button class="chip" type="button" data-country-chip="{{ $option['name'] }}">
                                    <span aria-hidden="true">{{ $option['flag'] }}</span> {{ $option['name'] }}
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="email_alt1">Alternate Email1</label>
                    <input class="form-control @error('email_alt1') is-invalid @enderror" id="email_alt1" type="email" name="email_alt1" value="{{ old('email_alt1') }}" maxlength="50">
                    @error('email_alt1')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="city">City <span class="text-danger">*</span></label>
                    <input class="form-control @error('city') is-invalid @enderror" id="city" name="city" value="{{ old('city') }}" maxlength="50" required>
                    @error('city')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="postal_code">ZIP/Postal Code</label>
                    <input class="form-control" id="postal_code" name="postal_code" value="{{ old('postal_code') }}" maxlength="50">
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="email_alt2">Alternate Email2</label>
                    <input class="form-control @error('email_alt2') is-invalid @enderror" id="email_alt2" type="email" name="email_alt2" value="{{ old('email_alt2') }}" maxlength="50">
                    @error('email_alt2')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="state">State/Province <span class="text-danger">*</span></label>
                    <input class="form-control @error('state') is-invalid @enderror" id="state" name="state" value="{{ old('state') }}" maxlength="80" required>
                    @error('state')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">Type "N/A" if not applicable</div>
                </div>
            </div>
        </fieldset>

        <fieldset class="reg-section">
            <legend>Company Information</legend>
            <div class="auth-form-grid">
                <div class="form-group">
                    <label class="col-form-label" for="company">Company <span class="text-danger">*</span></label>
                    <input class="form-control @error('company') is-invalid @enderror" id="company" name="company" value="{{ old('company') }}" maxlength="50" required>
                    @error('company')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group form-group-full">
                    <label class="col-form-label" for="address">Company Address <span class="text-danger">*</span></label>
                    <input class="form-control @error('address') is-invalid @enderror" id="address" name="address" value="{{ old('address') }}" maxlength="100" required>
                    @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group form-group-full">
                    <label class="col-form-label" for="website">Corporate Website <span class="text-danger" id="website-required-mark" hidden>*</span></label>
                    <input class="form-control @error('website') is-invalid @enderror" id="website" name="website" value="{{ old('website') }}" maxlength="50">
                    @error('website')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </fieldset>

        <fieldset class="reg-section">
            <legend>Other Information</legend>
            <div class="auth-form-grid">
                <div class="form-group form-group-full">
                    <span class="col-form-label">Status <span class="text-danger">*</span></span>
                    @error('partner_status')<div class="invalid-feedback d-block mb-2">{{ $message }}</div>@enderror
                    <div class="choice-cards">
                        @foreach ($statuses as $status)
                            <label class="choice-card">
                                <input class="choice-card__input" type="radio" name="partner_status" value="{{ $status->value }}" @checked(old('partner_status') === $status->value) required>
                                <span class="choice-card__body">
                                    <span class="choice-card__title">{{ $status->label() }}</span>
                                    <span class="choice-card__hint">{{ $status->hint() }}</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="form-group form-group-full">
                    <label class="col-form-label" for="product-filter">Which products are you interested in?</label>
                    @error('products')<div class="invalid-feedback d-block mb-2">{{ $message }}</div>@enderror
                    <div class="picker">
                        <div class="picker__toolbar">
                            <input class="form-control picker__search" id="product-filter" type="search" placeholder="Filter products…" autocomplete="off" data-filter-target="#product-list">
                            <span class="picker__count" data-selection-count="#product-list">0 selected</span>
                        </div>
                        <div class="checkbox-list" id="product-list">
                            @foreach ($products as $product)
                                <label class="form-check" data-filter-text="{{ $product->name }}">
                                    <input class="form-check-input" type="checkbox" name="products[]" value="{{ $product->id }}" @checked(collect(old('products', []))->contains($product->id))>
                                    <span class="form-check-label">{{ $product->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="reg-section">
            <legend>Compliance To General Data Protection Regulation (GDPR)</legend>
            <p><span class="text-danger">*</span> Would you like to receive product and service related mailers, get invited to SYSTRONICS training sessions and webinars, and be updated on our latest news and special offers?</p>
            @error('mailing_preference')<div class="invalid-feedback d-block mb-2">{{ $message }}</div>@enderror
            <div class="form-check">
                <input class="form-check-input" type="radio" name="mailing_preference" value="1" id="mailing_yes" @checked(old('mailing_preference') === '1') required>
                <label class="form-check-label" for="mailing_yes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="mailing_preference" value="0" id="mailing_no" @checked(old('mailing_preference', '0') === '0')>
                <label class="form-check-label" for="mailing_no">No</label>
            </div>
        </fieldset>

        <fieldset class="reg-section">
            <legend>Login Information</legend>
            <p class="form-text">Choose a User ID. After registration you can sign in with either your <strong>User ID</strong> or your <strong>corporate email</strong>.</p>
            <div class="auth-form-grid">
                <div class="form-group">
                    <label class="col-form-label" for="login">User ID <span class="text-danger">*</span></label>
                    <input class="form-control @error('login') is-invalid @enderror" id="login" name="login" value="{{ old('login') }}" maxlength="20" required autocomplete="username">
                    @error('login')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">Letters, numbers, and <code>_ . @ -</code> only. Max 20 characters.</div>
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="password">Password <span class="text-danger">*</span></label>
                    <input class="form-control @error('password') is-invalid @enderror" id="password" type="password" name="password" maxlength="50" required autocomplete="new-password">
                    @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="password_confirmation">Password Confirmation <span class="text-danger">*</span></label>
                    <input class="form-control" id="password_confirmation" type="password" name="password_confirmation" maxlength="50" required autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="captcha_answer">{{ $captcha['question'] }} <span class="text-danger">*</span></label>
                    <input class="form-control @error('captcha_answer') is-invalid @enderror" id="captcha_answer" name="captcha_answer" required style="max-width:8rem">
                    @error('captcha_answer')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </fieldset>

        <p class="form-text"><em>We reserve the right to decline access to our Partners Area if we establish that the information entered in this registration process is incomplete or inaccurate.</em></p>

        <button class="btn btn--primary" type="submit">Join</button>
        <p class="form-text" style="margin-top:16px"><a href="{{ route('login') }}">Already have an account? Sign in</a></p>
    </form>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('js/searchable-select.js') }}" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const manualCountries = @json($manualCountries);
            const select = document.getElementById('country');
            const website = document.getElementById('website');
            const websiteMark = document.getElementById('website-required-mark');
            const noteInstant = document.getElementById('activation-note');
            const noteManual = document.getElementById('activation-note-manual');
            const form = document.getElementById('register-form');

            const syncCountry = () => {
                const chosen = select.value;
                const manual = manualCountries.includes(chosen);
                website.required = manual;
                websiteMark.hidden = !manual;
                noteInstant.hidden = manual && chosen !== '';
                noteManual.hidden = !(manual && chosen !== '');
                document.querySelectorAll('[data-country-chip]').forEach((chip) => {
                    chip.classList.toggle('is-selected', chip.dataset.countryChip === chosen);
                });
            };

            document.querySelectorAll('[data-country-chip]').forEach((chip) => {
                chip.addEventListener('click', () => {
                    select.value = chip.dataset.countryChip;
                    select.dispatchEvent(new Event('change', { bubbles: true }));
                });
            });

            select.addEventListener('change', syncCountry);
            syncCountry();

            form.addEventListener('submit', (event) => {
                if (select.value !== '') {
                    return;
                }
                event.preventDefault();
                const wrapper = form.querySelector('.ss');
                wrapper?.classList.add('has-error');
                wrapper?.querySelector('.ss__input')?.focus();
            });

            document.querySelectorAll('[data-filter-target]').forEach((search) => {
                const list = document.querySelector(search.dataset.filterTarget);
                if (!list) {
                    return;
                }
                search.addEventListener('input', () => {
                    const needle = search.value.trim().toLowerCase();
                    list.querySelectorAll('[data-filter-text]').forEach((row) => {
                        const match = row.dataset.filterText.toLowerCase().includes(needle);
                        row.hidden = !match && !row.querySelector('input')?.checked;
                    });
                });
            });

            document.querySelectorAll('[data-selection-count]').forEach((counter) => {
                const list = document.querySelector(counter.dataset.selectionCount);
                if (!list) {
                    return;
                }
                const paint = () => {
                    const count = list.querySelectorAll('input[type="checkbox"]:checked').length;
                    counter.textContent = `${count} selected`;
                    counter.classList.toggle('is-active', count > 0);
                };
                list.addEventListener('change', paint);
                paint();
            });
        });
    </script>
@endpush