@php
     $general_setting=App\Models\GeneralSetting::first();
@endphp

@extends('admin.layouts.master')
@section('title')
{{ translate('Members - Edit') }}
@endsection



@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            <div class="grow">
                <h5 class="text-16">{{ translate('Edit') }}</h5>
            </div>
            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">{{ translate('Members') }}</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    {{ translate('Edit') }}
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-12 gap-x-5">
            <div class="xl:col-span-12">
                <div class="card">
                    <div class="card-body border-b">
                        <h6 class="mb-4 text-15">{{ translate('Member Profile Edit') }}</h6>
                    </div>
                    <div class="card-body">

                        <div class="gap-4 md:flex">
                        <ul id="gs-links-container" class="flex flex-col w-full mb-4 text-sm font-medium text-center md:w-36 shrink-0 nav-tabs md:mb-0">
                            <li class="group {{ session('active_tab') === 'basic-information' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="basic-information" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Basic Information') }}</a>
                                </li>
                                <li class="group {{ session('active_tab') === 'living' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="living" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Living') }}</a>
                                </li>
                                <li class="group {{ session('active_tab') === 'about-me' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="about-me" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('About Me' ) }}</a>
                                </li>
                                <li class="group {{ session('active_tab') === 'education' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="education" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Education' ) }}</a>
                                </li>
                                <li class="group {{ session('active_tab') === 'career' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="career" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Career') }}</a>
                                </li>

                                {{--  --}}
                                <li class="group {{ session('active_tab') === 'language' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="language" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Language') }}</a>
                                </li>
                                <li class="group {{ session('active_tab') === 'hobbies-and-interest' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="hobbies-and-interest" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Hobbies & Interest') }}</a>
                                </li>
                                <li class="group {{ session('active_tab') === 'personal-attitude-and-behavior' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="personal-attitude-and-behavior" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Personal Attitude & Behavior') }}</a>
                                </li>
                                {{-- <li class="group grow">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="residency-information" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">Residency Information</a>
                                </li> --}}
                                {{-- <li class="group grow">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="spiritual-and-social-background" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">Spiritual & Social Background</a>
                                </li> --}}
                                <li class="group {{ session('active_tab') === 'life-style' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="life-style" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Life Style') }}</a>
                                </li>
                                {{-- <li class="group grow">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="astronomic-information" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">Astronomic Information</a>
                                </li> --}}
                                {{-- <li class="group grow">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="permanent-address" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">Permanent Address</a>
                                </li> --}}

                                {{-- <li class="group grow">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="family-information" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">Family Information</a>
                                </li> --}}
                                <li class="group {{ session('active_tab') === 'partner-expectation' ? 'active' : '' }}">
                                    <a href="javascript:void(0);" data-tab-toggle data-target="partner-expectation" class="text-start inline-block px-4 w-full py-2 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]">{{ translate('Partner Expectation' ) }}</a>
                                </li>
                            </ul>

                            <div class="tab-content w-full">
                                {{-- <div class="block tab-pane" id="introduction">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">Introduction</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-12 mt-4">
                                                <div class="col-span-4">
                                                    <label for="">Short Description <span class="text-red-500">*</span></label>
                                                </div>
                                                <div class="col-span-8">
                                                    <textarea class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="4"></textarea>
                                                </div>
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="block tab-pane" id="basic-information">
                                    <form action="{{route('admin.members.update', $user->id) }}" method="POST" enctype= multipart/form-data id="basic-information-form">
                                        @csrf
                                        @method('PUT')

                                        <input type="hidden" name="active_tab" value="living">

                                            <div class="card m-5">
                                                <div class="card-header p-2 bg-slate-900">
                                                    <h4 class="text-white">{{ translate('Basic Information') }}</h4>
                                                </div>
                                                <div class="card-body p-4 bg-black">
                                                    <div class="grid grid-cols-3 mt-4 gap-4">
                                                        <div class="col-span-1">
                                                            <label for="user_name" class="inline-block mb-2 text-base font-medium">{{ translate('Username') }}<span class="text-red-500">*</span></label>
                                                            <input type="text" id="user_name" name="user_name" value="{{ $user->user_name }}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required oninput="checkAbuseWords()">
                                                            @error('user_name')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-span-1">
                                                            <label for="first_name" class="inline-block mb-2 text-base font-medium">{{ translate('First Name') }}<span class="text-red-500">*</span></label>
                                                            <input type="text" id="first_name" name="first_name" value="{{ $user->first_name }}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            @error('first_name')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-span-1">
                                                            <label for="last_name" class="inline-block mb-2 text-base font-medium">{{ translate('Last Name') }}<span class="text-red-500">*</span></label>
                                                            <input type="text" id="last_name" name="last_name" value="{{ $user->last_name }}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            @error('last_name')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                 </div>
                                                 <div class="grid grid-cols-2 mt-4 gap-4">
                                                
                                                        <div class="col-span-1">
                                                            <label for="email" class="inline-block mb-2 text-base font-medium">{{ translate('Email') }}<span class="text-red-500">*</span></label>
                                                            <input type="email" id="email" name="email" value="{{ $user->email }}" class="form-input" required>
                                                            @error('email')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                        {{-- <div class="col-span-1">
                                                            <label for="password" class="inline-block mb-2 text-base font-medium">Password <span class="text-red-500">*</span></label>
                                                            <input type="password" id="password" name="password" class="form-input" required>
                                                            @error('password')
                                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div> --}}
                                                

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

                                                            @if ($orig->status == '1')
                                                                <div class="col-span-1">
                                                                    <label for="origin_id" class="inline-block mb-2 text-base font-medium">{{ translate('Origin') }}<span class="text-red-500">*</span></label>
                                                                    <select name="origin_id" id="origin_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                        <option selected>{{ translate('Select') }}</option>
                                                                        @foreach ($origins as $origin)
                                                                            <option value="{{ $origin->id}}"
                                                                                {{ $user->origin_id == $origin->id ? 'selected' : '' }}>
                                                                            {{$origin->name}}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                    @error('origin_id')
                                                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                                                    @enderror
                                                                </div>
                                                            @endif

                                                        <div class="col-span-1">
                                                            <label for="gender" class="inline-block mb-2 text-base font-medium">{{ translate('Gender') }}<span class="text-red-500">*</span></label>
                                                            <select name="gender" id="gender" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                <option value="male" {{ $user->gender == 'male' ? 'selected' : '' }}>{{ translate('Male') }}</option>
                                                                <option value="female"  {{ $user->gender == 'female' ? 'selected' : '' }}>{{ translate('Female') }}</option>
                                                            </select>
                                                            @error('gender')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <input type="hidden" name="date_of_birth" id="dob" value="{{ old('date_of_birth', isset($user['dob']) ? $user['dob'] : '') }}">

                                                        <div class="col-span-1">
                                                            <label for="date_of_birth" class="inline-block mb-2 text-base font-medium">
                                                                {{ translate('Date of Birth') }}
                                                                <span class="text-red-500">*</span>
                                                            </label>
                                                            <div class="flex gap-2">
                                                                <!-- Day -->
                                                                <select name="day" id="day" 
                                                                    class="w-1/3 bg-white p-2 border 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" 
                                                                    class="w-1/3 bg-white p-2 border 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" 
                                                                    class="w-1/3 bg-white p-2 border 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>
                                                            @error('date_of_birth')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-span-1">
                                                            <label for="age" class="inline-block mb-2 text-base font-medium">{{ translate('Age') }}</label>
                                                            <input type="text" value="{{ $user->age ?? '' }}" id="age" name="age"
                                                                   class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" readonly>
                                                        </div>
                                                   
                                                        @if ($reli->status == '1')
                                                        <div class="col-span-1">
                                                            <label for="religion_id" class="inline-block mb-2 text-base font-medium">{{ translate('Religion') }}<span class="text-red-500">*</span></label>
                                                            <select  name="religion_id" id="religion_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                @foreach($religions as $religion)
                                                                    <option value="{{ $religion->id }}"
                                                                        {{ $user->religion_id == $religion->id ? 'selected' : '' }}>
                                                                    {{ $religion->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('religion_id')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        @endif
                                                        @if ($relation_st->status == '1')
                                                        <div class="col-span-1">
                                                            <label for="relation_status_id" class="inline-block mb-2 text-base font-medium">{{ translate('Relation Status') }}<span class="text-red-500">*</span></label>
                                                            <select name="relation_status_id" id="relation_status_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                @foreach($relationStatus as $status)
                                                                    <option value="{{ $status->id }}" {{ $user->relation_status_id == $status->id ? 'selected' : '' }}>{{ $status->name }}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('relation_status_id')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        @endif

                                                        @if ($am_loc->status == '1')
                                                        <div class="col-span-1">
                                                            <label for="am_looking_for_id"  class="inline-block mb-2 text-base font-medium">{{ translate('am Looking for') }}<span class="text-red-500">*</span></label>
                                                            <select id="am_looking_for_id" name="am_looking_for_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                @foreach($amLookingFors as $amLookingFor)
                                                                    <option value="{{ $amLookingFor->id }}" {{ $user->am_looking_for_id == $amLookingFor->id ? 'selected' : '' }}>{{ $amLookingFor->name }}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('am_looking_for_id')
                                                                <span class="text-red-500 text-sm">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        @endif
                                                        @if ($child->status == '1')                  
                                                        <div class="col-span-1">
                                                            <label for="children_id" class="inline-block mb-2 text-base font-medium">{{ translate('Childrens') }}<span class="text-red-500">*</span></label>
                                                            <select id="children_id" name="children_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                @foreach ($childerns as $child)
                                                                    <option value="{{ $child->id}}" {{ $user->children_id == $child->id ? 'selected' : '' }}>{{ $child->name}}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('children_id')
                                                                <span class="text-red-500 text-sm">{{ $message }}
                                                            @enderror
                                                        </div>
                                                        @endif

                                                        @if ($cast_m->status == '1')
                                                        <div class="col-span-1">
                                                            <label for="cast" class="inline-block mb-2 text-base font-medium">Cast<span class="text-red-500">*</span></label>
                                                            <select id="cast" name="cast" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                @foreach ($cast as $cast_data)
                                                                    <option value="{{ $cast_data->id}}" {{ $user->cast == $cast_data->id ? 'selected' : '' }}>{{ $cast_data->name}}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('cast')
                                                                <span class="text-red-500 text-sm">{{ $message }}
                                                            @enderror
                                                        </div>
                                                        @endif

                                                        @if ($subcast_m->status == '1')
                                                        <div class="col-span-1">
                                                            <label for="subcast" class="inline-block mb-2 text-base font-medium">Sub cast<span class="text-red-500">*</span></label>
                                                            <select id="subcast" name="subcast" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                <option selected>{{ translate('Select') }}</option>
                                                                @foreach ($subcast as $subcast_Data)
                                                                    <option value="{{ $subcast_Data->id}}" {{ $user->sub_cast == $subcast_Data->id ? 'selected' : '' }}>{{ $subcast_Data->name}}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('subcast')
                                                                <span class="text-red-500 text-sm">{{ $message }}
                                                            @enderror
                                                        </div>
                                                        @endif


                                                    </div>

                                                    <div class="card-body p-4 bg-black">
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="short_description">{{ translate('Short Description') }}<span class="text-red-500">*</span></label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <textarea name="short_description" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="short_description" rows="6" oninput="checkAbuseWords()" required>{{$user->short_description}}</textarea>
                                                            </div>
                                                        </div>

                                                        <div class="flex justify-end gap-2 mt-4">
                                                            <a href="{{ route('admin.members.index') }}"
                                                                class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">
                                                                Back
                                                            </a>
                                                            <button type="submit" id="submitButton" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                    <div class="hidden tab-pane" id="living">
                                        @if($userDetails)
                                        <form  action="{{route('admin.members.updateLiving', $userDetails->id) }}" method="POST" enctype="multipart/form-data" id="living-form">
                                            @csrf
                                            @method('PUT')
                                            @else
                                        <form action="{{ route('admin.storeuncompleteUserDetail.store') }}" method="POST" id="living-form">
                                        @csrf
                                        @endif

                                        <input type="hidden" name="active_tab" value="about-me">

                               
                                            <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">
                                       

                                        <div class="card m-5">
                                            <div class="card-header p-2 bg-slate-900">
                                                <h4 class="text-white">{{ translate('Living') }}</h4>
                                            </div>
                                            <div class="card-body p-4 bg-black  w-full">
                                                <div class="grid grid-cols-1 mt-4 gap-4">
                                                    <div class="col-span-1">
                                                        <label for="country_id">{{ translate('Country') }} *</label>
                                                        <select name="country_id" id="country_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            <option selected>{{ translate('Select') }}</option>
                                                            @foreach($countries as $country)
                                                            @if($userDetails)
                                                            <option value="{{ $country->id }}" {{ $userDetails->country_id == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                                            @else
                                                           
                                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                                            @endif

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                              
                                                <div class="grid grid-cols-1 mt-4 gap-4">
                                                    <div class="col-span-1">
                                                        <label for="state_id">{{ translate('State') }} *</label>
                                                        <select name="state_id" id="state_id_member" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="">{{ translate('Select') }}</option>
                                                        @foreach($states as $state)
                                                            <option value="{{ $state->id }}" {{ $userDetails->state_id == $state->id ? 'selected' : '' }}>
                                                                {{ $state->name }}
                                                            </option>
                                                        @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                             
                                                <div class="grid grid-cols-1 mt-4 gap-4">
                                                    <div class="col-span-1">
                                                        <label for="city_id">{{ translate('City') }} *</label>
                                                        <select name="city_id" id="city_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="">{{ translate('Select') }}</option>
                                                        @foreach($cities as $city)
                                                            <option value="{{ $city->id }}" {{ $userDetails->city_id == $city->id ? 'selected' : '' }}>
                                                                {{ $city->name }}
                                                            </option>
                                                        @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="flex justify-end gap-2 mt-4">
                                                    <button type="submit" id="submitButton2" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>


                                <div class="hidden tab-pane" id="education">
                                    @if($userDetails)
                                    <form action="{{route('admin.members.updateEducation', $userDetails->id) }}" method="POST" enctype="multipart/form-data" id="education-form">
                                    @csrf
                                    @method('PUT')
                                    @else
                                    <form action="{{ route('admin.storeEducation.store') }}" method="POST" id="education-form">
                                     @csrf
                                     @endif

                                    <input type="hidden" name="active_tab" value="career">



                                    <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <div class="flex items-center">
                                                <h4 class="text-white grow">{{ translate('Education') }}</h4>
                                                <div class="shrink-0">
                                                    {{-- <button data-modal-target="addUserModal" type="button" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">Add User</span></button> --}}
                                                    {{-- <a href="javascript:void(0)" data-modal-target="educationModal" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">Add New</span></a> --}}
                                                </div>
                                            </div>

                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            {{-- <div class="overflow-x-auto">
                                                <table class="w-full">
                                                    <thead class="ltr:text-left rtl:text-right">
                                                        <tr>
                                                            <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Degree</th>
                                                            <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Institution</th>
                                                            <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Start</th>
                                                            <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">End</th>
                                                            <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Status</th>
                                                            <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Option</th>
                                                        </tr>
                                                    </thead>

                                                </table>


                                            </div> --}}
                                            <div class="grid grid-cols-1 mt-4 gap-4">
                                                @if ($diploma_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="diploma_id" class="inline-block mb-2 text-base font-medium">{{ translate('Diploma') }} *</label>
                                                    <select name="diploma_id" id="diploma_id" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="choices-multiple-remove-button"  name="choices-multiple-remove-button" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($diplomas as $diploma)
                                                        <option value="{{ $diploma->id }}"
                                                            {{ isset($userDetails) && $userDetails->diploma_id == $diploma->id ? 'selected' : '' }}>
                                                            {{ $diploma->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end gap-2 mt-4">
                                        <button type="submit" id="submitButton4" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                    </div>
                                </form>
                            </div>

                            <div class="hidden tab-pane" id="career">

                                @if($userDetails)
                                <form action="{{route('admin.members.updateCareer', $userDetails->id) }}" method="POST" id="career-form">
                                @csrf
                                @method('PUT')
                                @else
                                <form action="{{route('admin.storeEducation.store') }}" method="POST" id="education-form">
                                @csrf
                                @endif

                                <input type="hidden" name="active_tab" value="language">

                                <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                <div class="card m-5">
                                    <div class="card-header p-2 bg-slate-900">
                                        <div class="flex items-center">
                                            <h4 class="text-white grow">{{ translate('Career') }}</h4>
                                            <div class="shrink-0">
                                                {{-- <button data-modal-target="addUserModal" type="button" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">Add User</span></button> --}}
                                                {{-- <a href="javascript:void(0)" data-modal-target="careerModal" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">Add New</span></a> --}}
                                            </div>
                                        </div>

                                    </div>
                                    <div class="card-body p-4 bg-black">
                                        {{-- <div class="overflow-x-auto">
                                            <table class="w-full">
                                                <thead class="ltr:text-left rtl:text-right">
                                                    <tr>
                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Designation</th>
                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Company</th>
                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Start</th>
                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">End</th>
                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Status</th>
                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Option</th>
                                                    </tr>
                                                </thead>

                                            </table>
                                        </div> --}}



                                      @if ($working_m->status == '1')
                                        <div class="col-span-1">
                                            <label for="working_sector_id" class="inline-block mb-2 text-base font-medium">{{ translate('Working Sector') }} *</label>
                                            <select name="working_sector_id" id="working_sector_id" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="choices-multiple-remove-button"  name="choices-multiple-remove-button"  required>
                                            <option value="" selected>{{ translate('Select') }}</option>
                                                @foreach ($workingSectors as $workingSector)
                                                <option value="{{ $workingSector->id }}"
                                                    {{ isset($userDetails) && $userDetails->working_sector_id == $workingSector->id ? 'selected' : '' }}>
                                                    {{ $workingSector->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="flex justify-end gap-2 mt-4">
                                    <button type="submit" id="submitButton5" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                </div>
                            </form>
                            </div>

                                <div class="hidden tab-pane" id="about-me">

                                    @if($userDetails)
                                    <form action="{{route('admin.members.updateAboutMe', $userDetails->id) }}" method="POST" enctype="multipart/form-data" id="about-me-form">
                                    @csrf
                                    @method('PUT')
                                    @else
                                    <form action="{{route('admin.storeuncompleteUserData.store') }}" method="POST" id="about-me-form">
                                     @csrf
                                     @endif

                                    <input type="hidden" name="active_tab" value="education">

                                    <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('About Me') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">

                                            @if ($length_m->status == '1')
                                            <div class="grid grid-cols-1 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="length_id" class="inline-block mb-2 text-base font-medium">{{ translate('Length') }} *</label>
                                                    <select name="length_id" id="length_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($lengths as $length)
                                                        <option value="{{ $length->id }}"
                                                            {{ isset($userDetails) && $userDetails->length_id == $length->id ? 'selected' : '' }}>
                                                            {{ $length->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            @endif

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                @if ($eye_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="eye_color_id" class="inline-block mb-2 text-base font-medium">{{ translate('Eye Color') }} *</label>
                                                    <select name="eye_color_id" id="eye_color_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option selected>{{ translate('Select') }}</option>
                                                        @foreach ($eyeColors as $eyeColor)
                                                        <option value="{{ $eyeColor->id }}"
                                                            {{ isset($userDetails) && $userDetails->eye_color_id == $eyeColor->id ? 'selected' : '' }}>
                                                            {{ $eyeColor->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($hair_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="hair_color_id" class="inline-block mb-2 text-base font-medium">{{ translate('Hair Color') }} *</label>
                                                    <select name="hair_color_id" id="hair_color_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($hairColors as $hairColor)
                                                        <option value="{{ $hairColor->id }}"
                                                            {{ isset($userDetails) && $userDetails->hair_color_id == $hairColor->id ? 'selected' : '' }}>
                                                            {{ $hairColor->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($body_m->status == '1')
                                            
                                                <div class="col-span-1">
                                                    <label for="body_type_id" class="inline-block mb-2 text-base font-medium">{{ translate('Body Type') }} *</label>
                                                    <select name="body_type_id" id="body_type_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($bodyTypes as $bodyType)
                                                        <option value="{{ $bodyType->id }}"
                                                            {{ isset($userDetails) && $userDetails->body_type_id == $bodyType->id ? 'selected' : '' }}>
                                                            {{ $bodyType->name }}
                                                        </option>

                                                        @endforeach

                                                    </select>
                                                </div>
                                                @endif
                                                <div class="col-span-1">
                                                    <label for="weight" class="inline-block mb-2 text-base font-medium">{{ translate('Weight') }} *</label>
                                                    <input type="text" id="weight" name="weight" value="{{ isset($userDetails) && $userDetails->weight ? $userDetails->weight : null }}"
                                                    class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required oninput="checkAbuseWords('weight')">
                                                </div>
                                         

                                                @if ($appe_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="appearance_id" class="inline-block mb-2 text-base font-medium">{{ translate('Appearance') }} *</label>
                                                    <select name="appearance_id" id="appearance_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($appearances as $appearance)
                                                        <option value="{{ $appearance->id }}"
                                                            {{ isset($userDetails) && $userDetails->appearance_id == $appearance->id ? 'selected' : '' }}>
                                                            {{ $appearance->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($cloth_style_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="clothing_style_id" class="inline-block mb-2 text-base font-medium">{{ translate('Clothing Styles') }} *</label>
                                                    <select name="clothing_style_id" id="clothing_style_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option selected>{{ translate('Select') }}</option>
                                                        @foreach ($clothingStyles as $clothingStyle)
                                                        <option value="{{ $clothingStyle->id }}"
                                                            {{ isset($userDetails) && $userDetails->clothing_style_id == $clothingStyle->id ? 'selected' : '' }}>
                                                            {{ $clothingStyle->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif

                                                @if ($intele_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="intelligence_id" class="inline-block mb-2 text-base font-medium">{{ translate('Intelligence') }} *</label>
                                                    <select name="intelligence_id" id="intelligence_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($intelligences as $intelligence)
                                                        <option value="{{ $intelligence->id }}"
                                                            {{ isset($userDetails) && $userDetails->intelligence_id == $intelligence->id ? 'selected' : '' }}>
                                                            {{ $intelligence->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($lan_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="languages" class="inline-block mb-2 text-base font-medium">{{ translate('Languages') }} *</label>
                                                    <select name="languages" id="languages" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($languages as $language)
                                                        <option value="{{ $language->id }}"
                                                            {{ isset($userDetails) && $userDetails->languages == $language->id ? 'selected' : '' }}>
                                                            {{ $language->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" id="submitButton3" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>

                                <div class="hidden tab-pane" id="language">
                                    @if($userDetails)
                                    <form action="{{route('admin.members.updateLanguage', $userDetails->id) }}" method="POST" enctype="multipart/form-data" id="language-form">
                                    @csrf
                                    @method('PUT')
                                    @else
                                    <form action="{{route('admin.storeLanguage.store') }}" method="POST" id="language-form">
                                        @csrf
                                    @endif

                                    <input type="hidden" name="active_tab" value="hobbies-and-interest">

                                    <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Language') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">


                                            @if ($motherTongue_m->status == '1')
                                            <div class="col-span-1">
                                                <label for="mother_tongue_id" class="inline-block mb-2 text-base font-medium">{{ translate('Mother Tongue') }} *</label>
                                                <select name="mother_tongue_id" id="mother_tongue_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                    <option value="" selected>{{ translate('Select') }}</option>
                                                    @foreach ($motherTongues as $motherTongue)
                                                    <option value="{{ $motherTongue->id }}"
                                                        {{ $userDetails?->mother_tongue_id == $motherTongue->id ? 'selected' : '' }}>
                                                        {{ $motherTongue->name }}
                                                    </option>

                                                    @endforeach
                                                </select>
                                                
                                            </div>
                                            @endif

                                            @if ($knownLanguage_m->status == '1')
                                            <div class="col-span-1">
                                                <label for="known_languages" class="inline-block mb-2 text-base font-medium">{{ translate('Known Languages') }} *</label>
                                               
                                                <select name="known_languages[]" multiple id="known_languages_mul" class="choices-multiple form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                    <option value="">{{ translate('Select') }}</option>
                                                    @foreach ($knownLanguages as $knownLanguage)
                                                        @php
                                                            $selectedLanguages = explode(',', $userDetails->known_languages ?? '');
                                                        @endphp
                                                        <option value="{{ $knownLanguage->id }}"
                                                            {{ in_array($knownLanguage->id, $selectedLanguages) ? 'selected' : '' }}>
                                                            {{ $knownLanguage->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @endif
                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" id="submitButton6" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>

                                <div class="hidden tab-pane" id="hobbies-and-interest">

                                   @if ($userDetails)
                                   <form action="{{ route('admin.members.updateHobbies', $userDetails->id) }}" method="POST" id="hobbies-form">
                                    @csrf
                                    @method('PUT')
                                   @else
                                   <form action="{{route('admin.storeHobbies.store') }}" method="POST" id="hobbies-form">
                                    @csrf
                                   @endif



                                    <input type="hidden" name="active_tab" value="personal-attitude-and-behavior">

                                    <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                        <div class="card m-5">
                                            <div class="card-header p-2 bg-slate-900">
                                                <h4 class="text-white">{{ translate('Hobbies & Interest') }}</h4>
                                            </div>
                                            <div class="card-body p-4 bg-black">
                                                <div class="grid grid-cols-2 mt-4 gap-4">

                                                    @if ($sport_m->status == '1')
                                                    <div class="col-span-1">
                                                        <label for="sports" class="inline-block mb-2 text-base font-medium">{{ translate('Sports') }} *</label>
                                                        <select name="sports" id="sports" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($sports as $sport)
                                                            <option value="{{ $sport->id }}"
                                                                {{ ($userDetails->sports ?? null) == $sport->id ? 'selected' : '' }}>
                                                                {{ $sport->name }}
                                                            </option>

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @endif

                                                    @if ($music_m->status == '1')
                                                    <div class="col-span-1">
                                                        <label for="music" class="inline-block mb-2 text-base font-medium">{{ translate('Music') }} *</label>
                                                        <select name="music" id="music" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($musics as $music)
                                                            <option value="{{ $music->id }}"
                                                                {{ ($userDetails->music ?? null) == $music->id ? 'selected' : '' }}>
                                                                {{ $music->name }}
                                                            </option>

                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @endif

                                                    @if ($kitchen_m->status == '1')
                                                    <div class="col-span-1">
                                                        <label for="kitchen" class="inline-block mb-2 text-base font-medium">{{ translate('Kitchen') }} *</label>
                                                        <select name="kitchen" id="kitchen" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($kitchens as $kitchen)
                                                            <option value="{{ $kitchen->id }}"
                                                                {{ $userDetails?->kitchen == $kitchen->id ? 'selected' : '' }}>
                                                                {{ $kitchen->name }}
                                                            </option>

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @endif

                                                    @if ($reading_m->status == '1')
                                                    <div class="col-span-1">
                                                        <label for="reading" class="inline-block mb-2 text-base font-medium">{{ translate('Reading') }} *</label>
                                                        <select name="reading" id="reading" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($readings as $reading)
                                                            <option value="{{ $reading->id }}"
                                                                {{ $userDetails?->reading == $reading->id ? 'selected' : '' }}>
                                                                {{ $reading->name }}
                                                            </option>

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @endif

                                                    @if ($tv_show_m->status == '1')
                                                    <div class="col-span-1">
                                                        <label for="tv_shows" class="inline-block mb-2 text-base font-medium">{{ translate('TV Shows') }} *</label>
                                                        <select name="tv_shows" id="tv_shows" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($tvShows as $tvShow)
                                                            <option value="{{ $tvShow->id }}"
                                                                {{ $userDetails?->tv_shows == $tvShow->id ? 'selected' : '' }}>
                                                                {{ $tvShow->name }}
                                                            </option>

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @endif
                                                </div>

                                                <div class="flex justify-end gap-2 mt-4">
                                                    <button type="submit" id="submitButton7" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>


                                <div class="hidden tab-pane" id="personal-attitude-and-behavior">

                                    @if ($userDetails)
                                    <form action="{{ route('admin.members.updatePersonal', $userDetails->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                    @else
                                    <form action="{{route('admin.storePersonal.store') }}" method="POST">
                                        @csrf
                                    @endif



                                    <input type="hidden" name="active_tab" value="life-style">

                                    <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                        <div class="card m-5">
                                            <div class="card-header p-2 bg-slate-900">
                                                <h4 class="text-white">{{ translate('Personal Attitude & Behaviuor') }}</h4>
                                            </div>
                                            <div class="card-body p-4 bg-black">
                                                <div class="grid grid-cols-12 mt-4 gap-4">

                                                    @foreach ($personalAttitude as $attitude)
                                                    <div class="col-span-4">
                                                        <input
                                                            type="checkbox"
                                                            name="personal_attitude[]"
                                                            value="{{ $attitude->id }}"
                                                            id="attitude-{{ $attitude->id }}"
                                                            class="form-checkbox h-5 w-5 text-red-600 rounded border-gray-300 focus:ring-red-500"
                                                            @if (in_array($attitude->id, explode(',', $userDetails->personal_attitude ?? '')))
                                                                checked
                                                            @endif
                                                        >
                                                        <label for="attitude-{{ $attitude->id }}" class="ml-2 text-base font-medium text-white cursor-pointer" style="color: black;">
                                                            {{ $attitude->name }}
                                                        </label>
                                                    </div>
                                                @endforeach


                                                </div>

                                                <div class="flex justify-end gap-2 mt-4">
                                                    <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>


                                <div class="hidden tab-pane" id="residency-information">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Residency Information') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Birth Country</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Residency Country</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Grow Up Country</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Immigration Status</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>

                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- spiritual-and-social-background --}}
                                <div class="hidden tab-pane" id="spiritual-and-social-background">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">Spiritual & Social Background</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Religion</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Caste</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Sub Caste</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Ethnicity</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>

                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Personal Value</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Family Value</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Community Value</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                                <div class="col-span-1">

                                                </div>
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane" id="life-style">
                                    @if ($userDetails)
                                    <form action="{{ route('admin.members.updateLifeStyle', $userDetails->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                    @else
                                    <form action="{{route('admin.storeLifeStyle.store') }}" method="POST">
                                        @csrf
                                    @endif


                                    <input type="hidden" name="active_tab" value="partner-expectation">

                                    <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                        <div class="card m-5">
                                            <div class="card-header p-2 bg-slate-900">
                                                <h4 class="text-white">{{ translate('Life Style') }}</h4>
                                            </div>

                                            <div class="card-body p-4 bg-black">
                                                <div class="grid grid-cols-1 mt-4 gap-4">
                                                    <div class="col-span-1">
                                                        <label for="smoke" class="inline-block mb-2 text-base font-medium">{{ translate('Smoke') }}</label>
                                                        <select name="smoke" id="smoke" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            <option value="" disabled {{ is_null($userDetails) || is_null($userDetails->smoke) ? 'selected' : '' }}>
                                                                {{ translate('Select') }}
                                                            </option>
                                                            <option value="yes" {{ isset($userDetails) && $userDetails->smoke == 'yes' ? 'selected' : '' }}>
                                                                {{ translate('Yes') }}
                                                            </option>
                                                            <option value="no" {{ isset($userDetails) && $userDetails->smoke == 'no' ? 'selected' : '' }}>
                                                                {{ translate('No') }}
                                                            </option>
                                                        </select>

                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-1 mt-4 gap-4">
                                                    <div class="col-span-1">
                                                        <label for="drinking" class="inline-block mb-2 text-base font-medium">{{ translate('Drinking') }}</label>
                                                        <select name="drinking" id="drinking"  class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            <option value="" disabled {{ is_null($userDetails) || is_null($userDetails->drinking) ? 'selected' : '' }}>
                                                                {{ translate('Select') }}
                                                            </option>
                                                            <option value="yes" {{ isset($userDetails) && $userDetails->drinking == 'yes' ? 'selected' : '' }}>
                                                                {{ translate('Yes') }}
                                                            </option>
                                                            <option value="no" {{ isset($userDetails) && $userDetails->drinking == 'no' ? 'selected' : '' }}>
                                                                {{ translate('No') }}
                                                            </option>
                                                        </select>


                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-1 mt-4 gap-4">
                                                    <div class="col-span-1">
                                                        <label for="going_out" class="inline-block mb-2 text-base font-medium">{{ translate('Going Out') }}</label>
                                                        <select name="going_out" id="going_out"  class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            <option value="" disabled {{ is_null($userDetails) || is_null($userDetails->going_out) ? 'selected' : '' }}>{{ translate('Select') }}</option>
                                                            <option value="yes" {{ isset($userDetails) && $userDetails->going_out == 'yes' ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                            <option value="no" {{ isset($userDetails) && $userDetails->going_out == 'no' ? 'selected' : '' }}>{{ translate('No') }}</option>
                                                        </select>

                                                    </div>
                                                </div>

                                                <div class="flex justify-end gap-2 mt-4">
                                                    <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>


                                <div class="hidden tab-pane" id="astronomic-information">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">Astronomic Information</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Sun Sign</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Moon Sign</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Time Of Birth</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">City Of Birth</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                            </div>


                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane" id="permanent-address">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">Permanent Address</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Country</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">State</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">City</label>
                                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>Select</option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Postal Code</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane" id="family-information">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">Family Information</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Father</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Mother</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-2 mt-4 gap-4">
                                                <div class="col-span-1">
                                                    <label for="inputText" class="inline-block mb-2 text-base font-medium">Sibling</label>
                                                    <input type="text" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                </div>
                                                <div class="col-span-1">

                                                </div>
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane" id="partner-expectation">

                                @if ($userDetails)
                                <form action="{{route('admin.members.updatePartner', $userDetails->id) }}" method="POST" id="partner-expectation-form">
                                    @csrf
                                    @method('PUT')
                                @else
                                <form action="{{route('admin.storePartner.store') }}" method="POST" id="partner-expectation-form">
                                    @csrf
                                @endif


                                <input type="hidden" name="user_id" value="{{ $user ? $user->id : null }}">

                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Partner Expectation') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-2 mt-4 gap-4">

                                                @if ($orig->status == '1')
                                                <div class="col-span-1">
                                                    <label for="origin" class="inline-block mb-2 text-base font-medium">{{ translate('Origin') }}</label>
                                                    <select name="origin" id="origin" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" selected>{{ translate('Select') }}</option>

                                                        @foreach ($origins as $origin)
                                                        <option value="{{ $origin->id }}"
                                                            {{ isset($userPartner) && $userPartner->origin_id == $origin->id ? 'selected' : '' }}>
                                                            {{ $origin->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($am_loc->status == '1')
                                                <div class="col-span-1">
                                                    <label for="am_looking_for" class="inline-block mb-2 text-base font-medium">{{ translate('Am Looking for') }}</label>
                                                    <select name="am_looking_for" id="am_looking_for" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach($amLookingFors as $amLookingFor)
                                                        <option value="{{ $amLookingFor->id }}"
                                                            {{ isset($userPartner) && $userPartner->am_looking_for_id == $amLookingFor->id ? 'selected' : '' }}>
                                                            {{ $amLookingFor->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($length_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="length" class="inline-block mb-2 text-base font-medium">{{ translate('Length') }}</label>
                                                    <select name="length" id="length" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($lengths as $length)
                                                        <option value="{{ $length->id }}"
                                                            {{ isset($userPartner) && $userPartner->lengthe_id == $length->id ? 'selected' : '' }}>
                                                            {{ $length->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($reli->status == '1')
                                                <div class="col-span-1">
                                                    <label for="religion" class="inline-block mb-2 text-base font-medium">{{ translate('Religion') }}</label>
                                                    <select name="religion" id="religion" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach($religions as $religion)
                                                        <option value="{{ $religion->id }}"
                                                            {{ isset($userPartner) && $userPartner->religion_id == $religion->id ? 'selected' : '' }}>
                                                            {{ $religion->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif

                                                @if ($relation_st->status == '1')
                                                <div class="col-span-1">
                                                    <label for="relation_status" class="inline-block mb-2 text-base font-medium">{{ translate('Relation Status') }}</label>
                                                    <select name="relation_status" id="relation_status" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach($relationStatus as $status)
                                                        <option value="{{ $status->id }}"
                                                            {{ isset($userPartner) && $userPartner->relation_status_id == $status->id ? 'selected' : '' }}>
                                                            {{ $status->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif

                                                @if ($edu_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="education_id" class="inline-block mb-2 text-base font-medium">{{ translate('Education') }}</label>
                                                    <select name="education_id" id="education_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($educations as $education)
                                                        <option value="{{ $education->id }}"
                                                            {{ isset($userPartner) && $userPartner->education_id == $education->id ? 'selected' : '' }}>
                                                            {{ $education->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif

                                            
                                                <div class="col-span-1">
                                                    <label for="weight" class="inline-block mb-2 text-base font-medium">{{ translate('Weight') }}</label>
                                                    <input type="text" id="weight" name="weight" value="{{ isset($userPartner) ? $userPartner->weight : '' }}"
                                                    class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                                                     oninput="checkAbuseWords('weight')">

                                                </div>

                                                <div class="col-span-1">
                                                    <label for="smoke" class="inline-block mb-2 text-base font-medium">{{ translate('Smoke') }}</label>
                                                    <select name="smoke" id="p_smoke" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" disabled {{ is_null($userPartner) || is_null($userPartner->smoke) ? 'selected' : '' }}>{{ translate('Select') }}</option>
                                                        <option value="1" {{ !is_null($userPartner) && $userPartner->smoke == '1' ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="0" {{ !is_null($userPartner) && $userPartner->smoke == '0' ? 'selected' : '' }}>{{ translate('No') }}</option>


                                                    </select>
                                                </div>
                                           



                                           
                                                <div class="col-span-1">
                                                    <label for="drinking" class="inline-block mb-2 text-base font-medium">{{ translate('Drinking') }}</label>
                                                    <select name="drinking" id="p_drinking" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" disabled {{ is_null($userPartner) || is_null($userPartner->drinking) ? 'selected' : '' }}>{{ translate('Select') }}</option>
                                                        <option value="1" {{ !is_null($userPartner) && $userPartner->drinking == '1' ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="0" {{ !is_null($userPartner) && $userPartner->drinking == '0' ? 'selected' : '' }}>{{ translate('No') }}</option>

                                                    </select>
                                                </div>

                                                <div class="col-span-1">
                                                    <label for="going_out" class="inline-block mb-2 text-base font-medium">{{ translate('Going Out') }}</label>
                                                    <select name="going_out" id="p_going_out" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option value="" disabled {{ is_null($userPartner) || is_null($userPartner->going_out) ? 'selected' : '' }}>{{ translate('Select') }}</option>
                                                        <option value="1" {{ !is_null($userPartner) && $userPartner->going_out == '1' ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="0" {{ !is_null($userPartner) && $userPartner->going_out == '0' ? 'selected' : '' }}>{{ translate('No') }}</option>

                                                    </select>
                                                </div>
                                           

                                                @if ($child->status == '1')
                                                <div class="col-span-1">
                                                    <label for="childeren_id" class="inline-block mb-2 text-base font-medium">{{ translate('Childeren') }}</label>
                                                    <select name="childeren_id" id="childeren_id" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option selected>{{ translate('Select') }}</option>
                                                        @foreach ($childerns as $childern)
                                                        <option value="{{ $childern->id }}"
                                                            {{ $userPartner && $userPartner->childeren_id == $childern->id ? 'selected' : '' }}>
                                                            {{ $childern->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                                @if ($cast_m->status == '1')
                                                <div class="col-span-1">
                                                    <label for="partner_cast" class="inline-block mb-2 text-base font-medium">Cast</label>
                                                    <select name="partner_cast" id="partner_cast" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" >
                                                        <option selected>{{ translate('Select') }}</option>
                                                        @foreach ($cast as $part_cast)
                                                        <option value="{{ $part_cast->id }}"
                                                            {{ !is_null($userPartner) && $userPartner->cast == $part_cast->id ? 'selected' : '' }}>
                                                            {{ $part_cast->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif

                                                @if ($subcast_m->status == '1')
                                          
                                                <div class="col-span-1">
                                                    <label for="partner_subcast" class="inline-block mb-2 text-base font-medium">Subcast</label>
                                                    <select name="partner_subcast" id="partner_subcast" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                        <option selected>{{ translate('Select') }}</option>
                                                        @foreach ($subcast as $part_subcast)
                                                        <option value="{{ $part_subcast->id }}"
                                                            {{ !is_null($userPartner) && $userPartner->sub_cast == $part_subcast->id ? 'selected' : '' }}>
                                                            {{ $part_subcast->name }}
                                                        </option>

                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                            </div>

                                            <div>
                                                <h5 class="text-sm text-black font-semibold mb-2.5 mt-5">{{ translate('Age Range') }}</h5>
                                                <div class="flex gap-4">
                                                    <!-- From Age Input -->

                                                    <div class="w-full mt-2">
                                                        <label for="from_age" class="text-sm text-black font-medium mb-2">{{ translate('From Age') }}</label>
                                                        <input type="number" name="from_age" id="from_age"
                                                        value="{{ !is_null($userPartner) ? $userPartner->from_age : '' }}"
                                                        placeholder="{{ translate('Enter minimum age') }}"
                                                        class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                                                        min="18" max="100" >

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

                                                    <!-- To Age Input -->
                                                    <div class="w-full mt-2">
                                                        <label for="to_age" class="text-sm text-black font-medium mb-2">{{ translate('To Age') }}</label>
                                                        <input type="number" name="to_age" id="to_age"
                                                        value="{{ !is_null($userPartner) ? $userPartner->to_age : '' }}"
                                                        placeholder="{{ translate('Enter maximum age') }}"
                                                        class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                                                        min="18" max="100" >


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

                                        <div class="grid grid-cols-2 mt-4 gap-4">
                                            <div class="col-span-1">
                                                <label for="country">{{ translate('Country') }} *</label>
                                               
                                                <select name="country" id="country" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" onchange="fetchCities(this.value)" required>
                                                    <option value="" selected>{{ translate('Select') }}</option>
                                                    @foreach($countries as $country)
                                                    @if($userDetails)
                                                    <option value="{{ $country->id }}" {{ !is_null($userPartner) && $userPartner->country_id == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                                    @else
                                                   
                                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                                    @endif
                                                 
                                                    @endforeach
                                                </select>
                                           </div>

                                           <div class="col-span-1">
                                            <label for="state">{{ translate('State') }} *</label>
                                                <select name="state" id="partner_state" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" required>
                                                    <option value="" selected>{{ translate('Select') }}</option>
                                                        @foreach($partner_states as $state)
                                                            <option value="{{ $state->id }}"  {{ !is_null($userPartner) && $userPartner->state_id == $state->id ? 'selected' : '' }}>
                                                                {{ $state->name }}
                                                            </option>
                                                        @endforeach
                                                </select>
                                        </div>
                                        </div>

                                        <div class="grid grid-cols-2 mt-4 gap-4">
                                            <div class="col-span-1">
                                                <label for="city">{{ translate('City') }} *</label>
                                                <select name="city" id="city" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" required>
                                                    <option value="" selected>{{ translate('Select') }}</option>
                                                    @foreach($cities as $city)
                                                    <option value="{{ $city->id }}"
                                                        {{ !is_null($userPartner) && $userPartner->city_id == $city->id ? 'selected' : '' }}>
                                                        {{ $city->name }}
                                                    </option>

                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="submit" id="submitButton9" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                </div>
                                {{-- end  --}}
                            </div>
                        </div>
                    </div>
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end grid-->

    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<div id="educationModal" modal-center class="fixed flex flex-col hidden transition-all duration-300 ease-in-out left-2/4 z-drawer -translate-x-2/4 -translate-y-2/4 show ">
    <div class="w-screen md:w-[30rem] bg-white shadow rounded-md dark:bg-zink-600">
        <div class="flex items-center justify-between p-4 border-b dark:border-zink-500">
            <h5 class="text-16">Add Education</h5>
            <button data-modal-close="educationModal" class="transition-all duration-200 ease-linear text-slate-400 hover:text-red-500"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <div class="max-h-[calc(theme('height.screen')_-_180px)] p-4 overflow-y-auto">
            <form action="#!">
                <div class="grid grid-cols-1 gap-4 xl:grid-cols-12">
                    <div class="xl:col-span-12">
                        <label for="orderId" class="inline-block mb-2 text-base font-medium">Degree</label>
                        <input type="text" id="orderId" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                    </div>
                    <div class="xl:col-span-12">
                        <label for="customerNameInput" class="inline-block mb-2 text-base font-medium">Institution</label>
                        <input type="text" id="customerNameInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Customer name" required>
                    </div>
                    <div class="xl:col-span-6">
                        <label for="orderDateInput" class="inline-block mb-2 text-base font-medium">Start</label>
                        <input type="text" id="orderDateInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Select date" data-provider="flatpickr" data-date-format="d M, Y">
                    </div>
                    <div class="xl:col-span-6">
                        <label for="deliveryDateInput" class="inline-block mb-2 text-base font-medium">End</label>
                        <input type="text" id="deliveryDateInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Select date" data-provider="flatpickr" data-date-format="d M, Y">
                    </div>


                </div>
                <div class="flex justify-end gap-2 mt-4">
                    <button type="reset" data-modal-close="educationModal" class="text-red-500 bg-white btn hover:text-red-500 hover:bg-red-100 focus:text-red-500 focus:bg-red-100 active:text-red-500 active:bg-red-100 dark:bg-zink-600 dark:hover:bg-red-500/10 dark:focus:bg-red-500/10 dark:active:bg-red-500/10">Cancel</button>
                    <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Add New</button>
                </div>
            </form>
        </div>
    </div>
</div><!--end education modal-->

<div id="careerModal" modal-center class="fixed flex flex-col hidden transition-all duration-300 ease-in-out left-2/4 z-drawer -translate-x-2/4 -translate-y-2/4 show ">
    <div class="w-screen md:w-[30rem] bg-white shadow rounded-md dark:bg-zink-600">
        <div class="flex items-center justify-between p-4 border-b dark:border-zink-500">
            <h5 class="text-16">Add Career</h5>
            <button data-modal-close="careerModal" class="transition-all duration-200 ease-linear text-slate-400 hover:text-red-500"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <div class="max-h-[calc(theme('height.screen')_-_180px)] p-4 overflow-y-auto">
            <form action="#!">
                <div class="grid grid-cols-1 gap-4 xl:grid-cols-12">
                    <div class="xl:col-span-12">
                        <label for="orderId" class="inline-block mb-2 text-base font-medium">Designation</label>
                        <input type="text" id="orderId" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                    </div>
                    <div class="xl:col-span-12">
                        <label for="customerNameInput" class="inline-block mb-2 text-base font-medium">Company</label>
                        <input type="text" id="customerNameInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Customer name" required>
                    </div>
                    <div class="xl:col-span-6">
                        <label for="orderDateInput" class="inline-block mb-2 text-base font-medium">Start</label>
                        <input type="text" id="orderDateInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Select date" data-provider="flatpickr" data-date-format="d M, Y">
                    </div>
                    <div class="xl:col-span-6">
                        <label for="deliveryDateInput" class="inline-block mb-2 text-base font-medium">End</label>
                        <input type="text" id="deliveryDateInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Select date" data-provider="flatpickr" data-date-format="d M, Y">
                    </div>


                </div>
                <div class="flex justify-end gap-2 mt-4">
                    <button type="reset" data-modal-close="careerModal" class="text-red-500 bg-white btn hover:text-red-500 hover:bg-red-100 focus:text-red-500 focus:bg-red-100 active:text-red-500 active:bg-red-100 dark:bg-zink-600 dark:hover:bg-red-500/10 dark:focus:bg-red-500/10 dark:active:bg-red-500/10">Cancel</button>
                    <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Add New</button>
                </div>
            </form>
        </div>
    </div>
</div><!--end education modal-->

<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!-- dropzone -->
<script src="{{asset('admin/assets/libs/dropzone/dropzone-min.js')}}"></script>
<!--product create init js-->
<script src="{{asset('admin/assets/js/pages/apps-ecommerce-product-create.init.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>



<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>
    // Check if there is an <li> element with the 'active' class
    document.addEventListener('DOMContentLoaded', function () {

        const activeListItem = document.querySelector('li.active');

        if (activeListItem) {
            // Find the anchor tag within the active <li> and click it
            const anchor = activeListItem.querySelector('a[data-tab-toggle]');
            if (anchor) {
                anchor.click();
            }
        }
    });
</script>



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

                       
                    }
                });
            } else {
               
                $('#state_id_member').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('admin.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) {
                        $('#city_id').append('<option value="' + city.id + '">' + city.name + '</option>');
                    });
                    if (selectedCityId) {
                        $('#city_id').val(selectedCityId); 
                    }
                }
            });
        } else {
            $('#city_id').empty().append('<option value="" selected>Select City</option>'); 
        }
    }


        // When the country dropdown changes
        $('#country_id').change(function() {
            var countryId = $(this).val();
            loadStates(countryId);
        });

        // When the state dropdown changes
        $('#state_id_member').change(function() {
            var stateId = $(this).val();
            loadCities(stateId);
        });

        // Trigger the change events on page load if country, state, and city are pre-selected
        var selectedCountryId = $('#country_id').val();
        var selectedStateId = "{{ isset($userDetails) ? ($userDetails->state_id ?? null) : null }}";
        var selectedCityId = "{{ isset($userDetails) ? ($userDetails->city_id ?? null) : null }}";

 

        // Load states and cities based on the preselected values
        if (selectedCountryId) {
            loadStates(selectedCountryId, selectedStateId); // Load states and select preselected state
        }

        if (selectedStateId && selectedCountryId) {
            
            loadCities(selectedStateId, selectedCityId); // Load cities and select preselected city if state exists
        }
    });
</script>






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

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

        // Check short_description textarea
        const shortDescription = document.getElementById('short_description');
        let shortDescriptionText = shortDescription.value;

        // Check the weight input field
        const inputWeight = document.getElementById('weight');
        let inputWeightNum = inputWeight.value;

        // Combine all texts for checking
        const combinedText = inputText + ' ' + shortDescriptionText + ' ' + inputWeightNum;

        // Check for abuse words
        const matchingWords = abuseWords.filter(word => combinedText.toLowerCase().includes(word.toLowerCase()));

        if (matchingWords.length > 0) {
            // Replace matched abusive words with '**'
            matchingWords.forEach(word => {
                const regex = new RegExp(word, 'gi');
                inputText = inputText.replace(regex, '**');  // Replace in user_name
                shortDescriptionText = shortDescriptionText.replace(regex, '**');  // Replace in short_description
                inputWeightNum = inputWeightNum.replace(regex, '**');  // Replace in weight
            });

            // Update the input field values
            inputField.value = inputText.trim();
            shortDescription.value = shortDescriptionText.trim();
            inputWeight.value = inputWeightNum.trim();
        }
    }
</script>

<script>
    $(document).ready(function () {
        function loadPartnerStates(countryId, selectedStateId = null) {
            if (countryId) {
                $.ajax({
                    url: '{{ route('admin.getStates', ':country') }}'.replace(':country', countryId),
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        $('#partner_state').empty();
                        $('#partner_state').append('<option selected>{{ translate("Select State") }}</option>');
                        $.each(data, function (key, state) {
                            $('#partner_state').append('<option value="' + state.id + '"' + (selectedStateId == state.id ? ' selected' : '') + '>' + state.name + '</option>');
                        });
                    },
                });
            } else {
                $('#partner_state').empty().append('<option selected>{{ translate("Select State") }}</option>');
                $('#city').empty().append('<option selected>{{ translate("Select City") }}</option>'); // Clear city dropdown
            }
        }

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

        // When the country dropdown changes
        $('#country').change(function () {
            var countryId = $(this).val();
            loadPartnerStates(countryId);
        });

        // When the state dropdown changes
        $('#partner_state').change(function () {
            var stateId = $(this).val();
            loadPartnerCities(stateId);
        });

        // Trigger the change events on page load if country, state, and city are pre-selected
        var selectedPartnerCountryId = $('#country').val();
        var selectedPartnerStateId = "{{ isset($userPartner) ? ($userPartner->state_id ?? null) : null }}";
        var selectedPartnerCityId = "{{ isset($userPartner) ? ($userPartner->city_id ?? null) : null }}";

        // Load states and cities based on the preselected values
        if (selectedPartnerCountryId) {
            loadPartnerStates(selectedPartnerCountryId, selectedPartnerStateId); // Load states and select preselected state
        }

        if (selectedPartnerStateId && selectedPartnerCountryId) {
            loadPartnerCities(selectedPartnerStateId, selectedPartnerCityId); // Load cities and select preselected city if state exists
        }
    });
</script>


<!-- Include Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('#origin_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#gender').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#religion_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#relation_status_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#am_looking_for_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#children_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#country_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#state_id_member').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#city_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#length_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#eye_color_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#hair_color_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#body_type_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#appearance_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#clothing_style_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#intelligence_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });


        $('#languages').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });


        $('#diploma_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#working_sector_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });


        $('#mother_tongue_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });


        $('#known_languages').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#sports').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#music').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#kitchen').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#reading').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#tv_shows').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#origin').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#am_looking_for').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#length').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#religion').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#relation_status').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#education_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#childeren_id').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#country').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#partner_state').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#city').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#cast').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#subcast').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

    });



       $('#smoke').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#drinking').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#going_out').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });


        $('#p_smoke').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#p_drinking').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        $('#p_going_out').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

</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>
    document.addEventListener('DOMContentLoaded', function () {
        const sectionPageSelect = document.getElementById('known_languages_mul');
        new Choices(sectionPageSelect, {
            removeItemButton: true,
            searchEnabled: true,
            placeholder: true,
            placeholderValue: "{{ translate('Select') }}",
        });
    });
</script>


@endsection

@section('styles')
<style>
#gs-links-container{
    width:300px;
    padding:0.5rem;
}

.select2-selection--single {
        height: 39px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 39px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 39px !important;
    }
</style>
@endsection