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

<!-- 🔥 Language Tabs -->
<div class="flex gap-2 mb-6">
    @foreach($languages as $lang)
    <button type="button"
        onclick="switchLang('{{ $lang->code }}')"
        class="lang-tab px-4 py-1.5 rounded-md border text-xs font-bold 
        {{ $currentLang == $lang->code ? 'bg-primary text-white' : 'border-outline-variant' }}"
        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">

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

            <select name="persona_id"
                class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface">

                {{-- Default --}}
               <option value=""
    data-name-en="Select Persona"
    data-name-hi="पर्सोना चुनें"
    {{ old('persona_id', $insight->persona_id ?? null) ? '' : 'selected' }}>
    {{ $currentLang == 'hi' ? 'पर्सोना चुनें' : 'Select Persona' }}
</option>

                @foreach ($personas as $persona)
                <option value="{{ $persona->id }}"
                        {{ old('persona_id', $insight->persona_id ?? null) == $persona->id ? 'selected' : '' }}

                        @foreach($languages as $l)
                        data-name-{{ $l->code }}="{{ $persona->name[$l->code] ?? $persona->name['en'] ?? '' }}"
                        @endforeach
                    >
                        {{ translate_field($persona->name, $currentLang) }}
                    </option>
                @endforeach

            </select>
        </div>

        <!-- 🔥 NAME (MULTI LANG) -->
        <div class="relative">
            <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-3">
                Insight_Name
            </label>

            @foreach($languages as $lang)
            <div class="lang-field" data-lang="{{ $lang->code }}">
                <input type="text"
                    name="name[{{ $lang->code }}]"
                    value="{{ old('name.'.$lang->code, $insight->name[$lang->code] ?? '') }}"
                    placeholder="Enter insight name..."
                    class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface">
            </div>
            @endforeach
        </div>

        <!-- 🔥 TITLE (MULTI LANG) -->
        <div class="relative">
            <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-3">
                Insight_Title
            </label>

            @foreach($languages as $lang)
            <div class="lang-field" data-lang="{{ $lang->code }}">
                <input type="text"
                    name="title[{{ $lang->code }}]"
                    value="{{ old('title.'.$lang->code, $insight->title[$lang->code] ?? '') }}"
                    placeholder="e.g. Business Icon"
                    class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface">
            </div>
            @endforeach
        </div>

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

            <select name="is_active"
                class="w-full px-5 py-4 bg-surface-container border border-outline-variant/20 rounded-xl text-on-surface">

                <option value="1"
                    {{ old('is_active', $insight->is_active ?? 1) == 1 ? 'selected' : '' }}>
                    Active
                </option>

                <option value="0"
                    {{ old('is_active', $insight->is_active ?? 1) == 0 ? 'selected' : '' }}>
                    Inactive
                </option>

            </select>
        </div>

    </div>

    <!-- RIGHT SIDE -->
    <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">
                Insight_Image
            </h3>

            <div class="aspect-square w-full max-w-[320px] mx-auto rounded-xl bg-surface-container-lowest border-2 border-dashed flex items-center justify-center relative overflow-hidden">

                <img id="previewImage"
                    src="{{ !empty($insight->image ?? null) ? asset($insight->image) : asset('images/placeholder.png') }}"
                    class="absolute w-[120px] h-[120px] object-cover rounded-xl {{ empty($insight->image ?? null) ? 'hidden' : '' }}">

                <div 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>

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

    </div>

</div>

<!-- 🔥 LANGUAGE SCRIPT -->
<script>
    function switchLang(lang) {

        // ✅ Toggle input fields
        document.querySelectorAll('.lang-field').forEach(el => {
            el.style.display = (el.dataset.lang === lang) ? 'block' : 'none';
        });

        // ✅ Active 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');
            }
        });


        const personaSelect = document.querySelector('select[name="persona_id"]');

            personaSelect.querySelectorAll('option').forEach(option => {

                const translated =
                    option.dataset['name' + lang.charAt(0).toUpperCase() + lang.slice(1)];

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

        // ✅ Persist lang in URL
        const url = new URL(window.location.href);
        url.searchParams.set('lang', lang);
        window.history.replaceState({}, '', url);
    }

    // ✅ Default load
    document.addEventListener('DOMContentLoaded', function() {
        switchLang('{{ $currentLang }}');
    });
</script>

<!-- IMAGE SCRIPT (UNCHANGED) -->
<script>
    const input = document.getElementById('imageInput');
    const preview = document.getElementById('previewImage');
    const placeholder = document.getElementById('uploadPlaceholder');

    input.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!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);
    });
</script>