@extends('layouts.app')

@section('title', ($hasStores ?? false) ? 'Добавить магазин — teeu' : 'Стать продавцом — teeu')

@section('content')
<div class="mx-auto max-w-2xl">
    @if ($hasStores ?? false)
        <a href="{{ route('merchant.dashboard') }}" class="mb-3 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--color-slate)] hover:text-[var(--color-primary)]">
            <i data-lucide="arrow-left" class="h-4 w-4"></i> В кабинет продавца
        </a>
        <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Добавить магазин</h1>
        <p class="mt-1 text-sm text-[var(--color-slate)]">Новый магазин привяжется к вашему аккаунту рядом с уже существующими. После подтверждения email он появится в переключателе магазинов.</p>
    @else
        <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Стать продавцом</h1>
        <p class="mt-1 text-sm text-[var(--color-slate)]">Заполните данные организации. После подтверждения email вы получите доступ к кабинету продавца.</p>
    @endif

    @if ($errors->any())
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">
            Проверьте правильность заполнения формы.
        </div>
    @endif

    <form method="POST" action="{{ route('become-seller') }}"
          x-data="innLookup(@js(route('become-seller.requisites')), @js(old('org_type', 'ip')))"
          class="mt-6 space-y-4 rounded-[var(--radius-xl)] bg-white p-6 shadow-[var(--shadow-card)]">
        @csrf
        @php($input = 'w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)]')
        @php($lbl = 'mb-1.5 block text-sm font-semibold text-[var(--color-ink)]')

        <div class="grid gap-4 sm:grid-cols-2">
            {{-- ИНН идёт первым и на всю ширину: с него начинается заполнение —
                 поиск подставляет тип организации, название и остальные реквизиты. --}}
            <div class="sm:col-span-2">
                <label for="inn-field" class="{{ $lbl }}">ИНН</label>
                <div class="flex gap-2">
                    <input id="inn-field" name="inn" x-ref="inn" value="{{ old('inn') }}" inputmode="numeric"
                           @change="auto()" @keydown.enter.prevent="lookup()" class="{{ $input }}">
                    <button type="button" @click="lookup()" :disabled="loading" title="Заполнить реквизиты по ИНН"
                            class="shrink-0 rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-3 text-sm font-semibold text-[var(--color-primary)] hover:border-[var(--color-primary)] disabled:opacity-50">
                        <span x-text="loading ? 'Ищем…' : 'Найти'"></span>
                    </button>
                </div>
                @error('inn')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
                <span x-show="!message" class="mt-1 block text-xs text-[var(--color-muted)]">Введите ИНН — остальные реквизиты подставим из ЕГРЮЛ/ЕГРИП.</span>
                <span x-cloak x-show="message" class="mt-1 block text-xs" :class="messageClass" x-text="message"></span>
            </div>

            <label class="block"><span class="{{ $lbl }}">Тип организации</span>
                <select name="org_type" x-ref="org_type" x-model="orgType" class="{{ $input }}">
                    @foreach (\App\Enums\OrganizationType::options() as $val => $label)
                        <option value="{{ $val }}" @selected(old('org_type') === $val)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('org_type')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
            <label class="block"><span class="{{ $lbl }}">Юридическое название</span>
                <input name="legal_name" x-ref="legal_name" value="{{ old('legal_name') }}" class="{{ $input }}">
            </label>
            {{-- ОГРН есть только у зарегистрированного бизнеса. Самозанятый —
                 физлицо на НПД, в ЕГРЮЛ/ЕГРИП его нет, и спрашивать номер не за
                 что. Поле скрывается, а не просто перестаёт быть обязательным:
                 пустая графа «ОГРН» заставляет человека думать, что он что-то
                 не дозаполнил. --}}
            <label class="block" x-show="orgType !== 'self_employed'" x-cloak>
                <span class="{{ $lbl }}">ОГРН / ОГРНИП</span>
                <input name="ogrn" x-ref="ogrn" value="{{ old('ogrn') }}" class="{{ $input }}">
                @error('ogrn')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
            <label class="block" x-show="orgType === 'ooo'" x-cloak>
                <span class="{{ $lbl }}">КПП</span>
                <input name="kpp" x-ref="kpp" value="{{ old('kpp') }}" class="{{ $input }}">
                @error('kpp')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
            <label class="block"><span class="{{ $lbl }}">Публичное название магазина</span>
                <input name="public_name" value="{{ old('public_name') }}" class="{{ $input }}">
                @error('public_name')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
            <label class="block"><span class="{{ $lbl }}">Контактное лицо</span>
                <input name="contact_person" x-ref="contact_person" value="{{ old('contact_person') }}" class="{{ $input }}">
                @error('contact_person')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
            <label class="block"><span class="{{ $lbl }}">Контактный телефон</span>
                <input name="contact_phone" x-data="phoneMask(@js(old('contact_phone', '')))"
                       :value="value" @input="value = format($event.target.value)"
                       inputmode="tel" placeholder="+7 (___) ___-__-__" class="{{ $input }}">
                @error('contact_phone')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
            <label class="block"><span class="{{ $lbl }}">Email продавца</span>
                <input name="email" type="email" value="{{ old('email') }}" class="{{ $input }}">
                <span class="mt-1 block text-xs text-[var(--color-muted)]">На эту почту придёт код подтверждения — укажите реальный адрес.</span>
                @error('email')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
            </label>
        </div>

        <label class="block"><span class="{{ $lbl }}">Юридический адрес</span>
            <input name="legal_address" x-ref="legal_address" value="{{ old('legal_address') }}" class="{{ $input }}">
            @error('legal_address')<span class="mt-1 block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror
        </label>
        <label class="block"><span class="{{ $lbl }}">Фактический адрес (необязательно)</span>
            <input name="actual_address" value="{{ old('actual_address') }}" class="{{ $input }}">
        </label>

        <label class="flex items-start gap-2 text-sm text-[var(--color-slate)]">
            <input type="checkbox" name="consent" value="1" class="mt-1" @checked(old('consent'))>
            <span>Я принимаю <a href="{{ route('rules') }}" target="_blank" class="font-semibold text-[var(--color-primary)] hover:underline">Правила для продавцов</a> teeu и подтверждаю достоверность данных.</span>
        </label>
        @error('consent')<span class="block text-xs text-[var(--color-sale)]">{{ $message }}</span>@enderror

        <button type="submit" class="w-full rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3 text-[15px] font-bold text-white shadow-[var(--shadow-primary)] hover:bg-[var(--color-primary-dark)]">
            Продолжить
        </button>
    </form>
</div>
@endsection