@extends('layouts.dashboard')

@section('title', trans('dashboard.onboarding_title'))
@section('header_title', trans('dashboard.onboarding_header'))

@section('content')
@php
    $profileReady = $tenant->isReadyForProductionCsr();
    $pendingDevices = $devices->filter(fn ($d) => $d->onboarding_status !== 'production_ready');
    $complianceDevices = $devices->filter(fn ($d) => $d->onboarding_status === 'compliance_done');
    $csrDevices = $devices->filter(fn ($d) => in_array($d->onboarding_status, ['pending', 'csr_generated'], true));
    $env = $tenant->zatcaEnvironment();
@endphp

<div x-data="{
    showOtpModal: false,
    step: 1,
    isSubmittingOtp: false,
    progressStep: 1,
    progressPercent: 12,
    startProgress() {
        this.isSubmittingOtp = true;
        this.progressStep = 1;
        this.progressPercent = 15;
        setTimeout(() => { this.progressStep = 2; this.progressPercent = 38; }, 1800);
        setTimeout(() => { this.progressStep = 3; this.progressPercent = 68; }, 4800);
        setTimeout(() => { this.progressStep = 4; this.progressPercent = 92; }, 8500);
    }
}" class="max-w-4xl mx-auto space-y-8">
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 text-center text-[11px]">
        @foreach([
            ['1', trans('dashboard.step_company'), $profileReady],
            ['2', trans('dashboard.step_csr'), $devices->isNotEmpty()],
            ['3', trans('dashboard.step_otp_csid'), $devices->contains(fn ($d) => in_array($d->onboarding_status, ['compliance_done', 'production_ready'], true))],
            ['4', trans('dashboard.step_production'), $devices->contains(fn ($d) => $d->onboarding_status === 'production_ready')],
        ] as [$n, $label, $done])
            <div class="p-3 rounded-2xl border {{ $done ? 'bg-brand-500/10 border-brand-500/40 text-brand-600 dark:text-brand-300' : 'bg-slate-50 dark:bg-navy-900 border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400' }}">
                <div class="font-black text-lg mb-1">{{ $n }}</div>
                <div>{{ $label }}</div>
            </div>
        @endforeach
    </div>

    {{-- STEP 1: Organization Details (بيانات المنشأة) --}}
    <div class="bg-navy-900 border border-slate-800 rounded-3xl p-6 sm:p-10 shadow-2xl relative">
        <div class="flex justify-end mb-2">
            <a href="{{ route('dashboard.index') }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-slate-700 text-xs font-semibold text-slate-300 hover:bg-slate-800 transition">
                <span>{{ trans('dashboard.back_btn') }}</span>
                <i class="fa-solid fa-chevron-left rtl:rotate-180 text-[10px]"></i>
            </a>
        </div>

        <div class="text-center mb-6">
            <h2 class="text-2xl font-black text-white">{{ trans('dashboard.org_details_title') }}</h2>
            <p class="text-xs text-slate-400 mt-1">
                {{ trans('dashboard.org_subtitle') }}
            </p>

            @if($tenant->vat_number)
                <div class="mt-4 inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-800 border border-slate-700 text-xs font-mono font-bold text-slate-200">
                    <span class="text-slate-400 font-sans text-[11px]">{{ trans('dashboard.vat_number') }}</span>
                    <span>{{ $tenant->vat_number }}</span>
                    <button type="button" onclick="document.getElementById('vatEditBox').classList.toggle('hidden')" class="text-brand-400 hover:underline text-[10px] ms-1">
                        {{ trans('dashboard.edit_btn') }}
                    </button>
                </div>
            @endif
        </div>

        @if($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-xs">
                <ul class="list-disc list-inside space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('dashboard.onboarding.profile') }}" method="POST" class="space-y-5 text-xs max-w-xl mx-auto" id="orgProfileForm">
            @csrf

            {{-- VAT Number (Input if not set or editing) --}}
            <div id="vatEditBox"
                 class="{{ $tenant->vat_number ? 'hidden' : '' }}"
                 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: @json(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: @json(trans('dashboard.vat_feedback_hint'))
                             };
                         }
                         if (!this.isOnlyDigits) {
                             return {
                                 type: 'error',
                                 msg: @json(trans('dashboard.vat_feedback_digits_only'))
                             };
                         }
                         if (this.vat[0] !== '3') {
                             return {
                                 type: 'error',
                                 msg: @json(trans('dashboard.vat_feedback_start_3'))
                             };
                         }
                         if (this.vat.length < 15) {
                             return {
                                 type: 'warning',
                                 msg: @json(trans('dashboard.vat_feedback_remaining')) + (15 - this.vat.length) + ' ' + @json(trans('dashboard.vat_feedback_digits_label'))
                             };
                         }
                         if (this.vat.length === 15 && this.vat[14] !== '3') {
                             return {
                                 type: 'error',
                                 msg: @json(trans('dashboard.vat_feedback_end_3'))
                             };
                         }
                         if (this.isChecking) {
                             return {
                                 type: 'checking',
                                 msg: @json(trans('dashboard.vat_feedback_verifying'))
                             };
                         }
                         if (this.ajaxResult) {
                             if (this.ajaxResult.valid) {
                                 return {
                                     type: 'success',
                                     msg: this.ajaxResult.message || @json(trans('dashboard.vat_feedback_valid_zatca'))
                                 };
                             } else {
                                 return {
                                     type: 'error',
                                     msg: this.ajaxResult.message || @json(trans('dashboard.vat_feedback_invalid_zatca'))
                                 };
                             }
                         }
                         return {
                             type: 'success',
                             msg: @json(trans('dashboard.vat_feedback_valid_format'))
                         };
                     }
                 }">
                <div class="flex items-center justify-between mb-1.5">
                    <label class="block font-bold text-slate-300">
                        {{ trans('dashboard.vat_number') }}
                    </label>
                    <div class="flex items-center gap-2">
                        <template x-if="isChecking">
                            <span class="inline-flex items-center gap-1 text-[11px] text-amber-400 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-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-400 bg-emerald-500/10 font-bold': isFullyVerified,
                                  'text-amber-400 bg-amber-500/10': (len > 0 && len < 15 && isOnlyDigits) || isChecking,
                                  'text-red-400 bg-red-500/10': (len > 0 && !isOnlyDigits) || (len === 15 && !isValidFormat) || (ajaxResult && !ajaxResult.valid),
                                  'text-slate-500 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"
                           :class="{
                               'border-emerald-500 focus:border-emerald-400 bg-emerald-500/5 text-emerald-200': isFullyVerified,
                               'border-amber-500 focus:border-amber-400 bg-amber-500/5 text-amber-200': isChecking,
                               'border-red-500/70 focus:border-red-400 bg-red-500/5 text-red-200': (len > 0 && !isOnlyDigits) || (len === 15 && !isValidFormat) || (len > 0 && vat[0] !== '3') || (ajaxResult && !ajaxResult.valid),
                               'border-slate-700 focus:border-brand-500 bg-navy-950 text-slate-100': len === 0 || (len > 0 && len < 15 && isOnlyDigits && vat[0] === '3' && !ajaxResult)
                           }"
                           class="w-full rounded-xl border p-3.5 pe-12 code-font tracking-widest text-center text-sm focus:outline-none transition-colors">

                    <div class="absolute end-3.5 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-400 text-sm"></i>
                        </template>
                        <template x-if="!isChecking && isFullyVerified">
                            <span class="w-6 h-6 rounded-full bg-emerald-500/20 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-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-400 font-semibold': feedback.type === 'success',
                              'text-amber-400 font-semibold': feedback.type === 'checking',
                              'text-red-400 font-semibold': feedback.type === 'error',
                              'text-amber-400': feedback.type === 'warning',
                              'text-slate-500': feedback.type === 'hint'
                          }"
                          x-text="feedback.msg"></span>
                </div>

                {{-- Visual progress bar --}}
                <div class="mt-1 h-1 rounded-full 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>

            {{-- Organization Name --}}
            <div>
                <label class="block font-bold text-slate-300 mb-1.5">{{ trans('dashboard.org_name_label') }}</label>
                <input type="text" name="name" value="{{ old('name', $tenant->name) }}" required
                       placeholder="{{ trans('dashboard.org_name_placeholder') }}"
                       class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 focus:border-brand-500 focus:outline-none">
            </div>

            {{-- Organization Identifier --}}
            <div>
                <label class="block font-bold text-slate-300 mb-1.5">{{ trans('dashboard.org_identifier_label') }}</label>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                    <div class="sm:col-span-1">
                        <select name="org_identifier_type" id="orgIdType"
                                class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-200 p-3.5 focus:border-brand-500 focus:outline-none">
                            <option value="cr_number" @selected(old('org_identifier_type', $tenant->org_identifier_type ?? 'cr_number') === 'cr_number')>{{ trans('dashboard.org_cr_label') }}</option>
                            <option value="municipal_license" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'municipal_license')>{{ trans('dashboard.org_muni_label') }}</option>
                            <option value="hr_license" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'hr_license')>{{ trans('dashboard.org_hr_label') }}</option>
                            <option value="unified_700" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'unified_700')>{{ trans('dashboard.org_700_label') }}</option>
                            <option value="investment_license" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'investment_license')>{{ trans('dashboard.org_invest_label') }}</option>
                            <option value="other" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'other')>{{ trans('dashboard.org_other_label') }}</option>
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <input type="text" name="org_identifier_value" id="orgIdValue"
                               value="{{ old('org_identifier_value', $tenant->org_identifier_value ?? $tenant->cr_number) }}" required
                               placeholder="{{ trans('dashboard.org_cr_hint') }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 focus:border-brand-500 focus:outline-none">
                    </div>
                </div>
            </div>

            {{-- Short National Address --}}
            <div>
                <label class="block font-bold text-slate-300 mb-1.5">{{ trans('dashboard.short_address_label') }}</label>
                <input type="text" name="short_address" id="shortAddressInput"
                       value="{{ old('short_address', $tenant->short_address) }}"
                       placeholder="RRRD2929" maxlength="15"
                       class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 font-mono uppercase tracking-widest text-center text-sm focus:border-brand-500 focus:outline-none">
                <p class="text-[11px] text-slate-400 mt-1.5 text-center">
                    {{ trans('dashboard.short_address_hint') }}
                </p>
            </div>

            {{-- Address Details Header --}}
            <div class="pt-2">
                <div class="flex items-center gap-2 mb-3">
                    <span class="w-1.5 h-3.5 rounded-full bg-amber-500"></span>
                    <span class="font-bold text-amber-500 text-xs">
                        {{ trans('dashboard.address_details_badge') }}
                    </span>
                </div>

                {{-- Street --}}
                <div class="space-y-4">
                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.address_street_label') }}</label>
                        <input type="text" name="address_street" id="addrStreet"
                               value="{{ old('address_street', $tenant->address_street) }}" required
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 focus:border-brand-500 focus:outline-none">
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.address_building_label') }}</label>
                            <input type="text" name="building_number" id="addrBuilding"
                                   value="{{ old('building_number', $tenant->building_number) }}" required
                                   placeholder="8228"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 font-mono focus:border-brand-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.address_district_label') }}</label>
                            <input type="text" name="district" id="addrDistrict"
                                   value="{{ old('district', $tenant->district) }}" required
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 focus:border-brand-500 focus:outline-none">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.address_postal_label') }}</label>
                            <input type="text" name="postal_code" id="addrPostal"
                                   value="{{ old('postal_code', $tenant->postal_code) }}" required
                                   placeholder="12244"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 font-mono focus:border-brand-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.address_city_label') }}</label>
                            <input type="text" name="address_city" id="addrCity"
                                   value="{{ old('address_city', $tenant->address_city) }}" required
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 focus:border-brand-500 focus:outline-none">
                        </div>
                    </div>
                </div>

                <p class="text-[11px] text-slate-500 text-center mt-3">
                    {{ trans('dashboard.address_zatca_required_hint') }}
                </p>
            </div>

            <button type="submit" class="w-full py-4 rounded-2xl bg-emerald-700 hover:bg-emerald-600 active:bg-emerald-800 text-white font-bold text-sm shadow-xl shadow-emerald-700/25 transition flex items-center justify-center gap-2 force-white">
                <span>{{ trans('dashboard.continue_btn') }}</span>
                <i class="fa-solid fa-arrow-left rtl:rotate-0"></i>
            </button>

            <div class="text-center pt-2">
                <a href="{{ route('dashboard.index') }}" class="text-xs text-slate-400 hover:text-slate-200 transition">
                    {{ trans('dashboard.complete_later') }}
                </a>
            </div>
        </form>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const idTypeSelect = document.getElementById('orgIdType');
        const idValueInput = document.getElementById('orgIdValue');
        const shortAddrInput = document.getElementById('shortAddressInput');
        const buildingInput = document.getElementById('addrBuilding');

        // Dynamic placeholder for Organization Identifier
        const placeholders = {
            'cr_number': @json(trans('dashboard.org_cr_hint')),
            'municipal_license': @json(trans('dashboard.org_muni_hint')),
            'hr_license': @json(trans('dashboard.org_hr_hint')),
            'unified_700': @json(trans('dashboard.org_700_hint')),
            'investment_license': @json(trans('dashboard.org_invest_hint')),
            'other': @json(trans('dashboard.org_other_hint'))
        };

        idTypeSelect?.addEventListener('change', function () {
            if (idValueInput && placeholders[this.value]) {
                idValueInput.placeholder = placeholders[this.value];
            }
        });

        // Short National Address auto-population
        shortAddrInput?.addEventListener('input', function () {
            this.value = this.value.toUpperCase();
            const val = this.value.trim();

            // Match 4 letters followed by 4 digits, e.g. RRRD2929
            const match = val.match(/^[A-Z]{4}(\d{4})$/);
            if (match && match[1]) {
                if (buildingInput && (!buildingInput.value || buildingInput.value === '')) {
                    buildingInput.value = match[1];
                }
            }
        });

        // Form submit validation for VAT
        const orgProfileForm = document.getElementById('orgProfileForm');
        orgProfileForm?.addEventListener('submit', function (e) {
            const vatBox = document.getElementById('vatEditBox');
            if (vatBox && !vatBox.classList.contains('hidden')) {
                const vatInput = vatBox.querySelector('input[name="vat_number"]');
                const val = vatInput ? vatInput.value.trim() : '';
                const isOnlyDigits = /^\d+$/.test(val);
                const isValid = val.length === 15 && isOnlyDigits && val.startsWith('3') && val.endsWith('3');
                if (!isValid) {
                    e.preventDefault();
                    vatInput?.focus();
                }
            }
        });
    });
    </script>

    {{-- STEP 2: ZATCA Linking & OTP Activation --}}
    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 shadow-sm rounded-2xl p-6 sm:p-8 {{ $profileReady ? '' : 'opacity-60' }}">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
            <div>
                <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ trans('dashboard.otp_heading') }}</h3>
                <p class="text-slate-500 dark:text-slate-400 text-xs mt-0.5 leading-relaxed">{{ trans($env->fatooraHintKey()) }}</p>
            </div>
            <button type="button"
                    @click="showOtpModal = true; step = 1"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 text-emerald-700 dark:bg-emerald-500/15 dark:hover:bg-emerald-500/25 dark:border-emerald-500/30 dark:text-emerald-400 text-xs font-bold transition self-start sm:self-auto cursor-pointer">
                <i class="fa-solid fa-circle-question text-xs"></i>
                <span>{{ trans('dashboard.where_find_otp_guide') }}</span>
            </button>
        </div>

        {{-- Sandbox Notice --}}
        <div class="p-4 rounded-xl bg-amber-50 border border-amber-200 dark:bg-amber-500/10 dark:border-amber-500/20 mb-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2 font-bold text-amber-700 dark:text-amber-300">
                    <span class="w-2.5 h-2.5 rounded-full bg-amber-400 animate-pulse"></span>
                    <span>{{ trans('dashboard.env_sandbox_name') }} (Sandbox)</span>
                </div>
                <span class="text-[10px] px-2 py-0.5 rounded-md bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300 font-semibold">{{ trans('dashboard.env_safe_testing') }}</span>
            </div>
            <p class="text-[11px] text-amber-800 dark:text-slate-400 mt-2 leading-relaxed">
                {{ trans('dashboard.env_forced_sandbox_note') }}
            </p>
        </div>

        {{-- Switch to Production CTA (if sandbox and profile ready) --}}
        @if($tenant->is_sandbox && $profileReady)
            <div class="p-4 rounded-xl bg-emerald-50 border border-emerald-200 dark:border-emerald-500/30 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-5 dark:[background:linear-gradient(to_right,rgb(16_185_129_/_0.12),rgb(20_184_166_/_0.08),rgb(15_23_42))]">
                <div>
                    <h4 class="text-xs font-bold text-emerald-700 dark:text-emerald-400 flex items-center gap-1.5">
                        <i class="fa-solid fa-arrow-up-right-dots"></i>
                        {{ trans('dashboard.env_switch_production_prompt') }}
                    </h4>
                    <p class="text-[11px] text-slate-600 dark:text-slate-300 mt-0.5">
                        {{ trans('dashboard.switch_to_production_desc') }}
                    </p>
                </div>
                <a href="{{ route('dashboard.onboarding.activate_production') }}" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs whitespace-nowrap transition shrink-0">
                    {{ trans('dashboard.env_switch_production_btn') }}
                </a>
            </div>
        @endif

        {{-- Direct OTP Form (No Manual Device Creation Required) --}}
        <form action="{{ route('dashboard.onboarding.otp') }}" method="POST"
              @submit.prevent="if(otpFull){ startProgress(); $el.submit(); }"
              class="space-y-5 text-xs max-w-lg mx-auto text-center pt-2"
              x-data="{
                  digits: ['','','','','',''],
                  get otpFull() { return this.digits.every(d => d !== ''); },
                  get otpValue() { return this.digits.join(''); },
                  focus(idx) { this.$nextTick(() => { const el = document.getElementById('otp_box_' + idx); if(el) el.focus(); }); },
                  onKey(e, idx) {
                      const k = e.key;
                      if (k === 'Backspace') {
                          if (this.digits[idx] !== '') { this.digits[idx] = ''; }
                          else if (idx > 0) { this.digits[idx-1] = ''; this.focus(idx-1); }
                          return;
                      }
                      if (k === 'ArrowLeft' && idx > 0) { this.focus(idx-1); return; }
                      if (k === 'ArrowRight' && idx < 5) { this.focus(idx+1); return; }
                      if (/^\d$/.test(k)) {
                          this.digits[idx] = k;
                          if (idx < 5) this.focus(idx+1);
                      }
                  },
                  onPaste(e) {
                      const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g,'').slice(0,6);
                      if (!text) return;
                      for(let i=0;i<6;i++) this.digits[i] = text[i] || '';
                      this.focus(Math.min(text.length, 5));
                  }
              }">
            @csrf
            {{-- Hidden field that submits the combined OTP value --}}
            <input type="hidden" name="otp" :value="otpValue">

            @if($csrDevices->count() > 1)
                <div class="text-start">
                    <label class="block font-bold text-slate-700 dark:text-slate-300 mb-1">{{ trans('dashboard.select_device_label') }}</label>
                    <select name="device_uuid" class="w-full rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-3">
                        @foreach($csrDevices as $dev)
                            <option value="{{ $dev->uuid }}">{{ $dev->name }} (S/N: {{ $dev->serial_number }})</option>
                        @endforeach
                    </select>
                </div>
            @elseif($csrDevices->count() === 1)
                <input type="hidden" name="device_uuid" value="{{ $csrDevices->first()->uuid }}">
            @endif

            {{-- 6-box OTP input --}}
            <div>
                <label class="block font-bold text-slate-700 dark:text-slate-200 mb-3">{{ trans('dashboard.otp_input_label') }}</label>
                <div class="flex items-center justify-center gap-2 sm:gap-3" dir="ltr" @paste.prevent="onPaste($event)">
                    @for($i = 0; $i < 6; $i++)
                        <input id="otp_box_{{ $i }}"
                               type="text"
                               inputmode="numeric"
                               maxlength="1"
                               pattern="[0-9]"
                               autocomplete="one-time-code"
                               x-model="digits[{{ $i }}]"
                               @keydown.prevent="onKey($event, {{ $i }})"
                               @focus="$event.target.select()"
                               {{ $profileReady ? '' : 'disabled' }}
                               :class="digits[{{ $i }}] !== '' ? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500' : 'border-slate-300 dark:border-slate-700 bg-white dark:bg-navy-950 text-slate-900 dark:text-slate-100'"
                               class="w-11 h-14 sm:w-13 sm:h-16 rounded-xl border-2 text-center code-font text-2xl font-extrabold focus:outline-none focus:border-brand-500 dark:focus:border-brand-400 transition shadow-sm disabled:opacity-40 disabled:cursor-not-allowed">
                    @endfor
                </div>
                <p class="text-[11px] text-slate-400 dark:text-slate-500 mt-2.5">
                    {{ trans('dashboard.otp_input_hint') }}
                </p>
            </div>

            <button type="submit"
                    :disabled="! otpFull {{ $profileReady ? '' : '|| true' }}"
                    :class="otpFull ? 'opacity-100 cursor-pointer' : 'opacity-40 cursor-not-allowed'"
                    class="w-full max-w-xs mx-auto py-3.5 rounded-xl bg-gradient-to-r from-emerald-500 to-brand-600 text-white font-bold text-sm shadow-lg shadow-brand-500/20 hover:opacity-95 transition block">
                <i class="fa-solid fa-bolt me-1.5"></i>
                {{ trans('dashboard.activate_csid_btn') }}
            </button>
        </form>
    </div>

    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6">
        <h3 class="text-sm font-bold text-slate-900 dark:text-white mb-4">{{ trans('dashboard.registered_devices_title') }}</h3>
        <table class="w-full text-xs">
            <thead class="text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-800">
                <tr>
                    <th class="pb-3 text-start">{{ trans('dashboard.device_th') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.serial_th') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.status_th') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.cert_th') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60 text-slate-700 dark:text-slate-300">
                @forelse($devices as $d)
                    <tr>
                        <td class="py-3 font-bold text-slate-900 dark:text-white">{{ $d->name }}</td>
                        <td class="py-3 code-font">{{ $d->serial_number }}</td>
                        <td class="py-3">
                            @if($d->onboarding_status === 'production_ready')
                                <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 font-bold text-[10px]">{{ trans('dashboard.csid_ready') }}</span>
                            @else
                                <span class="px-2.5 py-0.5 rounded-full bg-amber-500/10 text-amber-400 font-bold text-[10px]">{{ $d->onboarding_status }}</span>
                            @endif
                        </td>
                        <td class="py-3 text-[11px] text-slate-400">
                            {{ $d->certificate_pem ? trans('dashboard.cert_active') : trans('dashboard.cert_waiting_otp') }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-6 text-slate-500">{{ trans('dashboard.no_devices_registered') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Interactive Guide Modal --}}
    <x-fatoora-otp-guide-modal />

    {{-- Live Connecting / Progress Overlay --}}
    <x-onboarding-progress-overlay />
</div>
@endsection