@extends('frontend.layouts.main2')
<title>{{ translate('Humsafar - Profile') }}</title>
@section('content')
    <!-- ====main-section==== -->
    <main class="pb-20 xs:pb-0">
        <section class="flex items-start justify-between">
            <!-- ==left-banner-part== -->
            <div class="w-[400px] 2xl:w-[500px] h-screen hidden md:block">
                <img src="{{ asset('admin/registrationImages/' . $registrations->banner_image) }}"
                    alt="banner image"
                    class="w-[400px] 2xl:w-[500px] h-full fixed left-0 top-0">
                <picture class="hidden"><img
                        src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image" loading="lazy"></picture>
            </div>

            <!-- ==right-all-content-part== -->
            <div class="md:px-10 xl:px-[60px] py-5 md:py-[30px] md:pb-[50px] flex-1 w-full">
                <!-- =logo-part= -->
                <div
                    class="flex md:items-center justify-between flex-col text-center md:flex-row">
                    <a href="{{ url('/')}}"
                        class="pl-6 xs:pl-10 sm:pl-20 md:pl-0 fixed w-full left-0 top-0 backdrop-blur-[20px] py-5 md:static md:w-fit md:backdrop-blur-none md:py-0 z-20"><img
                            src="{{ asset('admin/Image/AppSettings/Logo/' . $generalSetting->	system_logo) }}"
                            alt="system_logo"
                            class="w-[152px] lg:w-[177.74px]"></a>
                    <!-- =small-device-image= -->
                    <picture class="py-7 md:hidden">
                        <img src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                            alt="banner image"
                            class="mb-9 w-full max-h-[400px] object-cover"
                            loading="lazy">
                    </picture>

                    @auth
                        <p class="text-base font-normal text-black">
                            <a href="{{ route('login') }}">{{ Auth::user()->name }}</a>
                            <a href="{{ route('logout') }}" class="font-bold duration-300 hover:text-red-color"
                                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                | Logout
                            </a>
                        </p>

                        <!-- Logout form (hidden) -->
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                        @else
                        <p class="text-base font-normal text-black">{{ translate('Do you have an account?') }}' <a href="{{ route('login') }}" class="font-bold duration-300 hover:text-red-color">{{ translate('Log in') }}</a></p>
                    @endauth
                </div>
                <!-- =main-part= -->

                <div
                    class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 xl:pt-20 w-full">
                    <div class="w-full">
                        <div
                            class="text-black text-[22px] lg:text-[26px] xl:text-[30px] font-semibold mb-5 flex items-center gap-2.5">
                            <span
                                class="min-w-[34px] h-[34px] xl:min-w-[40px] xl:h-10 rounded-full text-white bg-black text-base xl:text-xl font-semibold flex items-center justify-center">01</span>
                            <p>
                                {{ $registrations->create }}
                            </p>
                        </div>
                        <form action="{{ route('profile-details') }}" method="POST" id="registerForm">
                            @csrf
                                {{-- <div class="flex gap-2.5 items-center mt-6" style="border: 1px solid transparent; background-color: transparent; padding: 5px;"> <!-- Added padding -->
                                        <div>
                                            <input type="radio" name="my_gander" id="my_gander_male" value="male" class="gander_input"
                                                {{ old('my_gander', session('step1.my_gander')) === 'male' ? 'checked' : '' }} onchange="updateRequired()" required>
                                            <label for="my_gander_male" class="gander_text">{{ translate('Male') }}</label>
                                        </div>
                                        <div>
                                            <input type="radio" name="my_gander" id="my_gander_female" value="female" class="gander_input"
                                                {{ old('my_gander', session('step1.my_gander')) === 'female' ? 'checked' : '' }} onchange="updateRequired()" required>
                                            <label for="my_gander_female" class="gander_text">{{ translate('Female') }}</label>
                                        </div>
                                    </div> --}}
                            <div class="flex flex-wrap -mx-2">
                                <!-- I'm a Column-->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('I\'m a') }}*</p>
                                    <select name="my_gander" id="my_gander" 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" onchange="updateRequired()" required>
                                        <option value="" selected>{{ translate('Select') }}</option>
                                        <option value="male" {{ old('my_gander', session('step1.my_gander') ?? '' ) == 'male' ? 'selected' : '' }}>{{ translate('Male') }}</option>
                                        <option value="female"  {{ old('my_gander', session('step1.my_gander') ?? '' ) == 'female' ? 'selected' : '' }}>{{ translate('Female') }}</option>
                                    </select>
                                    @error('gender')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Origin Column--}}
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('Origin') }}*</p>
                                    <select name="origin_id" id="origin_id"
                                            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" required>
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($origin->metas as $origin)
                                                <option value="{{ $origin->id }}"
                                                    @if (old('origin_id', session('step1.origin_id')) == $origin->id) selected @endif>
                                                    {{ $origin->name }}
                                                </option>
                                            @endforeach
                                    </select>
                                        @error('origin_id')
                                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                </div>

                                <!-- Am Looking for Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    @if ($amLookingFors->status == 1)
                                        <h5 class="mb-2.5 text-sm text-black font-semibold">{{ translate('Am Looking for') }} *</h5>
                                        <select id="am_looking_for_id" name="am_looking_for_id"
                                                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" required>
                                                <option value="" selected>Select</option>
                                                @foreach($amLookingFors->metas as $status)
                                                    <option value="{{ $status->id }}" @if (old('am_looking_for_id', session('step1.am_looking_for_id')) == $status->id) selected @endif>{{ $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
                                    @endif
                                </div>

                                <!-- Username Column -->
                                <div class="w-1/3 md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('Create a username for your profile.') }}*</p>
                                    <input type="text" name="username" id="username" value="{{ old('username', session('step1.username', '')) }}" placeholder="john_doe123"
                                        class="p-3 w-full rounded-[5px] border-[1px] border-[#e2e2e2] text-[#d3d3d3] text-sm font-medium placeholder:text-[#d3d3d3] placeholder:text-sm placeholder:font-medium focus:outline-none focus:border-red-color" required
                                        oninput="checkAbuseWords()">
                                    @error('username')
                                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <!-- First Name Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('First name') }} *</p>
                                    <input type="text" name="first_name" id="first_name" value="{{ old('first_name', session('step1.first_name', '')) }}" placeholder="John"
                                        class="p-3 w-full rounded-[5px] border-[1px] border-[#e2e2e2] text-[#d3d3d3] text-sm font-medium placeholder:text-[#d3d3d3] placeholder:text-sm placeholder:font-medium focus:outline-none focus:border-red-color" required>
                                    @error('first_name')
                                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Last Name Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('Last name') }} *</p>
                                    <input type="text" name="last_name" id="last_name" value="{{ old('last_name', session('step1.last_name', '')) }}" placeholder="Doe"
                                        class="p-3 w-full rounded-[5px] border-[1px] border-[#e2e2e2] text-[#d3d3d3] text-sm font-medium placeholder:text-[#d3d3d3] placeholder:text-sm placeholder:font-medium focus:outline-none focus:border-red-color" required>
                                    @error('last_name')
                                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Date of Birth Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('Date of Birth') }} *</p>
                                    <!-- Day -->
                                    <select name="day" id="day"
                                        class="w-1/3 bg-white p-2 border border-slate-200 dark:border-zinc-500 rounded-md  rounded-[5px] border-[1px] border-[#e2e2e2]" required>
                                        <option value="">Day</option>
                                        @for ($i = 1; $i <= 31; $i++)
                                            <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}"
                                            {{ session('step1.dob') && \Carbon\Carbon::parse(session('step1.dob'))->day == $i ? 'selected' : '' }}>
                                                {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                                            </option>
                                        @endfor
                                    </select>
                                    <!-- Month -->
                                    <select name="month" id="Maand"
                                        class="w-1/3 bg-white p-2 border border-slate-200 dark:border-zinc-500 rounded-md rounded-[5px] border-[1px] border-[#e2e2e2]" required>
                                        <option value="">Month</option>
                                        @foreach (['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $index => $month)
                                            <option value="{{ $month }}"
                                            {{ session('step1.dob') && \Carbon\Carbon::parse(session('step1.dob'))->month == $index + 1 ? 'selected' : '' }}>
                                                {{ $month }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <!-- Year -->
                                    <select name="year" id="Jaar"
                                        class="w-1/3 bg-white p-2 border border-slate-200 dark:border-zinc-500 rounded-md  rounded-[5px] border-[1px] border-[#e2e2e2]" required>
                                        <option value="">Year</option>
                                        @for ($i = 1980; $i <= 2015; $i++)
                                            <option value="{{ $i }}"
                                            {{ session('step1.dob') && \Carbon\Carbon::parse(session('step1.dob'))->year == $i ? 'selected' : '' }}>
                                                {{ $i }}
                                            </option>
                                        @endfor
                                    </select>
                                    <input type="hidden" name="dob" id="dob" value="{{ session('step1.dob', '') }}">

                                </div>

                                <!-- Age Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    <p class="mb-2.5 text-[#191919] text-sm font-semibold">{{ translate('Age') }} *</p>
                                        <input type="text" name="age" id="age" value="{{ old('age', session('step1.age', '')) }}"
                                        placeholder="Enter your age"
                                        class="p-3 w-full rounded-[5px] border-[1px] border-[#e2e2e2] text-[#d3d3d3] text-sm font-medium placeholder:text-[#d3d3d3] placeholder:text-sm placeholder:font-medium focus:outline-none focus:border-red-color" readonly>
                                        @error('age')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                </div>

                                <!-- Relation Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    @if ($relationStatus->status == 1)
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Relation Status') }} *</h5>
                                        <select name="relation_status_id" id="relation_status_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>{{ translate('Select') }}</option>
                                                @foreach($relationStatus->metas as $status)
                                                    <option value="{{ $status->id }}" @if (old('relation_status_id', session('step1.relation_status_id')) == $status->id) selected @endif>{{ $status->name }}</option>
                                                @endforeach
                                        </select>
                                        @error('relation_status_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    @endif
                                </div>

                                <!-- Childerns Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    @if ($childerns->status == 1)
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Children') }} *</h5>
                                        <select name="childeren_id" id="childeren_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>{{ translate('Select') }}</option>
                                            @foreach ($childerns->metas as $childern)
                                                <option value="{{ $childern->id }}"
                                                    @if (old('childeren_id', session('step1.childeren_id')) == $childern->id) selected @endif>
                                                {{ $childern->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('childeren_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    @endif
                                </div>

                                <!-- Religion Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    @if ($Religion->status == 1)
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Religion') }} *</h5>
                                        <select name="religion_id" id="religion_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>{{ translate('Select') }}</option>
                                            @foreach($Religion->metas  as $religion)
                                            <option value="{{ $religion->id }}" @if (old('religion_id', session('step1.religion_id')) == $religion->id) selected @endif >{{ $religion->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('religion_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    @endif
                                </div>
                                <!-- Cast Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    @if ($cast->status == 1)
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Cast') }} *</h5>
                                        <select id="cast" name="cast"  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($cast->metas as $cast_data)
                                                    <option value="{{ $cast_data->id }}" @if (old('cast', session('step1.cast')) == $cast_data->id) selected @endif>{{ $cast_data->name }}</option>
                                                @endforeach
                                        </select>
                                        @error('cast')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    @endif
                                </div>
                                <!-- Subcast Column -->
                                <div class="w-full md:w-1/2 px-2 mb-4">
                                    @if ($subcast->status == 1)
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Sub Cast') }} *</h5>
                                        <select id="subcast" name="subcast"  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($subcast->metas as $subcast_data)
                                                    <option value="{{ $subcast_data->id }}" @if (old('subcast', session('step1.subcast')) == $subcast_data->id) selected @endif>{{ $subcast_data->name }}</option>
                                                @endforeach
                                        </select>
                                        @error('subcast')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    @endif
                                </div>
                            </div>

                            <div class="mt-5 flex items-center w-full gap-3 mb-8">
                                <span class="text-black text-xl font-semibold whitespace-nowrap">{{ translate('Where do you live') }}</span>
                                <div class="flex-1 h-[1px] bg-[#e2e2e2]"></div>
                            </div>



                        <div class="flex items-start justify-center xs:justify-start gap-5 flex-wrap">

                            {{-- <div class="flex flex-wrap "> --}}
                                <!-- Country Column -->
                                    <div class="w-full sm:w-1/3">
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Country') }} *</h5>
                                        <select id="country_id" name="country_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 selected>{{ translate('Select') }}</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}" @if (old('country_id', session('step1.country_id')) == $country->id) selected @endif>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('country_id')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                <!-- State Column -->
                                    <div class="w-full sm:w-1/3">
                                        <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('State') }} *</h5>
                                        <select id="state_id" name="state_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>{{ translate('Select') }}</option>
                                        </select>
                                    </div>
                                </div>
                            <!-- City Column -->
                            <div class="w-full sm:w-1/3">
                                <h5 class="text-sm text-black font-semibold mb-2.5 mt-5">{{ translate('City') }} *</h5>
                                <select id="city_id" name="city_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>{{ translate('Select') }}</option>
                                </select>
                            </div>

                            {{-- <button
                                class="w-[135px] h-[109px] flex items-center justify-center flex-col gap-2.5 rounded-[5px] border-[1px] border-[#dee2e6]">
                                <svg width="45" height="50"
                                    viewBox="0 0 45 50" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M9.38036 7.95915C6.10106 11.1304 3.97266 15.9707 3.97266 22.6562C3.97266 28.261 7.5571 34.3374 11.9354 39.1398C14.0961 41.5099 16.3802 43.4911 18.3667 44.8667C19.3609 45.5552 20.256 46.075 21.0038 46.4166C21.7863 46.7741 22.2754 46.875 22.4994 46.875C22.7235 46.875 23.2126 46.7741 23.9951 46.4166C24.7429 46.075 25.638 45.5552 26.6322 44.8667C28.6187 43.4911 30.9027 41.5099 33.0635 39.1398C37.4418 34.3374 41.0262 28.261 41.0262 22.6562C41.0262 15.9707 38.8978 11.1304 35.6185 7.95915C32.3267 4.7758 27.7206 3.125 22.4994 3.125C17.2783 3.125 12.6722 4.7758 9.38036 7.95915ZM7.20798 5.71273C11.187 1.86482 16.6256 0 22.4994 0C28.3733 0 33.8118 1.86482 37.7909 5.71273C41.7825 9.57276 44.1512 15.2793 44.1512 22.6562C44.1512 29.4399 39.9232 36.2541 35.3729 41.2452C33.0694 43.7719 30.6101 45.9132 28.4113 47.4359C27.3129 48.1965 26.2549 48.8199 25.2937 49.259C24.3672 49.6823 23.3914 50 22.4994 50C21.6075 50 20.6317 49.6823 19.7052 49.259C18.744 48.8199 17.686 48.1965 16.5876 47.4359C14.3888 45.9132 11.9295 43.7719 9.62603 41.2452C5.07571 36.2541 0.847656 29.4399 0.847656 22.6562C0.847656 15.2793 3.21639 9.57276 7.20798 5.71273Z"
                                        fill="#222628" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M22.4986 14.2856C19.355 14.2856 16.8066 16.834 16.8066 19.9776C16.8066 23.1212 19.355 25.6696 22.4986 25.6696C25.6422 25.6696 28.1906 23.1212 28.1906 19.9776C28.1906 16.834 25.6422 14.2856 22.4986 14.2856ZM13.6816 19.9776C13.6816 15.1081 17.6291 11.1606 22.4986 11.1606C27.3681 11.1606 31.3156 15.1081 31.3156 19.9776C31.3156 24.8471 27.3681 28.7946 22.4986 28.7946C17.6291 28.7946 13.6816 24.8471 13.6816 19.9776Z"
                                        fill="#222628" />
                                </svg>
                                <span
                                    class="text-black text-sm font-medium">Zwolle</span>
                            </button> --}}
                            <!-- item= -->
                            {{-- <button
                                class="w-[135px] h-[109px] flex items-center justify-center flex-col gap-2.5 rounded-[5px] border-[1px] border-[#dee2e6]">
                                <svg width="25" height="26"
                                    viewBox="0 0 25 26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M24.7832 13.0004C24.7832 13.7091 24.2086 14.2837 23.4999 14.2837L1.49987 14.2837C0.791101 14.2837 0.216536 13.7091 0.216536 13.0004C0.216536 12.2916 0.791101 11.717 1.49987 11.717L23.4999 11.717C24.2086 11.717 24.7832 12.2916 24.7832 13.0004Z"
                                        fill="#DEE2E6" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M12.4999 0.716797C13.2086 0.716797 13.7832 1.29136 13.7832 2.00013L13.7832 24.0001C13.7832 24.7089 13.2086 25.2835 12.4999 25.2835C11.7911 25.2835 11.2165 24.7089 11.2165 24.0001L11.2165 2.00013C11.2165 1.29136 11.7911 0.716797 12.4999 0.716797Z"
                                        fill="#DEE2E6" />
                                </svg>
                                <span
                                    class="text-[#dee2e6] text-sm font-medium">Change</span>
                            </button> --}}

                        </div>

                        <!-- =page-buttons= -->
                        <div
                            class="flex items-center justify-center gap-3 pt-20 pb-10">
                            <a href="{{ route('index')}}"
                                class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-[#d0d0d0] duration-300 hover:border-red-color">
                                <svg width="17" height="13"
                                    viewBox="0 0 17 13" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M16.9004 6.4998C16.9004 6.11321 16.587 5.7998 16.2004 5.7998L1.20039 5.79981C0.813791 5.79981 0.500391 6.11321 0.500391 6.49981C0.500391 6.8864 0.813791 7.19981 1.20039 7.19981L16.2004 7.1998C16.587 7.1998 16.9004 6.8864 16.9004 6.4998Z"
                                        fill="#444444" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M5.68063 0.990524C5.39936 0.725294 4.95634 0.738297 4.69111 1.01957L5.20039 1.49981L5.70967 1.98005C5.9749 1.69878 5.9619 1.25575 5.68063 0.990524ZM5.20039 11.4998L5.70963 11.0195L5.51713 10.8149C5.39438 10.6843 5.21897 10.4974 5.00844 10.2724C4.58728 9.82219 4.02612 9.21998 3.46529 8.61104C2.90369 8.00126 2.34552 7.38808 1.92903 6.91476C1.79 6.75677 1.66914 6.61705 1.57034 6.49981C1.66914 6.38256 1.79 6.24284 1.92903 6.08485C2.34552 5.61154 2.90369 4.99835 3.46529 4.38857C4.02612 3.77963 4.58728 3.17743 5.00844 2.72724C5.21897 2.5022 5.39438 2.31529 5.51713 2.18468L5.70967 1.98005L5.20039 1.49981L4.69111 1.01957L4.49693 1.22593C4.37358 1.35719 4.19743 1.54488 3.98609 1.77079C3.5635 2.2225 2.99966 2.82757 2.43549 3.44014C1.87209 4.05188 1.30526 4.67445 0.878001 5.16C0.665241 5.40179 0.481713 5.61568 0.349258 5.77962C0.284148 5.86021 0.223358 5.93857 0.175935 6.00687C0.153092 6.03977 0.124034 6.08359 0.0978551 6.1319C0.0848794 6.15585 0.0658822 6.19314 0.0485597 6.23914C0.0355635 6.27365 0.000389099 6.37131 0.000389099 6.49981C0.000389099 6.6283 0.0355635 6.72596 0.0485597 6.76047C0.0658822 6.80647 0.0848794 6.84376 0.0978551 6.86771C0.124034 6.91602 0.153092 6.95984 0.175935 6.99274C0.223358 7.06104 0.284148 7.13941 0.349258 7.21999C0.481713 7.38393 0.665241 7.59782 0.878001 7.83961C1.30526 8.32516 1.87209 8.94773 2.43549 9.55947C2.99966 10.172 3.5635 10.7771 3.98609 11.2288C4.19743 11.4547 4.37358 11.6424 4.49693 11.7737L4.69104 11.98L5.20039 11.4998ZM5.20039 11.4998L5.70963 11.0195C5.97486 11.3008 5.9619 11.7439 5.68063 12.0091C5.39936 12.2743 4.95627 12.2612 4.69104 11.98L5.20039 11.4998Z"
                                        fill="#444444" />
                                </svg>
                                <span
                                    class="text-[#444] text-sm font-semibold">{{ translate('Back') }}</span>
                            </a>
                            <button type="button" id="submitButton"
                                    class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-blue-color bg-blue-color text-white duration-300 hover:bg-red-color hover:border-red-color">
                                <span class="text-sm font-semibold">{{ translate('Next') }}</span>
                                <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M-3.53054e-08 6.4998C-1.58067e-08 6.11321 0.313401 5.7998 0.7 5.7998L15.7 5.79981C16.0866 5.79981 16.4 6.11321 16.4 6.49981C16.4 6.8864 16.0866 7.19981 15.7 7.19981L0.7 7.1998C0.313401 7.1998 -5.4804e-08 6.8864 -3.53054e-08 6.4998Z" fill="white" />
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2198 0.990524C11.501 0.725294 11.9441 0.738297 12.2093 1.01957L11.7 1.49981L11.1907 1.98005C10.9255 1.69878 10.9385 1.25575 11.2198 0.990524ZM11.7 11.4998L11.1908 11.0195L11.3833 10.8149C11.506 10.6843 11.6814 10.4974 11.8919 10.2724C12.3131 9.82219 12.8743 9.21998 13.4351 8.61104C13.9967 8.00126 14.5549 7.38808 14.9714 6.91476C15.1104 6.75677 15.2313 6.61705 15.33 6.49981C15.2313 6.38256 15.1104 6.24284 14.9714 6.08485C14.5549 5.61154 13.9967 4.99835 13.4351 4.38857C12.8743 3.77963 12.3131 3.17743 11.8919 2.72724C11.6814 2.5022 11.506 2.31529 11.3833 2.18468L11.1907 1.98005L11.7 1.49981L12.2093 1.01957L12.4035 1.22593C12.5268 1.35719 12.703 1.54488 12.9143 1.77079C13.3369 2.2225 13.9007 2.82757 14.4649 3.44014C15.0283 4.05188 15.5951 4.67445 16.0224 5.16C16.2351 5.40179 16.4187 5.61568 16.5511 5.77962C16.6162 5.86021 16.677 5.93857 16.7245 6.00687C16.7473 6.03977 16.7764 6.08359 16.8025 6.1319C16.8155 6.15585 16.8345 6.19314 16.8518 6.23914C16.8648 6.27365 16.9 6.37131 16.9 6.49981C16.9 6.6283 16.8648 6.72596 16.8518 6.76047C16.8345  6.80647 16.8155 6.84376 16.8025 6.86771C16.7764 6.91602 16.7473 6.95984 16.7245 6.99274C16.677 7.06104 16.6162 7.13941 16.5511 7.21999C16.4187 7.38393 16.2351 7.59782 16.0224 7.83961C15.5951 8.32516 15.0283 8.94773 14.4649 9.55947C13.9007 10.172 13.3369 10.7771 12.9143 11.2288C12.703 11.4547 12.5268 11.6424 12.4035 11.7737L12.2093 11.98L11.7 11.4998ZM11.7 11.4998L11.1908 11.0195C10.9255 11.3008 10.9385 11.7439 11.2198 12.0091C11.501 12.2743 11.9441 12.2612 12.2093 11.98L11.7 11.4998Z" fill="white" />
                                </svg>
                            </button>
                        </div>

                    </div>
                </form>

                </div>
            </div>
        </section>
    </main>
@endsection


@push('scripts')


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>



<script>
$(document).ready(function() {
    function loadStates(countryId, selectedStateId = null) {
        if (countryId) {
            $.ajax({
                url: '{{ route("getStates", ":country") }}'.replace(':country', countryId),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#state_id').empty();
                    $('#state_id').append('<option value="" selected>Select State</option>');
                    $.each(data, function(key, state) {
                        var selected = "{{ session('step1.state_id') }}" == state.id ? 'selected' : '';
                        $('#state_id').append('<option value="' + state.id + '" ' + selected + '>' + state.name + '</option>');
                    });

                    // If there's a preselected state, select it
                    if (selectedStateId) {
                        $('#state_id').val(selectedStateId).trigger('change');
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText); // Log errors for debugging
                }
            });
        } else {
            $('#state_id').empty().append('<option value="" selected>Select State</option>');
            $('#city_id').empty().append('<option value="" selected>Select City</option>'); // Clear city dropdown
        }
    }

    function loadCities(stateId, selectedCityId = null) {
        if (stateId) {
            $.ajax({
                url: '{{ route("getCities", ":state") }}'.replace(':state', stateId),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#city_id').empty();
                    $('#city_id').append('<option value="" selected>Select City</option>');
                    $.each(data, function(key, city) {
                        var selected = "{{ session('step1.city_id') }}" == city.id ? 'selected' : '';
                        $('#city_id').append('<option value="' + city.id + '" ' + selected + '>' + city.name + '</option>');
                    });

                    // If there's a preselected city, select it
                    if (selectedCityId) {
                        $('#city_id').val(selectedCityId); // Select city
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText); // Log errors for debugging
                }
            });
        } else {
            $('#city_id').empty().append('<option value="" selected>Select City</option>'); // Clear city dropdown
        }
    }

    // Get user's current location and auto-select country, state, city
    function autoSelectLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;

                // Use a reverse geocoding service to get country, state, and city
                $.ajax({
                    url: 'https://api.opencagedata.com/geocode/v1/json',
                    type: 'GET',
                    data: {
                        'q': lat + ',' + lon,
                        'key': '52bd9a98cd194e09a699ddc5285a1d04', // Replace with your OpenCage API key
                        'pretty': 1
                    },
                    success: function(response) {
                        var country = response.results[0].components.country;
                        var state = response.results[0].components.state;
                        var city = response.results[0].components.city || response.results[0].components.town;

                        // Find the country option based on the name
                        var countryOption = $('#country_id option').filter(function() {
                            return $(this).text() === country;
                        });

                        if (countryOption.length) {
                            var countryId = countryOption.val();
                            $('#country_id').val(countryId).trigger('change'); // Select country and trigger change to load states

                            // Wait for states to load, then auto-select state
                            setTimeout(function() {
                                var stateOption = $('#state_id option').filter(function() {
                                    return $(this).text() === state;
                                });

                                if (stateOption.length) {
                                    var stateId = stateOption.val();
                                    $('#state_id').val(stateId).trigger('change'); // Select state and trigger change to load cities

                                    // Wait for cities to load, then auto-select city
                                    setTimeout(function() {
                                        var cityOption = $('#city_id option').filter(function() {
                                            return $(this).text() === city;
                                        });

                                        if (cityOption.length) {
                                            $('#city_id').val(cityOption.val()); // Select city
                                        }
                                    }, 500); // Adjust timeout if needed
                                }
                            }, 500); // Adjust timeout if needed
                        }
                    },
                    error: function(xhr) {
                        console.error("Error in reverse geocoding:", xhr.responseText);
                    }
                });
            }, function(error) {
                console.error("Geolocation error:", error);
            });
        } else {
            console.error("Geolocation is not supported by this browser.");
        }
    }

    // Trigger state and city loading on manual country/state change
    $('#country_id').change(function() {
        var countryId = $(this).val();
        loadStates(countryId);
    });

    $('#state_id').change(function() {
        var stateId = $(this).val();
        loadCities(stateId);
    });

    // Check if session has state_id and city_id, otherwise use geolocation
    var sessionStateId = "{{ session('step1.state_id') }}";
    var sessionCityId = "{{ session('step1.city_id') }}";
    var selectedCountryId = $('#country_id').val(); // Pre-selected country
    var selectedStateId = sessionStateId || "{{ $user_detail_old->state ?? null }}"; // Prefer session value
    var selectedCityId = sessionCityId || "{{ $user_detail_old->city ?? null }}";   // Prefer session value

    if (selectedCountryId) {
        loadStates(selectedCountryId, selectedStateId); // Load states for the pre-selected country
    }

    if (selectedStateId) {
        loadCities(selectedStateId, selectedCityId); // Load cities for the pre-selected state
    }

    // If no session data, use geolocation to auto-select
    if (!sessionStateId && !sessionCityId) {
        autoSelectLocation();
    }
});
</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;
    }
</script>




<script>
    // Convert the PHP array to a JavaScript array
    const abuseWords = @json($abuseFiltering);

    function checkAbuseWords() {

        // Check the username input field
        const inputField = document.getElementById('username');
        let inputText = inputField.value;

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

        // Update the input field value with masked text
        inputField.value = inputText;

        // If abusive words were detected, show a SweetAlert
        if (inputText !== inputField.value) {
            Swal.fire({
                icon: 'warning',
                title: 'Abusive Words Detected',
                text: 'Abusive words have been masked with *.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black'
                }
            });
        }

        // Add the custom CSS for the "OK" button
        const style = document.createElement('style');
        style.innerHTML = `
            .swal2-confirm.swal2-confirm-black {
                background-color: black !important;
                color: white !important;
                border-color: black !important;
            }
        `;
        document.head.appendChild(style);
    }
</script>

<script>
    function updateRequired() {
        const maleRadio = document.getElementById('my_gander_male');
        const femaleRadio = document.getElementById('my_gander_female');

        // If "Male" is selected, make sure "Female" is not required and vice versa
        if (maleRadio.checked) {
            femaleRadio.removeAttribute('required');
            maleRadio.setAttribute('required', 'required');
        } else if (femaleRadio.checked) {
            maleRadio.removeAttribute('required');
            femaleRadio.setAttribute('required', 'required');
        }
    }

    // Initialize the required state based on the selected option on page load
    window.onload = function() {
        updateRequired();
    };
</script>

<script>
    $(document).ready(function() {
    $('#my_gander').select2();
    $('#origin_id').select2();
    $('#religion_id').select2();
    $('#am_looking_for_id').select2();
    $('#relation_status_id').select2();
    $('#cast').select2();
    $('#subcast').select2();
    $('#childeren_id').select2();
    $('#country_id').select2();
    $('#state_id').select2();
    $('#city_id').select2();

});
</script>


<style>
    .select2-container--default .select2-selection--single {
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        font-size: 14px;
        line-height: normal;
    }

    .select2-container .select2-dropdown {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 50px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }

    /* Custom style for SweetAlert confirm button */
.swal-custom-confirm {
    background-color: #4CAF50;  /* Green background */
    color: white;  /* White text */
    border-radius: 8px;  /* Rounded corners */
    padding: 10px 20px;  /* Padding around the text */
    font-size: 16px;  /* Font size */
    border: none;  /* Remove border */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Subtle shadow */
}

.swal-custom-confirm:hover {
    background-color: #45a049;  /* Darker green on hover */
    cursor: pointer;  /* Pointer cursor */
}
</style>



@endpush