@extends('layouts.app')
@section('title', 'Get verified')

@section('content')
@php($input = 'mt-1 w-full rounded border border-slate-300 px-3 py-2')
<div class="mx-auto max-w-xl rounded-lg border border-slate-200 bg-white p-6" x-data="{ role: '{{ old('role', 'buyer') }}' }">
    <h1 class="text-xl font-bold">Create your account</h1>
    <p class="mt-1 text-sm text-slate-600">Accounts are activated only after Drixem reviews your documents.</p>

    <form method="POST" action="{{ route('register') }}" class="mt-5 grid grid-cols-2 gap-4 text-sm">
        @csrf
        <fieldset class="col-span-2 grid grid-cols-3 gap-2">
            @foreach (['buyer' => 'Buyer', 'seller' => 'Mill / Refinery', 'affiliate' => 'Affiliate'] as $value => $label)
                <label class="cursor-pointer rounded border px-3 py-3 text-center font-semibold"
                       :class="role === '{{ $value }}' ? 'border-crimson bg-red-50 text-crimson' : 'border-slate-300'">
                    <input type="radio" name="role" value="{{ $value }}" x-model="role" class="sr-only">{{ $label }}
                </label>
            @endforeach
        </fieldset>

        <label class="col-span-2" x-show="role === 'seller'" x-cloak>Facility type
            <select name="seller_type" class="{{ $input }}" :disabled="role !== 'seller'">
                <option value="mill" @selected(old('seller_type') === 'mill')>Palm oil mill</option>
                <option value="refinery" @selected(old('seller_type') === 'refinery')>Refinery</option>
            </select>
        </label>

        <label class="col-span-2">Your full name
            <input type="text" name="name" value="{{ old('name') }}" required class="{{ $input }}">
        </label>
        <label class="col-span-2">
            <span x-text="role === 'affiliate' ? 'Company name (if any)' : 'Registered company name'"></span>
            <input type="text" name="company_name" value="{{ old('company_name') }}" :required="role !== 'affiliate'" class="{{ $input }}">
        </label>
        <label>Company reg. no.
            <input type="text" name="company_reg_no" value="{{ old('company_reg_no') }}" class="{{ $input }}">
        </label>
        <label>Country (ISO code)
            <input type="text" name="country" value="{{ old('country') }}" maxlength="2" placeholder="MY" required class="{{ $input }} uppercase">
        </label>
        <label class="col-span-2">Phone / WhatsApp
            <input type="tel" name="phone" value="{{ old('phone') }}" required class="{{ $input }}">
        </label>
        <label class="col-span-2">Work email
            <input type="email" name="email" value="{{ old('email') }}" required class="{{ $input }}">
        </label>
        <label>Password
            <input type="password" name="password" required minlength="10" class="{{ $input }}">
        </label>
        <label>Confirm password
            <input type="password" name="password_confirmation" required class="{{ $input }}">
        </label>

        <p class="col-span-2 rounded bg-slate-50 p-3 text-xs text-slate-600" x-show="role === 'affiliate'" x-cloak>
            Affiliates earn a transparent, platform-paid commission on completed deals. Affiliates cannot set, change or mark up any mill price.
        </p>

        <button class="col-span-2 rounded bg-crimson px-4 py-3 font-semibold text-white hover:bg-crimson-dark">Continue to document upload</button>
    </form>
</div>
@endsection