@extends('layouts.onboarding-step')

@section('title', trans('dashboard.org_details_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">

        <!-- Back Button -->
        <div class="flex justify-start mb-2">
            <a href="{{ route('dashboard.onboarding.vat') }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-slate-200 dark:border-slate-700/80 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition">
                <i class="fa-solid fa-chevron-right rtl:rotate-0 ltr:rotate-180 text-[10px]"></i>
                <span>{{ trans('dashboard.back_btn') }}</span>
            </a>
        </div>

        <!-- Title & Subtitle -->
        <div class="text-center mb-6">
            <h1 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">
                {{ trans('dashboard.org_details_title') }}
            </h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">
                {{ 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-100 dark:bg-slate-800 border border-slate-200/80 dark:border-slate-700/80 text-xs font-mono font-bold text-slate-800 dark:text-slate-200">
                    <span class="tracking-wider">{{ $tenant->vat_number }}</span>
                    <span class="text-slate-500 dark:text-slate-400 font-sans text-[11px]">{{ trans('dashboard.vat_number') }}</span>
                </div>
            @endif
        </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

        <form action="{{ route('dashboard.onboarding.organization.submit') }}" method="POST" class="space-y-4" id="orgDetailsForm">
            @csrf

            <!-- Organization Name -->
            <div>
                <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 mb-1.5">
                    {{ trans('dashboard.org_name_label') }}
                </label>
                <input type="text" name="name" value="{{ old('name', $tenant->name) }}" required autofocus
                       placeholder="{{ trans('dashboard.org_name_placeholder') }}"
                       class="w-full rounded-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3.5 text-xs placeholder:text-slate-400 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
            </div>

            <!-- Organization Identifier -->
            <div>
                <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3.5 text-xs focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                            <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="unified_700" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'unified_700')>{{ trans('dashboard.org_700_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="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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3.5 text-xs placeholder:text-slate-400 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                    </div>
                </div>
                <p class="text-[11px] text-slate-400 mt-1" id="orgIdHint">
                    {{ trans('dashboard.org_cr_hint') }}
                </p>
            </div>

            <!-- Short National Address -->
            <div>
                <div class="flex items-center justify-between mb-1.5">
                    <label class="block text-xs font-bold text-slate-800 dark:text-slate-200">
                        {{ trans('dashboard.short_address_label') }}
                    </label>
                    <span class="text-[11px] text-slate-400 font-normal">
                        {{ trans('dashboard.optional') }}
                    </span>
                </div>
                <input type="text" name="short_address" id="shortAddressInput"
                       value="{{ old('short_address', $tenant->short_address) }}"
                       placeholder="RRRD2929" maxlength="15"
                       class="w-full rounded-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3.5 font-mono uppercase tracking-widest text-center text-xs placeholder:text-slate-400 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                <p class="text-[11px] text-slate-400 mt-1 text-center">
                    {{ trans('dashboard.short_address_hint') }}
                </p>
            </div>

            <!-- Collapsible Address Details -->
            <div x-data="{ open: true }" class="pt-2">
                <button type="button" @click="open = !open"
                        class="w-full flex items-center justify-between p-3 rounded-2xl bg-slate-50 dark:bg-navy-950 border border-slate-200/80 dark:border-slate-800 text-xs font-bold transition hover:bg-slate-100 dark:hover:bg-navy-900">
                    <span class="flex items-center gap-2 text-amber-600 dark:text-amber-400">
                        <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                        <span>{{ trans('dashboard.address_details_badge') }}</span>
                    </span>
                    <i class="fa-solid fa-chevron-up text-slate-400 text-[11px] transition-transform duration-200" :class="{ 'rotate-180': !open }"></i>
                </button>

                <div x-show="open" x-collapse class="space-y-3 pt-3">
                    <!-- Street -->
                    <div>
                        <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3 text-xs focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                    </div>

                    <!-- Building Number & District -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3 text-xs font-mono focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3 text-xs focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                        </div>
                    </div>

                    <!-- Postal Code & City -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3 text-xs font-mono focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-800 dark:text-slate-200 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-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3 text-xs focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition">
                        </div>
                    </div>

                    <p class="text-[11px] text-slate-400 dark:text-slate-500 text-center pt-1">
                        {{ trans('dashboard.address_zatca_required_hint') }}
                    </p>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="pt-2">
                <button type="submit"
                        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">
                    <span>{{ trans('dashboard.continue_btn') }}</span>
                    <i class="fa-solid fa-arrow-left rtl:rotate-0 ltr:rotate-180"></i>
                </button>
            </div>
        </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

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

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

    function updatePlaceholder() {
        if (idTypeSelect && idValueInput && placeholders[idTypeSelect.value]) {
            idValueInput.placeholder = placeholders[idTypeSelect.value];
            if (orgIdHint) {
                orgIdHint.textContent = placeholders[idTypeSelect.value];
            }
        }
    }

    idTypeSelect?.addEventListener('change', updatePlaceholder);
    updatePlaceholder();

    // 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 && buildingInput && !buildingInput.value) {
            buildingInput.value = match[1];
        }

        // Infer major city from letter prefix if city is empty
        if (val.length >= 2 && cityInput && !cityInput.value) {
            const prefix = val.substring(0, 2);
            const cityMap = {
                'RR': @json(trans('dashboard.city_riyadh')),
                'JJ': @json(trans('dashboard.city_jeddah')),
                'DD': @json(trans('dashboard.city_dammam')),
                'MM': @json(trans('dashboard.city_makkah')),
                'MD': @json(trans('dashboard.city_madinah')),
                'KH': @json(trans('dashboard.city_khobar'))
            };
            if (cityMap[prefix]) {
                cityInput.value = cityMap[prefix];
            }
        }
    });
});
</script>
@endsection