@extends('layouts.store')

@section('title', 'Register — Meatworx')

@section('content')
<section class="mw-inner-hero">
    <div class="container mw-inner-hero-inner">
        <div class="mw-inner-hero-copy">
            <h1>Register</h1>
            <p class="mw-inner-hero-script">Fresh, Safe, Vacumm Packed</p>
        </div>
        <span class="mw-inner-hero-meat" aria-hidden="true">Meat</span>
    </div>
</section>
<section class="mw-auth-page">
    <div class="container">
        <form class="mw-panel mw-auth-wide" action="{{ route('register.submit') }}" method="POST" id="mw-register-form" novalidate>
            @csrf
            <div class="mw-auth-steps" aria-hidden="true">
                <span class="is-on">1. Account type</span>
                <span>2. Your details</span>
                <span>3. Email code</span>
            </div>
            <h2>Create your account</h2>
            <p class="mw-account-note">Choose who you are buying as. We will email a 6-digit code to confirm your email.</p>
            @if($errors->any())
                <div class="mw-form-error">{{ $errors->first() }}</div>
            @endif

            <div class="mw-reg-step" data-step="1">
                <p class="mw-field-label">Account type <span>*</span></p>
                <div class="mw-type-grid">
                    @foreach($types as $type)
                        <label class="mw-type-card">
                            <input
                                type="radio"
                                name="customer_type_id"
                                value="{{ $type->id }}"
                                data-family="{{ $type->family }}"
                                data-slug="{{ $type->slug }}"
                                @checked((string) old('customer_type_id') === (string) $type->id)
                                required
                            >
                            <span>{{ $type->name }}</span>
                        </label>
                    @endforeach
                </div>
                <button class="mw-btn mw-btn-block" type="button" data-next-step>Continue</button>
            </div>

            <div class="mw-reg-step" data-step="2" hidden>
                <div class="mw-field">
                    <label for="name">Your name <span>*</span></label>
                    <input id="name" name="name" value="{{ old('name') }}" autocomplete="name" required>
                </div>
                <div class="mw-field mw-business-only" hidden>
                    <label for="company_name">Business name <span>*</span></label>
                    <input id="company_name" name="company_name" value="{{ old('company_name') }}" autocomplete="organization">
                </div>
                <div class="mw-split">
                    <div class="mw-field">
                        <label for="email">Email <span>*</span></label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" autocomplete="email" required>
                    </div>
                    <div class="mw-field">
                        <label for="phone">Mobile <span>*</span></label>
                        <input id="phone" name="phone" value="{{ old('phone') }}" inputmode="numeric" maxlength="10" pattern="[6-9][0-9]{9}" autocomplete="tel" required>
                    </div>
                </div>
                <div class="mw-field mw-business-only" hidden>
                    <label for="gst_number">GST number</label>
                    <input id="gst_number" name="gst_number" value="{{ old('gst_number') }}">
                </div>
                <div class="mw-field mw-business-only" hidden>
                    <label for="billing_address">Billing address <span>*</span></label>
                    <textarea id="billing_address" name="billing_address" rows="2">{{ old('billing_address') }}</textarea>
                </div>
                <div class="mw-field mw-others-only" hidden>
                    <label for="profile_note">Describe your business</label>
                    <input id="profile_note" name="profile_note" value="{{ old('profile_note') }}">
                </div>
                <div class="mw-split">
                    <div class="mw-field">
                        <label for="password">Password <span>*</span></label>
                        <input id="password" type="password" name="password" autocomplete="new-password" minlength="6" required>
                    </div>
                    <div class="mw-field">
                        <label for="password_confirmation">Confirm password <span>*</span></label>
                        <input id="password_confirmation" type="password" name="password_confirmation" autocomplete="new-password" minlength="6" required>
                    </div>
                </div>
                <div class="mw-auth-actions">
                    <button class="mw-btn mw-btn-ghost" type="button" data-prev-step>Back</button>
                    <button class="mw-btn" type="submit" id="mw-register-submit">Create account &amp; send code</button>
                </div>
            </div>

            <p class="mw-auth-switch">Already registered? <a href="{{ route('login') }}">Log in</a></p>
        </form>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    const form = document.getElementById('mw-register-form');
    if (!form) return;

    const step1 = form.querySelector('[data-step="1"]');
    const step2 = form.querySelector('[data-step="2"]');
    const steps = form.querySelectorAll('.mw-auth-steps span');
    const businessFields = form.querySelectorAll('.mw-business-only');
    const othersOnly = form.querySelectorAll('.mw-others-only');
    const submitBtn = document.getElementById('mw-register-submit');
    const hasErrors = {{ $errors->any() ? 'true' : 'false' }};

    function selectedType() {
        return form.querySelector('input[name="customer_type_id"]:checked');
    }

    function syncFields() {
        const type = selectedType();
        const family = type ? type.dataset.family : 'retail';
        const business = family === 'business' || family === 'supplier';
        businessFields.forEach((el) => {
            el.hidden = !business;
            el.querySelectorAll('input, textarea').forEach((input) => {
                if (input.id === 'gst_number' || input.id === 'profile_note') return;
                input.required = business;
            });
        });
        othersOnly.forEach((el) => {
            el.hidden = !(type && type.dataset.slug === 'others');
        });
    }

    function showStep(n) {
        step1.hidden = n !== 1;
        step2.hidden = n !== 2;
        steps.forEach((el, i) => el.classList.toggle('is-on', i < n));
        syncFields();
        window.scrollTo({ top: form.offsetTop - 40, behavior: 'smooth' });
    }

    form.querySelector('[data-next-step]')?.addEventListener('click', () => {
        if (!selectedType()) {
            alert('Please choose an account type.');
            return;
        }
        showStep(2);
    });
    form.querySelector('[data-prev-step]')?.addEventListener('click', () => showStep(1));
    form.querySelectorAll('input[name="customer_type_id"]').forEach((input) => {
        input.addEventListener('change', syncFields);
    });

    form.addEventListener('submit', () => {
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Sending code…';
        }
    });

    syncFields();
    if (hasErrors || selectedType()) {
        showStep(2);
    }
})();
</script>
@endpush