@extends('layouts.merchant')

@section('title', 'Новая выгрузка — кабинет Wildberries')

@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)]')

@section('content')
<div class="max-w-xl">
    <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Новая выгрузка</h1>
    @include('seller.feeds.partials.source-tabs', ['active' => 'wildberries'])

    @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)]">
            @foreach ($errors->all() as $e) <div>{{ $e }}</div> @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('merchant.feeds.wildberries.store') }}"
          x-data="marketplaceConnect({
              checkUrl: '{{ route('merchant.feeds.wildberries.check') }}',
              fields: { api_key: '' },
              selected: @js(array_values((array) old('stock_warehouses', []))),
          })"
          class="mt-6 space-y-4 rounded-[var(--radius-lg)] bg-white p-6 shadow-[var(--shadow-card)]">
        @csrf

        {{-- Тип токена важен: персональный Wildberries запрещает передавать
             сторонним сервисам, и такой мы не примем. --}}
        <div class="rounded-[var(--radius-md)] bg-[var(--color-canvas)] p-4 text-sm text-[var(--color-slate)]">
            <b class="block text-[var(--color-ink)]">Где взять токен</b>
            В кабинете продавца Wildberries откройте <b>Интеграции по API</b> и нажмите «Создать токен».
            Выберите тип <b>«Базовый»</b>, категории <b>«Контент», «Цены и скидки» и «Маркетплейс»</b> и уровень доступа
            <b>«Только чтение»</b>. Скопируйте токен — WB показывает его один раз.
            Мы только читаем каталог, цены, склады и остатки и ничего не меняем в вашем кабинете.
        </div>

        <label class="block"><span class="{{ $lbl }}">Название источника</span>
            <input name="name" value="{{ old('name') }}" placeholder="Например: основной кабинет Wildberries" autocomplete="off" class="{{ $input }}">
            <span class="mt-1 block text-xs text-[var(--color-muted)]">
                Нужно только вам — различать выгрузки в списке. Оставьте пустым, и мы подставим название магазина на Wildberries.
            </span>
        </label>

        <label class="block"><span class="{{ $lbl }}">Токен</span>
            <x-secret-input name="api_key" x-model="fields.api_key" x-on:input="resetCheck()"
                            placeholder="eyJhbGciOiJFUzI1NiIs…" :class="$input" />
        </label>

        @if ($errors->any())
            {{-- Токен в форму после ошибки не возвращаем: старый ввод лежит в сессии. --}}
            <p class="text-xs text-[var(--color-muted)]">Вставьте токен ещё раз и проверьте его — после ошибки мы не храним токен в форме.</p>
        @endif

        <div class="flex flex-wrap items-center gap-3">
            <button type="button" @click="check()" :disabled="checking || ! filled"
                    class="rounded-[var(--radius-md)] border-[1.5px] border-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-[var(--color-primary)] disabled:opacity-50">
                <span x-show="! checking">Проверить токен</span>
                <span x-show="checking" x-cloak>Проверяем…</span>
            </button>
            <span x-show="error" x-cloak class="text-sm font-semibold text-[var(--color-sale)]" x-text="error"></span>
        </div>

        @include('seller.feeds.partials.marketplace-account', [
            'accountName' => 'Кабинет Wildberries',
            'warehouseHint' => 'Товар будет «в наличии», если на отмеченных складах есть остаток. Складов Wildberries (FBW) в списке нет: товар там уже сдан маркетплейсу, и отправить его покупателю teeu вы не сможете.',
        ])

        <label class="block"><span class="{{ $lbl }}">Как часто обновлять</span>
            <select name="update_interval_minutes" class="{{ $input }}">
                <option value="1440" @selected(old('update_interval_minutes', 1440) == 1440)>1 раз в день</option>
                <option value="720" @selected(old('update_interval_minutes') == 720)>2 раза в день</option>
            </select>
            <span class="mt-1 block text-xs text-[var(--color-muted)]">
                Цены, наличие и новые товары подтягиваются из кабинета Wildberries автоматически. Цены WB отдаёт по 1000 товаров
                раз в 15 минут, поэтому большой каталог появляется постепенно: первая тысяча — сразу, остальное — в течение нескольких часов.
            </span>
        </label>

        <div class="border-t border-[var(--color-line)] pt-4">
            <x-address-picker prefix="address" label="Адрес склада (откуда доставка)"
                :formatted="old('address_formatted')" :lat="old('address_lat')" :lng="old('address_lng')" />
        </div>

        <button type="submit" :disabled="! account"
                class="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)] disabled:opacity-50">
            Подключить
        </button>
    </form>
</div>
@endsection