{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: apply.blade.php
------------------------------------------------------
Use: A regular user's "open a shop" page: the pitch and
     the application form, or the under-review state once
     an application is filed. Filing never changes the
     user's identity verification.
=====================================================
--}}

@extends('layouts.user')

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

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

@section('page')
    @if ($shop !== null && $shop->status === \App\Models\Shop::STATUS_PENDING)
        {{-- ===== Under review ===== --}}
        <div class="mx-auto max-w-xl rounded-2xl border border-line bg-white p-8 text-center shadow-sm">
            <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-amber-50 text-amber-500">
                <svg class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5l3 2"/></svg>
            </div>
            <h1 class="mb-2 text-lg font-bold">{{ __('front.shop_apply.pending_title') }}</h1>
            <p class="mx-auto max-w-md text-sm leading-7 text-ink-muted">{{ __('front.shop_apply.pending_body') }}</p>
            <div class="mx-auto mt-5 max-w-xs rounded-xl border border-line bg-[#faf9fd] px-4 py-3 text-right">
                <div class="flex items-center justify-between py-1">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.shop.info.name') }}</span>
                    <span class="text-[13px] font-bold">{{ $shop->name }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] py-1 pt-2">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.shop.info.slug') }}</span>
                    <span class="text-[13px] font-bold" dir="ltr">{{ $shop->slug }}</span>
                </div>
            </div>
        </div>
    @else
        @php
            // The advertised default merchant fee comes from the site settings.
            $feePercent = \App\Support\Format::persianDigits(\App\Support\Format::percentFromBp((int) config('etebarit.default_merchant_fee_percent')));
            $feeCap = \App\Support\Format::tomanFa((int) config('etebarit.default_merchant_fee_cap'));
        @endphp
        <div x-data="{ busy: false, logoPreview: '' }">
            {{-- ===== Pitch ===== --}}
            <div class="relative mb-5 overflow-hidden rounded-[22px] bg-gradient-to-l from-secondary-500 to-[#b3242f] p-8 text-white shadow-xl shadow-secondary-500/25">
                <span class="pointer-events-none absolute -right-10 -top-16 size-52 rounded-full bg-white/10"></span>
                <span class="pointer-events-none absolute -bottom-20 left-[10%] size-48 rounded-full bg-white/[0.07]"></span>
                <div class="relative">
                    <span class="mb-4 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3.5 py-1.5 text-[11.5px] font-bold">
                        <span class="size-1.5 rounded-full bg-[#7dffa8]"></span>{{ __('front.shop_apply.fee_badge') }}
                    </span>
                    <h1 class="text-[26px] font-bold leading-snug tracking-tight">{{ __('front.shop_apply.hero_title') }}</h1>
                    <p class="mt-2.5 max-w-2xl text-[14px] leading-7 text-white/90">{{ __('front.shop_apply.hero_body') }}</p>
                </div>
            </div>

            {{-- ===== How it works ===== --}}
            <div class="mb-5 rounded-2xl border border-line bg-white p-5">
                <div class="mb-4 text-[14px] font-bold">{{ __('front.shop_apply.steps_title') }}</div>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                    @foreach (['apply', 'review', 'connect'] as $i => $step)
                        <div class="flex items-start gap-3">
                            <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-50 text-[13px] font-black text-secondary-500">@fa($i + 1)</span>
                            <div class="min-w-0">
                                <div class="text-[13.5px] font-bold">{{ __('front.shop_apply.steps.'.$step.'.title') }}</div>
                                <p class="mt-0.5 text-[12px] leading-6 text-ink-muted">{{ __('front.shop_apply.steps.'.$step.'.body') }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- ===== Features ===== --}}
            <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @php
                    $features = [
                        'sales' => '<path d="M3 17l6-6 4 4 7-7"/><path d="M17 8h4v4"/>',
                        'settle' => '<path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
                        'dashboard' => '<rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/>',
                        'gateway' => '<rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"/><path d="M6 14.5h4"/>',
                    ];
                @endphp
                @foreach ($features as $key => $icon)
                    <div class="rounded-2xl border border-line bg-white p-5">
                        <span class="mb-3 flex size-11 items-center justify-center rounded-[13px] bg-secondary-50 text-secondary-500">
                            <svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">{!! $icon !!}</svg>
                        </span>
                        <div class="text-[14px] font-bold">{{ __('front.shop_apply.features.'.$key.'.title') }}</div>
                        <p class="mt-1.5 text-[12px] leading-6 text-ink-muted">{{ __('front.shop_apply.features.'.$key.'.body') }}</p>
                    </div>
                @endforeach
            </div>

            {{-- ===== Fee transparency ===== --}}
            <div class="mb-5 flex flex-wrap items-center gap-4 rounded-2xl border border-[#f6ccd1] bg-secondary-50 p-5">
                <span class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-white text-secondary-500 shadow-sm">
                    <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                </span>
                <div class="min-w-0 flex-1">
                    <div class="text-[14px] font-bold text-secondary-600">{{ __('front.shop_apply.fee_title') }}</div>
                    <p class="mt-1 text-[12.5px] leading-6 text-secondary-600/90">{{ __('front.shop_apply.fee_body', ['percent' => $feePercent, 'cap' => $feeCap]) }}</p>
                </div>
            </div>

            {{-- ===== Application form ===== --}}
            <div class="rounded-2xl border border-line bg-white p-6">
                <h2 class="mb-1 text-[16px] font-bold">{{ __('front.shop_apply.form_title') }}</h2>
                <p class="mb-5 text-[13px] text-ink-muted">{{ __('front.shop_apply.form_hint') }}</p>

                @if ($shop !== null && $shop->status === \App\Models\Shop::STATUS_REJECTED)
                    <div class="mb-5 flex items-start gap-2.5 rounded-xl border border-secondary-500/20 bg-secondary-50 px-4 py-3">
                        <svg class="mt-0.5 size-4 shrink-0 text-secondary-500" 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="8" x2="12" y2="13"/><circle cx="12" cy="16.5" r="0.4"/></svg>
                        <p class="text-[12.5px] leading-6 text-secondary-600">{{ __('front.shop_apply.rejected_note') }}</p>
                    </div>
                @endif

                <form method="POST" action="{{ route('account.shop.apply.submit') }}" enctype="multipart/form-data"
                      x-on:submit.prevent="$store.confirm.ask({ message: @js(__('front.shop_apply.confirm_submit')), onConfirm: () => { busy = true; $el.submit(); } })">
                    @csrf
                    <div class="flex flex-col gap-4">
                        {{-- Logo --}}
                        <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">
                                    <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>
                                </template>
                            </span>
                            <div class="min-w-0">
                                <label for="apply-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="apply-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="apply-name" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.name') }}</label>
                            <input id="apply-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="apply-slug" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.slug') }}</label>
                            <input id="apply-slug" name="slug" value="{{ old('slug', $shop?->slug) }}" required dir="ltr"
                                   x-on:input="$el.value = $el.value.toLowerCase().replace(/[^a-z0-9-]/g, '')"
                                   class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-sm outline-none transition focus:border-secondary-500 focus:bg-white">
                            <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop.info.slug_editable_hint') }}</p>
                        </div>
                        <div x-data="supportPhone(@js(old('support_phone', $shop?->support_phone)))">
                            <label for="apply-support-phone" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.support_phone') }}</label>
                            <input id="apply-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>
                        {{-- Website: fixed https:// prefix + domain-only input, forced to
                             lowercase ASCII. Reviewed for its e-namad seal after approval. --}}
                        <div x-data="websiteField(@js(old('website_url', $shop?->website_url)))">
                            <label for="apply-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="apply-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)"
                                       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">
                            </div>
                            <input type="hidden" name="website_url" x-bind:value="fullUrl">
                            <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>
                            <p x-show="! filled" class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.shop.info.website_hint') }}</p>
                        </div>

                        {{-- Location so an operator can place the shop; filled once here. --}}
                        <x-form.province-city province-name="province" city-name="city" :province="old('province', $shop?->province)" :city="old('city', $shop?->city)" accent="secondary" />
                        <div>
                            <label for="apply-address" class="mb-1.5 block text-[13px] font-bold">{{ __('front.shop.info.address') }}</label>
                            <textarea id="apply-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 class="flex justify-end">
                            <button type="submit" x-bind:disabled="busy"
                                    class="inline-flex items-center gap-2 rounded-xl bg-secondary-500 px-6 py-3 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_apply.submit') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif
@endsection