@php
$defaultLang = $languages->where('is_default', 1)->first()->code ?? 'en';
@endphp


<div class="flex gap-2 mb-6">
    @foreach($languages as $lang)
    <button type="button"
        onclick="switchLang('{{ $lang->code }}')"
        class="lang-tab px-3 py-1 rounded-md border text-xs font-bold"
        data-lang="{{ $lang->code }}">
        {{ strtoupper($lang->code) }}
    </button>
    @endforeach
</div>

<div class="grid grid-cols-12 gap-8">

    <!-- LEFT SIDE -->
    <div class="col-span-12 lg:col-span-7 space-y-8">

        @foreach($languages as $lang)
        <div class="lang-field" data-lang="{{ $lang->code }}">

            <!-- NAME FIELD -->
            <div class="relative">
                <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-3">
                    Persona_Name ({{ $lang->name }})
                </label>

                <input type="text"
                    name="name[{{ $lang->code }}]"
                    value="{{ old('name.'.$lang->code, $persona->name[$lang->code] ?? '') }}"
                    placeholder="Name ({{ $lang->code }})"
                    class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface placeholder:text-on-surface-variant/40 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300">

                <div class="absolute inset-0 rounded-xl pointer-events-none border border-transparent focus-within:border-primary/30 focus-within:shadow-[0_0_20px_rgba(0,255,157,0.15)] transition-all"></div>
            </div>

            <!-- DESCRIPTION -->
            <div class="relative">
                <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-3">
                    Data_Preview ({{ $lang->name }})
                </label>

                <textarea name="description[{{ $lang->code }}]"
                    rows="5"
                    placeholder="Description ({{ $lang->code }})"
                    class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface placeholder:text-on-surface-variant/40 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300">{{ old('description.'.$lang->code, $persona->description[$lang->code] ?? '') }}</textarea>

                <div class="absolute inset-0 rounded-xl pointer-events-none border border-transparent focus-within:border-primary/30 focus-within:shadow-[0_0_20px_rgba(0,255,157,0.15)] transition-all"></div>
            </div>

        </div>
        @endforeach

        <!-- PRIORITY (UNCHANGED - GLOBAL) -->
        <div class="relative">
            <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-3">
                Priority
            </label>

            <select name="priority"
                class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300
                {{ old('priority', $persona->priority ?? '') ? 'text-on-surface' : 'text-on-surface-variant/40' }}">

                <option value="" disabled selected hidden>Select priority...</option>

                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}"
                    {{ old('priority', $persona->priority ?? '') == $i ? 'selected' : '' }}>
                    {{ $i }}
                    </option>
                    @endfor
            </select>

            <div class="absolute inset-0 rounded-xl pointer-events-none border border-transparent focus-within:border-primary/30 focus-within:shadow-[0_0_20px_rgba(0,255,157,0.15)] transition-all"></div>

            {{-- 🔥 ERROR MESSAGE --}}
            @error('priority')
            <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="relative">

            <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-3">
                Industry
            </label>

            <h3 class="text-lg font-bold font-headline text-primary mb-6 flex items-center gap-2">
                <span class="material-symbols-outlined text-primary-container">business</span>
                Industry
            </h3>

            @php
            // ✅ FIX: safe selected values
            $selectedIndustries = old('industry_id', $persona->industry_id ?? []);

            if (is_string($selectedIndustries)) {
            $selectedIndustries = json_decode($selectedIndustries, true) ?? [];
            }

            if (!is_array($selectedIndustries)) {
            $selectedIndustries = [$selectedIndustries];
            }

            // ✅ FIX: get current language from request (IMPORTANT)
            $currentLang = request('lang', 'en');
            @endphp

            <div class="grid gap-3"
                style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">

                @foreach ($industries as $industry)

                <label class="flex items-center gap-2 bg-surface-container-lowest border border-outline-variant/20 rounded-lg px-3 py-2 cursor-pointer hover:bg-surface-container-high transition">

                    <input
                        type="checkbox"
                        name="industry_id[]"
                        value="{{ $industry->id }}"
                        {{ in_array($industry->id, $selectedIndustries) ? 'checked' : '' }}
                        class="industry-checkbox w-4 h-4 accent-primary cursor-pointer">

                    <span
                        class="industry-name"
                        data-en="{{ $industry->industry_name['en'] ?? '' }}"
                        data-hi="{{ $industry->industry_name['hi'] ?? '' }}">
                        {{ $industry->industry_name['en'] ?? '' }}
                    </span>

                </label>

                @endforeach

            </div>

            <!-- ERROR -->
            @error('industry_id')
            <div class="text-red-500 text-xs mt-2">
                {{ $message }}
            </div>
            @enderror

            <div id="industryError" class="text-red-500 text-xs mt-2 hidden">
                Please select at least one industry.
            </div>

        </div>

    </div>

    <!-- RIGHT SIDE (UNCHANGED) -->
    <div class="col-span-12 lg:col-span-5 space-y-8">

        <section class="p-8 rounded-xl bg-surface-container-low border border-outline-variant/10">
            <h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-[0.2em] mb-6">
                Visual Asset
            </h3>

            <div class="aspect-square w-full max-w-[320px] mx-auto rounded-xl bg-surface-container-lowest border-2 border-dashed border-outline-variant/30 flex flex-col items-center justify-center p-6 text-center group hover:border-primary-container/40 transition-colors cursor-pointer relative overflow-hidden">

                <img id="previewImage"
                    src="{{ !empty($persona->photo ?? null) ? asset($persona->photo) : asset('images/placeholder.png') }}"
                    class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 object-cover w-[100px] h-[100px] hidden rounded-lg">

                <div class="relative z-10 pointer-events-none" id="uploadPlaceholder">
                    <div class="w-[100px] h-[100px] rounded-full bg-surface-container-high flex items-center justify-center mb-4 mx-auto">
                        <span class="material-symbols-outlined text-3xl text-on-surface-variant">
                            cloud_upload
                        </span>
                    </div>

                    <div class="font-bold text-primary mb-1">Upload Image</div>
                    <div class="text-[10px] text-on-surface-variant uppercase tracking-wider">
                        max 2MB (jpg, png, webp) / dimensions 100x100px recommended
                    </div>
                </div>

                <input type="file" name="photo" id="imageInput"
                    class="absolute inset-0 opacity-0 cursor-pointer">
            </div>
        </section>

    </div>

</div>

<script>
    function switchLang(lang) {

        // =========================
        // 1. MULTI LANGUAGE FIELDS
        // =========================
        document.querySelectorAll('.lang-field').forEach(el => {
            el.style.display = el.dataset.lang === lang ? 'block' : 'none';
        });

        // =========================
        // 2. TAB UI
        // =========================
        document.querySelectorAll('.lang-tab').forEach(btn => {
            btn.classList.remove('bg-primary', 'text-white');
            if (btn.dataset.lang === lang) {
                btn.classList.add('bg-primary', 'text-white');
            }
        });

        // =========================
        // 3. INDUSTRY LANGUAGE SWITCH (🔥 FIX)
        // =========================
        document.querySelectorAll('.industry-name').forEach(el => {

            const translated = el.dataset[lang];

            if (translated) {
                el.innerText = translated;
            }

        });

    }

    // =========================
    // DEFAULT LOAD
    // =========================
    document.addEventListener('DOMContentLoaded', function() {

        switchLang("{{ $defaultLang }}");

        // =========================
        // IMAGE PREVIEW SAFETY
        // =========================
        const input = document.getElementById('imageInput');
        const preview = document.getElementById('previewImage');
        const placeholder = document.getElementById('uploadPlaceholder');

        if (input && preview && placeholder) {

            if (preview.getAttribute('src') &&
                !preview.getAttribute('src').includes('placeholder.png')) {
                preview.classList.remove('hidden');
                placeholder.style.display = 'none';
            }

            input.addEventListener('change', function(e) {

                const file = e.target.files[0];
                if (!file) return;

                if (!file.type.startsWith('image/')) {
                    alert('Please select a valid image file');
                    return;
                }

                const reader = new FileReader();

                reader.onload = function(event) {
                    preview.src = event.target.result;
                    preview.classList.remove('hidden');
                    placeholder.style.display = 'none';
                };

                reader.readAsDataURL(file);
            });

        }

        // =========================
        // INDUSTRY VALIDATION (SAFE)
        // =========================
        const form = document.querySelector('form');

        if (form) {
            form.addEventListener('submit', function(e) {

                const checkboxes = document.querySelectorAll('.industry-checkbox');
                const isChecked = Array.from(checkboxes).some(cb => cb.checked);

                const errorBox = document.getElementById('industryError');

                if (!isChecked && errorBox) {
                    e.preventDefault();
                    errorBox.classList.remove('hidden');
                } else if (errorBox) {
                    errorBox.classList.add('hidden');
                }

            });
        }

    });
</script>