@extends('frontend.layouts.main')
@php
$seos = App\Models\SeoSetting::first();
@endphp
<title>{{$seos->meta_title}}</title>

@section('content')

<!-- =====main-section====== -->
<main class="pb-20 xs:pb-0">

    <!-- ===banner-section=== -->
    <section class="pt-[210px] pb-10 md:pt-[80px] lg:pt-[100px] xl:pt-[120px] xl:pb-[50px] relative banner_section">
        <!-- =bg-image= -->
        <img src="{{ asset('admin/bannerImages/' . $homes->banner_image) }}" alt="layer image"
            class="absolute top-0 left-0  w-full h-full md:h-[65%] lg:h-[70%] xl:h-[83%] 2xl:h-full pointer-events-none 2xl:hidden object-cover"
            loading="lazy">
        <!-- =content= -->

        <div
            class="container_width relative flex justify-between md:items-center xl:items-end z-10">
            <!-- =left-content= -->
            @if(Auth::user())
                <div class="xl:pb-[136px]" style="margin-top: 150px;">
                    <h1
                        class="text-[22px] xs:text-3xl sm:text-4xl lg:text-5xl xl:text-[56px] 2xl:text-[64px] font-bold text-white mb-2.5 xl:mb-10">
                        {{ $homes->banner_title}}
                    </h1>
                    <p
                        class="text-white text-sm lg:text-lg xl:text-[28px] font-normal xl:leading-[37px]">{{ $homes->banner_subtitle }}</p>
                </div>
            @else
                <div class="xl:pb-[136px] mb-20">
                    <h1
                        class=" text-[22px] xs:text-3xl sm:text-4xl lg:text-5xl xl:text-[56px] 2xl:text-[64px] font-bold text-white mb-2.5 xl:mb-10">
                        {{ $homes->banner_title}}
                    </h1>
                    <p
                        class="text-white text-sm lg:text-lg xl:text-[28px] font-normal xl:leading-[37px]">{{ $homes->banner_subtitle }}</p>
                </div>
            @endif

            <!-- =right-content= -->
            @if(Auth::user())
                <div style="width:460px;"></div>
            @else
                <form action="{{route('register_from_home') }}" method="POST"
                    class="w-[460px] bg-white p-4 flex-col gap-3 hidden md:flex md:shadow-md" id="registerForm">
                    @csrf


                    <input type="hidden" name="dob" id="dob" value="{{ old('dob') }}">


                    <input type="hidden" name="age" id="age" value="{{ old('age') }}">
                    <input type="hidden" name="g-recaptcha" value="" id="g-recaptcha_main">
                    <input type="hidden" name="g-recaptcha-response" value="" id="g-recaptcha-response_main">

                        <!-- =item= -->
                    <div class="w-full flex gap-5 items-center">

                        <!-- =facebook= -->
                        @if($social_media_login->facebook_activation == 1)
                            <div
                                class="flex items-center justify-center py-[10px] border-[#374756] border-[0.5px] gap-2 rounded-[5px] duration-300 hover:bg-red-color hover:border-red-color group flex-1 cursor-pointer"
                                onclick="window.location.href='{{ route('auth.facebook') }}'">
                                <img src="{{ asset('frontend/src/images/facebook_icon.png') }}"
                                    alt="google logo"
                                    class="w-6 h-6 group-hover:invert-[1] duration-200">
                                <span
                                    class="text-sm text-black font-light group-hover:text-white duration-200">{{ translate('Register') }}</span>
                            </div>
                        @endif

                        <!-- =google= -->
                        @if($social_media_login->google_activation == 1)
                            <div
                                class="flex items-center justify-center py-[10px] border-[#374756] border-[0.5px] gap-2 rounded-[5px] duration-300 hover:bg-red-color hover:border-red-color group flex-1 cursor-pointer"
                                onclick="window.location.href='{{ route('google.redirect') }}'">
                                <img src="{{ asset('frontend/src/images/google_icon.png') }}"
                                    alt="google logo"
                                    class="w-6 h-6 group-hover:invert-[1] duration-200">
                                <span
                                    class="text-sm text-black font-light group-hover:text-white duration-200">{{ translate('Register') }}</span>
                            </div>
                        @endif

                    </div>

                        <!-- =item= -->
                    <div class="w-full">
                        <h3 class="text-sm font-light text-black mb-1">{{ translate('I am a') }}:</h3>
                        <div class="w-full flex gap-5 items-center">
                                <!-- =male= -->
                                <div class="flex items-center flex-1">
                                <input type="radio" name="gender" value="male"
                                    id="gender-1" class="radio_button" required>
                                <label for="gender-1"
                                    class=" radio_box w-full h-full py-[10px] border-[0.5px] rounded-[5px] flex items-center justify-center"><span>{{ translate('Male') }}</span></label>
                            </div>
                            <!-- =female= -->
                            <div class="flex items-center flex-1">
                                <input type="radio" name="gender" value="female"
                                    id="gender-2" class="radio_button" required>
                                <label for="gender-2"
                                    class=" radio_box w-full h-full py-[10px] border-[0.5px] rounded-[5px] flex items-center justify-center"><span>{{ translate('Female') }}</span></label>
                            </div>
                        </div>
                        @error('gender')
                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>


                    <!-- =item= -->
                    <div class="w-full">
                        <h3
                            class="text-sm font-light text-black mb-1">{{ translate('Date of Birth') }} *</h3>
                        <div class="w-full flex gap-5 items-center">
                            {{-- <!-- =day= -->
                            <select name="day" id="day"
                                class="w-[100px] bg-white p-[10px] border-[0.5px] rounded-[5px] border-[#374756]" required>
                                <option selected value="">Day</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                            <!-- =Maand= -->
                            <select name="Maand" id="Maand"
                                class="flex-1 bg-white p-[10px] border-[0.5px] rounded-[5px] border-[#374756]" required>
                                <option selected value="">Month</option>
                                <option value="January">January</option>
                                <option value="February">February</option>
                                <option value="March">March</option>
                                <option value="April">April</option>
                                <option value="May">May</option>
                                <option value="June">June</option>
                                <option value="July">July</option>
                                <option value="August">August</option>
                                <option value="September">September</option>
                                <option value="October">October</option>
                                <option value="November">November</option>
                                <option value="December">December</option>
                            </select>
                            <!-- =Jaar= -->
                            <select name="Jaar" id="Jaar"
                                class="w-[110px] bg-white p-[10px] border-[0.5px] rounded-[5px] border-[#374756]" required>
                                <option selected value="">Year</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                            </select> --}}

                            {{-- <input type="hidden" name="dob" id="dob" value="{{ isset($user->dob) ? $user->dob : old('dob', '') }}"> --}}


                            <select name="day" id="day" class="w-[100px] bg-white p-2 border border-slate-200 dark:border-zinc-500 rounded-md border-[0.5px] rounded-[5px]" required>
                                <option value="">Day</option>
                                @for ($i = 1; $i <= 31; $i++)
                                    <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}"
                                        {{ isset($user['dob']) && \Carbon\Carbon::parse($user['dob'])->day == $i ? 'selected' : '' }}>
                                        {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                                    </option>
                                @endfor
                            </select>

                            <!-- Month -->
                            <select name="month" id="Maand" class="flex-1 bg-white p-2 border border-slate-200 dark:border-zinc-500 rounded-md border-[0.5px] rounded-[5px]" required>
                                <option value="">Month</option>
                                @foreach (['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $index => $month)
                                    <option value="{{ $month }}"
                                        {{ isset($user['dob']) && \Carbon\Carbon::parse($user['dob'])->month == $index + 1 ? 'selected' : '' }}>
                                        {{ $month }}
                                    </option>
                                @endforeach
                            </select>

                            <!-- Year -->
                            <select name="year" id="Jaar" class="w-[110px] bg-white p-2 border border-slate-200 dark:border-zinc-500 rounded-md border-[0.5px] rounded-[5px]" required>
                                <option value="">Year</option>
                                @for ($i = 1980; $i <= 2015; $i++)
                                    <option value="{{ $i }}"
                                        {{ isset($user['dob']) && \Carbon\Carbon::parse($user['dob'])->year == $i ? 'selected' : '' }}>
                                        {{ $i }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                    </div>


                    <div class="w-full">
                        <div class="flex gap-4">
                            <div class="w-full">
                                <h3 class="text-sm font-light text-black mb-1">{{ translate('Am Looking for') }}:</h3>
                                <div class="w-full">
                                    <select id="am_looking_for_id" name="am_looking_for_id"
                                        class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required>
                                        <option value="" selected>Select</option>
                                        @foreach($amLookingFors->metas as $status)
                                            <option value="{{ $status->id }}" {{ old('am_looking_for_id') == $status->id ? 'selected' : '' }}>{{ $status->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('am_looking_for_id')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- =item= -->
                    <div class="w-full">
                        <div class="flex gap-4">
                            <div class="w-1/2">
                                <h3
                                    class="text-sm font-light text-black mb-1">{{ translate('First Name') }}</h3>

                                    <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}"
                                    class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required>
                                @error('first_name')
                                    <span style="color:red;" class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="w-1/2">
                                <h3
                                    class="text-sm font-light text-black mb-1">{{ translate('Last Name') }}</h3>

                                    <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}"
                                    class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required>
                                @error('last_name')
                                    <span style="color:red;" class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- =item= -->
                    <div class="w-full">
                        <h3
                                class="text-sm font-light text-black mb-1">{{ translate('Username')}}</h3>

                                <input type="text" id="user_name" name="user_name" value="{{ old('user_name') }}" autocomplete="off"
                                class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required oninput="checkAbuseWords()">
                        @error('user_name')
                            <span style="color:red;" class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- =item= -->
                    <div class="w-full">
                        <div class="flex gap-4">
                            <div class="w-1/2">
                                <h3
                                    class="text-sm font-light text-black mb-1">{{ translate('Email Address') }}</h3>
                                    <input type="email" name="email" value="{{ old('email') }}"
                                    class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required>

                                    @error('email')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                            </div>

                            <div class="w-1/2">
                                <h3
                                    class="text-sm font-light text-black mb-1">{{ translate('Password') }}</h3>
                                    <input type="password" name="password" id="password" autocomplete="off"
                                    class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-medium placeholder:text-black placeholder:text-sm">

                                    @error('password')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                            </div>
                        </div>
                    </div>

                    {{-- <button class="w-full bg-[#f9f9f9] py-[10px] px-[26px] border-[0.5px] rounded-[5px] border-[#374756] flex items-center justify-between gap-2.5">
                        <div class="flex items-center gap-2.5 flex-1">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.5 9.16634L10 11.6663L18.3333 3.33301" stroke="#EA1378" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M17.5 10V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V4.16667C2.5 3.72464 2.67559 3.30072 2.98816 2.98816C3.30072 2.67559 3.72464 2.5 4.16667 2.5H13.3333" stroke="#EA1378" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <span class="text-[#555] text-sm font-light">Ik
                                ben een mens</span>
                        </div>
                        <picture>
                            <img src="./src/images/captcha.png" alt="captcha image" class="w-[40px] h-[40px]">
                        </picture>
                    </button> --}}

                     @if($recaptchaKeys)
                    <div class="g-recaptcha" data-sitekey="{{ config('google_captcha.site_key') }}" data-callback="recaptchaCallbackForm1"></div>
                    @endif

                    <input type="submit" value="Register" id="submitButton" class="w-full bg-blue-color py-[10px] px-[16px] border-[0.5px] rounded-[5px] border-blue-color text-white text-base font-light duration-300 hover:bg-red-color cursor-pointer hover:border-red-color">

                    {{-- <input type="submit" value="Register" id="submitButton"
                           class="w-full bg-blue-color py-[10px] px-[16px] border-[0.5px] rounded-[5px] border-blue-color text-white text-base font-light duration-300 hover:bg-red-color cursor-pointer hover:border-red-color"> --}}

                    <!-- =submit-button= -->

                    <p
                        class="w-full text-[#919ba4] text-[12px] font-light leading-[20px]">
                        {{ translate('By choosing "Register", you agree to our Terms of Use (including Mandatory Dispute Arbitration) and understand our Privacy Statement.') }}
                    </p>
                </form>
            @endif
        </div>
    </section>





    @if(Auth::user())

    @else
    <!-- ===small-device-login-section=== -->
    <form action="{{route('register_from_home') }}" method="POST"
        class="w-full max-w-[500px] mx-auto bg-white p-4 flex flex-col gap-3 md:hidden" id="registerForm2">
        @csrf
        <input type="hidden" name="dob" id="dob_s" value="{{ old('dob') }}">
        <input type="hidden" name="g-recaptcha" value="" id="g-recaptcha_s">

        <input type="hidden" name="g-recaptcha-response" value="" id="g-recaptcha-response_s">


        <!-- =item= -->
        <div class="w-full flex gap-4 items-center">
            <!-- =facebook= -->
            @if($social_media_login->facebook_activation == 1)
            <div
                class="flex items-center justify-center py-[10px] border-[#374756] border-[0.5px] gap-2 rounded-[5px] duration-300 hover:bg-red-color hover:border-red-color group flex-1 cursor-pointer"
                onclick="window.location.href='{{ route('auth.facebook') }}'">
                <img src="{{ asset('frontend/src/images/facebook_icon.png') }}"
                    alt="google logo"
                    class="w-6 h-6 group-hover:invert-[1] duration-200">
                <span
                    class="text-sm text-black font-light group-hover:text-white duration-200">{{ translate('Register') }}</span>
            </div>
        @endif

        <!-- =google= -->
        @if($social_media_login->google_activation == 1)
            <div
                class="flex items-center justify-center py-[10px] border-[#374756] border-[0.5px] gap-2 rounded-[5px] duration-300 hover:bg-red-color hover:border-red-color group flex-1 cursor-pointer"
                onclick="window.location.href='{{ route('google.redirect') }}'">
                <img src="{{ asset('frontend/src/images/google_icon.png') }}"
                    alt="google logo"
                    class="w-6 h-6 group-hover:invert-[1] duration-200">
                <span
                    class="text-sm text-black font-light group-hover:text-white duration-200">{{ translate('Register') }}</span>
            </div>
        @endif
        </div>
        <!-- =item= -->
        <div class="w-full">
            <h3 class="text-sm font-light text-black mb-1">{{ translate('I am a') }}:</h3>
            <div class="w-full flex gap-5 items-center">
                <!-- =male= -->
                <div class="flex items-center flex-1">
                    <input type="radio" name="gender" value="male"
                        id="gender-s1" class="radio_button" required>
                    <label for="gender-s1"
                        class=" radio_box w-full h-full py-[10px] border-[0.5px] rounded-[5px] flex items-center justify-center"><span>{{ translate('Male') }}</span></label>
                </div>
                <!-- =female= -->
                <div class="flex items-center flex-1">
                    <input type="radio" name="gender" value="female"
                        id="gender-s2" class="radio_button" required>
                    <label for="gender-s2"
                        class=" radio_box w-full h-full py-[10px] border-[0.5px] rounded-[5px] flex items-center justify-center"><span>{{ translate('Female') }}</span></label>
                </div>
            </div>
        </div>
        <!-- =item= -->
        <div class="w-full">
            <h3
                class="text-sm font-light text-black mb-1">{{ translate('Am Looking for') }}:</h3>
                <div class="w-full">
                    <select id="am_looking_for_ids" name="am_looking_for_id"  required
                class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                    <option value="" selected>Select</option>
                    @foreach($amLookingFors->metas as $status)
                    <option value="{{ $status->id }}" {{ old('am_looking_for_id') == $status->id ? 'selected' : '' }}>{{ $status->name }}</option>
                    @endforeach
            </select>
            @error('am_looking_for_id')
            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
            @enderror
                </div>
        </div>
        <!-- =item= -->
        <input type="hidden" name="age" id="s_age" value="{{ old('age') }}" readonly>


              <div class="w-full">
                        <h3
                            class="text-sm font-light text-black mb-1">{{ translate('Date of Birth') }} *</h3>
                        <div class="w-full flex gap-5 items-center">
                            <!-- Day -->
                            <select name="day" id="day_s" class="w-[100px] bg-white p-2 border border-[0.5px] rounded-[5px] border-slate-200 dark:border-zinc-500 rounded-md" required>
                                <option value="">Day</option>
                                @for ($i = 1; $i <= 31; $i++)
                                    <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}"
                                        {{ isset($user['dob']) && \Carbon\Carbon::parse($user['dob'])->day == $i ? 'selected' : '' }}>
                                        {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                                    </option>
                                @endfor
                            </select>

                            <!-- Month -->
                            <select name="month" id="Maand_s" class="flex-1 bg-white p-2 border border-[0.5px] rounded-[5px] border-slate-200 dark:border-zinc-500 rounded-md" required>
                                <option value="">Month</option>
                                @foreach (['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $index => $month)
                                    <option value="{{ $month }}"
                                        {{ isset($user['dob']) && \Carbon\Carbon::parse($user['dob'])->month == $index + 1 ? 'selected' : '' }}>
                                        {{ $month }}
                                    </option>
                                @endforeach
                            </select>

                            <!-- Year -->
                            <select name="year" id="Jaar_s" class="w-[110px] bg-white p-2 border border-[0.5px] rounded-[5px] border-slate-200 dark:border-zinc-500 rounded-md" required>
                                <option value="">Year</option>
                                @for ($i = 1980; $i <= 2015; $i++)
                                    <option value="{{ $i }}"
                                        {{ isset($user['dob']) && \Carbon\Carbon::parse($user['dob'])->year == $i ? 'selected' : '' }}>
                                        {{ $i }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                    </div>



        <div class="w-full">
            <h3
                    class="text-sm font-light text-black mb-1">{{ translate('First Name') }}</h3>

            <input type="text"  id="first_name_s" name="first_name" value="{{ old('first_name') }}" class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required >
            @error('first_name')
                <span style="color:red;" class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div class="w-full">
            <h3
                    class="text-sm font-light text-black mb-1">{{ translate('Last Name') }}</h3>

            <input type="text"  id="last_name_s" name="last_name" value="{{ old('last_name') }}" class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required >
            @error('last_name')
                <span style="color:red;" class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div class="w-full">
            <h3
                    class="text-sm font-light text-black mb-1">{{ translate('Username')}}</h3>

            <input type="text"  id="user_name_s" name="user_name" value="{{ old('user_name') }}" class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required oninput="checkAbuseWordsSmall()">
            @error('user_name')
                <span style="color:red;" class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

            <!-- =item= -->
            <div class="w-full">
            <h3
                class="text-sm font-light text-black mb-1">{{ translate('Email Address') }}</h3>
            <input type="email" name="email"
                placeholder="" value="{{ old('email') }}"
                class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-light placeholder:text-black placeholder:text-sm" required>

                @error('email')
                <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                @enderror
                </div>

        <!-- =item= -->
        <div class="w-full">
            <h3
                class="text-sm font-light text-black mb-1">{{ translate('Password') }}</h3>
            <input type="password" name="password" id="password_s"
                placeholder=""
                class="w-full bg-white p-[10px] pr-[10px] border-[0.5px] rounded-[5px] border-[#374756] focus:outline-none text-sm text-black font-light placeholder:font-medium placeholder:text-black placeholder:text-sm">

                @error('password')
                <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                @enderror
                </div>
        <!-- =item-captcha= -->

        @if($recaptchaKeys)
        <div class="g-recaptcha" data-sitekey="{{ config('google_captcha.site_key') }}" data-callback="recaptchaCallbackForm2"></div>

        @endif
        <input type="submit" value="Register" id="submitButton2" class="w-full bg-blue-color py-[10px] px-[16px] border-[0.5px] rounded-[5px] border-blue-color text-white text-base font-light duration-300 hover:bg-red-color cursor-pointer hover:border-red-color">




        <p
            class="w-full text-[#919ba4] text-[12px] font-light leading-[20px]">
            {{ translate('By choosing "Register", you agree to our Terms of Use (including Mandatory Dispute Arbitration) and understand our Privacy Statement.') }}
        </p>

    </form>
    @endif
    <!-- ===relationship-section=== -->
    <section
        class="w-full py-[50px] xl:pt-[100px] xl:pb-[68px] bg-[#f7f8fb]">
        <div
            class="small_container flex items-center justify-between gap-6 flex-col-reverse sm:flex-row">
            <!-- =left-content= -->
            <div class="w-full md:w-1/2">
                <span
                    class="text-red-color text-base xl:text-[22px] font-semibold">
                    {{ $homes->value_title }}
                </span>
                <h2
                    class="text-black-color text-[22px] lg:text-3xl xl:text-4xl 2xl:text-[44px] font-bold 2xl:leading-[56px] mt-2.5 mb-5 xl:my-0">
                    {{ $homes->value_subtitle }}
                </h2>
                <p
                    class="text-[#676770] text-base font-normal leading-[23px]">
                    {{ $homes->value_description }}
                </p>
                <div class="pt-9 flex items-start gap-8 xl:gap-[53px]">
                    <div class="w-fit">
                        <h4
                            class="text-red-color text-xl font-bold xl:text-[40px] xl:font-semibold xl:leading-normal">
                            {{ $homes->matches_value }}
                        </h4>
                        <p
                            class="text-black-color text-xs xl:text-[20px] font-normal xl:leading-normal whitespace-nowrap">
                            {{ $homes->matches_name }}
                        </p>
                    </div>
                    <div class="w-fit">
                        <h4
                            class="text-red-color text-xl font-bold xl:text-[40px] xl:font-semibold xl:leading-normal">
                            {{ $homes->matched_value }}
                        </h4>
                        <p
                            class="text-black-color text-xs xl:text-[20px] font-normal xl:leading-normal whitespace-nowrap">
                            {{ $homes->matched_name }}
                        </p>
                    </div>
                    <div class="w-fit">
                        <h4
                            class="text-red-color text-xl font-bold xl:text-[40px] xl:font-semibold xl:leading-normal">
                            {{ $homes->register_value }}
                        </h4>
                        <p
                            class="text-black-color text-xs xl:text-[20px] font-normal xl:leading-normal whitespace-nowrap">
                            {{ $homes->register_name }}
                        </p>
                    </div>
                </div>
            </div>
            <!-- =right-content= -->
            <div
                class="w-full max-w-[400px] mx-auto md:max-w-none md:w-1/2">
                <picture><img src="{{ asset('admin/valueImages/' . $homes->value_image) }}"
                        alt="relationship image"></picture>
            </div>
        </div>
    </section>

    <!-- ==create-account-information-section== -->
    <section class="w-full py-[50px] xl:pt-[115px] xl:pb-[92px]">
        <div
            class="small_container flex items-center justify-between gap-10 md:gap-6 flex-col sm:flex-row">
            <!-- =left-content= -->
            <div
                class="max-w-[580px] sm:max-w-[350px] md:max-w-none md:w-1/2">
                <h3
                    class="text-black text-[22px] font-bold lg:text-[26px] xl:text-[34px] xl:leading-[48px] mb-[14px]">
                    {{ $homes->faq_title }}
                </h3>
                <p
                    class="text-[#011026] text-base font-normal xl:text-xl xl:leading-[31px]">
                    {{ $homes->faq_subtitle }}</p>
                <p
                    class="pt-4 pb-5 text-[#676770] text-sm xl:text-base font-normal leading-[23px]">
                    {{ $homes->faq_description }}
                </p>
                @guest
                    <a href="{{ route('profile-create')}}"
                        class="w-[148px] h-[51px] px-9 py-[15px] bg-blue-color rounded-[5px] justify-center items-center gap-2.5 inline-flex duration-300 hover:bg-red-color">
                        <span
                            class="text-white text-sm font-medium font-['Poppins'] whitespace-nowrap">
                            {{ $homes->profile_name }}
                        </span>
                    </a>
                @endguest
            </div>
            <!-- =right-content= -->
            <div class="flex w-full sm:flex-1 flex-col gap-5 md:w-1/2">

            @foreach($faqs as $index => $faq)
                <!-- =item= -->
                <div class="py-[27px] px-6 rounded-[5px] border-[1px] border-[#e0e0e0] flex items-center gap-5 group {{ $index == 1 ? 'md:ml-16' : '' }}">
                    <div class="w-10 h-10 min-w-[40px] bg-blue-color rounded-full flex items-center justify-center text-white text-xl font-medium group-hover:bg-red-color duration-300">
                        {{ $index + 1 }}
                    </div>
                    <div>
                        <h4 class="text-base font-bold xl:text-2xl text-black">
                            {{ $faq->title }}
                        </h4>
                        <p class="text-black text-[12px] xl:text-base font-light leading-[23px] xl:leading-none">
                            {{ $faq->description }}
                        </p>
                    </div>
                </div>
            @endforeach


                <!-- =item= -->
                <!-- <div
                    class="py-[27px] px-6 rounded-[5px] border-[1px] border-[#e0e0e0] flex items-center gap-5 group">
                    <div
                        class="w-10 h-10 min-w-[40px] bg-blue-color rounded-full flex items-center justify-center text-white text-xl font-medium group-hover:bg-red-color duration-300">01</div>
                    <div>
                        <h4
                            class="text-base font-bold xl:text-2xl text-black">Create
                            your free account</h4>
                        <p
                            class="text-black text-[12px] xl:text-base font-light leading-[23px] xl:leading-none">Nulla
                            vitae elit libero pharetra augue
                            dapibus.</p>
                    </div>
                </div> -->
                <!-- =item= -->
                <!-- <div
                    class="py-[27px] px-6 rounded-[5px] border-[1px] border-[#e0e0e0] flex items-center gap-5 group md:ml-16">
                    <div
                        class="w-10 h-10 min-w-[40px] bg-blue-color rounded-full flex items-center justify-center text-white text-xl font-medium group-hover:bg-red-color duration-300">02</div>
                    <div>
                        <h4
                            class="text-base font-bold xl:text-2xl text-black">Create
                            your details</h4>
                        <p
                            class="text-black text-[12px] xl:text-base font-light leading-[23px] xl:leading-none">Vivamus
                            sagittis lacus vel augue laoreet.</p>
                    </div>
                </div> -->
                <!-- =item= -->
                <!-- <div
                    class="py-[27px] px-6 rounded-[5px] border-[1px] border-[#e0e0e0] flex items-center gap-5 group">
                    <div
                        class="w-10 h-10 min-w-[40px] bg-blue-color rounded-full flex items-center justify-center text-white text-xl font-medium group-hover:bg-red-color duration-300">03</div>
                    <div>
                        <h4
                            class="text-base font-bold xl:text-2xl text-black">Connect
                            with users</h4>
                        <p
                            class="text-black text-[12px] xl:text-base font-light leading-[23px] xl:leading-none">Cras
                            mattis consectetur purus sit amet.</p>
                    </div>
                </div> -->

            </div>
        </div>
    </section>

    <!-- ==slider-section=== -->
    <section class="bg-[#f7f8fb] py-[50px] xl:pt-20 xl:pb-[150px]">
        <div class="small_container">
            <!-- =title-and-link= -->
            <div class="flex flex-col items-start justify-between mb-10">
                <h4
                    class="text-black text-[22px] font-bold xl:text-[32px]">{{ $homes->latest_text  }}</h4>
                    <p
                    class="text-[#011026] text-base font-normal mt-3 xl:text-xl xl:leading-[31px]">
                    {{ $homes->latest_subText }}</p>
                {{-- <a href="#"
                    class="w-[145px] h-[51px] px-9 py-[15px] bg-white rounded-[5px] border border-neutral-200 justify-center items-center gap-2.5 sm:inline-flex duration-300 hover:bg-red-color group hidden">
                    <p
                        class="text-neutral-700 text-sm font-medium group-hover:text-white whitespace-nowrap">{{ translate('View
                        More') }}</p>
                </a> --}}
            </div>
            <!-- ==swiper-slider== -->
            <div class="swiper swiper_slider !pb-10">
                <div style="height: 345px;" class="swiper-wrapper">
                    @foreach ($latestUsers as $latestUser)
                        <div class="swiper-slide">
                            <div
                                class="relative rounded-[5px] overflow-hidden max-w-[340px] mx-auto group">
                                <picture ><img
                                        src="{{ $latestUser->profile_image ? asset('uploads/profileImage/' . $latestUser->profile_image) : asset('uploads/profileImage/avatar.png') }}"
                                        alt="image"
                                        class="w-full group-hover:scale-105 duration-300"
                                        loading="lazy"></picture>
                                <h5
                                    class="absolute left-5 bottom-5 text-white text-base font-normal capitalize">{{$latestUser->name}}</h5>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- =title-and-link= -->
            <div
                class="flex items-center justify-between mt-5 mb-[30px]">
                <h4

                    class="text-black text-[22px] font-bold xl:text-[32px] capitalize">{{ $homes->blog_title }}</h4>
                <a href="{{ route('blog')}}"

                    class="w-[145px] h-[51px] px-9 py-[15px] bg-white rounded-[5px] border border-neutral-200 justify-center items-center gap-2.5 sm:inline-flex duration-300 hover:bg-red-color group hidden">
                    <span
                        class="text-neutral-700 text-sm font-medium group-hover:text-white whitespace-nowrap">{{ translate('View
                        More') }}</sp>
                </a>
            </div>
            <!-- ==mandatory-slider== -->
            <div class="flex justify-between gap-[27px]"
                style="scroll-snap-type: inline mandatory;overscroll-behavior-inline: contain; scrollbar-width: none; overflow: auto hidden;">
                <!-- =item= -->
                @foreach($blogs as $blog)
                <div
                    class="min-w-[310px] group snap-end xl:min-w-0 xl:max-w-[310px]">
                    <figure
                        class="w-full h-[212px] overflow-hidden rounded-[5px]">
                        <a href="{{ route('blog.detail', ['slug' => $blog->slug]) }}">
                        <img
                            src="{{ asset('admin/BlogsBanners/' . $blog->banner ) }}"
                            alt="slider image"
                            class="w-full h-full duration-300 group-hover:scale-105"
                            loading="lazy">
                            </a>
                    </figure>
                    <h5
                        class="mt-4 mb-3 text-lg text-black font-medium capitalize">
                                            </h5>
                    <p
                        class="text-sm text-[rgb(103,103,112)] font-normal mb-5 leading-[21px] mr-4">
                                            </p>
                    <a href="{{ route('blog.detail', ['slug' => $blog->slug]) }}"
                        class="w-[141px] h-[43px] px-9 py-[11px] bg-blue-color rounded-[5px] justify-center items-center gap-2.5 inline-flex duration-300 hover:bg-red-color">
                        <span
                            class="text-white text-sm font-medium whitespace-nowrap">{{ translate('Learn More') }}</span>
                    </a>
                </div>
                @endforeach

            </div>
            <!-- ===experience-section=== -->
            <h4
                class="pt-24 mb-10 text-center text-[22px] xl:text-[32px] text-black font-bold">
                {{ $homes->magzine_title }}
                </h4>
            <div
                class="flex justify-center xl:justify-between gap-5 xl:gap-[30px] flex-wrap xl:flex-nowrap">
                <!-- =item= -->
                <div
                    class="w-full max-w-[350px] xs:max-w-[300px] xl:max-w-[421px] max-h-[221px] overflow-hidden relative group left">
                    <picture>
                        <img src="{{ asset('admin/magzineImages/' . $homes->magzine_image) }}" alt="image"
                            class="w-full h-full duration-300 group-hover:scale-105"
                            loading="lazy">
                    </picture>
                    <div
                        class="absolute left-0 bottom-0 w-full h-[60px] px-4 bg-[rgba(218,0,124,0.4)] flex items-center">
                        <span
                            class="text-white text-lg font-medium">{{ $homes->magzine_image_title }}</span>
                    </div>
                </div>
                <!-- =item= -->
                <div
                    class="w-full max-w-[350px] xs:max-w-[300px] xl:max-w-[421px] max-h-[221px] overflow-hidden relative group bottom">
                    <picture>
                        <img src="{{ asset('admin/magzineImages/' . $homes->magzine_image_2) }}" alt="image"
                            class="w-full h-full duration-300 group-hover:scale-105"
                            loading="lazy">
                    </picture>
                    <div
                        class="absolute left-0 bottom-0 w-full h-[60px] px-4 bg-[rgba(218,0,124,0.4)] flex items-center">
                        <span
                            class="text-white text-lg font-medium">{{ $homes->magzine_image_title_2}}</span>
                    </div>
                </div>
                <!-- =item= -->
                <div
                    class="w-full max-w-[350px] xs:max-w-[300px] xl:max-w-[421px] max-h-[221px] overflow-hidden relative group right">
                    <picture>
                        <img src="{{ asset('admin/magzineImages/' . $homes->magzine_image_3) }}" alt="image"
                            class="w-full h-full duration-300 group-hover:scale-105"
                            loading="lazy">
                    </picture>
                    <div
                        class="absolute left-0 bottom-0 w-full h-[60px] px-4 bg-[rgba(218,0,124,0.4)] flex items-center">
                        <span
                            class="text-white text-lg font-medium">{{ $homes->magzine_image_title_3}}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>



</main>


@if($cookie && $cookie->status == 1)

{{-- <div id="cookie" class="fixed shadow-lg hidden" style="z-index: 999; bottom: 10px; left: 10px; width: 25%; padding: 25px; background-color: #f5f5f5; color: #333; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
     <div>
         <!-- Display the cookie content -->
        <center><p style="font-size: 14px; font-weight: bold;">
         {!! $cookie->content ?? 'We use cookies for better user experience.' !!}
     </p></center>
     </div>

     <div style="display: flex; gap: 10px; margin-top: 5px; justify-content: center;">
        <!-- Buttons below the content -->
        <button id="accept-cookie" style="background-color: #d81b60; color: white; padding: 10px 15px; font-size: 14px; border: none; border-radius: 5px; cursor: pointer;">
            {{ translate('Accept') }}
        </button>
        <button id="decline-cookie" style="background-color: #d81b60; color: white; padding: 10px 15px; font-size: 14px; border: none; border-radius: 5px; cursor: pointer;">
            {{ translate('Decline') }}
        </button>
    </div>

</div> --}}

<div id="cookie" class="fixed shadow-lg hidden cookie-container">
    <div>
        <!-- Display the cookie content -->
        <center>
            <p style="font-size: 14px; font-weight: bold;">
                {!! $cookie->content ?? 'We use cookies for better user experience.' !!}
            </p>
        </center>
    </div>

    <div style="display: flex; gap: 10px; margin-top: 5px; justify-content: center;">
        <!-- Buttons below the content -->
        <button id="accept-cookie" class="cookie-button">
            {{ translate('Accept') }}
        </button>
        <button id="decline-cookie" class="cookie-button">
            {{ translate('Decline') }}
        </button>
    </div>
</div>

<style>



    .cookie-container {
    bottom: 20px;
    color: #333;
    left: 20px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    z-index: 1000;
}

.cookie-container.hidden {
    display: none;
}

.cookie-button {
    padding: 10px 15px;
    background: rgb(25 183 234);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-button:hover {
    background: #d81b60;
}




    /* Responsive styles for mobile */
    @media (max-width: 768px) {
        .cookie-container {
            width: 70%;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
        }
    }
</style>



@endif



<script>
   document.addEventListener('DOMContentLoaded', function () {
    const cookieBanner = document.getElementById('cookie');
    if (!cookieBanner) {
        console.error("Cookie banner element not found.");
        return;
    }

    // Show the banner if not previously accepted/declined
    if (localStorage.getItem('cookie_accepted') !== 'true') {
        cookieBanner.classList.remove('hidden');
    }

    // Handle Accept button click
    document.getElementById('accept-cookie')?.addEventListener('click', function () {
        localStorage.setItem('cookie_accepted', 'true');
        cookieBanner.classList.add('hidden');
        console.log("Cookies accepted.");
    });

    // Handle Decline button click
    document.getElementById('decline-cookie')?.addEventListener('click', function () {
        localStorage.setItem('cookie_accepted', 'false');
        cookieBanner.classList.add('hidden');
        console.log("Cookies declined.");
    });
});

</script>

{{-- Old Script code for dob and age --}}
{{-- <script>
    document.getElementById('day').addEventListener('change', calculateAgeAndDOB);
    document.getElementById('Maand').addEventListener('change', calculateAgeAndDOB);
    document.getElementById('Jaar').addEventListener('change', calculateAgeAndDOB);

    function calculateAgeAndDOB() {
        const day = document.getElementById('day').value;
        const month = document.getElementById('Maand').value;
        const year = document.getElementById('Jaar').value;

        console.log(day);
        console.log(month);
        console.log(year);
        if (day === "Day" || month === "Maand" || year === "Jaar") {
            return;
        }

        // Create a date string and set the hidden DOB input
        const dobString = `${month} ${day}, ${year}`;
        const dob = new Date(dobString);


        if (isNaN(dob.getTime())) {
            return;
        }

        // Calculate age
        const today = new Date();
        let age = today.getFullYear() - dob.getFullYear();
        const monthDiff = today.getMonth() - dob.getMonth();

        // Adjust age if the birthday hasn't occurred yet this year
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
            age--;
        }

        // If age is under 18, show an alert and clear the values
        if (age < 18) {
            Swal.fire({
                icon: 'error',
                title: 'Age Restriction',
                text: 'Age must be at least 18 years.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black'
                }
            });
            document.getElementById('dob').value = ''; // Clear the hidden DOB input
            document.getElementById('Jaar').value = ''; // Reset the year dropdown
            return;
        }

        // Set the hidden DOB input and the calculated age
        document.getElementById('dob').value = dob.toISOString().split('T')[0]; // Format: YYYY-MM-DD
        document.getElementById('age').value = age; // Assuming you have an age input field
    }

</script> --}}

{{-- Old Script code for dob and age --}}
{{-- <script>
    document.getElementById('day_s').addEventListener('change', calculateAgeAndDOBS);
    document.getElementById('Maand_s').addEventListener('change', calculateAgeAndDOBS);
    document.getElementById('Jaar_s').addEventListener('change', calculateAgeAndDOBS);

    function calculateAgeAndDOBS() {
        const day = document.getElementById('day_s').value;
        const month = document.getElementById('Maand_s').value;
        const year = document.getElementById('Jaar_s').value;


        if (day === "Day" || month === "Maand" || year === "Jaar") {
            return;
        }

        // Create a date string and set the hidden DOB input
        const dobString = `${month} ${day}, ${year}`;
        const dob = new Date(dobString);

        // If the date is invalid, alert the user
        if (isNaN(dob.getTime())) {
            return;
        }

        // Calculate age
        const today = new Date();
        let age = today.getFullYear() - dob.getFullYear();
        const monthDiff = today.getMonth() - dob.getMonth();

        // Adjust age if the birthday hasn't occurred yet this year
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
            age--;
        }

        // If age is under 18, show an alert and clear the values
        if (age < 18) {
            Swal.fire({
                icon: 'error',
                title: 'Age Restriction',
                text: 'Age must be at least 18 years.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black'
                }
            });
            document.getElementById('dob').value = '';
            document.getElementById('Jaar_s').value = ''; // Clear the hidden DOB input
            return;
        }

        // Set the hidden DOB input and the calculated age
        document.getElementById('dob_s').value = dob.toISOString().split('T')[0]; // Format: YYYY-MM-DD
        document.getElementById('s_age').value = age; // Assuming you have an age input field
    }

</script> --}}

<script>
    document.getElementById('day_s').addEventListener('change', calculateAgeAndDOB);
    document.getElementById('Maand_s').addEventListener('change', calculateAgeAndDOB);
    document.getElementById('Jaar_s').addEventListener('change', calculateAgeAndDOB);

    function calculateAgeAndDOB() {
        const day = parseInt(document.getElementById('day_s').value);
        const month = document.getElementById('Maand_s').value;
        const year = parseInt(document.getElementById('Jaar_s').value);

        // Check if any of the dropdowns are not selected
        if (isNaN(day) || month === "Maand" || isNaN(year)) {
            // Clear the age and dob fields if any dropdown is not selected
            document.getElementById('dob').value = '';
            document.getElementById('age').value = '';
            return;
        }

        // Convert the month name to its numeric value (0-11 for Date)
        const monthIndex = [
            'January', 'February', 'March', 'April', 'May',
            'June', 'July', 'August', 'September', 'October',
            'November', 'December'
        ].indexOf(month);

        if (monthIndex === -1) {
            return;
        }

        // Create the date in UTC mode to avoid timezone issues
        const dob = new Date(Date.UTC(year, monthIndex, day));

        if (isNaN(dob.getTime())) {
            return;
        }

        // Calculate age
        const today = new Date();
        let age = today.getUTCFullYear() - dob.getUTCFullYear();
        const monthDiff = today.getUTCMonth() - dob.getUTCMonth();

        // Adjust age if the birthday hasn't occurred yet this year
        if (monthDiff < 0 || (monthDiff === 0 && today.getUTCDate() < dob.getUTCDate())) {
            age--;
        }

        // If age is under 18, show an alert and clear the values
        if (age < 18) {
            Swal.fire({
                icon: 'error',
                title: 'Age Restriction',
                text: 'Age must be at least 18 years.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black'
                }
            });
            document.getElementById('dob_s').value = '';
            document.getElementById('day_s').value = '';
            document.getElementById('Maand_s').value = '';
            document.getElementById('Jaar_s').value = '';
            document.getElementById('s_age').value = '';
            return;
        }

        // Set the hidden DOB input and the calculated age
        document.getElementById('dob_s').value = dob.toISOString().split('T')[0];
        document.getElementById('s_age').value = age; // Assuming you have an age input field
    }
</script>

<script>
    document.getElementById('day').addEventListener('change', calculateAgeAndDOB);
    document.getElementById('Maand').addEventListener('change', calculateAgeAndDOB);
    document.getElementById('Jaar').addEventListener('change', calculateAgeAndDOB);

    function calculateAgeAndDOB() {
        const day = parseInt(document.getElementById('day').value);
        const month = document.getElementById('Maand').value;
        const year = parseInt(document.getElementById('Jaar').value);

        // Check if any of the dropdowns are not selected
        if (isNaN(day) || month === "Maand" || isNaN(year)) {
            // Clear the age and dob fields if any dropdown is not selected
            document.getElementById('dob').value = '';
            document.getElementById('age').value = '';
            return;
        }

        // Convert the month name to its numeric value (0-11 for Date)
        const monthIndex = [
            'January', 'February', 'March', 'April', 'May',
            'June', 'July', 'August', 'September', 'October',
            'November', 'December'
        ].indexOf(month);

        if (monthIndex === -1) {
            return;
        }

        // Create the date in UTC mode to avoid timezone issues
        const dob = new Date(Date.UTC(year, monthIndex, day));

        if (isNaN(dob.getTime())) {
            return;
        }

        // Calculate age
        const today = new Date();
        let age = today.getUTCFullYear() - dob.getUTCFullYear();
        const monthDiff = today.getUTCMonth() - dob.getUTCMonth();

        // Adjust age if the birthday hasn't occurred yet this year
        if (monthDiff < 0 || (monthDiff === 0 && today.getUTCDate() < dob.getUTCDate())) {
            age--;
        }

        // If age is under 18, show an alert and clear the values
        if (age < 18) {
            Swal.fire({
                icon: 'error',
                title: 'Age Restriction',
                text: 'Age must be at least 18 years.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black'
                }
            });
            document.getElementById('dob').value = '';
            document.getElementById('day').value = '';
            document.getElementById('Maand').value = '';
            document.getElementById('Jaar').value = '';
            document.getElementById('age').value = '';
            return;
        }

        // Set the hidden DOB input and the calculated age
        document.getElementById('dob').value = dob.toISOString().split('T')[0];
        document.getElementById('age').value = age; // Assuming you have an age input field
    }
</script>






<script>
    const abuseWords = @json($abuseFiltering);  // Assuming $abuseFiltering is passed from your backend

    function checkAbuseWords() {
        // Get the user_name input field
        const inputField = document.getElementById('user_name');
        let inputText = inputField.value;

        // Check for abusive words and replace them with asterisks
        abuseWords.forEach(word => {
            const regex = new RegExp(word, 'gi'); // Case-insensitive match
            if (regex.test(inputText)) {
                const maskedWord = '*'.repeat(word.length); // Replace the word with asterisks
                inputText = inputText.replace(regex, maskedWord);
            }
        });

        // Update the user_name field with the cleaned text
        inputField.value = inputText;
    }

    // Attach the function to the input field's input event
    document.getElementById('user_name').addEventListener('input', checkAbuseWords);
</script>


<script>
    const abuseWords2 = @json($abuseFiltering);  // Assuming $abuseFiltering is passed from your backend

    function checkAbuseWordsSmall() {
        // Get the user_name input field
        const inputField = document.getElementById('user_name_s');
        let inputText = inputField.value;

        // Check for abusive words and replace them with asterisks
        abuseWords2.forEach(word => {
            const regex = new RegExp(word, 'gi'); // Case-insensitive match
            if (regex.test(inputText)) {
                const maskedWord = '*'.repeat(word.length); // Replace the word with asterisks
                inputText = inputText.replace(regex, maskedWord);
            }
        });

        // Update the user_name field with the cleaned text
        inputField.value = inputText;
    }

    // Attach the function to the input field's input event
    document.getElementById('user_name').addEventListener('input', checkAbuseWordsSmall);
</script>










<script>

    // Callback for the second reCAPTCHA
    function recaptchaCallbackForm2(token) {

        document.getElementById('g-recaptcha-response_s').value = token;
    }

    function recaptchaCallbackForm1(token) {

        document.getElementById('g-recaptcha-response_main').value = token;
        document.getElementById('g-recaptcha_main').value = token;

   }
</script>

<!-- reCAPTCHA API -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>


<style>
    .swal2-confirm-black {

        background-color: black; /* Button background color */
        border: none; /* Remove border */
        border-radius: 5px; /* Optional: Add rounded corners */
        padding: 8px 16px; /* Optional: Add padding */
        font-size: 14px; /* Optional: Adjust font size */
        font-weight: bold; /* Optional: Adjust font weight */
    }

    .swal2-confirm-black:hover {
        background-color: #333; /* Optional: Hover effect */
    }
</style>

@endsection