{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: verification.blade.php
------------------------------------------------------
Use: National-ID upload screen from the approved auth
     design: two dashed cards (front/back), client-side
     size/type guards, and the review notice.
=====================================================
--}}

@extends('layouts.auth')

@section('title', __('front.verification.title'))
@section('theme', auth()->user()->isMerchant() ? 'merchant' : 'user')

@section('content')
    <div x-data="docsUpload(5242880, {
        tooBig: @js(__('front.verification.file_too_big')),
        badType: @js(__('front.verification.file_bad_type')),
        incomplete: @js(__('front.verification.incomplete')),
        uploadFailed: @js(__('front.verification.upload_failed')),
    })">

        <h1 class="mb-1.5 text-[26px] font-bold tracking-tight">{{ __('front.verification.title') }}</h1>
        <p class="mb-6 text-[14.5px] leading-8 text-ink-muted">{{ __('front.verification.subtitle') }}</p>

        {{-- A rejected account is sent back here; say so, loudly. --}}
        @if (auth()->user()->verification_status === \App\Models\User::VERIFICATION_REJECTED)
            <div class="mb-5 flex gap-3 rounded-[14px] border border-secondary-500/20 bg-secondary-50 px-4 py-3.5">
                <svg class="mt-0.5 size-[19px] 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.5"/></svg>
                <p class="text-[12.5px] leading-7 text-secondary-500">{{ __('front.verification.rejected_notice') }}</p>
            </div>
        @endif

        <form method="POST" action="{{ route('account.verification.submit') }}" enctype="multipart/form-data"
              x-on:submit.prevent="submit($event)">
            @csrf

            <div class="mb-5 flex flex-col gap-3.5">
                @foreach (['front' => __('front.verification.front_side'), 'back' => __('front.verification.back_side')] as $side => $label)
                    <input type="file" name="{{ $side }}" x-ref="{{ $side }}" accept="image/jpeg,image/png"
                           class="hidden" x-on:change="onFile('{{ $side }}', $event)">

                    <button type="button" x-on:click="$refs.{{ $side }}.click()"
                            class="flex w-full items-center gap-4 rounded-2xl border-[1.5px] border-dashed p-5 text-right transition"
                            x-bind:class="files.{{ $side }}
                                ? 'border-green-600 bg-[#f3fbf6]'
                                : 'border-[#cfc9e6] bg-[#faf9fd] hover:border-[var(--brand)] hover:bg-[#f4f1fc]'">
                        <span class="flex size-[52px] shrink-0 items-center justify-center rounded-[13px] bg-[var(--brand-soft)]">
                            <svg class="size-6 text-[var(--brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><circle cx="8" cy="10" r="1.6"/><path d="M14 9h4M14 12h4M4 17l4-3 3 2 4-3 5 4"/></svg>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-[14.5px] font-bold">{{ $label }}</span>
                            <span class="block truncate text-[12.5px] text-ink-faint"
                                  x-text="files.{{ $side }} ?? @js(__('front.verification.hint'))"></span>
                        </span>
                        <span x-show="! files.{{ $side }}" class="rounded-[10px] bg-[var(--brand-soft)] px-3 py-1.5 text-[12.5px] font-bold text-[var(--brand)]">
                            {{ __('front.verification.choose') }}
                        </span>
                        <span x-cloak x-show="files.{{ $side }}" class="inline-flex items-center gap-1.5 rounded-[10px] bg-[#e7f7ee] px-3 py-1.5 text-[12.5px] font-bold text-green-600">
                            <svg class="size-3.5" 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>
                            {{ __('front.verification.chosen') }}
                        </span>
                    </button>
                    @error($side)
                        <p class="-mt-1.5 text-xs text-secondary-500">{{ $message }}</p>
                    @enderror
                @endforeach
            </div>

            <div class="mb-5 flex gap-3 rounded-[14px] border border-[var(--brand-border)] bg-[var(--brand-soft)] px-4 py-3.5">
                <svg class="mt-0.5 size-[19px] shrink-0 text-[var(--brand)]" 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.5"/></svg>
                <p class="text-[12.5px] leading-7 text-[#6a6780]">{{ __('front.verification.notice') }}</p>
            </div>

            {{-- Upload progress: on slow Iranian connections a 5MB pair takes a
                 moment, so the user watches the percentage climb instead of a
                 frozen button. --}}
            <div x-cloak x-show="uploading" class="mb-4">
                <div class="mb-2 flex items-center justify-between text-[12.5px] font-bold">
                    <span class="text-ink-soft">{{ __('front.verification.uploading') }}</span>
                    <span class="text-[var(--brand)]" dir="ltr"><span x-text="pct()"></span>٪</span>
                </div>
                <div class="h-2.5 overflow-hidden rounded-full bg-[#eceaf4]">
                    <div class="h-full rounded-full bg-[var(--brand)] transition-[width] duration-200" x-bind:style="`width: ${progress}%`"></div>
                </div>
            </div>

            <x-ui.button type="submit" x-bind:disabled="uploading"
                         class="w-full !rounded-[13px] !bg-[var(--brand)] !py-3.5 text-[15px] shadow-lg shadow-[var(--brand-shadow)] hover:!bg-[var(--brand-dark)] disabled:!opacity-70">
                <span x-show="uploading" x-cloak class="mx-auto size-4 animate-spin rounded-full border-2 border-white/40 border-t-white"></span>
                <span x-show="! uploading">{{ __('front.verification.submit') }}</span>
            </x-ui.button>
        </form>

    </div>
@endsection