@extends('layouts.merchant')

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

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

    @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.ozon.store') }}"
          x-data="marketplaceConnect({
              checkUrl: '{{ route('merchant.feeds.ozon.check') }}',
              fields: { client_id: @js(old('client_id', '')), 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

        <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>
            В кабинете продавца Ozon откройте <b>Настройки → Seller API</b> и нажмите «Сгенерировать ключ».
            Скопируйте сюда <b>Client ID</b> и сам ключ — Ozon показывает ключ один раз.
            Мы только читаем каталог, склады и остатки и ничего не меняем в вашем кабинете.
        </div>

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

        <div class="grid gap-4 sm:grid-cols-2">
            <label class="block"><span class="{{ $lbl }}">Client ID</span>
                <input name="client_id" x-model="fields.client_id" @input="resetCheck()" inputmode="numeric" autocomplete="off"
                       placeholder="123456" class="{{ $input }}">
            </label>
            <label class="block"><span class="{{ $lbl }}">API-ключ</span>
                <x-secret-input name="api_key" x-model="fields.api_key" x-on:input="resetCheck()"
                                placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" :class="$input" />
            </label>
        </div>

        @if (old('client_id'))
            {{-- Ключ в форму после ошибки не возвращаем: старый ввод лежит в сессии. --}}
            <p class="text-xs text-[var(--color-muted)]">Вставьте API-ключ ещё раз и проверьте его — после ошибки мы не храним ключ в форме.</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' => 'Кабинет Ozon',
            'warehouseHint' => 'Товар будет «в наличии», если на отмеченных складах есть свободный остаток. Склады Ozon (FBO) — товар уже сдан маркетплейсу, и отправить его покупателю 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)]">Цены, наличие и новые товары подтягиваются из кабинета Ozon автоматически.</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