@extends('layouts.onboarding-step')

@section('title', trans('dashboard.onboarding_vat_title'))

@section('content')
<div class="w-full max-w-[500px]">
    <div class="bg-white dark:bg-navy-900 rounded-[28px] p-7 sm:p-9 shadow-xl shadow-slate-200/50 dark:shadow-navy-950/40 border border-slate-100 dark:border-slate-800 transition-all">

        <!-- Title & Subtitle -->
        <div class="text-center mb-6">
            <h1 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">
                {{ trans('dashboard.onboarding_vat_heading') }}
            </h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">
                {{ trans('dashboard.onboarding_zatca_desc') }}
            </p>
        </div>

        @if($errors->any())
            <div class="mb-5 p-3.5 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 text-xs flex items-center gap-2">
                <i class="fa-solid fa-circle-exclamation shrink-0"></i>
                <span>{{ $errors->first() }}</span>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-5 p-3.5 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 text-xs flex items-center gap-2">
                <i class="fa-solid fa-circle-exclamation shrink-0"></i>
                <span>{{ session('error') }}</span>
            </div>
        @endif

        <form action="{{ route('dashboard.onboarding.vat.submit') }}" method="POST"
              x-data="{
                  vat: '{{ old('vat_number', $tenant->vat_number) }}',
                  isChecking: false,
                  checkedVat: null,
                  ajaxResult: null,
                  get len() { return this.vat ? this.vat.length : 0; },
                  get isOnlyDigits() { return /^\d*$/.test(this.vat || ''); },
                  get isValidFormat() {
                      return this.vat
                          && this.vat.length === 15
                          && this.isOnlyDigits
                          && this.vat[0] === '3'
                          && this.vat[14] === '3';
                  },
                  get isFullyVerified() {
                      return this.isValidFormat && this.ajaxResult && this.ajaxResult.valid;
                  },
                  async checkWithZatca() {
                      if (!this.isValidFormat) {
                          this.ajaxResult = null;
                          this.checkedVat = null;
                          return;
                      }
                      if (this.checkedVat === this.vat && this.ajaxResult !== null) {
                          return;
                      }
                      this.isChecking = true;
                      this.ajaxResult = null;
                      try {
                          const res = await fetch('{{ route('dashboard.onboarding.check_vat') }}', {
                              method: 'POST',
                              headers: {
                                  'Content-Type': 'application/json',
                                  'Accept': 'application/json',
                                  'X-CSRF-TOKEN': '{{ csrf_token() }}'
                              },
                              body: JSON.stringify({ vat_number: this.vat })
                          });
                          const data = await res.json();
                          this.ajaxResult = data;
                          this.checkedVat = this.vat;
                      } catch (e) {
                          this.ajaxResult = {
                              valid: false,
                              status: 'error',
                              message: '{{ trans('dashboard.vat_check_failed_network') }}'
                          };
                      } finally {
                          this.isChecking = false;
                      }
                  },
                  init() {
                      this.$watch('vat', (val) => {
                          if (this.checkedVat && this.checkedVat !== val) {
                              this.ajaxResult = null;
                          }
                          if (val && val.length === 15 && this.isValidFormat) {
                              this.checkWithZatca();
                          }
                      });
                      if (this.vat && this.vat.length === 15 && this.isValidFormat) {
                          this.checkWithZatca();
                      }
                  },
                  get feedback() {
                      if (!this.vat || this.vat.length === 0) {
                          return {
                              type: 'hint',
                              msg: '{{ trans('dashboard.vat_feedback_hint') }}'
                          };
                      }
                      if (!this.isOnlyDigits) {
                          return {
                              type: 'error',
                              msg: '{{ trans('dashboard.vat_feedback_digits_only') }}'
                          };
                      }
                      if (this.vat[0] !== '3') {
                          return {
                              type: 'error',
                              msg: '{{ trans('dashboard.vat_feedback_start_3') }}'
                          };
                      }
                      if (this.vat.length < 15) {
                          return {
                              type: 'warning',
                              msg: '{{ trans('dashboard.vat_feedback_remaining') }}' + (15 - this.vat.length) + ' {{ trans('dashboard.vat_feedback_digits_label') }}'
                          };
                      }
                      if (this.vat.length === 15 && this.vat[14] !== '3') {
                          return {
                              type: 'error',
                              msg: '{{ trans('dashboard.vat_feedback_end_3') }}'
                          };
                      }
                      if (this.isChecking) {
                          return {
                              type: 'checking',
                              msg: '{{ trans('dashboard.vat_feedback_verifying') }}'
                          };
                      }
                      if (this.ajaxResult) {
                          if (this.ajaxResult.valid) {
                              return {
                                  type: 'success',
                                  msg: this.ajaxResult.message || '{{ trans('dashboard.vat_feedback_valid_zatca') }}'
                              };
                          } else {
                              return {
                                  type: 'error',
                                  msg: this.ajaxResult.message || '{{ trans('dashboard.vat_feedback_invalid_zatca') }}'
                              };
                          }
                      }
                      return {
                          type: 'success',
                          msg: '{{ trans('dashboard.vat_feedback_valid_format') }}'
                      };
                  }
              }"
              class="space-y-5">
            @csrf

            <!-- VAT Input Box -->
            <div>
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-xs font-bold text-slate-800 dark:text-slate-200">
                        {{ trans('dashboard.onboarding_vat_heading') }}
                    </label>
                    <div class="flex items-center gap-2">
                        <template x-if="isChecking">
                            <span class="inline-flex items-center gap-1 text-[11px] text-amber-500 font-semibold">
                                <i class="fa-solid fa-circle-notch fa-spin text-[10px]"></i>
                                {{ trans('dashboard.vat_verifying_badge') }}
                            </span>
                        </template>
                        <template x-if="isFullyVerified">
                            <span class="inline-flex items-center gap-1 text-[11px] text-emerald-600 dark:text-emerald-400 font-bold bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/30">
                                <i class="fa-solid fa-shield-check text-[10px]"></i>
                                {{ trans('dashboard.vat_verified_badge') }}
                            </span>
                        </template>
                        <span class="text-[11px] font-mono tabular-nums px-2 py-0.5 rounded-md"
                              :class="{
                                  'text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 font-bold': isFullyVerified,
                                  'text-amber-600 dark:text-amber-400 bg-amber-500/10': (len > 0 && len < 15 && isOnlyDigits) || isChecking,
                                  'text-red-600 dark:text-red-400 bg-red-500/10': (len > 0 && !isOnlyDigits) || (len === 15 && !isValidFormat) || (ajaxResult && !ajaxResult.valid),
                                  'text-slate-400 bg-slate-100 dark:bg-slate-800': len === 0
                              }"
                              x-text="len + '/15'"></span>
                    </div>
                </div>

                <div class="relative">
                    <input type="text"
                           name="vat_number"
                           x-model="vat"
                           placeholder="300000000000003"
                           maxlength="15"
                           inputmode="numeric"
                           autocomplete="off"
                           required
                           autofocus
                           :class="{
                               'border-emerald-500 focus:border-emerald-600 bg-emerald-500/5 text-emerald-900 dark:text-emerald-200': isFullyVerified,
                               'border-amber-500 focus:border-amber-600 bg-amber-500/5 text-amber-900 dark:text-amber-200': isChecking,
                               'border-red-500/70 focus:border-red-600 bg-red-500/5 text-red-900 dark:text-red-200': (len > 0 && !isOnlyDigits) || (len === 15 && !isValidFormat) || (len > 0 && vat[0] !== '3') || (ajaxResult && !ajaxResult.valid),
                               'border-slate-200 dark:border-slate-700 bg-white dark:bg-navy-950 text-slate-900 dark:text-slate-100': len === 0 || (len > 0 && len < 15 && isOnlyDigits && vat[0] === '3' && !ajaxResult)
                           }"
                           class="w-full rounded-2xl border p-4 pe-12 font-mono tracking-widest text-center text-sm focus:outline-none transition">

                    <div class="absolute end-4 top-1/2 -translate-y-1/2 flex items-center pointer-events-none">
                        <template x-if="isChecking">
                            <i class="fa-solid fa-circle-notch fa-spin text-amber-500 text-sm"></i>
                        </template>
                        <template x-if="!isChecking && isFullyVerified">
                            <span class="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 flex items-center justify-center text-xs shadow-sm">
                                <i class="fa-solid fa-check"></i>
                            </span>
                        </template>
                        <template x-if="!isChecking && ((len > 0 && !isValidFormat) || (ajaxResult && !ajaxResult.valid))">
                            <span class="w-6 h-6 rounded-full bg-red-500/20 text-red-600 dark:text-red-400 flex items-center justify-center text-xs font-bold">!</span>
                        </template>
                    </div>
                </div>

                <!-- Live validation message -->
                <div class="mt-2 flex items-center gap-1.5 text-[11px] transition-all min-h-[1.2rem]">
                    <span :class="{
                              'text-emerald-600 dark:text-emerald-400 font-semibold': feedback.type === 'success',
                              'text-amber-600 dark:text-amber-400 font-semibold': feedback.type === 'checking',
                              'text-red-600 dark:text-red-400 font-semibold': feedback.type === 'error',
                              'text-amber-600 dark:text-amber-400': feedback.type === 'warning',
                              'text-slate-400': feedback.type === 'hint'
                          }"
                          x-text="feedback.msg"></span>
                </div>

                <!-- Visual progress bar -->
                <div class="mt-1 h-1 rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-200"
                         :class="{
                             'bg-emerald-500': isFullyVerified,
                             'bg-amber-500': (len > 0 && len < 15 && isOnlyDigits && vat[0] === '3') || isChecking,
                             'bg-red-500': (len > 0 && !isOnlyDigits) || (len > 0 && vat[0] !== '3') || (len === 15 && !isValidFormat) || (ajaxResult && !ajaxResult.valid)
                         }"
                         :style="'width: ' + Math.min(100, (len / 15) * 100) + '%'"></div>
                </div>
            </div>

            <!-- Submit Button -->
            <button type="submit"
                    :disabled="!isValidFormat"
                    class="w-full py-3.5 rounded-2xl bg-[#0f7648] hover:bg-[#0c623b] active:bg-[#0a5231] text-white font-bold text-sm shadow-md shadow-emerald-800/15 transition flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                <span>{{ trans('dashboard.continue_btn') }}</span>
                <i class="fa-solid fa-arrow-left rtl:rotate-0"></i>
            </button>
        </form>
    </div>

    <!-- Bottom Logout Link -->
    <div class="mt-6 text-center">
        <form action="{{ route('logout') }}" method="POST" class="inline">
            @csrf
            <button type="submit" class="text-xs text-slate-500 dark:text-slate-400 hover:text-red-600 dark:hover:text-red-400 transition font-medium">
                {{ trans('dashboard.wrong_email_logout') }}
            </button>
        </form>
    </div>
</div>
@endsection