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

    <style>
        /* SCROLLBAR */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 20px;
        }

        /* PAGE BLOCK ANIMATION */
        .page-block {
            animation: fadeIn .35s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* INPUT */
        input,
        textarea,
        select {
            transition: all .3s ease;
        }

        input:focus,
        textarea:focus,
        select:focus {
            transform: translateY(-1px);
        }

        /* LABEL */
        label {
            letter-spacing: .03em;
        }

        /* SECTION CARD */
        .section-card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
        }

        /* LANG TAB ACTIVE */
        .lang-tab.bg-primary {
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.18);
        }

        /* 
        #pageSelector {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            background-image: none !important;
        }

        #pageSelector::-ms-expand {
            display: none;
        } */

        /* MOBILE */
        @media(max-width:768px) {

            .page-block {
                padding: 20px;
                border-radius: 24px;
            }

            input,
            textarea,
            select {
                font-size: 14px;

            }

        }
    </style>

    <div class="mb-6">
        <div class="relative">

            <!-- Left Icon -->
            <!-- <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-primary pointer-events-none">
                description
            </span> -->

            <select
                name="page_slug"
                id="pageSelector"
                data-readonly="{{ isset($selectedPage) ? 'true' : 'false' }}"
                class="
                w-full
                appearance-none
                rounded-2xl
                border
                border-primary/20
                bg-[#111827]
                text-white
                px-14
                py-4
                mb-4
                text-sm
                font-medium
                shadow-[0_0_15px_rgba(0,255,157,0.08)]
                focus:outline-none
                focus:border-primary
                focus:ring-2
                focus:ring-primary/20
                transition-all
                duration-300
                hover:border-primary/50
                {{ isset($selectedPage) ? 'opacity-80 cursor-not-allowed' : '' }}
            ">

                <option value="">Select Page</option>

                <option value="home_page"
                    {{ ($selectedPage->page_slug ?? '') == 'home_page' ? 'selected' : '' }}>
                    Home Page
                </option>

                <option value="dashboard_page"
                    {{ ($selectedPage->page_slug ?? '') == 'dashboard_page' ? 'selected' : '' }}>
                    Dashboard Page
                </option>

                <option value="signin"
                    {{ ($selectedPage->page_slug ?? '') == 'signin' ? 'selected' : '' }}>
                    Sign In & Personal Info
                </option>

                <option value="button_page"
                    {{ ($selectedPage->page_slug ?? '') == 'button_page' ? 'selected' : '' }}>
                    Button
                </option>

                <option value="gameplay_page"
                    {{ ($selectedPage->page_slug ?? '') == 'gameplay_page' ? 'selected' : '' }}>
                    Gameplay
                </option>

                <option value="howtoplay_page"
                    {{ ($selectedPage->page_slug ?? '') == 'howtoplay_page' ? 'selected' : '' }}>
                    How To Play
                </option>

                <option value="profile_page"
                    {{ ($selectedPage->page_slug ?? '') == 'profile_page' ? 'selected' : '' }}>
                    Profile
                </option>

                <option value="quiz_page"
                    {{ ($selectedPage->page_slug ?? '') == 'quiz_page' ? 'selected' : '' }}>
                    Quiz
                </option>

                <option value="result_page"
                    {{ ($selectedPage->page_slug ?? '') == 'result_page' ? 'selected' : '' }}>
                    Result
                </option>

                <option value="steptwo_page"
                    {{ ($selectedPage->page_slug ?? '') == 'steptwo_page' ? 'selected' : '' }}>
                    Step Two
                </option>

                <option value="gameplay_popup_page"
                    {{ ($selectedPage->page_slug ?? '') == 'gameplay_popup_page' ? 'selected' : '' }}>
                    Gameplay Popup
                </option>

                      <option value="logout_screen_page"
                    {{ ($selectedPage->page_slug ?? '') == 'logout_screen_page' ? 'selected' : '' }}>
                    Logout Popup
                </option>

            </select>

            <!-- Right Icon -->
            <!-- <span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-primary pointer-events-none">
                expand_more
            </span> -->

        </div>

        @if(isset($selectedPage))
        <!-- <p class="mt-2 text-xs text-yellow-400">
            Content type is read-only while editing.
        </p> -->
        @endif
        <!-- LANGUAGE TABS -->
        <div class="flex gap-2 mb-6">

            @foreach($languages as $lang)

            <button type="button"
                onclick="switchLang('{{ $lang->code }}')"
                data-lang="{{ $lang->code }}"
                class="lang-tab px-4 py-1.5 rounded-md border text-xs font-black tracking-[0.2em]
            {{ $currentLang == $lang->code ? 'bg-primary text-black' : 'border-outline-variant text-white' }}">

                {{ strtoupper($lang->code) }}

            </button>

            @endforeach

        </div>


        <!-- SIGNIN PAGE -->

        <div class="page-block" id="signin" style="display:none;">



            @foreach($languages as $lang)

            <div class="lang-field" data-lang="{{ $lang->code }}" style="display:none;">
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">
                    <h3 class="text-lg font-bold mb-6 text-white">
                        Signin Info
                    </h3>
                    <!-- MATCH TITLE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Match Title ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[signin][match][title][{{ $lang->code }}]"
                            value="{{ old('content.signin.match.title.'.$lang->code, $content['signin']['match']['title'][$lang->code] ?? '') }}"
                            placeholder="Enter Match Title"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- MATCH SUBTITLE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Match Subtitle ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[signin][match][subTitle][{{ $lang->code }}]"
                            value="{{ old('content.signin.match.subTitle.'.$lang->code, $content['signin']['match']['subTitle'][$lang->code] ?? '') }}"
                            placeholder="Enter Match Subtitle"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- BADGE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Badge ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[signin][badge][{{ $lang->code }}]"
                            value="{{ old('content.signin.badge.'.$lang->code, $content['signin']['badge'][$lang->code] ?? '') }}"
                            placeholder="Enter Badge"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- GOOGLE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Google Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[signin][google][{{ $lang->code }}]"
                            value="{{ old('content.signin.google.'.$lang->code, $content['signin']['google'][$lang->code] ?? '') }}"
                            placeholder="Continue with Google"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Or Label ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[signin][orlabel][{{ $lang->code }}]"
                            value="{{ old('content.signin.orlabel.'.$lang->code, $content['signin']['orlabel'][$lang->code] ?? '') }}"
                            placeholder=""
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- GUEST -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Guest Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[signin][guest][{{ $lang->code }}]"
                            value="{{ old('content.signin.guest.'.$lang->code, $content['signin']['guest'][$lang->code] ?? '') }}"
                            placeholder="Continue as Guest"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>
                </div>
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">
                    <h3 class="text-lg font-bold mb-6 text-white">
                        Personal Info
                    </h3>

                    <!-- EDIT PROFILE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Edit Profile ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[personalInfo][edit][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.edit.'.$lang->code, $content['personalInfo']['edit'][$lang->code] ?? '') }}"
                            placeholder="Edit Profile"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- TITLE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Title
                        </label>

                        <input type="text"
                            name="content[personalInfo][title][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.title.'.$lang->code, $content['personalInfo']['title'][$lang->code] ?? '') }}"
                            placeholder="Let's get to know you"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- SUBTITLE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Subtitle
                        </label>

                        <input type="text"
                            name="content[personalInfo][subTitle][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.subTitle.'.$lang->code, $content['personalInfo']['subTitle'][$lang->code] ?? '') }}"
                            placeholder="Subtitle"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- UPLOAD PLACEHOLDER -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Upload Placeholder
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][upload][placeholder][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.upload.placeholder.'.$lang->code, $content['personalInfo']['fields']['upload']['placeholder'][$lang->code] ?? '') }}"
                            placeholder="Upload profile image"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- UPLOAD CHANGE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Upload Change Text
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][upload][change][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.upload.change.'.$lang->code, $content['personalInfo']['fields']['upload']['change'][$lang->code] ?? '') }}"
                            placeholder="Change"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- NAME LABEL -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Name Label
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][name][label][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.name.label.'.$lang->code, $content['personalInfo']['fields']['name']['label'][$lang->code] ?? '') }}"
                            placeholder="Name"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- NAME PLACEHOLDER -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Name Placeholder
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][name][placeholder][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.name.placeholder.'.$lang->code, $content['personalInfo']['fields']['name']['placeholder'][$lang->code] ?? '') }}"
                            placeholder="Enter your name"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- GENDER LABEL -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Gender Label
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][gender][label][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.gender.label.'.$lang->code, $content['personalInfo']['fields']['gender']['label'][$lang->code] ?? '') }}"
                            placeholder="Gender"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- GENDER MALE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Male Text
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][gender][type][male][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.gender.type.male.'.$lang->code, $content['personalInfo']['fields']['gender']['type']['male'][$lang->code] ?? '') }}"
                            placeholder="Male"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- GENDER FEMALE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Female Text
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][gender][type][female][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.gender.type.female.'.$lang->code, $content['personalInfo']['fields']['gender']['type']['female'][$lang->code] ?? '') }}"
                            placeholder="Female"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- AGE LABEL -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Age Label
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][age][label][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.age.label.'.$lang->code, $content['personalInfo']['fields']['age']['label'][$lang->code] ?? '') }}"
                            placeholder="Age"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- AGE PLACEHOLDER -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Age Placeholder
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][age][placeholder][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.age.placeholder.'.$lang->code, $content['personalInfo']['fields']['age']['placeholder'][$lang->code] ?? '') }}"
                            placeholder="Enter your age"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- QUALIFICATION LABEL -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Qualification Label
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][qualification][label][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.qualification.label.'.$lang->code, $content['personalInfo']['fields']['qualification']['label'][$lang->code] ?? '') }}"
                            placeholder="Qualification"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- QUALIFICATION PLACEHOLDER -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Qualification Placeholder
                        </label>

                        <input type="text"
                            name="content[personalInfo][fields][qualification][placeholder][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.fields.qualification.placeholder.'.$lang->code, $content['personalInfo']['fields']['qualification']['placeholder'][$lang->code] ?? '') }}"
                            placeholder="Select your current level"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- BUTTON -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Button Text
                        </label>

                        <input type="text"
                            name="content[personalInfo][button][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.button.'.$lang->code, $content['personalInfo']['button'][$lang->code] ?? '') }}"
                            placeholder="Continue"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>

                    <!-- MESSAGE -->
                    <div class="mb-4">
                        <label class="block mb-2 text-white font-semibold">
                            Success Message
                        </label>

                        <input type="text"
                            name="content[personalInfo][message][{{ $lang->code }}]"
                            value="{{ old('content.personalInfo.message.'.$lang->code, $content['personalInfo']['message'][$lang->code] ?? '') }}"
                            placeholder="Login Successful"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white outline-none">
                    </div>
                </div>
            </div>
            @endforeach

        </div>

        <!-- BUTTON PAGE -->
        <div class="page-block" id="button_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">Button Page Content</h3>

            @foreach($languages as $lang)

            <div class="lang-field" data-lang="{{ $lang->code }}" style="display:none;">

                <!-- GAMEPLAY -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Gameplay ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Like Button</label>

                        <input type="text"
                            name="content[gameplay][like][{{ $lang->code }}]"
                            value="{{ old('content.gameplay.like.'.$lang->code, $content['gameplay']['like'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Dislike Button</label>

                        <input type="text"
                            name="content[gameplay][dislike][{{ $lang->code }}]"
                            value="{{ old('content.gameplay.dislike.'.$lang->code, $content['gameplay']['dislike'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- INSIGHT -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Insight ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Insight Label</label>

                        <input type="text"
                            name="content[insight][label][{{ $lang->code }}]"
                            value="{{ old('content.insight.label.'.$lang->code, $content['insight']['label'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">View Insight</label>

                        <input type="text"
                            name="content[insight][view][{{ $lang->code }}]"
                            value="{{ old('content.insight.view.'.$lang->code, $content['insight']['view'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- PLAY AGAIN -->
                <div class="mb-6">
                    <label class="text-white">Play Again</label>

                    <input type="text"
                        name="content[play][{{ $lang->code }}]"
                        value="{{ old('content.play.'.$lang->code, $content['play'][$lang->code] ?? '') }}"
                        class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                </div>

                <!-- RESULT -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Result ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Save Result</label>

                        <input type="text"
                            name="content[result][save][{{ $lang->code }}]"
                            value="{{ old('content.result.save.'.$lang->code, $content['result']['save'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Remove Result</label>

                        <input type="text"
                            name="content[result][remove][{{ $lang->code }}]"
                            value="{{ old('content.result.remove.'.$lang->code, $content['result']['remove'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- SHARE -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Share ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Share Label</label>

                        <input type="text"
                            name="content[share][label][{{ $lang->code }}]"
                            value="{{ old('content.share.label.'.$lang->code, $content['share']['label'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Share Friend Text</label>

                        <input type="text"
                            name="content[share][friend][{{ $lang->code }}]"
                            value="{{ old('content.share.friend.'.$lang->code, $content['share']['friend'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- EXPLORE -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Explore ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Explore University</label>

                        <input type="text"
                            name="content[explore][university][{{ $lang->code }}]"
                            value="{{ old('content.explore.university.'.$lang->code, $content['explore']['university'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                 <!-- Form -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                         Button text({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Google</label>

                        <input type="text"
                            name="content[form][google][{{ $lang->code }}]"
                            value="{{ old('content.form.google.'.$lang->code, $content['form']['google'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Submit</label>

                        <input type="text"
                            name="content[form][submit][{{ $lang->code }}]"
                            value="{{ old('content.form.submit.'.$lang->code, $content['form']['submit'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                             <input type="text"
                            name="content[form][submitting][{{ $lang->code }}]"
                            value="{{ old('content.form.submitting.'.$lang->code, $content['form']['submitting'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                      <div class="mb-3">
                        <label class="text-white">Update</label>

                        <input type="text"
                            name="content[form][update][{{ $lang->code }}]"
                            value="{{ old('content.form.update.'.$lang->code, $content['form']['update'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                             <input type="text"
                            name="content[form][updating][{{ $lang->code }}]"
                            value="{{ old('content.form.updating.'.$lang->code, $content['form']['updating'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">save</label>

                        <input type="text"
                            name="content[form][save][{{ $lang->code }}]"
                            value="{{ old('content.form.save.'.$lang->code, $content['form']['save'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                             <input type="text"
                            name="content[form][saving][{{ $lang->code }}]"
                            value="{{ old('content.form.saving.'.$lang->code, $content['form']['saving'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- DASHBOARD PAGE -->
        <div class="page-block" id="dashboard_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">
                Dashboard Page Content
            </h3>

            @foreach($languages as $lang)

            <div class="lang-field" data-lang="{{ $lang->code }}" style="display:none;">

                <!-- START CARD -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Start Card ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[cards][start][title][{{ $lang->code }}]"
                            value="{{ old('content.cards.start.title.'.$lang->code, $content['cards']['start']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[cards][start][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.cards.start.desc.'.$lang->code, $content['cards']['start']['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

                <!-- PLAY CARD -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Play Card ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[cards][play][title][{{ $lang->code }}]"
                            value="{{ old('content.cards.play.title.'.$lang->code, $content['cards']['play']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[cards][play][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.cards.play.desc.'.$lang->code, $content['cards']['play']['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

                <!-- PROFILE CARD -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Profile Card ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[cards][profile][title][{{ $lang->code }}]"
                            value="{{ old('content.cards.profile.title.'.$lang->code, $content['cards']['profile']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[cards][profile][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.cards.profile.desc.'.$lang->code, $content['cards']['profile']['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

                <!-- SHARE CARD -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Share Card ({{ strtoupper($lang->code) }})
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[cards][share][title][{{ $lang->code }}]"
                            value="{{ old('content.cards.share.title.'.$lang->code, $content['cards']['share']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[cards][share][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.cards.share.desc.'.$lang->code, $content['cards']['share']['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- GAMEPLAY PAGE -->
        <div class="page-block" id="gameplay_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">
                Gameplay Page Content
            </h3>

            @foreach($languages as $lang)

            <div class="lang-field" data-lang="{{ $lang->code }}" style="display:none;">

                <!-- SPLASH SECTION -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Splash Section ({{ strtoupper($lang->code) }})
                    </h4>

                    <!-- LABEL -->
                    <div class="mb-3">
                        <label class="text-white">Splash Label</label>

                        <input type="text"
                            name="content[splash][label][{{ $lang->code }}]"
                            value="{{ old('content.splash.label.'.$lang->code, $content['splash']['label'][$lang->code] ?? '') }}"
                            placeholder="Enter Splash Label"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- TITLE -->
                    <div class="mb-3">
                        <label class="text-white">Splash Title</label>

                        <input type="text"
                            name="content[splash][title][{{ $lang->code }}]"
                            value="{{ old('content.splash.title.'.$lang->code, $content['splash']['title'][$lang->code] ?? '') }}"
                            placeholder="Enter Splash Title"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- HOME PAGE -->
        <div class="page-block" id="home_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">
                Home Page Content
            </h3>

            @foreach($languages as $lang)

            <div class="lang-field" data-lang="{{ $lang->code }}" style="display:none;">

                <!-- HOME SECTION -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Home Content ({{ strtoupper($lang->code) }})
                    </h4>

                    <!-- BADGE -->
                    <div class="mb-3">
                        <label class="text-white">Badge</label>

                        <input type="text"
                            name="content[badge][{{ $lang->code }}]"
                            value="{{ old('content.badge.'.$lang->code, $content['badge'][$lang->code] ?? '') }}"
                            placeholder="Enter Badge"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- HEADING -->
                    <div class="mb-3">
                        <label class="text-white">Heading</label>

                        <input type="text"
                            name="content[heading][{{ $lang->code }}]"
                            value="{{ old('content.heading.'.$lang->code, $content['heading'][$lang->code] ?? '') }}"
                            placeholder="Enter Heading"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- BUTTON -->
                    <div class="mb-3">
                        <label class="text-white">Button Text</label>

                        <input type="text"
                            name="content[button][{{ $lang->code }}]"
                            value="{{ old('content.button.'.$lang->code, $content['button'][$lang->code] ?? '') }}"
                            placeholder="Enter Button Text"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- GAMEPLAY -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Gameplay Buttons ({{ strtoupper($lang->code) }})
                    </h4>

                    <!-- LIKE -->
                    <div class="mb-3">
                        <label class="text-white">Like Button</label>

                        <input type="text"
                            name="content[gameplay][like][{{ $lang->code }}]"
                            value="{{ old('content.gameplay.like.'.$lang->code, $content['gameplay']['like'][$lang->code] ?? '') }}"
                            placeholder="Enter Like Text"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- DISLIKE -->
                    <div class="mb-3">
                        <label class="text-white">Dislike Button</label>

                        <input type="text"
                            name="content[gameplay][dislike][{{ $lang->code }}]"
                            value="{{ old('content.gameplay.dislike.'.$lang->code, $content['gameplay']['dislike'][$lang->code] ?? '') }}"
                            placeholder="Enter Dislike Text"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- HOW TO PLAY PAGE -->
        <div class="page-block" id="howtoplay_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">
                How To Play Page Content
            </h3>

            @foreach($languages as $lang)

            <div class="lang-field" data-lang="{{ $lang->code }}" style="display:none;">

                <!-- MAIN SECTION -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Main Content ({{ strtoupper($lang->code) }})
                    </h4>

                    <!-- TITLE -->
                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[title][{{ $lang->code }}]"
                            value="{{ old('content.title.'.$lang->code, $content['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- BACK TITLE -->
                    <div class="mb-3">
                        <label class="text-white">Back Title</label>

                        <input type="text"
                            name="content[backTitle][{{ $lang->code }}]"
                            value="{{ old('content.backTitle.'.$lang->code, $content['backTitle'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- BUTTON -->
                    <div class="mb-3">
                        <label class="text-white">Button</label>

                        <input type="text"
                            name="content[button][{{ $lang->code }}]"
                            value="{{ old('content.button.'.$lang->code, $content['button'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- START SECTION -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Start Section
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Step</label>

                        <input type="text"
                            name="content[start][step][{{ $lang->code }}]"
                            value="{{ old('content.start.step.'.$lang->code, $content['start']['step'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[start][title][{{ $lang->code }}]"
                            value="{{ old('content.start.title.'.$lang->code, $content['start']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[start][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old(
                'content.start.desc.'.$lang->code,
                is_array($content['start']['desc'] ?? null)
                    ? ($content['start']['desc'][$lang->code] ?? $content['start']['desc']['en'] ?? '')
                    : ($content['start']['desc'] ?? '')
            ) }}</textarea>
                    </div>

                </div>

                <!-- SWIPE RIGHT -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Swipe Right
                    </h4>

                    <input type="hidden"
                        name="content[swipes][0][id]"
                        value="1">

                    <div class="mb-3">
                        <label class="text-white">Step</label>

                        <input type="text"
                            name="content[swipes][0][step][{{ $lang->code }}]"
                            value="{{ old('content.swipes.0.step.'.$lang->code, $content['swipes'][0]['step'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[swipes][0][title][{{ $lang->code }}]"
                            value="{{ old('content.swipes.0.title.'.$lang->code, $content['swipes'][0]['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Asset</label>

                        <input type="text"
                            name="content[swipes][0][asset]"
                            value="{{ old(
    'content.swipes.0.asset.'.$lang->code,
    is_array(data_get($content, 'swipes.0.asset'))
        ? (
            data_get($content, 'swipes.0.asset.'.$lang->code)
            ?? data_get($content, 'swipes.0.asset.en')
            ?? 'swipe-right'
        )
        : (
            data_get($content, 'swipes.0.asset')
            ?? 'swipe-right'
        )
) }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[swipes][0][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.swipes.0.desc.'.$lang->code, $content['swipes'][0]['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Type</label>

                        <input type="text"
                            name="content[swipes][0][type][{{ $lang->code }}]"
                            value="{{ old('content.swipes.0.type.'.$lang->code, $content['swipes'][0]['type'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- SWIPE LEFT -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Swipe Left
                    </h4>

                    <input type="hidden"
                        name="content[swipes][1][id]"
                        value="2">

                    <div class="mb-3">
                        <label class="text-white">Step</label>

                        <input type="text"
                            name="content[swipes][1][step][{{ $lang->code }}]"
                            value="{{ old('content.swipes.1.step.'.$lang->code, $content['swipes'][1]['step'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[swipes][1][title][{{ $lang->code }}]"
                            value="{{ old('content.swipes.1.title.'.$lang->code, $content['swipes'][1]['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Asset</label>

                        <input type="text"
                            name="content[swipes][1][asset]"
                            value="{{ old(
    'content.swipes.1.asset.'.$lang->code,
    is_array(data_get($content, 'swipes.1.asset'))
        ? (
            data_get($content, 'swipes.1.asset.'.$lang->code)
            ?? data_get($content, 'swipes.1.asset.en')
            ?? 'swipe-left'
        )
        : (
            data_get($content, 'swipes.1.asset')
            ?? 'swipe-left'
        )
) }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[swipes][1][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.swipes.1.desc.'.$lang->code, $content['swipes'][1]['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Type</label>

                        <input type="text"
                            name="content[swipes][1][type][{{ $lang->code }}]"
                            value="{{ old('content.swipes.1.type.'.$lang->code, $content['swipes'][1]['type'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- WINNING SECTION -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Winning Section
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Step</label>

                        <input type="text"
                            name="content[winning][step][{{ $lang->code }}]"
                            value="{{ old('content.winning.step.'.$lang->code, $content['winning']['step'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Title</label>

                        <input type="text"
                            name="content[winning][title][{{ $lang->code }}]"
                            value="{{ old('content.winning.title.'.$lang->code, $content['winning']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- WINNING LIST -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Winning List
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">List Item 1</label>

                        <input type="text"
                            name="content[winning][list][0][{{ $lang->code }}]"
                            value="{{ old('content.winning.list.0.'.$lang->code, $content['winning']['list'][0][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">List Item 2</label>

                        <input type="text"
                            name="content[winning][list][1][{{ $lang->code }}]"
                            value="{{ old('content.winning.list.1.'.$lang->code, $content['winning']['list'][1][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">List Item 3</label>

                        <input type="text"
                            name="content[winning][list][2][{{ $lang->code }}]"
                            value="{{ old('content.winning.list.2.'.$lang->code, $content['winning']['list'][2][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

                <!-- STRATEGY CARD -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-6">

                    <h4 class="text-primary font-bold mb-4">
                        Strategy Card
                    </h4>

                    <div class="mb-3">
                        <label class="text-white">Primary Title</label>

                        <input type="text"
                            name="content[winning][strategyCard][primaryTitle][{{ $lang->code }}]"
                            value="{{ old('content.winning.strategyCard.primaryTitle.'.$lang->code, $content['winning']['strategyCard']['primaryTitle'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Secondary Title</label>

                        <input type="text"
                            name="content[winning][strategyCard][SecondaryTitle][{{ $lang->code }}]"
                            value="{{ old('content.winning.strategyCard.SecondaryTitle.'.$lang->code, $content['winning']['strategyCard']['SecondaryTitle'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>

                        <textarea
                            name="content[winning][strategyCard][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-4 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.winning.strategyCard.desc.'.$lang->code, $content['winning']['strategyCard']['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- PROFILE PAGE -->
        <div class="page-block" id="profile_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">Profile Page Content</h3>

            @foreach($languages as $lang)

            <div class="lang-field profile-field"
                data-lang="{{ $lang->code }}"
                style="display:none;">

                <!-- Heading -->
                <div class="mb-4">
                    <label class="text-white">Heading ({{ strtoupper($lang->code) }})</label>
                    <input type="text"
                        name="content[heading][{{ $lang->code }}]"
                        value="{{ old('content.heading.'.$lang->code, $content['heading'][$lang->code] ?? '') }}"
                        class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                        placeholder="My Profile">
                </div>

                <!-- Edit -->
                <div class="mb-4">
                    <label class="text-white">Edit Profile</label>
                    <input type="text"
                        name="content[edit][{{ $lang->code }}]"
                        value="{{ old('content.edit.'.$lang->code, $content['edit'][$lang->code] ?? '') }}"
                        class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                        placeholder="Edit Profile">
                </div>

                <!-- INSIGHT -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-primary mb-3">Insight</h4>

                    <input type="text"
                        name="content[menu][insight][{{ $lang->code }}]"
                        value="{{ old('content.menu.insight.'.$lang->code, $content['menu']['insight'][$lang->code] ?? '') }}"
                        class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                        placeholder="Insights">

                </div>

                <!-- SAVE RESULT -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-primary mb-3">Save Result</h4>

                    <div class="mb-3">
                        <label class="text-white">Heading</label>
                        <input type="text"
                            name="content[menu][result][heading][{{ $lang->code }}]"
                            value="{{ old('content.menu.result.heading.'.$lang->code, $content['menu']['result']['heading'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Save Results">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Button</label>
                        <input type="text"
                            name="content[menu][result][button][{{ $lang->code }}]"
                            value="{{ old('content.menu.result.button.'.$lang->code, $content['menu']['result']['button'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Explore">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Saved</label>
                        <input type="text"
                            name="content[menu][result][saved][{{ $lang->code }}]"
                            value="{{ old('content.menu.result.saved.'.$lang->code, $content['menu']['result']['saved'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Saved">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Ago</label>
                        <input type="text"
                            name="content[menu][result][ago][{{ $lang->code }}]"
                            value="{{ old('content.menu.result.ago.'.$lang->code, $content['menu']['result']['ago'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="ago">
                    </div>

                </div>

                <!-- UNIVERSITIES -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-primary mb-3">Universities</h4>

                    <div class="mb-3">
                        <label class="text-white">Liked Universities</label>
                        <input type="text"
                            name="content[menu][universities][like][{{ $lang->code }}]"
                            value="{{ old('content.menu.universities.like.'.$lang->code, $content['menu']['universities']['like'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Liked Universities">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Empty Message</label>
                        <textarea
                            name="content[menu][universities][empty][{{ $lang->code }}]"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="No universities added">{{ old('content.menu.universities.empty.'.$lang->code, $content['menu']['universities']['empty'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

                <!-- HELP -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-primary mb-3">Help Centre</h4>

                    <div class="mb-3">
                        <label class="text-white">Heading</label>
                        <input type="text"
                            name="content[menu][help][heading][{{ $lang->code }}]"
                            value="{{ old('content.menu.help.heading.'.$lang->code, $content['menu']['help']['heading'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Help Centre">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Card Title</label>
                        <input type="text"
                            name="content[menu][help][card][title][{{ $lang->code }}]"
                            value="{{ old('content.menu.help.card.title.'.$lang->code, $content['menu']['help']['card']['title'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Need help?">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Card Subtitle</label>
                        <input type="text"
                            name="content[menu][help][card][subTitle][{{ $lang->code }}]"
                            value="{{ old('content.menu.help.card.subTitle.'.$lang->code, $content['menu']['help']['card']['subTitle'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="We’re here to assist you">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Button</label>
                        <input type="text"
                            name="content[menu][help][button][{{ $lang->code }}]"
                            value="{{ old('content.menu.help.button.'.$lang->code, $content['menu']['help']['button'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="Email Us">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Message</label>
                        <textarea
                            name="content[menu][help][message][{{ $lang->code }}]"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                            placeholder="We typically respond within 24 hours">{{ old('content.menu.help.message.'.$lang->code, $content['menu']['help']['message'][$lang->code] ?? '') }}</textarea>
                    </div>

                </div>

                <!-- DELETE ACCOUNT -->
                <div class="border border-red-500/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-red-400 mb-3">Delete Account</h4>

                    <div class="mb-3">
                        <label class="text-white">Heading</label>
                        <input type="text"
                            name="content[menu][delete][heading][{{ $lang->code }}]"
                            value="{{ old('content.menu.delete.heading.'.$lang->code, $content['menu']['delete']['heading'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-red-500/20 rounded-xl text-white"
                            placeholder="Delete My Account">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Page Heading</label>
                        <input type="text"
                            name="content[menu][delete][pageHeading][{{ $lang->code }}]"
                            value="{{ old('content.menu.delete.pageHeading.'.$lang->code, $content['menu']['delete']['pageHeading'][$lang->code] ?? '') }}"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-red-500/20 rounded-xl text-white"
                            placeholder="Delete your account?">
                    </div>

                    <div class="mb-3">
                        <label class="text-white">Description</label>
                        <textarea
                            name="content[menu][delete][desc][{{ $lang->code }}]"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-red-500/20 rounded-xl text-white"
                            placeholder="Description">{{ old('content.menu.delete.desc.'.$lang->code, $content['menu']['delete']['desc'][$lang->code] ?? '') }}</textarea>
                    </div>

                    <div class="grid grid-cols-2 gap-4 mb-3">

                        <div>
                            <label class="text-white">Cancel Button</label>
                            <input type="text"
                                name="content[menu][delete][button][cancel][{{ $lang->code }}]"
                                value="{{ old('content.menu.delete.button.cancel.'.$lang->code, $content['menu']['delete']['button']['cancel'][$lang->code] ?? '') }}"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-red-500/20 rounded-xl text-white"
                                placeholder="Cancel">
                        </div>

                        <div>
                            <label class="text-white">Delete Button</label>
                            <input type="text"
                                name="content[menu][delete][button][delete][{{ $lang->code }}]"
                                value="{{ old('content.menu.delete.button.delete.'.$lang->code, $content['menu']['delete']['button']['delete'][$lang->code] ?? '') }}"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-red-500/20 rounded-xl text-white"
                                placeholder="Delete Account">
                        </div>

                    </div>

                </div>

                <!-- LOGOUT -->
                <div class="mb-4">
                    <label class="text-white">Logout</label>
                    <input type="text"
                        name="content[menu][logout][{{ $lang->code }}]"
                        value="{{ old('content.menu.logout.'.$lang->code, $content['menu']['logout'][$lang->code] ?? '') }}"
                        class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white"
                        placeholder="Logout">
                </div>

            </div>

            @endforeach

        </div>

        <!-- QUIZ PAGE -->
        <div class="page-block" id="quiz_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">Quiz Page Content</h3>

            @foreach($languages as $lang)

            <div class="lang-field quiz-field"
                data-lang="{{ $lang->code }}"
                style="display:none;">

                <!-- Splash Section -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-primary mb-4">Splash Section</h4>

                    <!-- Label -->
                    <div class="mb-4">
                        <label class="text-white">
                            Splash Label ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[splash][label][{{ $lang->code }}]"
                            value="{{ old('content.splash.label.'.$lang->code, $content['splash']['label'][$lang->code] ?? '') }}"
                            placeholder="Last Step"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Title -->
                    <div class="mb-4">
                        <label class="text-white">
                            Splash Title ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[splash][title][{{ $lang->code }}]"
                            value="{{ old('content.splash.title.'.$lang->code, $content['splash']['title'][$lang->code] ?? '') }}"
                            placeholder="The Past"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Title -->
                    <div class="mb-4">
                        <label class="text-white">
                            Select Anyone Title ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[splash][select][{{ $lang->code }}]"
                            value="{{ old('content.splash.select.'.$lang->code, $content['splash']['select'][$lang->code] ?? '') }}"
                            placeholder="The Past"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- RESULT PAGE -->
        <div class="page-block" id="result_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">Result Page Content</h3>

            @foreach($languages as $lang)

            <div class="lang-field result-field"
                data-lang="{{ $lang->code }}"
                style="display:none;">

                <!-- SCREEN SECTION -->
                <div class="border border-outline-variant/20 rounded-xl p-5 mb-6">

                    <h4 class="font-bold text-primary mb-4">Screen Section</h4>

                    <!-- INDUSTRY -->
                    <div class="mb-5">

                        <h5 class="font-semibold text-white mb-2">Industry</h5>

                        <input type="text"
                            name="content[screen][industry][heading][{{ $lang->code }}]"
                            value="{{ old('content.screen.industry.heading.'.$lang->code, $content['screen']['industry']['heading'][$lang->code] ?? '') }}"
                            placeholder="Recommended Industries"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                    </div>

                    <!-- BEST FIT CARD -->
                    <div class="mb-5">

                        <h5 class="font-semibold text-white mb-2">Best Fit Card</h5>

                        <div class="space-y-3">

                            <input type="text"
                                name="content[screen][bestFitCard][heading][{{ $lang->code }}]"
                                value="{{ old('content.screen.bestFitCard.heading.'.$lang->code, $content['screen']['bestFitCard']['heading'][$lang->code] ?? '') }}"
                                placeholder="Best Fits for You"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <input type="text"
                                name="content[screen][bestFitCard][button][{{ $lang->code }}]"
                                value="{{ old('content.screen.bestFitCard.button.'.$lang->code, $content['screen']['bestFitCard']['button'][$lang->code] ?? '') }}"
                                placeholder="Explore Degree"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <input type="text"
                                name="content[screen][bestFitCard][fees][{{ $lang->code }}]"
                                value="{{ old('content.screen.bestFitCard.fees.'.$lang->code, $content['screen']['bestFitCard']['fees'][$lang->code] ?? '') }}"
                                placeholder="Fees"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        </div>

                    </div>

                    <!-- CARD -->
                    <div class="mb-5">

                        <h5 class="font-semibold text-white mb-2">Card Section</h5>

                        <div class="space-y-3">

                            <input type="text"
                                name="content[screen][card][shortText][{{ $lang->code }}]"
                                value="{{ old('content.screen.card.shortText.'.$lang->code, $content['screen']['card']['shortText'][$lang->code] ?? '') }}"
                                placeholder="You Are"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <input type="text"
                                name="content[screen][card][button][{{ $lang->code }}]"
                                value="{{ old('content.screen.card.button.'.$lang->code, $content['screen']['card']['button'][$lang->code] ?? '') }}"
                                placeholder="View Insights"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        </div>

                    </div>

                    <!-- NEXT STEP -->
                    <div class="mb-3">

                        <h5 class="font-semibold text-white mb-2">Next Step</h5>

                        <div class="space-y-3">

                            <input type="text"
                                name="content[screen][nextStep][heading][{{ $lang->code }}]"
                                value="{{ old('content.screen.nextStep.heading.'.$lang->code, $content['screen']['nextStep']['heading'][$lang->code] ?? '') }}"
                                placeholder="Take the next step"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <textarea
                                name="content[screen][nextStep][desc][{{ $lang->code }}]"
                                placeholder="Seats fill fast..."
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.screen.nextStep.desc.'.$lang->code, $content['screen']['nextStep']['desc'][$lang->code] ?? '') }}</textarea>

                            <input type="text"
                                name="content[screen][nextStep][buttons][play][{{ $lang->code }}]"
                                value="{{ old('content.screen.nextStep.buttons.play.'.$lang->code, $content['screen']['nextStep']['buttons']['play'][$lang->code] ?? '') }}"
                                placeholder="Play Again"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <input type="text"
                                name="content[screen][nextStep][buttons][result][save][{{ $lang->code }}]"
                                value="{{ old('content.screen.nextStep.buttons.result.save.'.$lang->code, $content['screen']['nextStep']['buttons']['result']['save'][$lang->code] ?? '') }}"
                                placeholder="Save Results"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <input type="text"
                                name="content[screen][nextStep][buttons][result][remove][{{ $lang->code }}]"
                                value="{{ old('content.screen.nextStep.buttons.result.remove.'.$lang->code, $content['screen']['nextStep']['buttons']['result']['remove'][$lang->code] ?? '') }}"
                                placeholder="Remove Results"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                            <input type="text"
                                name="content[screen][nextStep][buttons][share][{{ $lang->code }}]"
                                value="{{ old('content.screen.nextStep.buttons.share.'.$lang->code, $content['screen']['nextStep']['buttons']['share'][$lang->code] ?? '') }}"
                                placeholder="Share with your friends"
                                class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        </div>

                    </div>

                </div>

                <!-- DEGREE -->
                <div class="border border-outline-variant/20 rounded-xl p-5 mb-6">

                    <h4 class="font-bold text-primary mb-4">Degree Section</h4>

                    <div class="space-y-3">

                        <input type="text"
                            name="content[degree][perfectText][{{ $lang->code }}]"
                            value="{{ old('content.degree.perfectText.'.$lang->code, $content['degree']['perfectText'][$lang->code] ?? '') }}"
                            placeholder="Why this is perfect for you"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][eligibility][{{ $lang->code }}]"
                            value="{{ old('content.degree.eligibility.'.$lang->code, $content['degree']['eligibility'][$lang->code] ?? '') }}"
                            placeholder="Eligibility"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][mode][{{ $lang->code }}]"
                            value="{{ old('content.degree.mode.'.$lang->code, $content['degree']['mode'][$lang->code] ?? '') }}"
                            placeholder="Mode"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][fees][{{ $lang->code }}]"
                            value="{{ old('content.degree.fees.'.$lang->code, $content['degree']['fees'][$lang->code] ?? '') }}"
                            placeholder="Fees"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][orderList][1][{{ $lang->code }}]"
                            value="{{ old('content.degree.orderList.1.'.$lang->code, $content['degree']['orderList']['1'][$lang->code] ?? '') }}"
                            placeholder="What you will learn"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][orderList][2][{{ $lang->code }}]"
                            value="{{ old('content.degree.orderList.2.'.$lang->code, $content['degree']['orderList']['2'][$lang->code] ?? '') }}"
                            placeholder="Where this can take you"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][universityCard][heading][{{ $lang->code }}]"
                            value="{{ old('content.degree.universityCard.heading.'.$lang->code, $content['degree']['universityCard']['heading'][$lang->code] ?? '') }}"
                            placeholder="Universities offering this course"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[degree][universityCard][button][{{ $lang->code }}]"
                            value="{{ old('content.degree.universityCard.button.'.$lang->code, $content['degree']['universityCard']['button'][$lang->code] ?? '') }}"
                            placeholder="Explore University"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                    </div>

                </div>

                <!-- INSIGHT -->
                <div class="border border-outline-variant/20 rounded-xl p-5 mb-6">

                    <h4 class="font-bold text-primary mb-4">Insight Section</h4>

                    <div class="space-y-3">

                        <input type="text"
                            name="content[insight][quoteHeading][{{ $lang->code }}]"
                            value="{{ old('content.insight.quoteHeading.'.$lang->code, $content['insight']['quoteHeading'][$lang->code] ?? '') }}"
                            placeholder="People like you"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[insight][quote][{{ $lang->code }}]"
                            value="{{ old('content.insight.quote.'.$lang->code, $content['insight']['quote'][$lang->code] ?? '') }}"
                            placeholder="Your mindset aligns with"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                        <input type="text"
                            name="content[insight][popupText][{{ $lang->code }}]"
                            value="{{ old('content.insight.popupText.'.$lang->code, $content['insight']['popupText'][$lang->code] ?? '') }}"
                            placeholder="Best Careers for "
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">

                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- STEP TWO PAGE -->
        <div class="page-block" id="steptwo_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">Step Two Page Content</h3>

            @foreach($languages as $lang)

            <div class="lang-field steptwo-field"
                data-lang="{{ $lang->code }}"
                style="display:none;">

                <!-- Splash Section -->
                <div class="border border-outline-variant/20 rounded-xl p-4 mb-5">

                    <h4 class="font-bold text-primary mb-4">Splash Section</h4>

                    <!-- Label -->
                    <div class="mb-4">
                        <label class="text-white">
                            Splash Label ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[splash][label][{{ $lang->code }}]"
                            value="{{ old('content.splash.label.'.$lang->code, $content['splash']['label'][$lang->code] ?? '') }}"
                            placeholder="Second Step"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Title -->
                    <div class="mb-4">
                        <label class="text-white">
                            Splash Title ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[splash][title][{{ $lang->code }}]"
                            value="{{ old('content.splash.title.'.$lang->code, $content['splash']['title'][$lang->code] ?? '') }}"
                            placeholder="The Present"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <!-- GAMEPLAY POPUP PAGE -->
        <div class="page-block" id="gameplay_popup_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">
                Gameplay Popup Content
            </h3>

            @foreach($languages as $lang)

            <div class="lang-field gameplay-popup-field"
                data-lang="{{ $lang->code }}"
                style="display:none;">

                <!-- Gameplay Popup Section -->
                <div class="border border-outline-variant/20 rounded-xl p-5 mb-5">

                    <h4 class="font-bold text-primary mb-4">
                        Gameplay Popup
                    </h4>

                    <!-- Heading -->
                    <div class="mb-4">
                        <label class="text-white">
                            Heading ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[gameplay_pop][heading][{{ $lang->code }}]"
                            value="{{ old('content.gameplay_pop.heading.'.$lang->code, $content['gameplay_pop']['heading'][$lang->code] ?? '') }}"
                            placeholder="You’re almost there…"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Description -->
                    <div class="mb-4">
                        <label class="text-white">
                            Description ({{ strtoupper($lang->code) }})
                        </label>

                        <textarea
                            name="content[gameplay_pop][description][{{ $lang->code }}]"
                            placeholder="Just a few more swipes..."
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.gameplay_pop.description.'.$lang->code, $content['gameplay_pop']['description'][$lang->code] ?? '') }}</textarea>
                    </div>

                    <!-- Continue Button -->
                    <div class="mb-4">
                        <label class="text-white">
                            Continue Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[gameplay_pop][continueBtn][{{ $lang->code }}]"
                            value="{{ old('content.gameplay_pop.continueBtn.'.$lang->code, $content['gameplay_pop']['continueBtn'][$lang->code] ?? '') }}"
                            placeholder="Continue Swipping"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Exit Button -->
                    <div class="mb-4">
                        <label class="text-white">
                            Exit Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[gameplay_pop][exitBtn][{{ $lang->code }}]"
                            value="{{ old('content.gameplay_pop.exitBtn.'.$lang->code, $content['gameplay_pop']['exitBtn'][$lang->code] ?? '') }}"
                            placeholder="Exit Anyway"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Mcq Continue Button -->
                    <div class="mb-4">
                        <label class="text-white">
                            Mcq Continue Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[gameplay_pop][mcqcontinueBtn][{{ $lang->code }}]"
                            value="{{ old('content.gameplay_pop.mcqcontinueBtn.'.$lang->code, $content['gameplay_pop']['mcqcontinueBtn'][$lang->code] ?? '') }}"
                            placeholder="Continue Answering"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <div class="page-block" id="logout_screen_page" style="display:none;">

            <h3 class="text-lg font-bold mb-6 text-white">
                Logout Screen Content
            </h3>

            @foreach($languages as $lang)

            <div class="lang-field logout-screen-field"
                data-lang="{{ $lang->code }}"
                style="display:none;">

                <!-- Logout Screen Section -->
                <div class="border border-outline-variant/20 rounded-xl p-5 mb-5">

                    <h4 class="font-bold text-primary mb-4">
                        Logout Screen
                    </h4>

                    <!-- Label -->
                    <div class="mb-4">
                        <label class="text-white">
                            Label ({{ strtoupper($lang->code) }})
                        </label>

                        <textarea
                            name="content[logout_screen][label][{{ $lang->code }}]"
                            placeholder="This section can't be undone. Are you sure you want to continue?"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">{{ old('content.logout_screen.label.'.$lang->code, $content['logout_screen']['label'][$lang->code] ?? '') }}</textarea>
                    </div>

                    <!-- Cancel Button -->
                    <div class="mb-4">
                        <label class="text-white">
                            Cancel Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[logout_screen][cancelBtn][{{ $lang->code }}]"
                            value="{{ old('content.logout_screen.cancelBtn.'.$lang->code, $content['logout_screen']['cancelBtn'][$lang->code] ?? '') }}"
                            placeholder="Cancel"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                    <!-- Logout Button -->
                    <div class="mb-4">
                        <label class="text-white">
                            Logout Button ({{ strtoupper($lang->code) }})
                        </label>

                        <input type="text"
                            name="content[logout_screen][logBtn][{{ $lang->code }}]"
                            value="{{ old('content.logout_screen.logBtn.'.$lang->code, $content['logout_screen']['logBtn'][$lang->code] ?? '') }}"
                            placeholder="Yes, Logout"
                            class="w-full px-5 py-3 bg-[#0d1117] border border-outline-variant/20 rounded-xl text-white">
                    </div>

                </div>

            </div>

            @endforeach

        </div>
        <script>
            function switchLang(lang) {

                // Show current language fields
                document.querySelectorAll('.lang-field').forEach(el => {

                    el.style.display = (el.dataset.lang === lang) ?
                        'block' :
                        'none';
                });

                // Active language tab UI
                document.querySelectorAll('.lang-tab').forEach(btn => {

                    btn.classList.remove(
                        'bg-primary',
                        'text-black',
                        'shadow-[0_0_15px_rgba(0,255,157,0.4)]'
                    );

                    btn.classList.add(
                        'text-gray-300',
                        'border',
                        'border-gray-700'
                    );

                    if (btn.dataset.lang === lang) {

                        btn.classList.remove(
                            'text-gray-300',
                            'border-gray-700'
                        );

                        btn.classList.add(
                            'bg-primary',
                            'text-black',
                            'shadow-[0_0_15px_rgba(0,255,157,0.4)]'
                        );
                    }
                });
            }

            document.addEventListener('DOMContentLoaded', function() {

                const selector = document.getElementById('pageSelector');

                /*
                |--------------------------------------------------------------------------
                | Disable / Enable Inputs
                |--------------------------------------------------------------------------
                */
                function disableInputs(block, status = true) {

                    block.querySelectorAll(
                        'input, textarea, select, button'
                    ).forEach(el => {

                        // keep lang buttons active
                        if (el.classList.contains('lang-tab')) {
                            return;
                        }

                        el.disabled = status;
                    });
                }

                /*
                |--------------------------------------------------------------------------
                | Show Selected Page Block
                |--------------------------------------------------------------------------
                */
                function showPage(value) {

                    // Hide all blocks
                    document.querySelectorAll('.page-block').forEach(el => {

                        el.style.display = 'none';

                        disableInputs(el, true);
                    });

                    // Show selected block
                    if (value) {

                        const block = document.getElementById(value);

                        if (block) {

                            block.style.display = 'block';

                            disableInputs(block, false);
                        }
                    }
                }

                /*
                |--------------------------------------------------------------------------
                | Readonly Dropdown On Edit
                |--------------------------------------------------------------------------
                */
                if (selector?.dataset.readonly === 'true') {

                    const currentValue = selector.value;

                    selector.addEventListener('change', function() {

                        this.value = currentValue;
                    });

                    selector.addEventListener('mousedown', function(e) {

                        e.preventDefault();
                    });

                    selector.addEventListener('keydown', function(e) {

                        e.preventDefault();
                    });
                }


                selector?.addEventListener('change', function() {

                    let slug = this.value;

                    if (!slug) return;

                    fetch(`/pages/${slug}/check`)
                        .then(res => res.json())
                        .then(res => {

                            if (res.exists) {
                                // alert(JSON.stringify(res.page.id, null, 2));

                                // alert('This page already exists. Redirecting to edit page. Clic');

                                window.location.href = `/pages/${res.page.id}/edit`;

                                return;
                            }

                            showPage(slug);
                        });
                });

                /*
                |--------------------------------------------------------------------------
                | Auto Load Edit Page
                |--------------------------------------------------------------------------
                */
                if (selector?.value) {

                    showPage(selector.value);
                }

                /*
                |--------------------------------------------------------------------------
                | Default Language
                |--------------------------------------------------------------------------
                */
                const firstLang = document.querySelector('.lang-tab');

                if (firstLang) {

                    switchLang(firstLang.dataset.lang);
                }
            });
        </script>