{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The merchant "My Shop" page: shop banner + wallet,
     the three sales counters, the sales table with the
     merchant-fee split, the shop identity form and the
     gateway credentials with rotation.
=====================================================
--}}

@extends('layouts.merchant')

@section('title', __('front.shop.title'))

@php
    use App\Support\Format;
    $percent = Format::percentFromBp($shop->fee_percent);
@endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.shop.index')],
        ['label' => __('front.shop.breadcrumb')],
    ]" />
@endsection

@section('page')
    {{-- ===== Shop banner ===== --}}
    <div class="relative mb-6 flex flex-col gap-5 overflow-hidden rounded-[20px] bg-gradient-to-l from-secondary-500 to-[#b3242f] p-5 text-white shadow-lg shadow-secondary-500/25 sm:flex-row sm:flex-wrap sm:items-center sm:p-6">
        <span class="pointer-events-none absolute -right-8 -top-12 size-40 rounded-full bg-white/10"></span>
        <div class="relative flex min-w-0 flex-1 items-center gap-4">
            <span class="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-[16px] bg-white shadow-lg sm:size-[68px] sm:rounded-[18px]">
                @if ($shop->logo_path)
                    <img src="{{ route('media.shop-logo', $shop) }}" alt="{{ $shop->name }}" class="size-full object-cover">
                @else
                    <svg class="size-8 text-secondary-500 sm:size-9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/><path d="M4 9.5c0 1.5 1.3 2.5 2.7 2.5S9.3 11 9.3 9.5c0 1.5 1.2 2.5 2.7 2.5S14.7 11 14.7 9.5c0 1.5 1.2 2.5 2.7 2.5S20 11 20 9.5"/></svg>
                @endif
            </span>
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2.5">
                    <h1 class="truncate text-[19px] font-bold tracking-tight sm:text-[23px]">{{ $shop->name }}</h1>
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-1 text-[12px] font-bold">
                        <span class="size-1.5 rounded-full bg-[#7dffa8]"></span>{{ __('front.shop.status_active') }}
                    </span>
                </div>
                {{-- Latin slug reads LTR, but the line sits right-aligned like the rest of the RTL banner. --}}
                <div class="mt-1.5 text-right text-[12.5px] text-white/85"><span dir="ltr">{{ $shop->slug }}</span> • {{ __('front.shop.member_since') }} {{ Format::persianDigits(Format::jalali($shop->created_at, 'F Y')) }}</div>
            </div>
        </div>
        {{-- Tap the balance to open the full shop wallet (earnings + settlement). --}}
        <a href="{{ route('account.shop.wallet') }}" class="group relative flex w-full items-center justify-between gap-3 rounded-[14px] bg-white/15 px-5 py-3 transition hover:bg-white/25 sm:w-auto sm:flex-col sm:justify-center sm:text-center">
            <div class="text-[11.5px] text-white/85">{{ __('front.shop.wallet_balance') }}</div>
            {{-- Amount first, then the unit (RTL reading order). --}}
            <div class="text-[19px] font-bold sm:mt-1"><span dir="ltr">@toman($walletBalance)</span> <span class="text-[12px] font-normal text-white/80">{{ __('front.shop.toman') }}</span></div>
            <div class="hidden items-center gap-1 text-[11px] font-bold text-white/85 sm:mt-1 sm:inline-flex">{{ __('front.shop.wallet.open') }}<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg></div>
            <svg class="size-4 shrink-0 text-white/85 sm:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
        </a>
    </div>

    {{-- ===== KPIs ===== --}}
    <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
        @php
            $kpis = [
                ['key' => 'monthly_sales', 'value' => $monthlySales, 'icon' => '<path d="M4 8h13l-3-3M20 16H7l3 3"/>', 'bg' => 'bg-secondary-50 text-secondary-500', 'money' => 'text-ink'],
                ['key' => 'settled', 'value' => $settledTotal, 'icon' => '<path d="M20 6 9 17l-5-5"/>', 'bg' => 'bg-[#e7f7ee] text-green-600', 'money' => 'text-green-600'],
            ];
        @endphp
        @foreach ($kpis as $kpi)
            <div class="rounded-2xl border border-line bg-white p-5">
                <div class="mb-3 flex items-center gap-2.5">
                    <span @class(['flex size-10 items-center justify-center rounded-[11px]', $kpi['bg']])>
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">{!! $kpi['icon'] !!}</svg>
                    </span>
                    <span class="text-[12.5px] text-ink-muted">{{ __('front.shop.kpis.'.$kpi['key']) }}</span>
                </div>
                <div @class(['text-[22px] font-black tracking-tight', $kpi['money']])><span dir="ltr">@toman($kpi['value'])</span> <span class="text-[12px] font-normal text-ink-faint">{{ __('front.shop.toman') }}</span></div>
            </div>
        @endforeach
        <div class="rounded-2xl border border-line bg-white p-5">
            <div class="mb-3 flex items-center gap-2.5">
                <span class="flex size-10 items-center justify-center rounded-[11px] bg-[#efeafb] text-primary-600">
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.6"/><path d="M18 20a5.2 5.2 0 0 0-3-4.7"/></svg>
                </span>
                <span class="text-[12.5px] text-ink-muted">{{ __('front.shop.kpis.customers') }}</span>
            </div>
            <div class="text-[22px] font-black tracking-tight text-ink" dir="ltr">@fa($customers)</div>
        </div>
    </div>

    {{-- ===== Recent orders ===== --}}
    <div class="mb-6 rounded-2xl border border-line bg-white p-5.5">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="text-[16px] font-bold">{{ __('front.shop.recent_orders.title') }}</h2>
                <span class="text-[12px] text-ink-faint">{{ __('front.shop.recent_orders.subtitle') }}</span>
            </div>
            <a href="{{ route('account.shop.orders') }}" class="inline-flex shrink-0 items-center gap-1 rounded-lg border border-secondary-500/25 bg-secondary-50 px-3 py-1.5 text-[11.5px] font-bold text-secondary-500 transition hover:bg-[#fbd5d9]">
                {{ __('front.shop.recent_orders.see_all') }}
                <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
            </a>
        </div>

        <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
            <table class="w-full min-w-[760px] border-collapse text-right text-[13px]">
                <thead>
                    <tr class="bg-[#faf9fd] text-ink-muted">
                        <th class="px-4 py-3.5 font-bold">{{ __('front.shop.orders.order') }}</th>
                        <th class="px-4 py-3.5 font-bold">{{ __('front.shop.orders.customer') }}</th>
                        <th class="px-4 py-3.5 font-bold">{{ __('front.shop.orders.total') }}</th>
                        <th class="px-4 py-3.5 font-bold">{{ __('front.shop.orders.time') }}</th>
                        <th class="px-4 py-3.5 font-bold">{{ __('front.shop.orders.status') }}</th>
                        <th class="px-4 py-3.5 text-center font-bold">{{ __('front.shop.orders.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($orders as $order)
                        @php $paid = $order->status === \App\Models\Order::STATUS_PAID; @endphp
                        <tr class="border-t border-[#f0eff5]">
                            <td class="px-4 py-3.5">
                                <a href="{{ route('account.shop.orders.show', $order) }}" class="font-bold text-secondary-500 transition hover:text-secondary-600" dir="ltr">{{ $order->code }}</a>
                            </td>
                            <td class="px-4 py-3.5">{{ $order->user?->fullName() ?? '—' }}</td>
                            <td class="px-4 py-3.5 font-bold"><span dir="ltr">@toman($order->amount)</span> {{ __('front.shop.orders.toman') }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-ink-soft">@jalaliDateTime($order->paid_at ?? $order->created_at)</td>
                            <td class="px-4 py-3.5">
                                <span @class([
                                    'inline-block rounded-2xl px-2.5 py-1 text-[11px] font-bold',
                                    'bg-[#e7f7ee] text-green-600' => $paid,
                                    'bg-[#fff5e6] text-amber-600' => $order->status === \App\Models\Order::STATUS_PENDING,
                                    'bg-secondary-50 text-secondary-500' => in_array($order->status, [\App\Models\Order::STATUS_FAILED, \App\Models\Order::STATUS_EXPIRED], true),
                                ])>{{ __('front.shop.sales.statuses.'.$order->status) }}</span>
                            </td>
                            <td class="px-4 py-3.5">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('account.shop.sales', ['order' => $order->code]) }}" class="inline-flex items-center gap-1.5 rounded-[9px] bg-[#f2f0fa] px-3 py-1.5 text-[12px] font-bold text-secondary-500 transition hover:bg-secondary-50">
                                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h13l-3-3M20 16H7l3 3"/></svg>
                                        {{ __('front.shop.orders.transactions_btn') }}
                                    </a>
                                    <a href="{{ route('account.shop.orders.show', $order) }}" class="inline-flex rounded-[9px] border border-line bg-white px-3 py-1.5 text-[12px] font-bold text-ink-soft transition hover:text-secondary-500">{{ __('front.shop.orders.detail_btn') }}</a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr class="border-t border-[#f0eff5]">
                            <td colspan="6" class="px-4 py-10 text-center text-sm text-ink-muted">{{ __('front.shop.recent_orders.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- The merchant sees their own fee (a regular user never does). --}}
        <div class="mt-3 flex items-start gap-2.5 rounded-xl border border-[#f6ccd1] bg-secondary-50 px-3.5 py-3 text-[12.5px] leading-6 text-secondary-600">
            <svg class="mt-0.5 size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="7.5" r="0.4"/></svg>
            <span>{{ __('front.shop.fee_note', [
                'percent' => Format::persianDigits($percent),
                'cap' => Format::persianDigits(Format::tomanFa($shop->fee_cap)),
            ]) }}</span>
        </div>
    </div>

    {{-- ===== Shop info + API keys ===== --}}
    <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
        {{-- Shop identity form --}}
        <div class="rounded-2xl border border-line bg-white p-6">
            <h2 class="mb-5 text-[16px] font-bold">{{ __('front.shop.info.title') }}</h2>
            <form method="POST" action="{{ route('account.shop.update') }}" enctype="multipart/form-data" x-data="{ busy: false, logoPreview: '', tab: 'identity' }"
                  x-on:submit.prevent="$store.confirm.ask({ message: @js(__('front.shop.info.confirm_save')), onConfirm: () => { busy = true; $el.submit(); } })">
                @csrf
                @method('PUT')

                {{-- Tabs: the form is one submit; tabs only group a long form. --}}
                <div class="mb-5 inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f6f3f8] p-1">
                    @foreach (['identity', 'address', 'contact'] as $t)
                        <button type="button" x-on:click="tab = @js($t)"
                                x-bind:class="tab === @js($t) ? 'bg-white text-secondary-500 shadow-sm' : 'text-ink-muted hover:text-secondary-500'"
                                class="rounded-[9px] px-4 py-2 text-[13px] font-bold transition">{{ __('front.shop.info.tabs.'.$t) }}</button>
                    @endforeach
                </div>

                {{-- Identity panel --}}
                <div x-show="tab === 'identity'" class="flex flex-col gap-4">
                    {{-- Shop logo: square with slightly rounded corners; cropped to 400x400 server-side. --}}
                    <div class="flex items-center gap-4">
                        <span class="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-line bg-[#faf9fd]">
                            <template x-if="logoPreview"><img x-bind:src="logoPreview" alt="" class="size-full object-cover"></template>
                            <template x-if="! logoPreview">
                                <span class="flex size-full items-center justify-center">
                                    @if ($shop->logo_path)
                                        <img src="{{ route('media.shop-logo', $shop) }}" alt="{{ $shop->name }}" class="size-full object-cover">
                                    @else
                                        <svg class="size-7 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/></svg>
                                    @endif
                                </span>
                            </template>
                        </span>
                        <div class="min-w-0">
                            <label for="shop-logo" class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-secondary-50 px-4 py-2.5 text-[13px] font-bold text-secondary-500 transition hover:bg-[#fbd5d9]">
                                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M8 8l4-4 4 4"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
                                {{ __('front.shop.info.logo_upload') }}
                            </label>
                            <input id="shop-logo" name="logo" type="file" accept="image/jpeg,image/png" class="hidden"
                                   x-on:change="logoPreview = $event.target.files[0] ? URL.createObjectURL($event.target.files[0]) : ''">
                            <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop.info.logo_hint') }}</p>
                        </div>
                    </div>
                    <div>
                        <label for="shop-name" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.name') }}</label>
                        <input id="shop-name" name="name" value="{{ old('name', $shop->name) }}" required
                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-secondary-500 focus:bg-white">
                    </div>
                    <div>
                        <label for="shop-slug" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.slug') }}</label>
                        <input id="shop-slug" name="slug" value="{{ old('slug', $shop->slug) }}" required dir="ltr"
                               @readonly($slugLocked)
                               @unless ($slugLocked) x-on:input="$el.value = $el.value.toLowerCase().replace(/[^a-z0-9-]/g, '')" @endunless
                               @class([
                                   'w-full rounded-xl border-[1.5px] px-3.5 py-3 text-left text-sm outline-none transition',
                                   'cursor-not-allowed border-[#e3e1ec] bg-[#f3f2f7] text-ink-muted' => $slugLocked,
                                   'border-[#e3e1ec] bg-[#fbfbfd] focus:border-secondary-500 focus:bg-white' => ! $slugLocked,
                               ])>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ $slugLocked ? __('front.shop.info.slug_locked') : __('front.shop.info.slug_editable_hint') }}</p>
                    </div>

                    {{-- Website address: a gateway is only granted for a reviewed site
                         with a valid e-namad seal, so a new/changed address goes to
                         review. The https:// prefix is fixed; the input takes only the
                         domain, forced to lowercase ASCII (no Persian, no uppercase). --}}
                    @php $wsState = $shop->website_status ?: 'none'; @endphp
                    <div x-data="websiteField(@js(old('website_url', $shop->website_url)))">
                        <label for="shop-website" class="mb-1.5 block text-[13px] font-bold">
                            {{ __('front.shop.info.website') }}
                            <span class="font-normal text-ink-faint">{{ __('front.shop.info.optional') }}</span>
                        </label>

                        <div class="flex items-stretch overflow-hidden rounded-xl border-[1.5px] transition" dir="ltr"
                             x-bind:class="filled && ! valid ? 'border-secondary-500 bg-white' : (valid ? 'border-green-500 bg-white' : 'border-[#e3e1ec] bg-[#fbfbfd] focus-within:border-secondary-500 focus-within:bg-white')">
                            <span class="flex select-none items-center border-r border-[#e7e5ee] bg-[#f3f2f7] px-3 font-mono text-[13px] text-ink-muted">https://</span>
                            <input id="shop-website" type="text" dir="ltr" inputmode="url" autocomplete="url"
                                   value="{{ \Illuminate\Support\Str::after((string) old('website_url', $shop->website_url), 'https://') }}"
                                   x-bind:value="host" x-on:input="onInput($event)" @disabled($shop->websitePending())
                                   placeholder="{{ __('front.shop.info.website_placeholder') }}"
                                   class="min-w-0 flex-1 bg-transparent px-3.5 py-3 text-left text-[13.5px] outline-none disabled:cursor-not-allowed disabled:opacity-60">
                        </div>
                        {{-- The full https:// URL actually submitted (empty when blank). --}}
                        <input type="hidden" name="website_url" x-bind:value="fullUrl">

                        {{-- Live format note as the merchant types. --}}
                        <p x-show="filled && ! valid" x-cloak class="mt-1.5 text-[11.5px] text-secondary-500">{{ __('front.shop.info.website_invalid') }}</p>
                        <p x-show="valid" x-cloak class="mt-1.5 text-[11.5px] text-green-600">{{ __('front.shop.info.website_valid') }}</p>

                        {{-- Review status the operator left the site in; the icon draws the
                             eye and actionable states (not entered / rejected) pulse. --}}
                        @php
                            $wsMeta = [
                                'none'     => ['wrap' => 'border-[#e3e1ec] bg-[#faf9fd]', 'chip' => 'bg-[#eceaf3] text-ink-muted', 'title' => 'text-ink-soft', 'pulse' => true,  'icon' => '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>'],
                                'pending'  => ['wrap' => 'border-[#ffe1ad] bg-[#fff8ee]', 'chip' => 'bg-amber-100 text-amber-600', 'title' => 'text-amber-700', 'pulse' => false, 'icon' => '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>'],
                                'approved' => ['wrap' => 'border-[#bfe8cf] bg-[#f0fbf4]', 'chip' => 'bg-green-100 text-green-600', 'title' => 'text-green-700', 'pulse' => false, 'icon' => '<path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="m9 12 2 2 4-4"/>'],
                                'rejected' => ['wrap' => 'border-[#f6ccd1] bg-secondary-50', 'chip' => 'bg-secondary-100 text-secondary-500', 'title' => 'text-secondary-600', 'pulse' => true, 'icon' => '<circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/>'],
                            ][$wsState];
                        @endphp
                        <div @class(['mt-2.5 flex items-start gap-2.5 rounded-xl border px-3.5 py-2.5', $wsMeta['wrap']])>
                            <span @class(['mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-lg', $wsMeta['chip'], 'animate-pulse' => $wsMeta['pulse']])>
                                <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $wsMeta['icon'] !!}</svg>
                            </span>
                            <div class="min-w-0 text-[12px] leading-6">
                                <div @class(['font-bold', $wsMeta['title']])>{{ __('front.shop.info.website_statuses.'.$wsState) }}</div>
                                <div class="text-ink-soft">
                                    @switch($wsState)
                                        @case('pending') {{ __('front.shop.info.website_pending_hint') }} @break
                                        @case('approved') {{ __('front.shop.info.website_approved_hint') }} @break
                                        @case('rejected') {{ __('front.shop.info.website_rejected_hint', ['reason' => $shop->website_reject_reason ?: '—']) }} @break
                                        @default {{ __('front.shop.info.website_hint') }}
                                    @endswitch
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Address panel --}}
                <div x-show="tab === 'address'" x-cloak class="flex flex-col gap-4">
                    <x-form.province-city province-name="province" city-name="city" :province="$shop->province" :city="$shop->city" accent="secondary" />
                    <div>
                        <label for="shop-address" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.address') }}</label>
                        <textarea id="shop-address" name="address" rows="3" class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-secondary-500 focus:bg-white">{{ old('address', $shop->address) }}</textarea>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop.info.address_hint') }}</p>
                    </div>
                </div>

                {{-- Contact panel --}}
                <div x-show="tab === 'contact'" x-cloak class="flex flex-col gap-4">
                    <div x-data="supportPhone(@js(old('support_phone', $shop->support_phone)))">
                        <label for="shop-support-phone" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.support_phone') }}</label>
                        <input id="shop-support-phone" name="support_phone" value="{{ old('support_phone', $shop->support_phone) }}" dir="ltr" inputmode="tel"
                               x-on:input="onInput($event)"
                               x-bind:class="filled && ! valid ? 'border-secondary-500 bg-white' : (filled && valid ? 'border-green-500 bg-white' : 'border-[#e3e1ec] bg-[#fbfbfd] focus:border-secondary-500 focus:bg-white')"
                               class="w-full rounded-xl border-[1.5px] px-3.5 py-3 text-left text-sm outline-none transition">
                        <p x-show="! filled" class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop.info.support_phone_hint') }}</p>
                        <p x-show="filled && valid" x-cloak class="mt-1.5 text-[11.5px] text-green-600">{{ __('front.shop.info.support_phone_valid') }}</p>
                        <p x-show="filled && ! valid" x-cloak class="mt-1.5 text-[11.5px] text-secondary-500">{{ __('front.shop.info.support_phone_invalid') }}</p>
                    </div>

                    {{-- Social links, shown on the shop's public payment page. --}}
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.socials_title') }} <span class="font-normal text-ink-faint">{{ __('front.shop.info.optional') }}</span></label>
                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            @foreach (\App\Models\Shop::SOCIAL_PLATFORMS as $platform)
                                <div>
                                    <span class="mb-1 block text-[12px] text-ink-faint">{{ __("front.shop.info.social.$platform.label") }}</span>
                                    <input name="socials[{{ $platform }}]" value="{{ old("socials.$platform", data_get($shop->socials, $platform)) }}" dir="ltr" inputmode="url"
                                           placeholder="{{ __("front.shop.info.social.$platform.placeholder") }}"
                                           class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-2.5 text-left text-[13px] outline-none transition focus:border-secondary-500 focus:bg-white placeholder:text-ink-faint">
                                </div>
                            @endforeach
                        </div>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop.info.socials_hint') }}</p>
                    </div>
                </div>

                {{-- Save applies to the whole form regardless of the open tab. --}}
                <div class="mt-5 flex justify-end border-t border-line pt-5">
                    <button type="submit" x-bind:disabled="busy"
                            class="inline-flex items-center gap-2 rounded-xl bg-secondary-500 px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-secondary-500/25 transition hover:bg-secondary-600 disabled:cursor-not-allowed disabled:opacity-70">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                        {{ __('front.shop.info.save') }}
                    </button>
                </div>
            </form>
        </div>

        {{-- Gateway credentials --}}
        <div class="rounded-2xl border border-line bg-white p-6" x-data="shopKeys(@js($shop->api_key), @js($shop->api_secret))">
            <div class="mb-1.5 flex items-center justify-between gap-2">
                <h2 class="text-[16px] font-bold">{{ __('front.shop.keys.title') }}</h2>
                <a href="{{ route('docs.gateway') }}" target="_blank" class="inline-flex items-center gap-1.5 rounded-full bg-[#f2f0fa] px-3 py-1 text-[11.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M8 9l-4 3 4 3M16 9l4 3-4 3M13 6l-2 12"/></svg>
                    {{ __('front.shop.keys.docs_link') }}
                </a>
            </div>
            <p class="mb-4 text-[12.5px] leading-7 text-ink-faint">{{ __('front.shop.keys.hint') }}</p>

            {{-- How the shop plugs into the network, animated. --}}
            <x-shop.network class="mb-5" />

            <div class="flex flex-col gap-4">
                {{-- API key --}}
                <div>
                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.keys.api_key') }}</label>
                    <div class="flex gap-2">
                        <div class="min-w-0 flex-1 truncate rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#faf9fd] px-3.5 py-3 font-mono text-[13px]" dir="ltr">{{ $shop->api_key }}</div>
                        <button type="button" x-on:click="copyApi()" class="relative shrink-0 rounded-xl bg-[#f2f0fa] px-3.5 text-[12.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
                            <span x-show="apiCopied" x-cloak class="absolute -top-8 left-1/2 -translate-x-1/2 rounded-lg bg-ink px-2.5 py-1 text-[11px] text-white">{{ __('front.shop.keys.copied') }}</span>
                        </button>
                    </div>
                </div>
                {{-- Secret key --}}
                <div>
                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.keys.secret') }}</label>
                    <div class="flex gap-2">
                        <div class="min-w-0 flex-1 truncate rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#faf9fd] px-3.5 py-3 font-mono text-[13px]" dir="ltr" x-text="secretDisplay"></div>
                        <button type="button" x-on:click="showSecret = ! showSecret" class="shrink-0 rounded-xl bg-[#f2f0fa] px-3.5 text-[12.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]" x-text="showSecret ? @js(__('front.shop.keys.hide')) : @js(__('front.shop.keys.show'))"></button>
                        <button type="button" x-on:click="copySecret()" class="relative shrink-0 rounded-xl bg-[#f2f0fa] px-3.5 text-[12.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
                            <span x-show="secretCopied" x-cloak class="absolute -top-8 left-1/2 -translate-x-1/2 rounded-lg bg-ink px-2.5 py-1 text-[11px] text-white">{{ __('front.shop.keys.copied') }}</span>
                        </button>
                    </div>
                </div>

                <div class="flex gap-3 rounded-xl border border-[#f6ccd1] bg-secondary-50 px-4 py-3">
                    <svg class="mt-0.5 size-4.5 shrink-0 text-secondary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 2 20h20L12 3z"/><line x1="12" y1="9.5" x2="12" y2="14"/><circle cx="12" cy="17" r="0.4"/></svg>
                    <p class="text-[12px] leading-7 text-secondary-600">{{ __('front.shop.keys.regen_warning') }}</p>
                </div>

                <form method="POST" action="{{ route('account.shop.credentials.regenerate') }}" x-data="{ busy: false }"
                      x-on:submit.prevent="$store.confirm.ask({ message: @js(__('front.shop.keys.confirm_regen')), onConfirm: () => { busy = true; $el.submit(); } })">
                    @csrf
                    <button type="submit" x-bind:disabled="busy"
                            class="inline-flex w-full items-center justify-center gap-2 rounded-xl border-[1.5px] border-secondary-500 py-3 text-[13.5px] font-bold text-secondary-500 transition hover:bg-secondary-50 disabled:cursor-not-allowed disabled:opacity-70">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-secondary-500/30 border-t-secondary-500"></span>
                        <svg x-show="! busy" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
                        {{ __('front.shop.keys.regenerate') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection