{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: status.blade.php
------------------------------------------------------
Use: Account-status screen: the four-step progress bar
     from the approved design, in its pending and
     rejected variants, with the support note the spec
     requires for unapproved accounts.
=====================================================
--}}

@extends('layouts.auth')

@section('title', $rejected ? __('front.status.rejected_title') : __('front.status.pending_title'))
@section('theme', auth()->user()->isMerchant() ? 'merchant' : 'user')

@section('content')
    {{-- While the account is under review, watch for the operator's decision:
         the page reloads the moment it is approved or rejected, and a manual
         refresh button checks on demand. --}}
    <div class="text-center"
         @unless ($rejected) x-data="statusWatcher(@js([
             'url' => route('account.status.check'),
             'current' => auth()->user()->verification_status,
             'interval' => 20000,
         ]))" @endunless>

        @if ($rejected)
            <div class="mx-auto mb-5 flex size-[90px] items-center justify-center rounded-[26px] bg-secondary-50">
                <svg class="size-11 text-secondary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>
            </div>
            <h1 class="mb-2.5 text-2xl font-bold tracking-tight">{{ __('front.status.rejected_title') }}</h1>
            <p class="mx-auto mb-6 max-w-[360px] text-[14.5px] leading-8 text-ink-muted">{{ __('front.status.rejected_body') }}</p>
        @else
            <div class="mx-auto mb-5 flex size-[90px] items-center justify-center rounded-[26px] bg-[#fff5e6]">
                <svg class="size-11 text-[#d97706]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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.5 text-2xl font-bold tracking-tight">{{ __('front.status.pending_title') }}</h1>
            <p class="mx-auto mb-6 max-w-[360px] text-[14.5px] leading-8 text-ink-muted">{{ __('front.status.pending_body') }}</p>
        @endif

        {{-- Progress: register and documents are always done by this point;
             review is the live step (amber while pending, red on rejection). --}}
        @php
            $doneClasses = 'bg-green-600 text-white';
            $currentClasses = $rejected ? 'bg-secondary-500 text-white' : 'bg-[#d97706] text-white';
        @endphp
        <div class="mb-7 flex items-center justify-center">
            <div class="flex flex-col items-center gap-1.5">
                <span class="flex size-[34px] items-center justify-center rounded-full {{ $doneClasses }}">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="text-[11.5px] font-bold text-green-600">{{ __('front.status.step_register') }}</span>
            </div>
            <div class="mx-1 mb-5 h-0.5 w-11 bg-green-600"></div>
            <div class="flex flex-col items-center gap-1.5">
                <span class="flex size-[34px] items-center justify-center rounded-full {{ $doneClasses }}">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="text-[11.5px] font-bold text-green-600">{{ __('front.status.step_documents') }}</span>
            </div>
            <div class="mx-1 mb-5 h-0.5 w-11 bg-gradient-to-l from-green-600 {{ $rejected ? 'to-secondary-500' : 'to-[#d97706]' }}"></div>
            <div class="flex flex-col items-center gap-1.5">
                <span class="flex size-[34px] items-center justify-center rounded-full text-sm font-bold {{ $currentClasses }}">@fa(3)</span>
                <span class="text-[11.5px] font-bold {{ $rejected ? 'text-secondary-500' : 'text-[#d97706]' }}">{{ __('front.status.step_review') }}</span>
            </div>
            <div class="mx-1 mb-5 h-0.5 w-11 bg-[#e6e4ee]"></div>
            <div class="flex flex-col items-center gap-1.5">
                <span class="flex size-[34px] items-center justify-center rounded-full bg-[#eeedf3] text-sm font-bold text-[#b4b1c4]">@fa(4)</span>
                <span class="text-[11.5px] text-[#b4b1c4]">{{ __('front.status.step_active') }}</span>
            </div>
        </div>

        <p class="mx-auto mb-7 max-w-[360px] text-[13px] leading-7 text-ink-faint">{{ __('front.status.support_note') }}</p>

        {{-- Live review watcher: auto-updates, plus a manual refresh. --}}
        @unless ($rejected)
            <div class="mx-auto mb-6 max-w-[360px]">
                <button type="button" x-on:click="refresh()" x-bind:disabled="checking"
                        class="inline-flex items-center gap-2 rounded-xl border-[1.5px] border-[var(--brand-border)] bg-white px-6 py-3 text-sm font-bold text-[var(--brand)] transition hover:bg-[#f4f1fc] disabled:opacity-60">
                    <span x-show="checking" x-cloak class="size-4 animate-spin rounded-full border-2 border-[var(--brand)]/30 border-t-[var(--brand)]"></span>
                    <svg x-show="! checking" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
                    <span x-text="checking ? @js(__('front.live_status.checking')) : @js(__('front.live_status.refresh'))"></span>
                </button>
                <p class="mt-3 text-[12px] leading-6 text-ink-faint" x-show="! noChange">{{ __('front.live_status.auto_hint') }}</p>
                <p class="mt-3 text-[12px] font-bold leading-6 text-[#d97706]" x-show="noChange" x-cloak x-transition>{{ __('front.live_status.unchanged') }}</p>
            </div>
        @endunless

        <div class="flex flex-wrap justify-center gap-3">
            @if ($rejected)
                <a href="{{ route('account.verification') }}"
                   class="inline-flex items-center gap-2 rounded-xl bg-[var(--brand)] px-6 py-3 text-sm font-bold text-white shadow-lg shadow-[var(--brand-shadow)] transition hover:bg-[var(--brand-dark)]">
                    {{ __('front.status.reupload') }}
                </a>
            @endif
            <a href="{{ route('home') }}"
               class="inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-bold transition {{ $rejected
                    ? 'border-[1.5px] border-[var(--brand-border)] bg-white text-[var(--brand)] hover:bg-[#f4f1fc]'
                    : 'bg-[var(--brand)] text-white shadow-lg shadow-[var(--brand-shadow)] hover:bg-[var(--brand-dark)]' }}">
                {{ __('front.status.back_home') }}
            </a>
        </div>

    </div>
@endsection